Extension:JSToggler

MediaWiki extensions manual - list

JSToggler Release status: beta
Implementation	Tag
Description	A mediawiki extension created to allow the user to use Javascript switches without having to write actual javascript code in the mediawiki editor. This buttons allow the user to hide/show blocks of content dinamicaly.
Author(s)	Filipe Morais, Caixa Mágica Software
Last version	0.9a (2010-27-10)
MediaWiki	1.6+
License	GNU GPLv2
Download	see below
Tags <jstbutton>, <jstdiv>
Hooks used OutputPageBeforeHTML
Check usage and version matrix

What can this extension do?

This extension allows the user to create javascript buttons without having to use any actual javascript code. This buttons allow the user to hide/show blocks of content dynamicaly.

Usage

Creating the elements

Creating the button

<jstbutton>button</jstbutton>

this will create a button. However it is recommended that you set the group and the name. read further for more info.

Creating the div

<jstdiv>simple text by default toggled as visible</jstdiv>

this will create the div. Same as above, the group and name attributes should be set.

Arguments

General arguments

This arguments control the behavior of the buttons and divs. They can be used both in the jsbutton and jsdiv tags

Name

This is the most important argument. We don't want all divs to be toggled by all buttons, we want each div to toggle a single button. To allow this we only need to set a div and a button with the same name attribute and that button will toggle that div with the same 'name'

Warning: Do not use default as name!

Example:

<jstbutton name="example"> sample button</jstbutton>

<jstdiv name="example"> sample div</jstdiv>

<jstdiv name="otherexample">sample div2</jstdiv>

In this example, when you toggle the sample button, the 'sample div' will be altered, but the 'sample div2' will not

Group

The name allows the assignment of buttons to divs. But when we set the 'type' attribute to 'multi', all divs will be hidden but one. We may need to divide the buttons and divs in groups, so, when a 'multi' button is pressed, only the divs from one group are closed.

Warning: Do not use default as group!

Example:

<jstbutton name="example" group="g1" type="multi"> sample button</jstbutton>

<jstdiv name="example" group="g1"> sample div 1</jstdiv>

<jstdiv name="otherexample" group="g1">sample div 2</jstdiv>

<jstdiv name="example2" group="g2"> sample div 3</jstdiv>

<jstdiv name="otherexample2" group="g2">sample div 4</jstdiv>

In this example, when sample button is pressed, sample div 1 display attribute will be altered, and sample div2 will be hidden. However, no matter how many times the button is pressed, since they are in different groups, sample div's 3 and 4 will never be altered.

Button specific arguments

This arguments will only be valid if used in the jsbutton tags

Type

This argument controls the button behavior through divs in the same group. By default it is set to 'single', but if it is set to 'multi', all divs in the same group as the one with the same name as the button will be set as hidden on button press. The type attributte also accpets the 'group' value. With this value, this button will hide or show all divs in the same group.

Example:

<jstbutton name="example" group="g1" type="multi"> sample button</jstbutton>

<jsbutton name="examexpto" group"g1" type="group"> sample group button</jstbutton>

<jstdiv name="example" group="g1"> sample div 1</jstdiv>

<jstdiv name="otherexample" group="g1">sample div 2</jstdiv>

<jstdiv name="example2" group="g1"> sample div 3</jstdiv>

<jstdiv name="'otherexample2"' group="g2"'>sample div 4</jstdiv>

In this example, when sample button is pressed, sample div 1 display attribute will be altered, and sample div 2 ad 3 will be hidden. However, no matter how many times the button is pressed, since they are in different groups, sample div 4 will never be altered. When sample group button is pressed, all divs in g1 will be hidden or shown, regardless of their current state.

Altering the CSS

All <jstdiv> tags, by default, are div tags with class and id set to "JSTButton". Just edit them as you like in your css style sheet.

Download instructions

Please cut and paste the code found below and place it in $IP/extensions/JSToggler/JSToggler.php and $IP/extensions/JSToggler/JSToggler.js. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation

To install this extension, add the following to LocalSettings.php:

require_once("$IP/extensions/JSToggler/JSToggler.php");

Source

File $IP/extensions/JSToggler/JSToggler.php

<?php 
/**
 *      JSToggler
 *
 *      A mediawiki extension created to allow the user to use Javascript switches without having to write actual javascript code in the mediawiki editor.
 *
 *      @author Filipe Morais
 *      @Version 0.9
 *      @Last Change 27/10/2010
 *      @License Gnu GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
 *
 *      @note This extension was created as part of the implementation of a new generation of wiki to the 
 *      Caixa Magica Community (http://www.caixamagica.pt/pag/a_index.php)  during the Caixa Magica Summer Internships 2010 program. 
 *      Caixa Magica is a Mandriva based Linux distribution developed in Portugal by the Portuguese Company "Caixa Magica Software".
 */
 
