Template:Imperial/Hide

From 2008.igem.org

(Difference between revisions)
m
m (Usage)
 
(4 intermediate revisions not shown)
Line 1: Line 1:
-
/* Any JavaScript here will be loaded for all users on every page load. */
+
{{Imperial/HideJava}}
-
// <syntax type="javascript">
+
<includeonly><span class="_togglegroup _toggle_initshow _toggle _toggler toggle-visible" style="display:none;">[show]</span><span class="_toggle_inithide _toggle _toggler toggle-hidden" style="display:none;">[hide]</span>
 +
<div class="_toggle_inithide _toggle toggle-hidden">
 +
{{{1}}}</div></includeonly><noinclude>
 +
==Usage==
 +
<nowiki>{{hide|text to hide}}</nowiki> or <nowiki>{{hide|1=text to hide}}</nowiki>. The second form is required when "text to hide" contains an equals sign. This produces:
-
    /**
+
{{hide|text to hide}}
-
        Toggles the display of elements on a page
+
</noinclude>
-
        Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che
+
-
        See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation
+
-
    */
+
-
 
+
-
// indexed array of toggler ids to array of associated toggle operations
+
-
// each operation is a two element array, the first being the type, the second a class name or array of elements
+
-
// operation types are strings like "_reset" or "" for the default toggle operation
+
-
var togglers = new Array();   
+
-
var allClasses = new Object(); // associative map of class names to page elements
+
-
 
+
-
function toggler(id)
+
-
{
+
-
    var toBeToggled = togglers[id];
+
-
    if (!toBeToggled)
+
-
        return;
+
-
 
+
-
    // if some element is in list more than once, it will be toggled multiple times
+
-
    for (var i = 0; i < toBeToggled.length; i++)
+
-
    {
+
-
        // get array of elements to operate on
+
-
        var toggles = toBeToggled[i][1];
+
-
        if (typeof(toggles) == "string")
+
-
        {
+
-
            if (toggles.charAt(0) == '-')
+
-
            {
+
-
                // treat as an element ID, not as class
+
-
                toggles = document.getElementById(toggles.substring(1));
+
-
                if (toggles)
+
-
                    toggles = new Array(toggles);
+
-
            }
+
-
            else
+
-
                toggles = allClasses[toggles];
+
-
        }
+
-
        if (!toggles || !toggles.length)
+
-
            continue;
+
-
 
+
-
        var op = toBeToggled[i][0]; // what the operation will be
+
-
 
+
-
        switch (op)
+
-
        {
+
-
            case "_reset":
+
-
                for (var j in toggles)
+
-
                    toggles[j].style.display = toggles[j]._toggle_original_display;
+
-
                break;
+
-
            case "_show":
+
-
                for (var j in toggles)
+
-
                    toggles[j].style.display = '';
+
-
                break;
+
-
            case "_hide":
+
-
                for (var j in toggles)
+
-
                    toggles[j].style.display = 'none';
+
-
                break;
+
-
            case "":
+
-
            default:
+
-
                // Toggle
+
-
                for (var j in toggles)
+
-
                    toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none');
+
-
                break;
+
-
        }
+
-
    }
+
-
}
+
-
 
+
-
function createTogglerLink(toggler, id)
+
-
{
+
-
    var toggle = document.createElement("a");
+
-
    toggle.className = 'toggler-link';
+
-
    toggle.setAttribute('id', 'toggler' + id);
+
-
    toggle.setAttribute('href', 'javascript:toggler("' + id + '");');
+
-
    var child = toggler.firstChild;
+
-
    toggler.removeChild(child);
+
-
    toggle.appendChild(child);
+
-
    toggler.insertBefore(toggle, toggler.firstChild);
+
-
}
+
-
 
