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

/*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
 *
 * @dependecy: $.resource() 'CollapseBox_captionExpand', 'CollapseBox_captionCollapse', 'CollapseBox_toolTipCollapse' : 'CollapseBox_toolTipExpand'
 * @dependeciy:
 * 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') });
 * 
 */

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"]');
  if (jMwCollapsible.length) {
    jMwCollapsible.each(function () {
      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') ;
        if( Boolean(mw.util.getParamValue('debug'))) {
          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) {
          if(Boolean(mw.util.getParamValue('debug'))) {
            console.log('DEBUG this collapseToggler: ' 
            + $(this).attr('class')
            + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')
            );
          }
          toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' );
        });
        /*
        */
      }// if mw-customcollapsible
    });
  }
  return null;
};// init_MwCustomCollapse_clickText()

jQuery( document ).ready( function( $ ) {
  init_MwCustomCollapse_clickText();
});