Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,327
edits
MediaWiki:Gadget-switch-infobox.js: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Manual revert |
No edit summary |
||
Line 1:
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
/* switch infobox code for infoboxes
* contains switching code for both:
Line 18 ⟶ 21:
*/
$(function () {
}
}
/* click/change event - triggers switch event manager */
this.beginSwitchEvent = function (e) {
var $tgt = $(e.currentTarget);
mw.log('beginSwitchEvent triggered in module infobox, id ' + self.index);
if (self.isSelect) {
window.switchEventManager.trigger($tgt.val(), $tgt.find(' > option[data-switch-index=' + $tgt.val() + ']').attr('data-switch-anchor'), self);
} else {
window.switchEventManager.trigger($tgt.attr('data-switch-index'), $tgt.attr('data-switch-anchor'), self);
}
};
/* switch event, triggered by manager */
this.switchInfobox = function (index, text) {
if (text === '@init@') {
text = self.$buttons.find('[data-switch-index="1"]').attr('data-switch-anchor');
}
var ind,
txt,
$thisButton = self.$buttons.find('[data-switch-anchor="' + text + '"]');
mw.log('switching module infobox, id ' + self.index);
// prefer text
if ($thisButton.length) {
txt = text;
ind = $thisButton.attr('data-switch-index');
}
if (ind === undefined) {
return;
/*ind = index;
$thisButton = self.$buttons.find('[data-switch-index="'+ind+'"]');
if ($thisButton.length) {
txt = $thisButton.attr('data-switch-anchor');
}*/
}
if (txt === undefined) {
return;
}
if (self.isSelect) {
self.$select.val(ind);
} else {
self.$buttons.find('span.button').removeClass('button-selected');
$thisButton.addClass('button-selected');
}
self.$infobox.find('[data-attr-param][data-attr-param!=""]').each(function (i, e) {
var $e = $(e),
param = $e.attr('data-attr-param'),
$switches = self.$resources.find('span[data-attr-param="' + param + '"]'),
m,
$val,
$classTgt;
// check if we found some switch data
if (!$switches.length) return;
// find value
$val = $switches.find('span[data-attr-index="' + ind + '"]');
if (!$val.length) {
// didn't find it, use default value
$val = $switches.find('span[data-attr-index="0"]');
if (!$val.length) return;
}
// switch references support - $2 -> use the value for index 2
m = SWITCH_REF_REGEX.exec($val.html());
if (m) {
// m is null if no matches
$val = $switches.find('span[data-attr-index="' + m[1] + '"]'); // m is [ entire match, capture ]
if (!$val.length) {
$val = $switches.find('span[data-attr-index="0"]'); // fallback again
if (!$val.length) return;
}
}
$val = $val.clone(true, true);
$e.empty().append($val.contents());
// class switching
// find the thing we're switching classes for
$classTgt = $e.parent('tr');
} else {
$classTgt = $e;
}
// reset classes
if (self.originalClasses.hasOwnProperty(param)) {
$classTgt.attr('class', self.originalClasses[param]);
} else {
$classTgt.removeAttr('class');
}
if ($val.attr('data-addclass') !== undefined) {
}
});
// trigger complete event for inter-script functions
self.$buttons.trigger('switchinfoboxComplete', {
txt: txt,
num: ind
});
//re-initialise quantity boxes, if any
if (window.rswiki && typeof rswiki.initQtyBox == 'function') {
rswiki.initQtyBox(self.$infobox);
}
//console.log(this);
};
/* default version, return the anchor of the switchable if it exists */
this.defaultVer = function () {
if (defver !== undefined) {
return {
idx: defver,
txt: self.$buttons.find('[data-switch-index="' + defver + '"]').attr('data-switch-anchor')
};
}
return false;
};
this.isParentOf = function ($triggerer) {
return self.$infobox.find($triggerer).length > 0;
};
this.currentlyShowing = function () {
if (self.isSelect) {
return {
index: sel,
text: self.$select.find('option[value="' + sel + '"]').attr('data-switch-anchor')
};
} else {
var buttn = self.$buttons.find('.button-selected');
return {
index: buttn.attr('data-switch-index'),
text: buttn.attr('data-switch-anchor')
};
}
};
$classElem = $e,
clas;
if ($e.is('td, th')) {
}
clas = $classElem.attr('class');
if (typeof clas === 'string') {
self.originalClasses[$e.attr('data-attr-param')] = clas;
}
});
id: 'infobox-select-' + self.index,
});
self.$buttons.find('span.button').each(function (i, e) {
var $e = $(e);
self.$select.append($('<option>').attr({
value: $e.attr('data-switch-index'),
'data-switch-index': $e.attr('data-switch-index'),
}).text($e.text()));
});
self.$buttons.empty().append(self.$select);
self.$select.change(self.beginSwitchEvent);
} else {
id: 'infobox-buttons-' + self.index
}).find('span').each(function (i, e) {
$(e).click(self.beginSwitchEvent);
});
}
self.$buttons.css('display', 'flex');
self.switchInfobox(1, '@init@');
window.switchEventManager.addSwitchInfobox(this);
if (this.$infobox.find('.infobox-bonuses-image.render-m').length === 1 && this.$infobox.find('.infobox-bonuses-image.render-f').length === 1) {
this.genderswitch = new GenderRenderSwitcher(this.$infobox, this.index);
}
}
/**
* Special support for gender render switching in infobox bonuses (& synced switch)
* Currently specifically only supports male & female
* potential TODO: generalise?
*
* parameters
* $box jQuery object representing the infobox itself (.infobox-switch)
*/
function GenderRenderSwitcher($box, index, version_index_offset) {
var self = this;
this.$box = $box;
this.$box.data('SwitchInfobox', self);
this.index = index;
this.version_index_offset = version_index_offset;
this.version_count = 2;
this.$buttons = $('<div>').addClass('infobox-buttons').css('display', 'flex');
this.button = {
m: $('<span>').addClass('button').attr('data-gender-render', 'm').text('Male'),
f: $('<span>').addClass('button').attr('data-gender-render', 'f').text('Female')
};
this.$td = $('<td>');
this.$td_inner = $('<div class="gender-render-inner">');
this.visible_gender = '';
// from interface, we can just get the SyncedSwitches to switch
this.beginSwitchEvent = function (event) {
var $e = $(event.currentTarget);
var gen = $e.attr('data-gender-render');
mw.log('beginSwitchEvent for genderswitcher ' + self.index + ' - switching to ' + gen);
window.switchEventManager.triggerGenderRenderSwitch(gen);
if (CAN_LOCAL_STORAGE) {
window.localStorage.setItem('gender-render', gen);
}
};
// do the actual switching
this.genderSwitch = function (gender) {
mw.log('switching gender for genderswitcher for ' + self.index + ' to ' + gender);
self.$buttons.find('.button-selected').removeClass('button-selected');
self.button[gender].addClass('button-selected');
var x = self.$box.find('.infobox-bonuses-image.render-' + gender + '');
self.$td_inner.empty().append(x.find('>*').clone());
self.visible_gender = gender;
};
this.refreshImage = function (index, anchor) {
// for when a main infobox switch happens
// this is a post-switch function so the new images are in the original cells
// we just gotta clone them into the visible cell again
self.genderSwitch(self.visible_gender);
mw.log('refreshed image for genderswitcher ' + self.index);
return {
index: -1,
text: self.visible_gender
};
};
// other 'interface' methods just so stuff doesn't break, just in case
this.switchInfobox = function (ind, anchor) {/* do nothing */};
this.defaultVer = function () {
return false;
};
mw.log('Initialising genderswitcher for ' + self.index);
var $c_m = this.$box.find('.infobox-bonuses-image.render-m'),
$c_f = this.$box.find('.infobox-bonuses-image.render-f');
this.$td.addClass('gender-render').attr({
'style': $c_m.attr('style'),
'rowspan': $c_m.attr('rowspan')
}).append(this.$td_inner);
$c_m.parent().append(this.$td);
this.$buttons.append(this.button.m, this.button.f);
this.$td.append(this.$buttons);
this.$buttons.find('span.button').on('click', this.beginSwitchEvent);
$c_m.addClass('gender-render-hidden').attr('data-gender-render', 'm');
$c_f.addClass('gender-render-hidden').attr('data-gender-render', 'f');
window.switchEventManager.addGenderRenderSwitch(self);
window.switchEventManager.addPostSwitchEvent(this.refreshImage);
this.genderSwitch(getGenderFromLS());
}
/**
* Legacy switch infoboxes, as generated by [[Template:Switch infobox]]
*
*
* parameters
* $box jQuery object representing the infobox itself (.switch-infobox)
* index index of this infobox, from $.each
*/
function LegacySwitchInfobox($box, index, version_index_offset) {
var self = this;
this.$infobox = $box;
this.$infobox.data('SwitchInfobox', self);
this.$parent = $box;
this.index = index;
this.version_index_offset = version_index_offset;
this.$originalButtons = self.$parent.find('.switch-infobox-triggers');
this.$items = self.$parent.find('.item');
this.version_count = self.$originalButtons.find('span.trigger.button').length;
/* click/change event - triggers switch event manager */
this.beginSwitchEvent = function (e) {
var $tgt = $(e.currentTarget);
mw.log('beginSwitchEvent triggered in legacy infobox, id ' + self.index);
window.switchEventManager.trigger($tgt.attr('data-id'), $tgt.attr('data-anchor'), self);
};
/* click/change event - triggers switch event manager */
this.switchInfobox = function (index, text) {
if (text === '@init@') {
text = self.$buttons.find('[data-id="1"]').attr('data-anchor');
}
var ind,
txt,
$thisButton = self.$buttons.find('[data-anchor="' + text + '"]').first();
mw.log('switching legacy infobox, id ' + self.index);
if ($thisButton.length) {
txt = text;
ind = $thisButton.attr('data-id');
} else {
return;
/*ind = index;
if ($thisButton.length) {
txt = $thisButton.attr('data-anchor');
}*/
}
if (txt === undefined) {
return;
}
self.$buttons.find('.trigger').removeClass('button-selected');
self.$buttons.find('.trigger[data-id="' + ind + '"]').addClass('button-selected');
self.$items.filter('.showing').removeClass('showing');
self.$items.filter('[data-id="' + ind + '"]').addClass('showing');
};
/* default version - not supported by legacy, always false */
return false;
};
this.isParentOf = function ($triggerer) {
return self.$parent.find($triggerer).length > 0;
};
this.currentlyShowing = function () {
var buttn = self.$buttons.find('.button-selected');
return {
index: buttn.attr('data-id'),
text: buttn.attr('data-anchor')
};
};
/* init */
mw.log('setting up legacy infobox, id ' + self.index);
// add anchor text
var $e = $(e);
var anchorText = $e.text().split(' ').join('_');
$e.attr('data-anchor', '#' + anchorText);
});
// append triggers to every item
// if contents has a infobox, add to a caption of that
// else just put at top
if ($item.find('table.infobox').length > 0) {
if ($item.find('table.infobox caption').length < 1) {
$item.find('table.infobox').prepend('<caption>');
}
$item.find('table.infobox caption').first().prepend(self.$originalButtons.clone());
} else {
$item.prepend(self.$originalButtons.clone());
}
});
// remove buttons from current location
self.$originalButtons.remove();
// update selection
this.$buttons = self.$parent.find('.switch-infobox-triggers');
self.$buttons.find('.trigger').each(function (i, e) {
$(e).click(self.beginSwitchEvent);
self.switchInfobox(1, '@init@');
window.switchEventManager.addSwitchInfobox(this);
self.$parent.removeClass('loading').find('span.loading-button').remove();
}
/**
* Synced switches, as generated by [[Template:Synced switch]]
*
*
* parameters
* $box jQuery object representing the synced switch itself (.rsw-synced-switch)
* index index of this infobox, from $.each
*/
function SyncedSwitch($box, index, version_index_offset) {
var self = this;
this.index = index;
this.version_index_offset = version_index_offset; //not actually used
this.version_count = 0; // we don't increment from this
this.$syncedswitch = $box;
this.$syncedswitch.data('SwitchInfobox', self);
this.attachedLabels = false;
this.is_synced_switch = true;
/* filling in interface - synced switch has no buttons to press so cannot trigger an event by itself */
this.beginSwitchEvent = function () {};
this.switchInfobox = function (index, text) {
mw.log('switching synced switch, id ' + self.index + ", looking for " + index + ' - ' + text);
if (text === '@init@') {
text = self.$syncedswitch.find('[data-item="1"]').attr('data-item-text');
}
var $toShow = self.$syncedswitch.find('[data-item-text="' + text + '"]');
if (!(self.attachedLabels && $toShow.length)) {
//return;
$toShow = self.$syncedswitch.find('[data-item="' + index + '"]');
}
if (!$toShow.length) {
// show default instead
self.$syncedswitch.find('[data-item="0"]').addClass('showing');
} else {
self.$syncedswitch.find('.rsw-synced-switch-item').removeClass('showing');
$toShow.addClass('showing');
}
};
this.genderSwitch = function (gender) {
var $gens = self.$syncedswitch.find('.render-m, .render-f');
var srch = '.render-' + gender;
if ($gens.length) {
$gens.each(function (i, e) {
var $e = $(e);
if ($e.is(srch)) {
$e.removeClass('gender-render-hidden').addClass('gender-render-showing');
} else {
$e.removeClass('gender-render-showing').addClass('gender-render-hidden');
}
});
}
};
/* default version - not supported by synced switches, always false */
return false;
};
this.isParentOf = function ($triggerer) {
return self.$syncedswitch.find($triggerer).length > 0;
};
this.currentlyShowing = function () {
var buttn = self.$syncedswitch.find('.rsw-synced-switch-item.showing');
return {
index: buttn.attr('data-item'),
text: buttn.attr('data-item-text')
};
};
/* init */
// attempt to apply some button text from a SwitchInfobox
if ($('.infobox.infobox-switch').length && !$('.multi-infobox').length) {
self.attachedLabels = true;
var $linkedButtonTextInfobox = $('.infobox.infobox-switch').first();
self.$syncedswitch.find('.rsw-synced-switch-item').each(function (i, e) {
var $e = $(e);
if ($e.attr('data-item-text') === undefined) {
$e.attr('data-item-text', $linkedButtonTextInfobox.find('[data-switch-index="' + i + '"]').attr('data-switch-anchor'));
}
});
}
self.switchInfobox(1, '@init@');
window.switchEventManager.addSwitchInfobox(this);
window.switchEventManager.addGenderRenderSwitch(self);
this.genderSwitch(getGenderFromLS());
}
}
/**
* An infobox that doesn't switch
* used to make sure MultiInfoboxes interact with SyncedSwitches correctly
*
*/
function NonSwitchingInfobox($box, index, version_index_offset) {
var self = this;
this.$infobox = $box;
this.index = index;
this.version_index_offset = version_index_offset;
this.$infobox.data('SwitchInfobox', self);
this.version_count = 1;
this.beginSwitchEvent = function () {}; //do nothing
this.switchInfobox = function (index, text) {
return;
}; //do nothing
return true;
};
return false;
};
this.currentlyShowing = function () {
return {
text: null,
index: 1
};
};
}
var self = this,
switchInfoboxes = [],
syncedSwitches = [],
genderRenderSwitchers = [],
preSwitchEvents = [],
postSwitchEvents = [],
index = 0,
version_offset = 0;
window.switchEventManager = this;
// actual switch infoboxes to change
this.addSwitchInfobox = function (l) {
if (l.is_synced_switch) {
syncedSwitches.push(l);
}
};
gs.version_index_offset = version_offset;
version_offset += gs.version_count;
// things to do when switch button is clicked but before any switching
this.addPreSwitchEvent = function (e) {
if (typeof e === 'function') {
}
};
this.addPostSwitchEvent = function (e) {
if (typeof e === 'function') {
postSwitchEvents.push(e);
}
};
this.trigger = function (index, anchor, triggerer) {
mw.log('Triggering switch event for index ' + index + '; text ' + anchor);
// using a real for loop so we can use return to exit the trigger function
for (var i = 0; i < preSwitchEvents.length; i++) {
var ret = preSwitchEvents[i](index, anchor);
if (typeof ret === 'boolean') {
if (ret) {
mw.log('switching was cancelled');
return;
}
}
}
}
}
}
if (window.history && window.history.replaceState) {
} else {
window.history.replaceState({}, '', window.location.href + _anchor);
}
} else {
// replaceState not supported, I guess we just change the hash normally?
window.location.hash = _anchor;
}
}
postSwitchEvents.forEach(function (e) {
e(index, anchor);
});
};
this.triggerGenderRenderSwitch = function (gender) {
mw.log(genderRenderSwitchers);
for (var i = 0; i < genderRenderSwitchers.length; i++) {
genderRenderSwitchers[i].genderSwitch(gender);
}
};
this.triggerMultiInfoboxTabChange = function ($multiInfobox) {
mw.log('switching syncedswitches from tabber click', $multiInfobox);
setTimeout(function () {
var $tabcontents = $multiInfobox.find('div.tabber > div.tabbertab[style=""]');
var $infobox = $tabcontents.find('.infobox').first();
var swinfo = $infobox.data('SwitchInfobox');
mw.log('switchingdata', $tabcontents, $infobox, swinfo);
if (swinfo !== null && swinfo !== undefined) {
var cs = swinfo.currentlyShowing();
var ind = parseInt(cs.index) + swinfo.version_index_offset;
mw.log('inside if', cs, ind);
syncedSwitches.forEach(function (e) {
mw.log('inside foreach', e);
e.switchInfobox(ind, '');
});
} else {
mw.log('swinfo is undefnull');
}
}, 20);
};
/* attempts to detect what type of switch infobox this is and applies the relevant type */
// mostly for external access
this.makeSwitchInfobox = function ($e) {
if ($e.is('.infobox-switch')) {
return new SwitchInfobox($e, index++, version_offset);
}
if ($e.hasClass('switch-infobox')) {
return new LegacySwitchInfobox($e, index++, version_offset);
}
if ($e.hasClass('rsw-synced-switch')) {
return new SyncedSwitch($e, index++, version_offset);
}
if ($e.hasClass('infobox')) {
return new NonSwitchingInfobox($e, index++, version_offset);
}
console.log('Invalid element sent to SwitchEventManager.makeSwitchInfobox:', $e);
};
this.addIndex = function (i) {
if (typeof i === 'number') {
i += Math.max(Math.floor(i), 0);
}
};
this.applyDefaultVersion = function () {
if (window.location.hash !== '') {
self.trigger(1, window.location.hash, null);
return;
} else {
// real for loop so we can return out of the function
for (var i = 0; i < switchInfoboxes.length; i++) {
var defver = switchInfoboxes[i].defaultVer();
if (_typeof(defver) === 'object') {
self.trigger(defver.idx, defver.txt, null);
return;
}
}
}
self.trigger(1, '@init@', null);
};
// init
this.init = function () {
$('.infobox, .switch-infobox, .rsw-synced-switch').each(function (i, e) {
var obj = self.makeSwitchInfobox($(e));
version_offset += obj.version_count;
// for {{Multi Infobox}}
// there isn't a hook for tabber being ready, so we just gotta check until it is
function initMultiInfobox() {
if ($('#mw-content-text .multi-infobox .tabber.tabberlive').length) {
// class tabberlive is added when it is ready
$('#mw-content-text .multi-infobox').each(function (i, e) {
$(e).find('.tabber > ul.tabbernav > li').click(function (ev) {
self.triggerMultiInfoboxTabChange($(ev.currentTarget).parents('.multi-infobox'));
});
});
$('#mw-content-text .multi-infobox .tabber.tabberlive ul.tabbernav li.tabberactive').click(); //trigger event once now
} else {
window.setTimeout(initMultiInfobox, 20);
}
}
if ($('#mw-content-text .multi-infobox').length) {
initMultiInfobox();
}
self.applyDefaultVersion();
};
this.init();
}
mw.hook('wikipage.content').add(function init($content) {
if (!($content.find('.switch-infobox').length || $content.find('.infobox-buttons').length)) {
return;
}
// mirror rsw-util
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
CAN_LOCAL_STORAGE = true;
} catch (e) {
CAN_LOCAL_STORAGE = false;
}
window.switchEventManager = new SwitchEventManager();
window.switchEventManager.addPostSwitchEvent(function () {
});
}
});
| |||