Difference between revisions of "MediaWiki:Mw-customcollapsible.js"
From FloraWiki - das Wiki zur Schweizer Flora
m (fix trigger) |
m |
||
(9 intermediate revisions by the same user not shown) | |||
Line 15: | Line 15: | ||
* └─ div.mw-collapsible-content | * └─ div.mw-collapsible-content | ||
* | * | ||
− | * @ | + | * @requires: $.resource() 'CollapseBox_captionExpand', 'CollapseBox_captionCollapse', 'CollapseBox_toolTipCollapse' : 'CollapseBox_toolTipExpand' |
− | * @ | + | * @requires: expandToggleAllExtras() |
+ | * @requires: | ||
* CSS - pseudoclass: | * CSS - pseudoclass: | ||
* span.pseudolink { | * span.pseudolink { | ||
Line 31: | Line 32: | ||
* $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle').not('.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 () { | 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 (i_jMwCollapsible) { | jMwCollapsible.each(function (i_jMwCollapsible) { | ||
Line 118: | Line 120: | ||
toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' ); | toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' ); | ||
}); | }); | ||
− | |||
− | |||
}// if mw-customcollapsible | }// if mw-customcollapsible | ||
if (i_jMwCollapsible + 1 === jMwCollapsible.length) { | if (i_jMwCollapsible + 1 === jMwCollapsible.length) { | ||
− | + | deferredCollapsibleClicktext.resolve('mw-customcollapsible-toggletext-added'); | |
− | + | ||
− | + | ||
} | } | ||
});// end each | });// end each | ||
} | } | ||
− | return | + | return deferredCollapsibleClicktext.promise(); |
};// init_MwCustomCollapse_clickText() | };// init_MwCustomCollapse_clickText() | ||
jQuery( document ).ready( function( $ ) { | jQuery( document ).ready( function( $ ) { | ||
− | init_MwCustomCollapse_clickText(); | + | $.when(init_MwCustomCollapse_clickText()).done( function () { |
+ | // console.log('DEBUG init_MwCustomCollapse_clickText done expandToggleAllExtras'); | ||
+ | expandToggleAllExtras(); | ||
+ | }); | ||
}); | }); |
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();
});
});