110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
|
|
||
|
|
function initThemeChooser(settings) {
|
||
|
|
var isInitialized = false;
|
||
|
|
var $currentStylesheet = $();
|
||
|
|
var $loading = $('#loading');
|
||
|
|
var $systemSelect = $('#theme-system-selector select')
|
||
|
|
.on('change', function() {
|
||
|
|
setThemeSystem(this.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
setThemeSystem($systemSelect.val());
|
||
|
|
|
||
|
|
|
||
|
|
function setThemeSystem(themeSystem) {
|
||
|
|
var $allSelectWraps = $('.selector[data-theme-system]').hide();
|
||
|
|
var $selectWrap = $allSelectWraps.filter('[data-theme-system="' + themeSystem +'"]').show();
|
||
|
|
var $select = $selectWrap.find('select')
|
||
|
|
.off('change') // avoid duplicate handlers :(
|
||
|
|
.on('change', function() {
|
||
|
|
setTheme(themeSystem, this.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
setTheme(themeSystem, $select.val());
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function setTheme(themeSystem, themeName) {
|
||
|
|
var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName);
|
||
|
|
var $stylesheet;
|
||
|
|
|
||
|
|
function done() {
|
||
|
|
if (!isInitialized) {
|
||
|
|
isInitialized = true;
|
||
|
|
settings.init(themeSystem);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
settings.change(themeSystem);
|
||
|
|
}
|
||
|
|
|
||
|
|
showCredits(themeSystem, themeName);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (stylesheetUrl) {
|
||
|
|
$stylesheet = $('<link rel="stylesheet" type="text/css" href="' + stylesheetUrl + '"/>').appendTo('head');
|
||
|
|
$loading.show();
|
||
|
|
|
||
|
|
whenStylesheetLoaded($stylesheet[0], function() {
|
||
|
|
$currentStylesheet.remove();
|
||
|
|
$currentStylesheet = $stylesheet;
|
||
|
|
$loading.hide();
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$currentStylesheet.remove();
|
||
|
|
$currentStylesheet = $();
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function generateStylesheetUrl(themeSystem, themeName) {
|
||
|
|
if (themeSystem === 'jquery-ui') {
|
||
|
|
return 'https://code.jquery.com/ui/1.12.1/themes/' + themeName + '/jquery-ui.css';
|
||
|
|
}
|
||
|
|
else if (themeSystem === 'bootstrap3') {
|
||
|
|
if (themeName) {
|
||
|
|
return 'https://bootswatch.com/' + themeName + '/bootstrap.min.css';
|
||
|
|
}
|
||
|
|
else { // the default bootstrap theme
|
||
|
|
return 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function showCredits(themeSystem, themeName) {
|
||
|
|
var creditId;
|
||
|
|
|
||
|
|
if (themeSystem === 'jquery-ui') {
|
||
|
|
creditId = 'jquery-ui';
|
||
|
|
}
|
||
|
|
else if (themeSystem === 'bootstrap3') {
|
||
|
|
if (themeName) {
|
||
|
|
creditId = 'bootstrap-custom';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
creditId = 'bootstrap-standard';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.credits').hide()
|
||
|
|
.filter('[data-credit-id="' + creditId + '"]').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function whenStylesheetLoaded(linkNode, callback) {
|
||
|
|
var isReady = false;
|
||
|
|
|
||
|
|
function ready() {
|
||
|
|
if (!isReady) { // avoid double-call
|
||
|
|
isReady = true;
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
linkNode.onload = ready; // does not work cross-browser
|
||
|
|
setTimeout(ready, 2000); // max wait. also handles browsers that don't support onload
|
||
|
|
}
|
||
|
|
}
|