Page last modified 03:42, 15 Jun 2010 by neilw
Template:TestCollapseItem2

No headers
// CollapseItem template, by neilw, 2009
// Versions
//    1.02    06/15/10    neilw    added show all/hide all capability
//    1.01    09/08/09    neilw    Fixed occasion when inadvertent error alert is generated
//    1.00    07/20/09    neilw    First release

//NOTE: This template requires the file "collapse_icons.gif" to be installed in the location
// specified below
var icons_uri = "http://developer.mindtouch.com/@api/deki/files/4538/=collapse_icons.gif";
// USAGE: template.collapsibleItem(item, show, hide, effect)
//    "item": if specified, then insert this list xml.  Doesn't matter if the list is wrapped
//        inside other elements.  Otherwise, find the next <UL> on the page just after the template
//        call.
//    "show": number of tree levels to collapse (default: 99).  This is to avoid very lengthy
//        processing on very large trees.  However, the processing is on the client side, so it
//        won't bog down the wiki server either way.
//    "hide": if true, use "slide" effect to show/hide subtrees (default: false)
//    "effect": Effect used to show/hide items.  Possible values:
//        "default": appear/disappear.  Also used if "effect" is not specified.
//        "slide": slide up/slide down.
//        "fade": fade in/fade out

// Args
var item = $0 ?? $item;
var show = $1 ?? $show;
var hide = $2 ?? $hide ?? show;
var effect = string.tolower($3 ?? $effect ?? 'default');
// these args are just for "set all" mode (no positional args)
var setAll = $setall ?? false;
if (setAll is str) let setAll = string.tolower(setAll);
var setAll_label = $label;

// post-process args
var errors = [];
if (!list.contains(['default', 'slide', 'fade'], effect)) {
    let errors ..= [ "invalid effect '" .. effect .. "'" ..
        " (allowable values are 'slide', 'fade', and 'default')" ];
    let effect = 'default';
}
if (setAll) {
    if (setAll is not str || !list.contains(["show", "hide"], setAll)) {
        let errors ..= [ "setall must be 'show' or 'hide'" ];
        let setAll = false;
    }
    if (setAll_label is not str && setAll_label is not xml) {
        if (setAll_label is not nil)
            let errors ..= [ "label must be string or xml" ];
        let setAll_label = setAll .. " all";
    }
}

var id = @id;
var icon = (show == nil);
var item_type = typeof(item);
var item_xml = (item_type == "xml" ? item : nil);
var item_id  = (item_type == "str" ? item : nil);

// Output HTML
<html>
<head>
<script type="text/javascript">"DekiWiki.$(document).ready(function($) { ";
    if (setAll)
      "collapseItem_setAll($,"..json.emit(id)..","..json.emit(setAll).."); });";
    else
      "collapseItem_showhide($,"..json.emit(id)..","..json.emit(item_type)..","..json.emit(item_id)..","
          ..json.emit(show)..","..json.emit(hide)..","..json.emit(effect).."); });";
</script>;

<script type="text/javascript">"
  var collapseItem_force = 0;

  function collapseItem_showhide($, id, item_type, divid, show, hide, effect) {
    var collapseIcon_hide = '0px -64px';
    var collapseIcon_show = '0px -80px';
    var icon = (show == null);
  // Find and initialize show/hide link
    var $a = $('a#'+id);
    if ($a.length == 0) return;    // Don't ask :-o
    $a.html(icon ?
        '<img src=\"/skins/common/icons/icon-trans.gif\" ' +
        'style=\"background-image:url(\\\'".. icons_uri .. "\\\'); ' +
        'background-position:' + collapseIcon_show + '\" /> ' :
        show);
  // Find the div
    var $div = (divid ? $('#'+divid) : ($a.next().length ? $a.next() : $a.parent().next()));
    if (! $div.length) {
        alert('ERROR: collapseItem(): can\\\'t find the element'); 
        return;
    }
    $div.hide();
 // Bind to click of the link
    $a.click(function() {
        var action = ($div.css('display') == 'none' ? 1 : -1);
        if (collapseItem_force != 0 && (collapseItem_force != action)) return;
        
        if (action > 0) { // Show!
            if      (effect == 'slide') $div.slideDown('fast');
            else if (effect == 'fade')  $div.fadeIn('fast');
            else $div.show();

            if (icon) $a.find('img').css('background-position', collapseIcon_hide);
            else      $(this).html(hide);
        }
        else { // Hide!
            if      (effect == 'slide') $div.slideUp('fast');
            else if (effect == 'fade')  $div.fadeOut('fast');
            else $div.hide();

            if (icon)	$a.find('img').css('background-position', collapseIcon_show);
            else 		$(this).html(show);
        }
        return(false);
    });
  }

  function collapseItem_setAll($, id, action) {
    var $a = $('a#'+id);
    if ($a.length == 0) return;    // Don't ask :-o
    $a.click(function() {
      collapseItem_force = (action == 'show' ? 1 : -1);
      $('a.collapseItem_control').click();
      collapseItem_force = 0;
    });
  }
"</script>
</head>
<body>
  if (#errors) {
    <p style="color:red; font-weight:bold;">
      "CollapseItem Errors:"; <br />;
      foreach (var e in errors) { e; <br />; }
    </p>;
  }
  if (setAll) {
    <a href="#" id="{{id}}"> setAll_label </a>;
  }
  else {
    <a href="#" id="{{id}}" class="collapseItem_control">" "</a>;
    if (item_xml)
      <div style="display:none"> item </div>;
  }
</body>;
</html>
Tag page
What links here
Files 0

Attach file or image
Images 0
No images to display in the gallery.
You must login to post a comment.
MindTouch Social Knowledge Base
Template:TestCollapseItem2

Table of contents

Files 0

Table of contents

Login or Join Community

Template:TestCollapseItem2

Table of contents

Files 0

Table of contents
