1,963
edits
m
no edit summary
(init) |
mNo edit summary |
||
| Line 1: | Line 1: | ||
/* All JavaScript here will be loaded for users of the mobile site */ | /* All JavaScript here will be loaded for users of the mobile site */ | ||
var SpoilerToggle = { | |||
init: function () { | init: function () { | ||
if (mw.config.get('skin') === 'citizen') { | if (mw.config.get('skin') === 'citizen') { | ||
var sidebar = document.querySelector('.citizen-header__start'); | |||
var container = SpoilerToggle.createSpoilerContainer('wheatley_spoils_you', ['citizen-pref', 'citizen-header__item']); | |||
var button = SpoilerToggle.createSpoilerButton('wheatley_toggle', 'Toggle spoilers', SpoilerToggle.getWheatley()); | |||
button.addEventListener('click', () | button.addEventListener('click', function () { | ||
SpoilerToggle.toggleSpoilers(button); | |||
}); | |||
container.prepend(button); | container.prepend(button); | ||
| Line 16: | Line 18: | ||
createSpoilerContainer: function (id, classList) { | createSpoilerContainer: function (id, classList) { | ||
var container = document.createElement('div'); | |||
container.id = id; | container.id = id; | ||
container.classList.add( | for (var i = 0; i < classList.length; i++) { | ||
container.classList.add(classList[i]); | |||
} | |||
return container; | return container; | ||
| Line 25: | Line 29: | ||
createSpoilerButton: function (id, title, backgroundImageUrl) { | createSpoilerButton: function (id, title, backgroundImageUrl) { | ||
var button = document.createElement('button'); | |||
button.id = id; | button.id = id; | ||
button.classList.add('citizen-pref__button', 'citizen-header__button', 'citizen-button'); | button.classList.add('citizen-pref__button', 'citizen-header__button', 'citizen-button'); | ||
button.setAttribute('title', title); | button.setAttribute('title', title); | ||
button.style.backgroundImage = | button.style.backgroundImage = 'url(' + backgroundImageUrl + ')'; | ||
button.style.backgroundSize = '20px'; | button.style.backgroundSize = '20px'; | ||
button.style.backgroundRepeat = 'no-repeat'; | button.style.backgroundRepeat = 'no-repeat'; | ||
| Line 39: | Line 43: | ||
getWheatley: function () { | getWheatley: function () { | ||
var spoilersEnabled = mw.storage.get('pwiki-spoilers') === '1'; | |||
SpoilerToggle.toggleText(spoilersEnabled); | SpoilerToggle.toggleText(spoilersEnabled); | ||
return spoilersEnabled | return spoilersEnabled ? 'https://i2.theportalwiki.net/img/2/2b/Wheatley_spoils_you.png' : 'https://i2.theportalwiki.net/img/e/ef/Wheatley_spoils_nothing.png'; | ||
}, | }, | ||
toggleSpoilers: function (button) { | toggleSpoilers: function (button) { | ||
var cur = mw.storage.get('pwiki-spoilers'); | |||
var spoilersEnabled = cur === '1'; | |||
var neww = spoilersEnabled ? '0' : '1'; | |||
mw.storage.set('pwiki-spoilers', neww); | mw.storage.set('pwiki-spoilers', neww); | ||
button.style.backgroundImage = | button.style.backgroundImage = 'url(' + SpoilerToggle.getWheatley() + ')'; | ||
SpoilerToggle.toggleText(!spoilersEnabled); | SpoilerToggle.toggleText(!spoilersEnabled); | ||
| Line 61: | Line 62: | ||
toggleText: function (showSpoilers) { | toggleText: function (showSpoilers) { | ||
var spoilers = document.querySelectorAll('.spoiler-text'); | |||
Array.prototype.forEach.call(spoilers, function (spoiler) { | |||
if (showSpoilers) { | if (showSpoilers) { | ||
spoiler.classList.remove('spoiler-inline'); | spoiler.classList.remove('spoiler-inline'); | ||