/**
 * USAGE
 * 
 * = Creating the elements =
 *
 * == Creating the button ==
 * <jstbutton>button</jstbutton>
 *
 * this will create a button. However it is recommended that you set the group and the name. read further for more info.
 *
 * == Creating the div ==
 * <jstdiv>simple text by default toggled as visible</jstdiv>
 *
 * this will create the div. Same as above, the group and name attributes should be set.
 *
 * = arguments =
 *
 * == general arguments ==
 *
 * This arguments control the behavior of the buttons and divs. They can be used both in the jsbutton and jsdiv tags
 *
 * === Name ===
 * This is the most important argument. We don't want all divs to be toggled by all buttons, we want each div to toggle a single button.
 * To allow this we only need to set a div and a button with the same name attribute and that button will toggle that div with the same 'name'
 * @warning Do not use 'default' as name!
 *
 * example:
 *
 * <jstbutton name="example"> sample button</jstbutton>
 * <jstdiv name="example"> sample div</jstdiv>
 * <jstdiv name="otherexample">sample div2</jstdiv>
 *
 * In this example, when you toggle the sample button, the 'sample div' will be altered, but the 'sample div2' will not 
 * 
 *
 * === Group ===
 * The name allows the assignment of buttons to divs. But when we set the 'type' attribute to 'multi', all divs will be hidden but one.
 * We may need to divide the buttons and divs in groups, so, when a 'multi' button is pressed, only the divs from one group are closed.
 * @warning Do not use 'default' as group!
 *
 * example:
 *
 * <jstbutton name="example" group="g1" type="multi"> sample button</jstbutton>
 * <jstdiv name="example" group="g1"> sample div 1</jstdiv>
 * <jstdiv name="otherexample" group="g1">sample div 2</jstdiv>
 * <jstdiv name="example2" group="g2"> sample div 3</jstdiv>
 * <jstdiv name="otherexample2" group="g2">sample div 4</jstdiv>
 *
 * In this example, when sample button is pressed, sample div 1 display attribute will be altered, and sample div2 will be hidden.
 * However, no matter how many times the button is pressed, since they are in different groups, sample div's 3 and 4 will never be altered.
 *
 *
 * == button specific arguments ==
 *
 * This arguments will only be valid if used in the jsbutton tags
 *
 * === type ===
 * 
 * This argument controls the button behavior through divs in the same group. By default it is set to 'single', but if it is set to 'multi',
 * all divs in the same group as the one with the same name as the button will be set as hidden on button press.
 * The type attributte also accpets the 'group' value. With this value, this button will hide or show all divs in the same group.
 *
 * example:
 *
 * <jstbutton name="example" group="g1" type="multi"> sample button</jstbutton>
 * <jsbutton name="examexpto" group"g1" type="group"> sample group button</jstbutton>
 * <jstdiv name="example" group="g1"> sample div 1</jstdiv>
 * <jstdiv name="otherexample" group="g1">sample div 2</jstdiv>
 * <jstdiv name="example2" group="g1"> sample div 3</jstdiv>
 * <jstdiv name="'otherexample2"' group="g2"'>sample div 4</jstdiv>
 *
 * In this example, when sample button is pressed, sample div 1 display attribute will be altered, and sample div 2 ad 3 will be hidden.
 * However, no matter how many times the button is pressed, since they are in different groups, sample div 4 will never be altered.
 * When sample group button is pressed, all divs in g1 will be hidden or shown, regardless of their current state.
 *
 * = Altering the CSS =
 *
 * All buttons, by default are set with class and id set to "JSTButton". Just edit them as you like in your css style sheet.
 */
 
 
 
//sets this extensions functions to be added to the engine and sets the extension credits.
$wgExtensionFunctions[] = 'wfJSToggler';
$wgHooks['OutputPageBeforeHTML'][] = 'addJSTScript';
$wgExtensionCredits['parserhook'][] = array(
        'name' => 'JSToggler',
        'description' => 'Dinamicaly creates Javascript switches.',
        'author' => 'Filipe Morais, Caixa Magica Software',
        'url' => 'http://www.mediawiki.org/wiki/Extension:JSToggler'
);
 
/**
 * Allows the JSTogglerjs.js to be loaded together with the page.
 * The JSTogglerjs.js contains the javascript funcions required by this extension.
 */
function addJSTScript(&$out) {
        global $wgScriptPath;
        $path = "${wgScriptPath}/extensions/JSToggler/";
        $script = <<<END
<script type="text/javascript" src="${path}JSTogglerjs.js"></script>
END;
 
        $out->addScript($script);
        return true;
}
 
/**
 *Sets the parser hooks which will lookout for the tags 'jstbutton' and 'jstdiv' and call the appropriate function when those patterns are found
 */ 
function wfJSToggler(){
        global $wgParser;
        $wgParser->setHook('jstbutton', 'jSTogglerButton');
        $wgParser->setHook('jstdiv', 'jSTogglerDiv');
}
 