+
-
function toggleInit()
+
-
{
+
-
    var togglerElems = new Array();
+
-
    var toggleGroup = new Array();
+
-
 
+
-
    // initialize/clear any old information
+
-
    togglers = new Array();   
+
-
    allClasses = new Object();
+
-
       
+
-
    // make list of all document classes
+
-
    var elems = document.getElementsByTagName("*");
+
-
    var numelems = elems.length;
+
-
    for (var i = 0; i < elems.length; i++)
+
-
    {
+
-
        var elem = elems[i];
+
-
        if (!elem.className)
+
-
            continue;
+
-
 
+
-
        elem._toggle_original_display = elem.style.display;
+
-
        var togglerID = -1;
+
-
        var elemClasses = elem.className.split(' '); // get list of classes
+
-
        for (var j = 0; j < elemClasses.length; j++)
+
-
        {
+
-
            var elemClass = elemClasses[j];
+
-
            if (! allClasses[elemClass])
+
-
                allClasses[elemClass] = new Array();
+
-
            allClasses[elemClass].push(elem);
+
-
 
+
-
            // all the special classes begin with _toggle
+
-
            if (elemClass.substring(0, 7) != "_toggle")
+
-
                continue;
+
-
 
+
-
            if (elemClass == "_togglegroup")
+
-
                toggleGroup = new Array();
+
-
            else if (elemClass == "_toggle")
+
-
                toggleGroup.push(elem);
+
-
            else if (elemClass.substring(0, 12) == "_toggle_init")
+
-
            {
+
-
                // set initial value for display (ignore the original CSS set value)
+
-
                // understands _toggle_initshow and _toggle_inithide
+
-
                var disp = elemClass.substring(12);
+
-
                if (disp == "show")
+
-
                    elem.style.display = '';
+
-
                else if (disp == "hide")
+
-
                    elem.style.display = 'none';
+
-
                elem._toggle_original_display = disp;
+
-
            }
+
-
            else if (elemClass.substring(0, 8) == "_toggler")
+
-
            {
+
-
                if (togglerID == -1)
+
-
                {
+
-
                    togglerID = togglers.length;
+
-
                    togglers[togglerID] = new Array();
+
-
                    togglerElems[togglerID] = elem;
+
-
                }
+
-
 
+
-
                // all classes are of form _toggler_op-CLASS
+
-
                // figure out what class we're toggling
+
-
                // if none is specified, then we use the current toggle group
+
-
                var toBeToggled;
+
-
                var hyphen = elemClass.indexOf('-');
+
-
                if (hyphen != -1)
+
-
                    toBeToggled = elemClass.substring(hyphen+1);
+
-
                else
+
-
                {
+
-
                    toBeToggled = toggleGroup;
+
-
                    hyphen = elemClass.length;
+
-
                }
+
-
 
+
-
                var op = elemClass.substring(8, hyphen);
+
-
                togglers[togglerID].push(new Array(op, toBeToggled));
+
-
            }
+
-
        }
+
-
    }
+
-
 
+
-
    // add javascript links to all toggler elements
+
-
    for (var i = 0; i < togglerElems.length; i++)
+
-
        createTogglerLink(togglerElems[i], i);
+
-
}
+
-
 
+
-
 
+
-
function owwsitesearch(f){
+
-
    f.q.value='site:http://openwetware.org/wiki/'+
+
-
        f.base.value+'++'+f.qfront.value
+
-
}
+
-
 
+
-
 
+
-
addOnloadHook(toggleInit);
+
-
 
+
-
// </syntax>
+
-
 
+
-
<span class="_togglegroup _toggle_initshow _toggle _toggler toggle-visible" style="display:none;">[show]</span><span class="_toggle_inithide _toggle _toggler toggle-hidden" style="display:none;">[hide]</span>
+
-
<div class="_toggle_inithide _toggle toggle-hidden">
+
-
{{{1}}}</div>
+

Latest revision as of 19:30, 5 August 2008

