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));