TabAccordion

TabAccordionEdit

/*
Author: rberinger - 09/13/2009
Version:  2.1

Version History: 2.0 Initial inception after consoidation
                 2.1 Fixed bug with Accordion mode and Allowedit: true (edit link had to be moved to content area)

Description:  This template will insert a tab or accordion structure within a MindTouch Page.  
This template was created using the examples found on the jQuery-ui site: http://jqueryui.com/demos/

Parameters:
  type (required): The type of Structure Must be either "tab" or "accordion".
  id (required):  The unique id to be assigned to this accordian (Must start with #)
  content (required):  A list of maps containing the name and value for each section of the structure.
                       The list may also contain a map with path and allowedit keys to insert pages.
  options (optional):  Customizable options per the follwoing web site(s):
                       For the accordion options see: http://jqueryui.com/demos/accordion/
                       For the Tab options see: http://jqueryui.com/demos/tabs/
   

Example usage:

To Insert a Tab:
  TabAccordion{type:'tab',
             id: '#MyID1', 
             content: [ {name: 'Tab Number 1', value: 'Tab Number 1 Value'},
                        {name:'test 2', value: 'My second Text String 2'},
                        {path:'/User:rberinger/SandBox/Test_Structure/Another_Test_Page', allowedit:false} 
                      ] 
            }

To Insert an Accordion:
  TabAccordion{type:'accordion',
             id: '#MyID1', 
             content: [ {name: 'Tab Number 1', value: 'Tab Number 1 Value'},
                        {name:'test 2', value: 'My second Text String 2'},
                        {path:'/User:rberinger/SandBox/Test_Structure/Another_Test_Page', allowedit:false} 
                      ] 
            }

*/

var uitype = ($type ?? $0 ?? 'tab');
var theid = ($id ?? $1 ?? '#acctab');
var cnts = ( $content ?? $2 ?? [ { name: 'Title 1', value: 'Value 1' } , { name: 'Title 2', value: 'Value 2' } ] );
var chid = string.replace(theid, '#', '');
var opts = '';

if(uitype == 'accordion') {
  let opts = ( $options ?? $3 ?? {collapsible: true, autoHeight: false, active:false} );
  let opts ..= {header: 'dd'};
} else {
  let opts = ($options ?? $3 ?? {collapsible: true});

  // Its bad to use the collapsible event and the mouseover at the same time.
  if(opts.event == 'mouseover') {
    let opts ..= { collapsible: false };
  }
}


if(uitype == 'accordion') {
  <div id=(chid)>;
    foreach(var itm in cnts) {
      if(map.contains(itm, 'path')) {
        var p = wiki.getpage(itm.path);

        if(itm.allowedit == true) {
          <dd><a href="#">; p.title; </a></dd>;
          <div>
            <div>
              <div style="font-size:xx-small;">
                 <a style="position: absolute; right: 5px; top: 0; padding-bottom: 5px" href=(p.uri ..'?action=edit')>'edit'</a>
              </div><br/>
              wiki.page(p.path)
           </div>
          </div>
        } else {
          <dd><a href="#">; p.title; </a></dd>;
          <div><div>; wiki.page(p.path); </div></div>;
        }
      } else {
        var sHtml="<dd><a href=\"#\">"..itm.name.."</a></dd>";
        let sHtml..="<div><div>"..itm.value.."</div></div>";
        Web.Html(sHtml);
        /*
        <dd><a href="#">; itm.name; </a></dd>;
        //@himikel #mod 2010-11-03: Adapt to use Html format
        <div><div>; Web.Html(itm.value); </div></div>;
        //<div><div>; itm.value; </div></div>;
        */
      }
    }
  </div>;
} else {
  var i = 1;
  <div id=(chid)>;
  <ul style="list-style:none">;
  
    foreach(var t in cnts) {
      if(map.contains(t, 'path')) {
        var p = wiki.getpage(t.path);
 
        if(t.allowedit == true) {
           <li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; p.title; </span></a><span style="font-size:xx-small;"><a href=(p.uri ..'?action=edit')>'edit'</a></span></li>;
        } else {
           <li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; p.title; </span></a></li>;
        }
     } else {
        <li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; t.name; </span></a></li>;
     }
     let i = i +1;
   }

  </ul>;
    let i = 1;
      foreach(var t in cnts) {
        <div id=(chid..'-'..i)>;
          if(map.contains(t, 'path')) {
            <div>; wiki.page(t.path); </div>;
          } else {
            //@himikel #mod 2010-11-03: Adapt to use Html format
            <div>; Web.Html(t.value); </div>;
            //<div>; t.value; </div>;
          }
        </div>;
        let i = i + 1;
      }
 </div>;

}

//@himikel #mod 2011-01-23: Adapted from SecionUI template
var style="tab";
//@himikel mod 2010-11-09: Using local resources
var jqUI = "/skins/local/jqueryui/";
//var jqUI = "http://scripts.mindtouch.com/res/jqueryui/";
var jqUICSS = [ jqUI.."ui.all.css", jqUI.."ui.base.css", jqUI.."ui.core.css", jqUI.."ui.theme.css" ];
var jqUIJS  = [ jqUI.."ui.core.js.txt" ];

//Define which scripts and css are needed for each style
var includeCSS;
var includeJS;

let includeCSS = jqUICSS .. [ jqUI .. "ui.tabs.css" ];
let includeJS  = jqUIJS  .. [ jqUI .. "ui.tabs.js.txt" ];

<html><head>;

//Load CSS and JavaScript files
foreach (var css in includeCSS)    <link type="text/css" href=(css) rel="stylesheet" />;
foreach (var js in includeJS)      <script type="text/javascript" src=(js)></script>;

/*
//var jqUI = "/deki/script/jquery/1.3.2/";
<link type="text/css" href=(jqUI.."ui.all.css") rel="stylesheet" />
<link type="text/css" href=(jqUI.."ui.base.css") rel="stylesheet" />
<link type="text/css" href=(jqUI.."ui.core.css") rel="stylesheet" />
<link type="text/css" href=(jqUI.."ui.theme.css") rel="stylesheet" />
<link type="text/css" href=(jqUI.."ui.tabs.css") rel="stylesheet" />
<link type="text/css" href=(jqUI.."ui.accordion.css") rel="stylesheet" />
<script type="text/javascript" src=(jqUI.."jquery-1.3.2.js")></script>
<script type="text/javascript" src=(jqUI.."ui.core.js")></script>
<script type="text/javascript" src=(jqUI.."ui.tabs.js")></script>
<script type="text/javascript" src=(jqUI.."ui.accordion.js")></script>
*/

<script type="text/javascript">
if(uitype == 'tab') {
  "$(document).ready(function(){$('"..theid.."').tabs("..JSON.emit(opts)..");});"
} else {
  "$(document).ready(function(){$('"..theid.."').accordion("..JSON.emit(opts)..");  });"
}
</script>

</head></html>;