Difference between revisions of "MediaWiki:Mw-customcollapsible.js"

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search
(Die Seite wurde neu angelegt: „global jQuery, $, mw, console: jslint maxerr: 50, indent: 2: /* * change click-text based on MediaWiki's collapsible-element-mechanism (jQuery) * th…“)
 
m
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*global jQuery, $, mw, console */
+
/*global jQuery, $, mw, console, mediaWiki */
 
/*jslint maxerr: 50, indent: 2 */
 
/*jslint maxerr: 50, indent: 2 */
  
Line 10: Line 10:
 
  * somewhere: span.mw-customtoggle-**myKey**
 
  * somewhere: span.mw-customtoggle-**myKey**
 
  *
 
  *
  * div ─ .mw-collapsible  id="mw-customcollapsible-**myKey**"
+
  * div ─ .mw-collapsible  id='mw-customcollapsible-**myKey**'
 
  * │    └ [.mw-collapsed]
 
  * │    └ [.mw-collapsed]
 
  * │
 
  * │
 
  * └─ div.mw-collapsible-content
 
  * └─ div.mw-collapsible-content
 
  *
 
  *
  * dependecies:
+
  * @requires: $.resource() 'CollapseBox_captionExpand', 'CollapseBox_captionCollapse', 'CollapseBox_toolTipCollapse' : 'CollapseBox_toolTipExpand'
  * - pseudoclass:
+
* @requires: expandToggleAllExtras()
 +
* @requires:
 +
  * CSS - pseudoclass:
 
  * span.pseudolink {
 
  * span.pseudolink {
 
  *  color:#0645AD;
 
  *  color:#0645AD;
Line 25: Line 27:
 
  * }
 
  * }
 
  *
 
  *
  * @todo click in player does not toggle on the first click
+
  * Toggle all
 +
*
 +
* $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle.is-collapsed').trigger('click') });
 +
* $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle').not('.is-collapsed').trigger('click') });
 +
*
 +
* @returns {$.Deferred()}
 
  */
 
  */
function init_MwCustomCollapse_clickText() {
+
window.init_MwCustomCollapse_clickText = function () {
   "use strict";
+
   'use strict';
 
   // search first for id of mw-customcollapsible-**myKey** and then initiate the elements
 
   // search first for id of mw-customcollapsible-**myKey** and then initiate the elements
 
   // that trigger the media wiki based customcollapsible boxes
 
   // that trigger the media wiki based customcollapsible boxes
   var jMwCollapsible = $('.mw-collapsible[id^="mw-customcollapsible"]');
+
   var jMwCollapsible = $('.mw-collapsible[id^="mw-customcollapsible"]'),
 +
    deferredCollapsibleClicktext = $.Deferred();
 
   if (jMwCollapsible.length) {
 
   if (jMwCollapsible.length) {
     jMwCollapsible.each(function () {
+
     jMwCollapsible.each(function (i_jMwCollapsible) {
       if ($(this).attr('id').indexOf('mw-customcollapsible-') === 0) {
+
       var $thisCustomCollapsible = $(this),
 +
      idThisCollapsible = $thisCustomCollapsible.attr('id'),
 +
        /**
 +
        * toggle the corresponding custom toggler
 +
        *
 +
        * adds class is-collapsed (then showing expandible text)
 +
        * @param {selector} element the element to target
 +
        * @param {sting} showCase 'show expandible' or 'show collapsible'
 +
        * @returns {undefined}
 +
        */
 +
      toggleCustomToggler = function (element, showCase) {
 +
        var $thisToggler = $(element)
 +
        , thisHasDataAttr = Boolean($thisToggler.attr('data-expandtext')) || Boolean($thisToggler.attr('data-collapsetext')) || false
 +
        , thisExpandText = $thisToggler.attr('data-expandtext') || $.resource('CollapseBox_captionExpand')
 +
        , thisExpandTooltip = $.resource('CollapseBox_toolTipExpand')
 +
        , thisCollapseText = $thisToggler.attr('data-collapsetext') || $.resource('CollapseBox_captionCollapse')
 +
        , thisCollapseTooltip = $.resource('CollapseBox_toolTipExpand')
 +
        , thisTitle = (showCase === 'show expandible' ? thisExpandTooltip : thisCollapseTooltip)
 +
        , thisToggleText = (showCase  === 'show expandible'? thisExpandText : thisCollapseText)
 +
        , thisHtml = $thisToggler.html()
 +
        ;
 +
       
 +
       
 +
        if (!$thisToggler.hasClass('pseudolink')) {
 +
            $thisToggler.addClass('pseudolink');
 +
        }
 +
        if(showCase === 'show expandible') {
 +
          $thisToggler.addClass('is-collapsed');
 +
        } else {
 +
          $thisToggler.removeClass('is-collapsed');
 +
        }
 +
        $thisToggler
 +
          .attr('title', thisTitle)
 +
          /* keep html when there is no data-expandtext or data-collapsetext */
 +
          .html(thisHasDataAttr ? undefined : thisToggleText);
 +
        return;
 +
      };
 +
     
 +
     
 +
      if (idThisCollapsible.indexOf('mw-customcollapsible-') === 0) {
 
       // id of collapsible box
 
       // id of collapsible box
         var thisId = $(this).attr('id'),
+
         var wasCollapsed = true
           collapsibleCustomTriggerClass = thisId.replace("mw-customcollapsible", "mw-customtoggle"),
+
          , classCustomToggler = idThisCollapsible.replace('mw-customcollapsible', 'mw-customtoggle'),
           isCollapsed = $('#' + thisId).hasClass('mw-collapsed');
+
          // wasCollapsed = $thisCustomCollapsible.hasClass('mw-collapsed'),
 +
          $collapseToggler = $('.' + classCustomToggler);
 +
       
 +
        /**
 +
        * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)
 +
        */
 +
        $thisCustomCollapsible.on('afterExpand.mw-collapsible', function () {
 +
          classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');
 +
           $('.' + classCustomToggler).each( function (i, element) {
 +
            toggleCustomToggler(element, 'show collapsible');
 +
          });
 +
        });
 +
           
 +
        /**
 +
        * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)
 +
        */
 +
        $thisCustomCollapsible.on('afterCollapse.mw-collapsible', function () {
 +
          classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');
 +
           $('.' + classCustomToggler).each( function (i, element) {
 +
            toggleCustomToggler(element, 'show expandible');
 +
          });
 +
        });
 +
        wasCollapsed = $(this).hasClass('mw-collapsed') ;
 +
        // console.log('DEBUG this class: '
 +
        //  + $(this).attr('class')
 +
        //  + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')
 +
        //  );
 
         // bind each corresponding class and also toggle text (can have attribute data-expandtext/data-collapsetext)
 
         // bind each corresponding class and also toggle text (can have attribute data-expandtext/data-collapsetext)
         $('.' + collapsibleCustomTriggerClass)
+
         $collapseToggler.each (function (i, element) {
          //live does not bind the click
+
          // console.log('DEBUG this collapseToggler: '  
          //delegate does not bind the click; does delegate() apply only when an outer wrapper element is there?
+
          // + $(this).attr('class')
          // try namespaced click, do not name it mw-… it is used by MediaWiki
+
          // + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')
          .each(function () {
+
          // );
            var thisExpandText = $(this).attr('data-expandtext') ? $(this).attr('data-expandtext') : $.resource("captionExpand"),
+
          toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' );
              thisCollapseText = $(this).attr('data-collapsetext') ? $(this).attr('data-collapsetext') : $.resource("captionCollapse");
+
        });
 
+
            $(this).on('click.customtoggle', function (event) {
+
              // this click event fires before click.mw-collapse of jquery.makeCollapsible.js
+
              // so CSS class mw-collapsed is not yet removed or added
+
              //
+
              // get the corresponding id to this mw-customtoggle class
+
              var thisClassList = $(this).attr('class').split(" "),
+
                thisClassMwCustomtoggle = $.grep(
+
                  thisClassList,
+
                  // loop through the classes
+
                  function (classValue, i) {
+
                    if (classValue.indexOf('mw-customtoggle') === 0) {
+
                      return classValue;
+
                    }
+
                  }
+
                ).toString(),
+
                thisIdToToggle = thisClassMwCustomtoggle.replace("mw-customtoggle", "mw-customcollapsible"),
+
              // check status of class mw-collapsed when clicked
+
                wasCollapsedBeforeThisClick = $('#' + thisIdToToggle).hasClass('mw-collapsed');
+
              // Debugging
+
              // console.log("Mw-customcollapsible.js on()"
+
              //  + ", wasCollapsedBeforeClick: " + wasCollapsedBeforeThisClick
+
              //  + ", htmltext: " + (wasCollapsedBeforeThisClick ? thisCollapseText : thisExpandText)
+
              //   + ", thisExpandText: " + thisExpandText
+
              //  + ", thisCollapseText: " + thisCollapseText);
+
              // toggle text accordingly, set title attribute
+
              $(this)
+
                .attr("title", $.resource(wasCollapsedBeforeThisClick ? "toolTipCollapse" : "toolTipExpand"))
+
                .html(wasCollapsedBeforeThisClick ? thisCollapseText : thisExpandText);
+
            })
+
            // format the triggering HTML element
+
              .addClass("pseudolink")
+
              .attr("title", $.resource(isCollapsed ? "toolTipExpand" : "toolTipCollapse"))
+
              .html(isCollapsed ? thisExpandText : thisCollapseText);
+
            // Debugging
+
            // console.log("Mw-customcollapsible.js triggering HTML"
+
            //  + ", wasCollapsedBeforeClick: " + isCollapsed
+
            //  + ", htmltext: " + (isCollapsed ? thisExpandText : thisCollapseText)
+
            //  + ", thisExpandText: " + thisExpandText
+
            //  + ", thisCollapseText: " + thisCollapseText);
+
          });// each()
+
 
       }// if mw-customcollapsible
 
       }// if mw-customcollapsible
     });
+
      if (i_jMwCollapsible + 1 === jMwCollapsible.length) {
 +
        deferredCollapsibleClicktext.resolve('mw-customcollapsible-toggletext-added');
 +
      }
 +
     });// end each
 
   }
 
   }
   return null;
+
   return deferredCollapsibleClicktext.promise();
}// init_MwCustomCollapse_clickText()
+
};// init_MwCustomCollapse_clickText()
  
init_MwCustomCollapse_clickText();
+
jQuery( document ).ready( function( $ ) {
 +
  $.when(init_MwCustomCollapse_clickText()).done( function () {
 +
    // console.log('DEBUG init_MwCustomCollapse_clickText done expandToggleAllExtras');
 +
    expandToggleAllExtras();
 +
  });
 +
});

Latest revision as of 14:06, 24 August 2017

/*global jQuery, $, mw, console, mediaWiki */
/*jslint maxerr: 50, indent: 2 */

/*
 * change click-text based on MediaWiki's collapsible-element-mechanism (jQuery)
 * that are triggered from outside a mw-collapsible-class, using the socalled
 * 'mw-customtoggle-something' CSS class. This class of the triggering element defines
 * what id will be collapsible. Example:
 *
 * somewhere: span.mw-customtoggle-**myKey**
 *
 * div ─ .mw-collapsible  id='mw-customcollapsible-**myKey**'
 * │     └ [.mw-collapsed]
 * │
 * └─ div.mw-collapsible-content
 *
 * @requires: $.resource() 'CollapseBox_captionExpand', 'CollapseBox_captionCollapse', 'CollapseBox_toolTipCollapse' : 'CollapseBox_toolTipExpand'
 * @requires: expandToggleAllExtras()
 * @requires:
 * CSS - pseudoclass:
 * span.pseudolink {
 *   color:#0645AD;
 * }
 * span.pseudolink:hover, span.pseudolink:focus {
 *   text-decoration: underline;
 *   cursor:pointer;
 * }
 *
 * Toggle all
 * 
 * $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle.is-collapsed').trigger('click') });
 * $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle').not('.is-collapsed').trigger('click') });
 * 
 * @returns {$.Deferred()}
 */
window.init_MwCustomCollapse_clickText = function () {
  'use strict';
  // search first for id of mw-customcollapsible-**myKey** and then initiate the elements
  // that trigger the media wiki based customcollapsible boxes
  var jMwCollapsible = $('.mw-collapsible[id^="mw-customcollapsible"]'),
    deferredCollapsibleClicktext = $.Deferred();
  if (jMwCollapsible.length) {
    jMwCollapsible.each(function (i_jMwCollapsible) {
      var $thisCustomCollapsible = $(this), 
      idThisCollapsible = $thisCustomCollapsible.attr('id'),
        /**
        * toggle the corresponding custom toggler
        * 
        * adds class is-collapsed (then showing expandible text)
        * @param {selector} element the element to target
        * @param {sting} showCase 'show expandible' or 'show collapsible'
        * @returns {undefined}
        */
       toggleCustomToggler = function (element, showCase) {
         var $thisToggler = $(element)
         , thisHasDataAttr = Boolean($thisToggler.attr('data-expandtext')) || Boolean($thisToggler.attr('data-collapsetext')) || false
         , thisExpandText = $thisToggler.attr('data-expandtext') || $.resource('CollapseBox_captionExpand')
         , thisExpandTooltip = $.resource('CollapseBox_toolTipExpand')
         , thisCollapseText = $thisToggler.attr('data-collapsetext') || $.resource('CollapseBox_captionCollapse')
         , thisCollapseTooltip = $.resource('CollapseBox_toolTipExpand')
         , thisTitle = (showCase === 'show expandible' ? thisExpandTooltip : thisCollapseTooltip)
         , thisToggleText = (showCase  === 'show expandible'? thisExpandText : thisCollapseText)
         , thisHtml = $thisToggler.html()
         ;
         
         
         if (!$thisToggler.hasClass('pseudolink')) {
             $thisToggler.addClass('pseudolink');
         }
         if(showCase === 'show expandible') {
           $thisToggler.addClass('is-collapsed');
         } else {
           $thisToggler.removeClass('is-collapsed');
         }
         $thisToggler
           .attr('title', thisTitle)
           /* keep html when there is no data-expandtext or data-collapsetext */ 
           .html(thisHasDataAttr ? undefined : thisToggleText);
         return;
       };
       
       
      if (idThisCollapsible.indexOf('mw-customcollapsible-') === 0) {
      // id of collapsible box
        var wasCollapsed = true
          , classCustomToggler = idThisCollapsible.replace('mw-customcollapsible', 'mw-customtoggle'),
          // wasCollapsed = $thisCustomCollapsible.hasClass('mw-collapsed'),
          $collapseToggler = $('.' + classCustomToggler);
        
        /**
         * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)
         */
        $thisCustomCollapsible.on('afterExpand.mw-collapsible', function () {
          classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');
          $('.' + classCustomToggler).each( function (i, element) {
            toggleCustomToggler(element, 'show collapsible');
          });
        });
            
        /**
         * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)
         */
        $thisCustomCollapsible.on('afterCollapse.mw-collapsible', function () {
          classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');
          $('.' + classCustomToggler).each( function (i, element) {
            toggleCustomToggler(element, 'show expandible');
          });
        });
        wasCollapsed = $(this).hasClass('mw-collapsed') ;
        // console.log('DEBUG this class: ' 
        //  + $(this).attr('class')
        //  + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')
        //  );
        // bind each corresponding class and also toggle text (can have attribute data-expandtext/data-collapsetext)
        $collapseToggler.each (function (i, element) {
          // console.log('DEBUG this collapseToggler: ' 
          //  + $(this).attr('class')
          //  + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')
          //  );
          toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' );
        });
      }// if mw-customcollapsible
      if (i_jMwCollapsible + 1 === jMwCollapsible.length) {
        deferredCollapsibleClicktext.resolve('mw-customcollapsible-toggletext-added');
      }
    });// end each
  }
  return deferredCollapsibleClicktext.promise();
};// init_MwCustomCollapse_clickText()

jQuery( document ).ready( function( $ ) {
  $.when(init_MwCustomCollapse_clickText()).done( function () {
    // console.log('DEBUG init_MwCustomCollapse_clickText done expandToggleAllExtras');
    expandToggleAllExtras();
  });
});