User:Quarenon/themes.js

/** * themes.js * * Creates an interface similar to Special:Preferences for setting a custom theme * on top of Monaco. In addition, the user can select a different logo. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */

var ctThemes = { 'default': { 'desc': 'Use theme set by your preferences', 'css': '' }, 'runescape': { 'desc': 'RuneScape', 'css': 'RuneScape:Theme/runescape.css' }, 'simplers': { 'desc': 'Simple RS by Enigma', 'css': 'User:Quarenon/Themes/simplers.css' }, 'wizardblue' : { 'desc' : 'Wizard Blue by Enigma', 'css': 'User:Quarenon/Themes/wizardblue.css' } };

var ctLogos = { 'default': { 'desc': 'Use logo set by your current theme', 'src': '', 'width': 0, 'height': 0 }, 'en_rswiki': { 'desc': 'English RuneScape Wiki Default', 'src': 'http://images.wikia.com/runescape/images/b/bc/Wiki.png', 'width': 135, 'height': 153}, 'fr_rswiki': { 'desc': 'French RuneScape Wiki Default', 'src': 'http://images.wikia.com/runescape/fr/images/b/bc/Wiki.png', 'width': 155, 'height': 120} };

$(document).ready(function {	var oldID = 0;	var baseTS = 0;	var startTS = 0;	var editToken = ;	var userPrefs = ;

// Note: Will fail to remove more than one occurrence if there is a multiple block bug var reTheme = /@import "\S+"; \/\* @customTheme (\S+) \*\//; var reLogo = /#wiki_logo\{background-image:url\(\S+\) !important;\} \/\* @customLogo (\S+) \*\//;

function setPrefs { if (!baseTS || !startTS || !editToken) { alert('Error: cannot set prefs'); }

var logo = $('#ctForm input:radio[name=logo]:checked').val; var theme = $('#ctForm input:radio[name=theme]:checked').val;

// Unset existing prefs userPrefs = $.trim(userPrefs.replace(reTheme, ).replace(reLogo, ));

if (theme != 'default') { userPrefs = '@import "' + wgScript + '?action=raw&ctype=text/css&title=' + ctThemes[theme].css + '"; /* @customTheme ' + theme + ' */\n\n' + userPrefs; }

if (logo != 'default') { userPrefs += '\n\n#wiki_logo{background-image:url(' + ctLogos[logo].src + ') !important;} /* @customLogo ' + logo + ' */'; }

callAPI({			'minor': 'yes',			'summary': 'Changed custom theme',			'action': 'edit',			'title': 'User:' + wgUserName + '/monaco.css',			'basetimestamp': baseTS,			'startimestamp': startTS,			'token': editToken,			'text': userPrefs		}, 'POST', function(response) {			if (response.edit.result == 'Success') {				// Reload current page.				document.location.href = wgArticlePath.replace('$1', wgPageName);			} else {				alert('An error has occurred while saving your preferences!');			}		});

return false; }

if (wgPageName == 'User:Quarenon/Scripts/Themes') { $a = $('#themesContainer'); $a.empty;

// Theme selection $form = $(' ').attr({'id': 'ctForm', 'action': '#'}).submit(setPrefs); $form.append($(' ').text('Custom Theme')); $form.append($('').text('You can set a custom theme from the list below.')); $table = $(' ').addClass('wikitable'); for (var i in ctThemes) { $tr = $(' '); $input = $(' ').attr({'type': 'radio', 'name': 'theme', 'id': 'ctTheme' + i}).val(i); $tr.append($(' ').append($input)); $label = $(' ').attr({'for': 'ctTheme' + i}).text(ctThemes[i].desc); $tr.append($(' ').append($label)); $link = $('').attr({'href': wgArticlePath.replace('$1', ctThemes[i].css)}).text(ctThemes[i].css); $tr.append($(' ').append($link)); $table.append($tr); }		$form.append($table);

//$form.append($(' ').attr({'type': 'checkbox', 'id': 'ctAutoUpdate', 'checked': 'checked'})).append(' '); //$form.append($(' ').attr({'for': 'ctAutoUpdate'}).text('Automatically update when my skin is changed.'));

// Logo selection $form.append($(' ').text('Custom Logo')); $form.append($('').text('You may use the theme\'s default logo or override it from the choices below.')); $table = $(' ').addClass('wikitable'); for (var i in ctLogos) { $tr = $(' '); $input = $(' ').attr({'type': 'radio', 'name': 'logo', 'id': 'ctLogo' + i}).val(i); $tr.append($(' ').append($input)); $label = $(' ').attr({'for': 'ctLogo' + i}).text(ctLogos[i].desc); $tr.append($(' ').append($label)); if (i == 'default') { $tr.append($(' ').text(' ')); } else { $img = $(' ').attr({'src': ctLogos[i].src, 'width': ctLogos[i].width, 'height': ctLogos[i].height, 'alt': ctLogos[i].desc}); $tr.append($(' ').append($img)); }			$table.append($tr); }		$form.append($table);

$form.append($(' ').text('Confirm Selection')); //$form.append($(' ').attr({'type': 'button'}).val('Preview').click(preview)); $form.append(' ').append($(' ').attr({'type': 'submit'}).css({'fontWeight': 'bold'}).val('Save Preferences'));

$a.append($form);

$('#ctLogodefault,#ctThemedefault').attr({'checked': 'checked'}); }

// Load up the user's prefs so we can check the default radio buttons. callAPI({		'action': 'query',		'prop': 'info|revisions',		'intoken': 'edit',		'titles': 'User:' + wgUserName + '/monaco.css',		'rvprop': 'content|timestamp'	}, 'GET', function(response) {		var pages = response.query.pages;		var page = null;

for (var i in pages) { page = pages[i]; }

editToken = page.edittoken;

baseTS = (page.missing != null) ? page.starttimestamp : page.revisions[0].timestamp; startTS = page.starttimestamp;

userPrefs = page.revisions[0]['*'];

var themeMatches = userPrefs.match(reTheme); if (themeMatches != null) { $('#ctTheme' + themeMatches[1]).attr({'checked': 'checked'}); }

var logoMatches = userPrefs.match(reLogo); if (logoMatches != null) { $('#ctLogo' + logoMatches[1]).attr({'checked': 'checked'}); }	});

function callAPI(data, method, callback) { data['format'] = 'json';

$.ajax({			data: data,			dataType: 'json',			url: wgScriptPath + '/api.php',			type: method,			success: function(response) {				if (response.error) {					showError('API Error: ' + response.error.info);				} else {					callback(response);				}			},			error: function(xhr, error) { showError(error); },			timeout: 10000 // msec		}); }

});