/* Any JavaScript here will be loaded for all users on every page load. */ // <syntax type="javascript"> /** Toggles the display of elements on a page Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation */ // indexed array of toggler ids to array of associated toggle operations // each operation is a two element array, the first being the type, the second a class name or array of elements // operation types are strings like "_reset" or "" for the default toggle operation var togglers = new Array(); var allClasses = new Object(); // associative map of class names to page elements function toggler(id) { var toBeToggled = togglers[id]; if (!toBeToggled) return; // if some element is in list more than once, it will be toggled multiple times for (var i = 0; i < toBeToggled.length; i++) { // get array of elements to operate on var toggles = toBeToggled[i][1]; if (typeof(toggles) == "string") { if (toggles.charAt(0) == '-') { // treat as an element ID, not as class toggles = document.getElementById(toggles.substring(1)); if (toggles) toggles = new Array(toggles); } else toggles = allClasses[toggles]; } if (!toggles || !toggles.length) continue; var op = toBeToggled[i][0]; // what the operation will be switch (op) { case "_reset": for (var j in toggles) toggles[j].style.display = toggles[j]._toggle_original_display; break; case "_show": for (var j in toggles) toggles[j].style.display = ''; break; case "_hide": for (var j in toggles) toggles[j].style.display = 'none'; break; case "": default: // Toggle for (var j in toggles) toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); break; } } } function createTogglerLink(toggler, id) { var toggle = document.createElement("a"); toggle.className = 'toggler-link'; toggle.setAttribute('id', 'toggler' + id); toggle.setAttribute('href', 'javascript:toggler("' + id + '");'); var child = toggler.firstChild; toggler.removeChild(child); toggle.appendChild(child); toggler.insertBefore(toggle, toggler.firstChild); } function toggleInit() { var togglerElems = new Array(); var toggleGroup = new Array(); // initialize/clear any old information togglers = new Array(); allClasses = new Object(); // make list of all document classes var elems = document.getElementsByTagName("*"); var numelems = elems.length; for (var i = 0; i < elems.length; i++) { var elem = elems[i]; if (!elem.className) continue; elem._toggle_original_display = elem.style.display; var togglerID = -1; var elemClasses = elem.className.split(' '); // get list of classes for (var j = 0; j < elemClasses.length; j++) { var elemClass = elemClasses[j]; if (! allClasses[elemClass]) allClasses[elemClass] = new Array(); allClasses[elemClass].push(elem); // all the special classes begin with _toggle if (elemClass.substring(0, 7) != "_toggle") continue; if (elemClass == "_togglegroup") toggleGroup = new Array(); else if (elemClass == "_toggle") toggleGroup.push(elem); else if (elemClass.substring(0, 12) == "_toggle_init") { // set initial value for display (ignore the original CSS set value) // understands _toggle_initshow and _toggle_inithide var disp = elemClass.substring(12); if (disp == "show") elem.style.display = ''; else if (disp == "hide") elem.style.display = 'none'; elem._toggle_original_display = disp; } else if (elemClass.substring(0, 8) == "_toggler") { if (togglerID == -1) { togglerID = togglers.length; togglers[togglerID] = new Array(); togglerElems[togglerID] = elem; } // all classes are of form _toggler_op-CLASS // figure out what class we're toggling // if none is specified, then we use the current toggle group var toBeToggled; var hyphen = elemClass.indexOf('-'); if (hyphen != -1) toBeToggled = elemClass.substring(hyphen+1); else { toBeToggled = toggleGroup; hyphen = elemClass.length; } var op = elemClass.substring(8, hyphen); togglers[togglerID].push(new Array(op, toBeToggled)); } } } // add javascript links to all toggler elements for (var i = 0; i < togglerElems.length; i++) createTogglerLink(togglerElems[i], i); } function owwsitesearch(f){ f.q.value='site:http://openwetware.org/wiki/'+ f.base.value+'++'+f.qfront.value } addOnloadHook(toggleInit); // </syntax>


Usage

{{hide|text to hide}} or {{hide|1=text to hide}}. The second form is required when "text to hide" contains an equals sign. This produces:

text to hide