CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
// <nowiki>
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: '!!!!!!!!{{' + str + '}}!!!!!!!!',
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);
});
// </nowiki>