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

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search
m (try to fix mw-collapse state)
m (Fix getting ID)
Line 28: Line 28:
 
  * @todo click in player does not toggle on the first click
 
  * @todo click in player does not toggle on the first click
 
  */
 
  */
$.init_MwCustomCollapse_clickText = function () {
+
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
Line 38: Line 38:
 
       // id of collapsible box
 
       // id of collapsible box
 
         var thisId = $(this).attr('id'),
 
         var thisId = $(this).attr('id'),
           collapsibleCustomTriggerClass = thisId.replace("mw-customcollapsible-", "mw-customtoggle-"),
+
           collapsibleCustomTriggerClass = thisId.replace("mw-customcollapsible", "mw-customtoggle"),
 
           isCollapsed = $('#' + thisId).hasClass('mw-collapsed');
 
           isCollapsed = $('#' + thisId).hasClass('mw-collapsed');
          // isCollapsed = $(this).hasClass('mw-collapsed');
 
          // console.log("$(this)");
 
          // console.log($(this));
 
 
         // 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)
 
         $('.' + collapsibleCustomTriggerClass)
Line 51: Line 48:
 
             var thisExpandText = $(this).attr('data-expandtext') ? $(this).attr('data-expandtext') : $.resource("CollapseBox_captionExpand"),
 
             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");
 
               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
+
             $(this).on('click.customtoggle, keypress.customtoggle', function (event) {
 +
               // this click event fires before click.mw-collapsible of jquery.makeCollapsible.js
 
               // so CSS class mw-collapsed is not yet removed or added
 
               // so CSS class mw-collapsed is not yet removed or added
 
               //  
 
               //  
Line 61: Line 59:
 
                   // loop through the classes
 
                   // loop through the classes
 
                   function (classValue, i) {
 
                   function (classValue, i) {
                     if (classValue.indexOf('mw-customtoggle-') === 0) {
+
                     return (classValue.indexOf('mw-customtoggle-') === 0);// get class containing the ID
                      return classValue;
+
                    }
+
 
                   }
 
                   }
 
                 ).toString(),
 
                 ).toString(),
                 thisIdToToggle = thisClassMwCustomtoggle.replace("mw-customtoggle-", "mw-customcollapsible-"),
+
                 thisIdToToggle = thisClassMwCustomtoggle.replace("mw-customtoggle", "mw-customcollapsible"),
               // check status of class mw-collapsed when clicked
+
               // check status of class mw-collapsed when clicked TODO check status hasClass
                 targetIdWasCollapsed = $('#' + thisIdToToggle).hasClass('mw-collapsed'); // seems to be already removed
+
              //  console.log('Debug: ' + thisClassMwCustomtoggle);
 +
              //  console.log('Debug: ' + thisIdToToggle);
 +
                 wasCollapsedBeforeThisClick = $('#' + thisIdToToggle).hasClass('mw-collapsed');
 +
                // wasCollapsedBeforeThisClick = window.document.getElementById(thisIdToToggle).className.indexOf('mw-collapsed') >= 0 ? true : false;
 
               // Debugging
 
               // Debugging
               /console.log("Mw-customcollapsible.js on()"
+
               /* console.log("Mw-customcollapsible.js on()"
              //    + ", isCollapsed: " + isCollapsed
+
                + ", wasCollapsedBeforeClick: " + wasCollapsedBeforeThisClick
              //    + ", hasClass('mw-collapsed'): " + targetIdWasCollapsed
+
                + ", htmltext: " + (wasCollapsedBeforeThisClick ? thisCollapseText : thisExpandText)
              //    + ", htmltext: " + (targetIdWasCollapsed ? thisCollapseText : thisExpandText)
+
                + ", thisExpandText: " + thisExpandText
              //    + ", thisExpandText: " + thisExpandText
+
                + ", thisCollapseText: " + thisCollapseText);
              //    + ", thisCollapseText: " + thisCollapseText
+
                */
              //    + ", thisIdToToggle: " + thisIdToToggle
+
              //  );
+
 
               // toggle text accordingly, set title attribute
 
               // toggle text accordingly, set title attribute
 
               $(this)
 
               $(this)
                 .attr("title", $.resource(targetIdWasCollapsed ? "CollapseBox_toolTipExpand" : "CollapseBox_toolTipCollapse"))
+
                 .attr("title", $.resource(wasCollapsedBeforeThisClick ? "CollapseBox_toolTipCollapse" : "CollapseBox_toolTipExpand"))
                 .html(targetIdWasCollapsed ? thisExpandText : thisCollapseText);
+
                 .html(wasCollapsedBeforeThisClick ? thisCollapseText : thisExpandText);
 
             })
 
             })
 
             // format the triggering HTML element
 
             // format the triggering HTML element
            .addClass("pseudolink")
+
              .addClass("pseudolink")
            .attr("title", $.resource(isCollapsed ? "CollapseBox_toolTipExpand" : "CollapseBox_toolTipCollapse"))
+
              .attr("title", $.resource(isCollapsed ? "CollapseBox_toolTipExpand" : "CollapseBox_toolTipCollapse"))
            .html(isCollapsed ? thisExpandText : thisCollapseText);
+
              .html(isCollapsed ? thisExpandText : thisCollapseText);
 
             // Debugging
 
             // Debugging
            // console.log("Mw-customcollapsible.js triggering HTML"
+
          /* console.log("Mw-customcollapsible.js triggering HTML"
            //  + ", isCollapsed: " + isCollapsed
+
              + ", wasCollapsedBeforeClick: " + isCollapsed
            //  + ", htmltext: " + (isCollapsed ? thisExpandText : thisCollapseText)
+
              + ", htmltext: " + (isCollapsed ? thisExpandText : thisCollapseText)
            //  + ", thisExpandText: " + thisExpandText
+
              + ", thisExpandText: " + thisExpandText
            //  + ", thisCollapseText: " + thisCollapseText
+
              + ", thisCollapseText: " + thisCollapseText);
            // );
+
              */
 
           });// each()
 
           });// each()
 
       }// if mw-customcollapsible
 
       }// if mw-customcollapsible
Line 99: Line 96:
 
   }
 
   }
 
   return null;
 
   return null;
}// $.init_MwCustomCollapse_clickText()
+
};// init_MwCustomCollapse_clickText()
  
 
jQuery( document ).ready( function( $ ) {
 
jQuery( document ).ready( function( $ ) {
   $.init_MwCustomCollapse_clickText();
+
   init_MwCustomCollapse_clickText();
} );
+
});

Revision as of 12:19, 29 August 2016

/*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
 */
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 () {
      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("CollapseBox_captionExpand"),
              thisCollapseText = $(this).attr('data-collapsetext') ? $(this).attr('data-collapsetext') : $.resource("CollapseBox_captionCollapse");

            $(this).on('click.customtoggle, keypress.customtoggle', function (event) {
              // this click event fires before click.mw-collapsible 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) {
                    return (classValue.indexOf('mw-customtoggle-') === 0);// get class containing the ID
                  }
                ).toString(),
                thisIdToToggle = thisClassMwCustomtoggle.replace("mw-customtoggle", "mw-customcollapsible"),
              // check status of class mw-collapsed when clicked TODO check status hasClass
              //  console.log('Debug: ' + thisClassMwCustomtoggle);
              //  console.log('Debug: ' + thisIdToToggle);
                wasCollapsedBeforeThisClick = $('#' + thisIdToToggle).hasClass('mw-collapsed');
                // wasCollapsedBeforeThisClick = window.document.getElementById(thisIdToToggle).className.indexOf('mw-collapsed') >= 0 ? true : false;
              // 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 ? "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();
});