MediaWiki:Mw-customcollapsible.js

/*global jQuery, $, mw, console */
/*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
 *
 * dependecies:
 * - pseudoclass:
 * span.pseudolink {
 *   color:#0645AD;
 * }
 * span.pseudolink:hover, span.pseudolink:focus {
 *   text-decoration: underline;
 *   cursor:pointer;
 * }
 *
 * @todo click in player does not toggle on the first click
 */
function init_MwCustomCollapse_clickText() {
  "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 () {
      if ($(this).attr('id').indexOf('mw-customcollapsible-') === 0) {
      // id of collapsible box
        var thisId = $(this).attr('id'),
          collapsibleCustomTriggerClass = thisId.replace("mw-customcollapsible", "mw-customtoggle"),
          isCollapsed = $('#' + thisId).hasClass('mw-collapsed');
        // bind each corresponding class and also toggle text (can have attribute data-expandtext/data-collapsetext)
        $('.' + collapsibleCustomTriggerClass)
          //live does not bind the click
          //delegate does not bind the click; does delegate() apply only when an outer wrapper element is there?
          // try namespaced click, do not name it mw-… it is used by MediaWiki
          .each(function () {
            var thisExpandText = $(this).attr('data-expandtext') ? $(this).attr('data-expandtext') : $.resource("captionExpand"),
              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
    });
  }
  return null;
}// init_MwCustomCollapse_clickText()

init_MwCustomCollapse_clickText();