MediaWiki:Mw-customcollapsible.js
Version vom 4. Juni 2018, 12:30 Uhr von Andreas Plank (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „→global jQuery, $, mw, console, mediaWiki: →jslint maxerr: 50, indent: 2: /* * change click-text based on MediaWiki's collapsible-element-mechanism (jQ…“)
Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/*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();
});