/**
 * When the 'jsbutton' pattern is found by the parser, this function is cast.
 * According to the args, this function will create a customized button.
 * Refer to usage for more info. 
 *
 * @param input string between the tags <jsdiv>
 * @param args found in the <jsdiv>. refer to 'usage' for more info
 *
 * @return formatted button
 */
function jSTogglerButton($input, $args){ 
 
        //creates the button as a span
        $output = "<span id='JSTButton' class='JSTButton' onclick=\"JSTSwitch(";
 
        //sets name. check "usage" for more info
        if(isset($args['name']))
                $output = $output."'JSTName:".$args['name']."'";
        else
                $output = $output."'JSTName:default'";
 
        $output = $output.",";
 
        //sets name. check "usage" for more info
        if(isset($args['group']))
                $output = $output."'JSTGrp:".$args['group']."'";
        else
                $output = $output."'JSTGrp:default'";
 
        $output = $output.",";
 
        //sets type: multi or single. single by default. check usage and JSToggler.js for more info
        if(isset($args['type']) && ($args['type'] == "multi" || $args['type'] == "group"))
                $output = $output."'".$args['type']."'";
        else
                $output = $output."'single'";
 
        $output = $output.")\" ";
 
        //finishes building the output: <span>$input</span>
        $output = $output." >".$input."</span>";
 
 
        return sprintf($output);
}
 
/**
 * When the 'jsdiv' pattern is found by the parser, this function is cast.
 * According to the args, this function will create the div which will be handled by the jsbuttons
 * Refer to usage for more info.
 *
 * @param input string between the tags <jsdiv>
 * @param args found in the <jsdiv>. refer to 'usage' for more info
 *
 * @return formatted div
 */
function jSTogglerDiv($input, $args){
        $output = "<div style=\"display:block;\" ";
 
        //sets the class as the group. defined by user or default if not set 
        if(isset($args['group']))
                $output = $output."class=\"JSTGrp:".$args['group']."\" ";
        else
                $output = $output."class=\"JSTGrp:default\" ";
 
        //sets the id as the div name. defined by user or default if not set 
        if(isset($args['name']))
                $output = $output."id=\"JSTName:".$args['name']."\" ";
        else
                $output = $output."id=\"JSTName:default\" ";
 
        $output = $output.">".$input."</div>";
 
        return sprintf($output);
}
 
?>

File $IP/extensions/JSToggler/JSTogglerjs.js

/**
 * JSToggler
 *
 * Javascript code for the JSToggler mediawiki extension
 *
 *      @author Filipe Morais
 *      @Version 0.9
 *      @Last Change 27/10/2010
 *      @License Gnu GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
 *      
 *      @note This extension was created as part of the implementation of a new generation of wiki to the 
 *      Caixa Magica Community (http://www.caixamagica.pt/pag/a_index.php)  during the Caixa Magica Summer Internships 2010 program. 
 *      Caixa Magica is a Mandriva based Linux distribution developed in Portugal by the Portuguese Company "Caixa Magica Software".
 *
 *      @usage check the extension page at mediawiki or JSToggler.php
 */
 
 
/**
 * JSTSwitch
 *
 * Obtains the class of the div with the id 'item'. 
 * Then, sets all divs of that class but the one with the id 'item' with the css attribute display:none IF 'type' is set to single.
 * Finally, the divs with the id 'item' will be set to display:none if they have display:block set or display:block if they are set to display:none.
 *
 * @param item name of the var to be set visible (or invisible)
 * @param group Group this items belongs. Check JSToggler.php for more info
 * @param type (accepts 'single' or 'multi' or 'group' as imput. check usage on JSToggler.php for more info.
 */
var JSTSwitch = function(item ,group, type){
 
        //gets all divs in this document
        var divs = document.getElementsByTagName('div');
 
        //hides or shows the correct divs. Only handles divs with class==group
        if(type != "group"){
                for(var i = 0; i < divs.length; i++)
                        if(divs[i].getAttribute("class") == group)
                                if(divs[i].id != item && type == "multi")
                                        document.getElementById(divs[i].id).style.display = "none";
                                else if (divs[i].id == item)
                                        if(document.getElementById(divs[i].id).style.display == "none")
                                                document.getElementById(divs[i].id).style.display = "block";
                                        else
                                                document.getElementById(divs[i].id).style.display = "none";
        }else{
                var open = 0;
 
                for(var i=0; i < divs.length; i++) 
                        if(divs[i].getAttribute("class") == group)
                                if(document.getElementById(divs[i].id).style.display == "block")
                                        open-=1;
                                else
                                        open+=1;
 
                for(var i=0; i < divs.length; i++)
                        if(divs[i].getAttribute("class") == group)
                                if(open >= 0)
                                        document.getElementById(divs[i].id).style.display = "block";
                                else
                                        document.getElementById(divs[i].id).style.display = "none"; 
        }
 
}