Extension:TOCslider

From MediaWiki.org
Jump to navigation Jump to search
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.

Usage[edit]

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 instructions[edit]

  • 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.

Installation[edit]

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 parameters[edit]

User rights[edit]

See also[edit]