https://wiki.opensourceecology.de/index.php?action=history&feed=atom&title=MediaWiki%3AMw-customcollapsible.js 2026-09-22T02:44:14Z Versionsgeschichte dieser Seite in Open Source Ecology - Germany MediaWiki 1.35.1 https://wiki.opensourceecology.de/index.php?title=MediaWiki:Mw-customcollapsible.js&diff=14820&oldid=prev 2018-06-04T12:30:09Z

<p>Die Seite wurde neu angelegt: „<span dir="auto"><span class="autocomment">global jQuery, $, mw, console, mediaWiki: </span> <span dir="auto"><span class="autocomment">jslint maxerr: 50, indent: 2: </span> /* * change click-text based on MediaWiki&#039;s collapsible-element-mechanism (jQ…“</span></span></p> <p><b>Neue Seite</b></p><div>/*global jQuery, $, mw, console, mediaWiki */<br /> /*jslint maxerr: 50, indent: 2 */<br /> <br /> /*<br /> * change click-text based on MediaWiki's collapsible-element-mechanism (jQuery)<br /> * that are triggered from outside a mw-collapsible-class, using the socalled<br /> * 'mw-customtoggle-something' CSS class. This class of the triggering element defines<br /> * what id will be collapsible. Example:<br /> *<br /> * somewhere: span.mw-customtoggle-**myKey**<br /> *<br /> * div ─ .mw-collapsible id='mw-customcollapsible-**myKey**'<br /> * │ └ [.mw-collapsed]<br /> * │<br /> * └─ div.mw-collapsible-content<br /> *<br /> * @dependecy: $.resource() 'CollapseBox_captionExpand', 'CollapseBox_captionCollapse', 'CollapseBox_toolTipCollapse' : 'CollapseBox_toolTipExpand'<br /> * @dependeciy:<br /> * CSS - pseudoclass:<br /> * span.pseudolink {<br /> * color:#0645AD;<br /> * }<br /> * span.pseudolink:hover, span.pseudolink:focus {<br /> * text-decoration: underline;<br /> * cursor:pointer;<br /> * }<br /> *<br /> * Toggle all<br /> * <br /> * $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle.is-collapsed').trigger('click') });<br /> * $('.decisiontree').each (function (i, element) { $(element).find('.mw-customtoggle').not('.is-collapsed').trigger('click') });<br /> * <br /> */<br /> <br /> window.init_MwCustomCollapse_clickText = function () {<br /> 'use strict';<br /> // search first for id of mw-customcollapsible-**myKey** and then initiate the elements<br /> // that trigger the media wiki based customcollapsible boxes<br /> var jMwCollapsible = $('.mw-collapsible[id^=&quot;mw-customcollapsible&quot;]');<br /> if (jMwCollapsible.length) {<br /> jMwCollapsible.each(function () {<br /> var $thisCustomCollapsible = $(this), <br /> idThisCollapsible = $thisCustomCollapsible.attr('id'),<br /> /**<br /> * toggle the corresponding custom toggler<br /> * <br /> * adds class is-collapsed (then showing expandible text)<br /> * @param {selector} element the element to target<br /> * @param {sting} showCase 'show expandible' or 'show collapsible'<br /> * @returns {undefined}<br /> */<br /> toggleCustomToggler = function (element, showCase) {<br /> var $thisToggler = $(element)<br /> , thisHasDataAttr = Boolean($thisToggler.attr('data-expandtext')) || Boolean($thisToggler.attr('data-collapsetext')) || false<br /> , thisExpandText = $thisToggler.attr('data-expandtext') || $.resource('CollapseBox_captionExpand')<br /> , thisExpandTooltip = $.resource('CollapseBox_toolTipExpand')<br /> , thisCollapseText = $thisToggler.attr('data-collapsetext') || $.resource('CollapseBox_captionCollapse')<br /> , thisCollapseTooltip = $.resource('CollapseBox_toolTipExpand')<br /> , thisTitle = (showCase === 'show expandible' ? thisExpandTooltip : thisCollapseTooltip)<br /> , thisToggleText = (showCase === 'show expandible'? thisExpandText : thisCollapseText)<br /> , thisHtml = $thisToggler.html()<br /> ;<br /> <br /> <br /> if (!$thisToggler.hasClass('pseudolink')) {<br /> $thisToggler.addClass('pseudolink');<br /> }<br /> if(showCase === 'show expandible') {<br /> $thisToggler.addClass('is-collapsed');<br /> } else {<br /> $thisToggler.removeClass('is-collapsed');<br /> }<br /> $thisToggler<br /> .attr('title', thisTitle)<br /> /* keep html when there is no data-expandtext or data-collapsetext */ <br /> .html(thisHasDataAttr ? undefined : thisToggleText);<br /> return;<br /> };<br /> <br /> <br /> if (idThisCollapsible.indexOf('mw-customcollapsible-') === 0) {<br /> // id of collapsible box<br /> var wasCollapsed = true<br /> , classCustomToggler = idThisCollapsible.replace('mw-customcollapsible', 'mw-customtoggle'),<br /> // wasCollapsed = $thisCustomCollapsible.hasClass('mw-collapsed'),<br /> $collapseToggler = $('.' + classCustomToggler);<br /> <br /> /**<br /> * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)<br /> */<br /> $thisCustomCollapsible.on('afterExpand.mw-collapsible', function () {<br /> classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');<br /> $('.' + classCustomToggler).each( function (i, element) {<br /> toggleCustomToggler(element, 'show collapsible');<br /> });<br /> });<br /> <br /> /**<br /> * Listen on triggered events of the collapsible content (from jquery.makeCollapsible.js)<br /> */<br /> $thisCustomCollapsible.on('afterCollapse.mw-collapsible', function () {<br /> classCustomToggler = $(this).attr('id').replace('mw-customcollapsible', 'mw-customtoggle');<br /> $('.' + classCustomToggler).each( function (i, element) {<br /> toggleCustomToggler(element, 'show expandible');<br /> });<br /> });<br /> wasCollapsed = $(this).hasClass('mw-collapsed') ;<br /> if( Boolean(mw.util.getParamValue('debug'))) {<br /> console.log('DEBUG this class: ' <br /> + $(this).attr('class')<br /> + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')<br /> );<br /> }<br /> // bind each corresponding class and also toggle text (can have attribute data-expandtext/data-collapsetext)<br /> $collapseToggler.each (function (i, element) {<br /> if(Boolean(mw.util.getParamValue('debug'))) {<br /> console.log('DEBUG this collapseToggler: ' <br /> + $(this).attr('class')<br /> + ', wasCollapsed ' + (wasCollapsed ? 'yes' : 'no')<br /> );<br /> }<br /> toggleCustomToggler(element, wasCollapsed ? 'show expandible' : 'show collapsible' );<br /> });<br /> /*<br /> */<br /> }// if mw-customcollapsible<br /> });<br /> }<br /> return null;<br /> };// init_MwCustomCollapse_clickText()<br /> <br /> jQuery( document ).ready( function( $ ) {<br /> init_MwCustomCollapse_clickText();<br /> });</div>

Andreas Plank