MediaWiki:Gadget-toggles.js

//

window.popupButton = function(e) { e.stopPropagation; var hiddenClass = $(this).attr('data-toggler-hiddenclass'); hiddenClass = hiddenClass ? hiddenClass : 'popup-content-hidden'; // if we're re-clicking the same one we just showed before then, just hide it	// otherwise hide all the others and show this one var $shownContent = $(this).find('.popup-content-wrapper-action:not(.' + hiddenClass + ')'); if ($shownContent.length) { $shownContent.addClass(hiddenClass); return; }	$('.popup-content-wrapper-action').addClass(hiddenClass); var $inner = $(this).find('.popup-content-wrapper-action'); $inner.toggleClass(hiddenClass); var $innerWidthEl = $(this).find('.popup-content-inner-action'); $inner.css('width', $innerWidthEl.outerWidth); var width = $innerWidthEl.outerWidth + $(this).width / 2 + $innerWidthEl.css('padding') * 2; var coords = $(this).offset; var totalWidth = $(window).width; if (coords.left + width > totalWidth) { if (width > totalWidth) { $inner.css('left', -1 * parseInt(coords.left) + 'px'); }		else { $inner.css('left', parseInt(totalWidth) - (parseInt(coords.left) + parseInt(width)) + 'px'); }	}	else { $inner.css('left', ''); }	$(document).click(function{		$('.popup-content-wrapper-action').addClass(hiddenClass);	}); }

mw.hook('wikipage.content').add(function {	// implements freeform toggle akin to Dynamic Tabs - only one section can be shown at a time	// assign class "optionfromlist-toggler" to each toggler to make them recognized at all	// assign attr "data-toggle-section" & this value as a class to each toggler	// to make them behave together (to support multiple unrelated sections per page)	// to start something hidden, add class toggle-section-hidden	// assign attrs data-toggler-show and data-toggler-hide to each	// assign classes of the values of the attr of show/hide to the content that you want it to control	function oflRun {		$this = $(this);		if($this.hasClass('active')) return;		var thisSection = $this.attr('data-toggle-section');		$('.' + thisSection).removeClass('active');		if ($this.attr('data-toggler-setactive')) $('.' + ($this.attr('data-toggler-setactive')) ).addClass('active');		$this.addClass('active'); var toHide = $this.attr('data-toggler-hide'); var toShow = $this.attr('data-toggler-show'); if (! toHide.startsWith('.')) toHide = '.' + toHide; if (! toShow.startsWith('.')) toShow = '.' + toShow; var hiddenClass = $this.attr('data-toggler-hiddenclass'); hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden'; $(toHide).addClass(hiddenClass); $(toShow).removeClass(hiddenClass); }	$('.optionfromlist-toggler').each(function {		$(this).click(oflRun);	}); // no "active" or "inactive" toggles here, otherwise behaves the same as above $('.alwaysactive-toggler').each(function {		$(this).click(function { $this = $(this); var toHide = $this.attr('data-toggler-hide'); var toShow = $this.attr('data-toggler-show'); if (! toHide.startsWith('.')) toHide = '.' + toHide; if (! toShow.startsWith('.')) toShow = '.' + toShow; var hiddenClass = $this.attr('data-toggler-hiddenclass'); hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden'; $(toHide).addClass(hiddenClass); $(toShow).removeClass(hiddenClass); });	});	$('.sections-toggler').each(function {		$(this).click(function { $this = $(this); var toHide = $this.attr('data-toggler-hide'); var toShow = $this.attr('data-toggler-show'); var toHide_tbl = toHide.split(';'); var toShow_tbl = toShow.split(';'); var hiddenClass = $this.attr('data-toggler-hiddenclass'); hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden'; for(i in toHide_tbl) { var toHide = toHide_tbl[i]; if (! toHide.startsWith('.')) toHide = '.' + toHide; $(toHide).addClass(hiddenClass); }			for (i in toShow_tbl) { var toShow = toShow_tbl[i]; if (! toShow.startsWith('.')) toShow = '.' + toShow; $(toShow).removeClass(hiddenClass); }		});	});	// checkboxes to show-hide rows in a table (or whatever) $('.checkbox-togglers').each(function {		$(this).find('input').each(function { this.addEventListener('change', function(e) {				var $this = $(this);				var classToToggle = $this.attr('data-toggle-class');				if (! classToToggle.startsWith('.')) classToToggle = '.' + classToToggle;				var hiddenClass = $this.attr('data-toggler-hiddenclass');				hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';				$(classToToggle).toggleClass(hiddenClass);			}); });	});	// LAZY STUFF function processAllLazyTogglers(toggleClass) { if (lazySectionsAlreadyStarted[toggleClass]) return $.Deferred.resolve; lazySectionsAlreadyStarted[toggleClass] = true; var elList = []; $('.optionfromlist-toggler-lazy.' + toggleClass).each(function {			elList.push(this);		}); return processEachLazyToggler(elList); }	function processEachLazyToggler(elList) { if (elList.length == 0) { return $.Deferred.resolve; }		$thisEl = $(elList.pop); return processOneLazyToggler($thisEl) .then(function {			return processEachLazyToggler(elList);		}); }	function processOneLazyToggler($thisEl) { var $contentParent = $(getParentFromToggler($thisEl)); if (lazyContentAlreadyLoaded[$contentParent.attr('id')]) { switchToNonLazy($thisEl); return $.Deferred.resolve; }		var toParse = $thisEl.attr('data-templatecode'); if (!toParse) { toParse = $contentParent.attr('data-templatecode'); }		console.log(toParse); return parseHTML(toParse) .then(function(html) {			lazyContentAlreadyLoaded[$contentParent.attr('id')] = true;			return addHTMLToSection(html, $thisEl);		}); }	function getParentFromToggler($thisEl) { return document.getElementById($thisEl.attr('data-replaceid')); }	function parseHTML(str) { var a = new mw.Api; return a.get({			action: 'parse',			title: 'Main Page',			text: '!!!!!!!!!!!!!!!!',			prop: 'text'		}).then(function(data) {			var text = data.parse.text['*'];			var tbl = text.split('!!!!!!!!');			return tbl[1];		}); }	function addHTMLToSection(html, $thisEl) { var el = getParentFromToggler($thisEl); $(el).html(html); mw.hook('wikipage.content').fire($(el)); switchToNonLazy($thisEl); return $.Deferred.resolve; }	function switchToNonLazy($thisEl) { $thisEl.removeClass('optionfromlist-toggler-lazy'); $thisEl.addClass('optionfromlist-toggler'); $thisEl.off('click'); $thisEl.click(oflRun); }	$('.optionfromlist-toggler-lazy').each(function {		$(this).click(function { if (typeof lazyContentAlreadyLoaded === 'undefined') window.lazyContentAlreadyLoaded = {}; if (typeof lazySectionsAlreadyStarted === 'undefined') window.lazySectionsAlreadyStarted = {}; if($(this).hasClass('active')) return; return processOneLazyToggler($(this)) .then(oflRun.bind(this)) .then(processAllLazyTogglers($(this).attr('data-toggle-section'))); });	});	// Hidden content $('.popup-content-outer').off('click'); $('.popup-content-outer').click(function(e) {		e.stopPropagation;		var hiddenClass = $(this).attr('data-toggler-hiddenclass');		hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';		var $shownContent = $(this).find('.popup-content-inner:not(.' + hiddenClass + ')');		if ($shownContent.length) {			$shownContent.addClass(hiddenClass);			return;		}		$('.popup-content-inner').addClass(hiddenClass);		var $inner = $(this).find('.popup-content-inner');		$inner.toggleClass(hiddenClass);		var $innerWidthEl = $(this).find('.popup-content-width');		var width = $innerWidthEl.outerWidth + $(this).width / 2 + $innerWidthEl.css('padding') * 2;		var coords = $(this).offset;		var totalWidth = $(window).width;		if (coords.left + width > totalWidth) {			if (width > totalWidth) {				$inner.css('left', -1 * parseInt(coords.left) + 'px');			}			else {				$inner.css('left', parseInt(totalWidth) - (parseInt(coords.left) + parseInt(width)) + 'px'); }		}		else { $inner.css('left', ''); }		$(document).click(function{			$('.popup-content-inner').addClass(hiddenClass);		}); });	$('.popup-button-action').off('click');	$('.popup-button-action').click(window.popupButton); }); //