Open main menu

Extension:TOCslider

MediaWiki extensions manual
OOjs UI icon advanced.svg
TOCslider
Release status: beta
Latest version 1.0
License Share-alike 2.5 License.
Download No link
Translate the TOCslider extension if it is available at translatewiki.net
Check usage and version matrix.

What can this extension do?Edit

Create nice pop-up slider with TOC of the page in the right part of browser window. May be useful for fast access to the any parts of content if page are larger then comfortable scrolling size.

UsageEdit

Install this extension as described below and just put <TOCslider/> tag in the end of any page where you want to have pop-up slider with TOC. Slider are pop-up after put cursor to the upper-right corner of the browser window. It will work after some screen scrolling only, for prevent conflicts with wiki links in that corner.

Download instructionsEdit

  • Please copy and paste the code found below and place it in $IP/extensions/TOCslider/tocslider.php.
<?php
/**
 * MediaWiki TOCslider extension v 1.0
 * if you want to use TOCslider panel for some Wiki page
 * just put the <TOCslider/> or <TOCslider text="notoc"/> tag at the end of this page, 
 * once and have a fun!  But don't forget use back slash for tag closing in any case ;)
 * 
 * use param   text="notoc" if you want remove TOC from page and leave it
 * on slider only and  
 * 
 * this extention use  for renerd lib 
 * tabSlideOUt v1.3  By William Paoli
 * 
 * (C) Copyright 2011, Vadim Yanik aka "Shual" <vadim_blackphox@mail.ru>
 * This work is licensed under a Creative Commons Attribution-Noncommercial-
 * No Derivative Works - Share-alike 2.5 License.  Some rights reserved.
 * http://creativecommons.org/licenses/by-nc-sa/2.5/
 */

// Configuration:

$sliderWidth=350; // slider width in px

$wgExtensionFunctions[] = "wfTocsliderExtension";
$wgHooks['OutputPageBeforeHTML'][] = 'tocsliderParserHook' ;
$TocsliderVersion = '1.0';
$wgExtensionCredits['parserhook'][] = array(
        'name'=>'Tocslider',
        'version'=>$TocsliderVersion,
        'author'=>'shual',
        'url'=>'http://www.mediawiki.org/wiki/Extension:Tocslider',
        'description' => htmlentities('Adds a <TOCslider [text="string"]> tag')
);

function wfTocsliderExtension() {
        global $wgParser;
        $wgParser->setHook( "TOCslider", "toclogo" );
}
 
function tocsliderParserHook( &$parser , &$text) { 
     global $sliderWidth;
  
// scc style of slider panel  
$css_style=  "<style>.panel {padding: 3px;\r"
	             ."width: ".$sliderWidth."px;\r"
	             ."background: #eeeeee;\r"
	             ."border: #282828 2px solid;\r"
              ."</style>";

//  Javascript libs  
 $js_scripts='<script type="text/javascript">'.file_get_contents("lib.js",true) 
 ."$(function(){\r"
             ."$('.panel').tabSlideOut({    \r"
             ."tabHandle:     '.handle',    \r"
             ."pathToTabImage: 'button.gif',\r"
             ."imageHeight:    '50px',      \r"
             ."imageWidth:     '50px',	    \r"
             ."tabLocation:    'right',     \r"//top, right, bottom, left
             ."speed:          300,	    \r"
             ."action:        'hover',	    \r"//click , hover 
             ."topPos:        '1px',	    \r"
             ."fixedPosition: true          \r"// false - position: absolute, 
             ."});"                            // true - position: fixed
             ."}); </script>";  
    
//html code of  TOCslider panel               
$html_output  = '<div id="wrap"> <div id="content" class="clearfix"> <div class="panel"> '
                .'<a class="handle" href="http://localhost/mediawiki">Content</a> ';


if ( strpos( $text,'TOCslider Extension')) { 
      $toc_table= '<table id="toc" class="toc">'
         .cut_str ($text, '<table id="toc" class="toc">', '</table>').'</table>';
       $html_output  .=$toc_table.'</div> </div> </div>';   
    if (strpos( $text,'aka "Shual"'))  $text=str_replace($toc_table,'',$text);     
       $text = $css_style . $js_scripts .  $html_output . $text;
   }    
 return true;
}

