Page last modified 08:50, 27 Sep 2009 by surprisen
Table of contents
No headers
// CollapseItem template, by neilw, 2009
// Versions
// 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');
// post-process args
var error_msg = "";
if (!list.contains(['default', 'slide', 'fade'], effect)) {
let error_msg = "ERROR: collapseItem: invalid effect '" .. effect .. "'" ..
" (allowable values are 'slide', 'fade', and 'default')";
let effect = 'default';
}
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($) {
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">"
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() {
if ($div.css('display') == 'none') { // 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);
});
}
"</script>
</head>
<body>
if (error_msg != "") <p style="color:red; font-weight:bold;">error_msg</p>; // error message
<a href="#" id="{{id}}">" "</a>;
if (item_xml)
<div style="display:none">item</div>;
</body>
</html>
- Tag page
- What links here
