MediaWiki:Mw-customcollapsible.js

From FloraWiki - das Wiki zur Schweizer Flora
Revision as of 21:09, 11 July 2016 by Andreas Plank (Talk | contribs) (DEBUG isCollapsed)

Jump to: navigation, search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Clear the cache in Tools → Preferences
/*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
 *
 * @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;
 * }
 *
 * @todo click in player does not toggle on the first click
 */
$.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 () {
      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');
          isCollapsed = $(this).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("CollapseBox_captionExpand"),
              thisCollapseText = $(this).attr('data-collapsetext') ? $(this).attr('data-collapsetext') : $.resource("CollapseBox_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
                  + ", thisIdToToggle: " + thisIdToToggle
                 );
              // toggle text accordingly, set title attribute
              $(this)
                .attr("title", $.resource(wasCollapsedBeforeThisClick ? "CollapseBox_toolTipCollapse" : "CollapseBox_toolTipExpand"))
                .html(wasCollapsedBeforeThisClick ? thisCollapseText : thisExpandText);
            })
            // format the triggering HTML element
              .addClass("pseudolink")
              .attr("title", $.resource(isCollapsed ? "CollapseBox_toolTipExpand" : "CollapseBox_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()

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