MediaWiki:Gadget-trailblazer-modal.js
After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.
- In most Windows and Linux browsers: Hold down Ctrl and press F5.
- In Safari: Hold down ⇧ Shift and click the Reload button.
- In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.
/**
* Interface modal for Trailblazer regions
* See also: Gadget-trailblazer-core which initialises this one
*
* @version 1.1
* @author Elessar2
*
*/
/*global jQuery, mediaWiki, mw, rswiki, rs, OO, moment, ga */
'use strict';
;
(function ($, mw, rs) {
var areaChecks, $content, api;
// trailblazer regions
var tbareas = [{
name: 'Misthalin',
img: '/images/Misthalin_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Misthalin',
id: 'misthalin'
}, {
name: 'Karamja',
img: '/images/Karamja_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Karamja',
id: 'karamja'
}, {
name: 'Asgarnia',
img: '/images/Asgarnia_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Asgarnia',
id: 'asgarnia'
}, {
name: 'Desert',
img: '/images/Desert_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Kharidian_Desert',
id: 'desert'
}, {
name: 'Fremennik',
img: '/images/Fremennik_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Fremennik_Province',
id: 'fremennik'
}, {
name: 'Kandarin',
img: '/images/Kandarin_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Kandarin',
id: 'kandarin'
}, {
name: 'Morytania',
img: '/images/Morytania_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Morytania',
id: 'morytania'
}, {
name: 'Tirannwn',
img: '/images/Tirannwn_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Tirannwn',
id: 'tirannwn'
}, {
name: 'Wilderness',
img: '/images/Wilderness_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Wilderness',
id: 'wilderness'
}, {
name: 'Kourend',
img: '/images/Kourend_Area_Badge.png?11111',
link: '/w/Trailblazer_Reloaded_League/Areas/Kourend',
id: 'kourend'
}];
// countdown date
var ctdwn = '2024-01-10T11:30:00+00:00';
// Last time (for constant updating)
rswtbz.updatetimer = 0;
/**
* Close the interface
* Is a click() event handler
* @return {undefined}
*/
rswtbz.closeInt = function () {
// Stop constant update
clearInterval(rswtbz.updatetimer);
// Close interface
window.OOUIWindowManager.closeWindow('trailblazerPopup');
};
/**
* Initialises the interface (popup and forms)
* @return {Promise}
*/
rswtbz.initInt = function () {
return new Promise(function (resolve, reject) {
mw.log('Initialising Trailblazer modal...');
api = new mw.Api();
// setup moment library
moment.locale('en-events', {
relativeTime: {
parentLocale: "en",
future: "%s",
past: "%s ago",
s: "secs",
m: "1m",
mm: "%dm",
h: "1h",
hh: "%dh",
d: "1d",
dd: "%dd",
M: "1 month",
MM: "%dmths",
y: "1 year",
yy: "%dyr"
}
});
rs.createOOUIWindow('trailblazerPopup', 'Trailblazer Reloaded League', {
size: 'large',
classes: ['rsw-events-popup']
}, rswtbz.initModal).then(function () {
// Mark interface as initialised
rswtbz.formMade = true;
rswtbz.formConst = false;
resolve();
});
});
};
/**
* Saves areas unlocked to localStorage
* @param {string} id Name (id) of area to save
* @param {boolean} value Area unlocked?
* @return {boolean} If save was successfull
*/
rswtbz.saveArea = function (id, value) {
mw.log('Saving area status: ' + id);
if (value) {
if (!rswtbz.settings.areas.includes(id)) {
rswtbz.settings.areas.push(id);
}
} else {
var ind = rswtbz.settings.areas.indexOf(id);
if (ind > -1) {
rswtbz.settings.areas.splice(ind, 1);
}
}
mw.log('Unlocked areas:');
mw.log(rswtbz.settings.areas);
// Update displays
rswtbz.updateAreas();
if (!rs.hasLocalStorage()) {
console.warn('Browser does not support localStorage');
return false;
}
var string = JSON.stringify(rswtbz.settings);
try {
localStorage.setItem(rswtbz.localKey, string);
} catch (err) {
console.warn('Error saving presets to localStorage');
return false;
}
return true;
};
/**
* Generates the events popup
* @return {undefined}
*/
rswtbz.initModal = function (modal) {
var closeButton = new OO.ui.ButtonWidget({
icon: 'close',
id: 'rsw-events-close',
label: 'Close',
framed: false
});
closeButton.on('click', rswtbz.closeInt);
areaChecks = {};
areaChecks.areasel = new OO.ui.CheckboxMultiselectWidget({
classes: ['tb-area-sels']
});
tbareas.forEach(function (area) {
var label = '<img title="' + area.name + '" alt="' + area.name + '_Area_Badge.png" src="' + area.img + '" srcset="' + area.img + ' 1.5x" data-file-width="20" data-file-height="30" width="20" height="30" draggable="false"> ' + area.name;
var externalLink = '<a href="' + area.link + '" class="tbz-external-link" title="' + area.name + ' Trailblazer Reloaded League area information" target="_blank">' + area.name + '</a>';
areaChecks[area.id] = new OO.ui.CheckboxMultioptionWidget({
label: new OO.ui.HtmlSnippet(label + externalLink),
data: area.id,
selected: rswtbz.settings.areas.includes(area.id)
});
areaChecks[area.id].on('change', rswtbz.saveArea, [area.id]);
areaChecks.areasel.addItems([areaChecks[area.id]]);
});
$content = $('<div>');
$content.addClass('events-popup').append($('<div>').addClass('header').append(closeButton.$element, $('<h2>').addClass('tb-title').append($('<a>').attr({
href: '/w/Trailblazer_Reloaded_League',
title: 'Trailblazer Reloaded League',
target: '_blank'
}).text('Trailblazer Reloaded League'))), $('<div>').addClass('body').append($('<div>').addClass('col col-l').append($('<div>').addClass('areas section').append($('<h3>').append($('<a>').attr({
href: '/w/Trailblazer_Reloaded_League/Areas',
title: 'Trailblazer Reloaded League Areas',
target: '_blank'
}).text('Regions unlocked')), areaChecks.areasel.$element)), $('<div>').addClass('col col-r').append($('<div>').addClass('guides section').append($('<h3>').append($('<a>').attr({
href: '/w/Trailblazer_Reloaded_League/Guide',
title: 'Trailblazer Reloaded League Guide',
target: '_blank'
}).text('League guides')), $('<div>').addClass('guide-links').append($('<a>').append($('<img>').attr({
src: '/images/Quests.png?11111',
height: '30px'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Quests',
title: 'Trailblazer Reloaded League quests guide',
target: '_blank'
}).append('Quests'), $('<a>').append($('<img>').attr({
src: '/images/Trailblazer_Reloaded_League_icon.png?11111',
height: '30px'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Tasks',
title: 'Trailblazer Reloaded League tasks',
target: '_blank'
}).append('Tasks'), $('<a>').append($('<img>').attr({
src: '/images/Trailblazer_Reloaded_League_-_%3F_Relic.png?11111',
height: '30px'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Relics',
title: 'Trailblazer Reloaded League relics',
target: '_blank'
}).append('Relics'))), $('<div>').addClass('skills section').append($('<h3>').append($('<a>').attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Skills',
title: 'Trailblazer Reloaded League Skills',
target: '_blank'
}).text('Skill guides')), $('<div>').addClass('skill-links').append($('<table>').addClass('wikitable').append($('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Stats_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Skills',
title: 'Trailblazer Reloaded League skills',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Agility_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Agility',
title: 'Trailblazer Reloaded League agility',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Mining_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Mining',
title: 'Trailblazer Reloaded League Mining',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Melee.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Melee',
title: 'Trailblazer Reloaded League Melee',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Herblore_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Herblore',
title: 'Trailblazer Reloaded League Herblore',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Smithing_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Smithing',
title: 'Trailblazer Reloaded League Smithing',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Ranged_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Ranged',
title: 'Trailblazer Reloaded League Ranged',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Thieving_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Thieving',
title: 'Trailblazer Reloaded League Thieving',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Fishing_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Fishing',
title: 'Trailblazer Reloaded League Fishing',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Prayer_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Prayer',
title: 'Trailblazer Reloaded League Prayer',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Crafting_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Crafting',
title: 'Trailblazer Reloaded League Crafting',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Cooking_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Cooking',
title: 'Trailblazer Reloaded League Cooking',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Magic_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Magic',
title: 'Trailblazer Reloaded League Magic',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Fletching_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Fletching',
title: 'Trailblazer Reloaded League Fletching',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Firemaking_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Firemaking',
title: 'Trailblazer Reloaded League Firemaking',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Runecraft_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Runecraft',
title: 'Trailblazer Reloaded League Runecraft',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Slayer_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Slayer',
title: 'Trailblazer Reloaded League Slayer',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Woodcutting_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Woodcutting',
title: 'Trailblazer Reloaded League Woodcutting',
target: '_blank'
}))), $('<tr>').append($('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Construction_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Construction',
title: 'Trailblazer Reloaded League Construction',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Hunter_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Hunter',
title: 'Trailblazer Reloaded League Hunter',
target: '_blank'
})), $('<td>').append($('<a>').append($('<img>').attr({
src: '/images/Farming_icon.png?11111'
})).attr({
href: '/w/Trailblazer_Reloaded_League/Guide/Farming',
title: 'Trailblazer Reloaded League Farming',
target: '_blank'
})))))))), $('<div>').addClass('footer').append($('<div>').addClass('footer-padding'), $('<div>').addClass('tb-countdown').append($('<label>').text('End countdown'), $('<time>').text('')), $('<div>').addClass('footer-padding'), $('<div>').addClass('tb-update').append($('<label>').text('Latest newspost'), $('<a>').attr({
href: '#',
title: 'Loading...'
}).text('Loading...')), $('<div>').addClass('footer-padding'), $('<div>').addClass('tb-info').append($('<label>').text('Rankings'), $('<a>').attr({
href: 'https://secure.runescape.com/m=hiscore_oldschool_seasonal/overall',
title: 'OSRS League Hiscores',
target: '_blank',
rel: 'nofollow noreferrer noopener'
}).text('OSRS HiScores')), $('<div>').addClass('footer-padding')));
// Create modal
modal.content = new OO.ui.PanelLayout({
padded: false,
expanded: false
});
modal.content.$element.append($content);
modal.$body.append(modal.content.$element);
$('.oo-ui-windowManager .rsw-events-popup').click(rswtbz.closeInt).children().click(function (e) {
e.stopPropagation();
});
};
/**
* Updates all values (used on opening)
* @return {undefined}
*/
rswtbz.updateAll = function () {
rswtbz.updateTimes();
rswtbz.updateNews();
};
/**
* Continuously updates the time values in Events dropdown
* @return {undefined}
*/
rswtbz.updateTimes = function () {
// Current UTC time
var now = moment.utc();
// Update UTC clock
$content.find('.cur-utc-time').attr({
'title': now.format('HH:mm D/M/Y'),
'datetime': now.format()
}).text(now.format('HH:mm') + ' (UTC)');
// Update coountdown time
var cntdwn_date = moment(ctdwn);
$content.find('.tb-countdown time').attr({
'title': cntdwn_date.format('HH:mm D/M/Y'),
'datetime': cntdwn_date.format()
}).text(cntdwn_date.from(now));
};
/**
* Updates the values that are per day in the Events popup:
* Current update
* @return {undefined}
*/
rswtbz.updateNews = function () {
// Current UTC time
var now = moment.utc();
// Update the current update
var uptitle = "Christmas 2023";
var uplink = "/w/Update:Christmas_2023";
var uphover = 'Update:' + uptitle;
$content.find('.tb-update a').replaceWith($('<a>').attr({
href: uplink,
title: uphover
}).text(uptitle));
};
})(jQuery, mediaWiki, rswiki);