function toclogo( $input, $argv, $parser ) {
        $localParser = new Parser();
        $outputObj = $localParser->parse($input, $parser->mTitle, $parser->mOptions);
        
        $logo=($argv["text"]==="notoc")
                 ? '<i><b>TOCslider Extension</b> from Vadim Yanik aka "Shual"<i><br>'
                 :'<i><b>TOCslider Extension</b> from Vadim Yanik<i><br>';
          
        return $logo;
}
 
function cut_str($x,$a,$b){
           if (($a=="") or  ($b=="") or ($x=="")) {return "";}
          $x=" ".$x;
          $p=strpos($x,$a);
          if($p){ $x= substr($x, $p + strlen($a)-1);} else {return "";}
          $p=strpos($x,$b);
          if($p){$x= substr($x, 0, $p);} else {return "";}
          return substr($x,1);}
        
?>
  • Please copy and paste the code found below and place it in $IP/extensions/TOCslider/lib.js.
(function(d){d.fn.tabSlideOut=function(c){var a=d.extend({tabHandle:".handle",speed:300,action:"click",tabLocation:"left",topPos:"200px",leftPos:"20px",fixedPosition:!1,positioning:"absolute",pathToTabImage:null,imageHeight:null,imageWidth:null,onLoadSlideOut:!1},c||{});a.tabHandle=d(a.tabHandle);var b=this;a.positioning=!0===a.fixedPosition?"fixed":"absolute";document.all&&!window.opera&&!window.XMLHttpRequest&&(a.positioning="absolute");null!=a.pathToTabImage&&a.tabHandle.css({background:"url("+
a.pathToTabImage+") no-repeat",width:a.imageWidth,height:a.imageHeight});a.tabHandle.css({display:"block",textIndent:"-99999px",outline:"none",position:"absolute"});b.css({"line-height":"1",position:a.positioning});var g=parseInt(b.outerWidth(),10)+"px",e=parseInt(b.outerHeight(),10)+"px",c=parseInt(a.tabHandle.outerWidth(),10)+"px",i=parseInt(a.tabHandle.outerHeight(),10)+"px";if("top"===a.tabLocation||"bottom"===a.tabLocation)b.css({left:a.leftPos}),a.tabHandle.css({right:0});"top"===a.tabLocation&&
(b.css({top:"-"+e}),a.tabHandle.css({bottom:"-"+i}));"bottom"===a.tabLocation&&(b.css({bottom:"-"+e,position:"fixed"}),a.tabHandle.css({top:"-"+i}));if("left"===a.tabLocation||"right"===a.tabLocation)b.css({height:e,top:a.topPos}),a.tabHandle.css({top:0});"left"===a.tabLocation&&(b.css({left:"-"+g}),a.tabHandle.css({right:"-"+c}));"right"===a.tabLocation&&(b.css({right:"-"+g}),a.tabHandle.css({left:"-"+c}),d("html").css("overflow-x","hidden"));a.tabHandle.click(function(a){a.preventDefault()});var f=
function(){"top"===a.tabLocation?b.animate({top:"-"+e},a.speed).removeClass("open"):"left"===a.tabLocation?b.animate({left:"-"+g},a.speed).removeClass("open"):"right"===a.tabLocation?b.animate({right:"-"+g},a.speed).removeClass("open"):"bottom"===a.tabLocation&&b.animate({bottom:"-"+e},a.speed).removeClass("open")},h=function(){"top"==a.tabLocation?b.animate({top:"-3px"},a.speed).addClass("open"):"left"==a.tabLocation?b.animate({left:"-3px"},a.speed).addClass("open"):"right"==a.tabLocation?b.animate({right:"-3px"},
a.speed).addClass("open"):"bottom"==a.tabLocation&&b.animate({bottom:"-3px"},a.speed).addClass("open")},j=function(){b.click(function(a){a.stopPropagation()});d(document).click(function(){f()})},c=function(){b.hover(function(){h()},function(){f()});a.tabHandle.click(function(){b.hasClass("open")&&f()});j()};"click"===a.action&&function(){a.tabHandle.click(function(){b.hasClass("open")?f():h()});j()}();"hover"===a.action&&c();a.onLoadSlideOut&&(f(),setTimeout(h,500))}})(jQuery);

Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

InstallationEdit

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

#add configuration parameters here
#setup user rights here
require_once("$IP/extensions/TOCslider/tocslider.php");

Configuration parametersEdit

User rightsEdit

See alsoEdit