Difference between revisions of "MediaWiki:MoveTOC.js"

// Copyright A. Plank
// This program is free software; you can redistribute it and/or modify it under the terms of the EUPL v.1.1 or (at your option) the GNU General Public License as published by the Free Software Foundation; either GPL v.3 or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License (http://www.gnu.org/licenses/) for more details. */
 
/* global $j, document */ /* = settings for JSLint */
"use strict"; // set ECMAScript 5 Strict Mode
 
function initmovingTOC() {
  $j.extend(true, $j.jI18n, {
    en: {
      hoveringleft : 'Hovering on the left side',
      hoveringright: 'Hovering on the right side',
      hoveringrestore: 'Restore default'
    },
    de: {
      hoveringleft : 'Links schwebend',
      hoveringright: 'Rechts schwebend',
      hoveringrestore: 'Normal: fixieren'
    }
  });
  $j('#togglelink').after(' | ' +
    ' <span style="cursor:pointer;" title="'+ $j.resource('hoveringleft') +'" onclick="movingTOC(\'0px\')" >&lt;</span>  ' +
    ' <span  style="cursor:pointer;" title="'+ $j.resource('hoveringright') +'" onclick="movingTOC(\'right\')" >&gt;</span> ' +
    ' | ' + 
    ' <span  style="cursor:pointer;"  title="'+ $j.resource('hoveringrestore')  +'" onclick="movingTOC(\'restore\')" >x</span> ');
}// end::initmovingTOC

function movingTOC(pxX, pxY) {
/*  default → move to left
    movingTOC('0px')
    movingTOC('+=50px')
    movingTOC('right') */
  var offsetX = 0, offsetY = 0 ;/* should be set locally at switch 'case' */
  pxY = pxY === undefined ? 0 : pxY; /* y-default pixel */
  var TOC   = $j('#toc');
  if ($j('#movingTOC').length === 0) {
    TOC.wrapAll('<div id="movingTOC"></div>');
  }
 switch (pxX) {
    case "right":
      $j("#toctitle h2").hide('slow');
      if ($j('#toTop').length === 0) {
        $j("#toctitle h2").after('<a href="#mw-head" id="toTop" title="'+$j.resource('toolTipNavigatePagetop') +'">↑&nbsp;</a>');
      }
      $j('#movingTOC')
        .css({"position":"absolute"})
        .animate({'max-width' : "13em"});
      offsetX = $j("#content").width() - 140;
      offsetY = - 55;

      $j('#movingTOC')
        .animate({
          'left':  $j(window).scrollLeft() + offsetX  +"px",
          'top' :  $j(window).scrollTop()  + offsetY + "px"
         });
      // emulate position fixed see CSS .navigation-left .navigation-right
      $j(window).scroll(function(){
        $j('#movingTOC')
          .animate(
            {
          'left':  $j(window).scrollLeft() + offsetX  +"px",
          'top' :  $j(window).scrollTop()  + offsetY + "px"
           },
            {queue: false, duration: 400} // queu: don't wait
          );
      });
      break;

    case "restore": TOC.unwrap(); $j('#toTop').remove(); $j("#toctitle h2").show('slow'); break;

    default:
      $j("#toctitle h2").hide('slow');
      if ($j('#toTop').length === 0) {
        $j("#toctitle h2").after('<a href="#mw-head" id="toTop" title="'+$j.resource('toolTipNavigatePagetop') +'">↑&nbsp;</a>');
      }
      offsetY = -110;
      offsetX = 0 - $j("#mw-panel").width() -14 ; // padding#content
      $j('#movingTOC')
        .css({"position":"absolute"})
        .animate({'max-width' : "13em"})
        .animate({
          'left': $j(window).scrollLeft() + offsetX  +"px",
          'top' : $j(window).scrollTop()  + offsetY + "px"
         });
      // emulate position fixed see CSS .navigation-left .navigation-right
      $j(window).scroll(function(){
        $j('#movingTOC')
          .animate({
          'left': $j(window).scrollLeft() + offsetX  +"px",
          'top' : $j(window).scrollTop() +  offsetY + "px"
           },
            {queue: false, duration: 400}); // queue: dont't wait
        });
      break;
  }// end switch
}// end function movingTOC()


//$j(document).ready(function() {
//  initmovingTOC();
//});