diff options
Diffstat (limited to 'library/fullcalendar/examples/js/theme-chooser.js')
-rw-r--r-- | library/fullcalendar/examples/js/theme-chooser.js | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/library/fullcalendar/examples/js/theme-chooser.js b/library/fullcalendar/examples/js/theme-chooser.js new file mode 100644 index 000000000..92a7c4753 --- /dev/null +++ b/library/fullcalendar/examples/js/theme-chooser.js @@ -0,0 +1,141 @@ + +function initThemeChooser(settings) { + var isInitialized = false; + var currentThemeSystem; // don't set this directly. use setThemeSystem + var currentStylesheetEl; + var loadingEl = document.getElementById('loading'); + var systemSelectEl = document.querySelector('#theme-system-selector select'); + var themeSelectWrapEls = Array.prototype.slice.call( // convert to real array + document.querySelectorAll('.selector[data-theme-system]') + ); + + systemSelectEl.addEventListener('change', function() { + setThemeSystem(this.value); + }); + + setThemeSystem(systemSelectEl.value); + + themeSelectWrapEls.forEach(function(themeSelectWrapEl) { + var themeSelectEl = themeSelectWrapEl.querySelector('select'); + + themeSelectWrapEl.addEventListener('change', function() { + setTheme( + currentThemeSystem, + themeSelectEl.options[themeSelectEl.selectedIndex].value + ); + }); + }); + + + function setThemeSystem(themeSystem) { + var selectedTheme; + + currentThemeSystem = themeSystem; + + themeSelectWrapEls.forEach(function(themeSelectWrapEl) { + var themeSelectEl = themeSelectWrapEl.querySelector('select'); + + if (themeSelectWrapEl.getAttribute('data-theme-system') === themeSystem) { + selectedTheme = themeSelectEl.options[themeSelectEl.selectedIndex].value; + themeSelectWrapEl.style.display = 'inline-block'; + } else { + themeSelectWrapEl.style.display = 'none'; + } + }); + + setTheme(themeSystem, selectedTheme); + } + + + function setTheme(themeSystem, themeName) { + var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName); + var stylesheetEl; + + function done() { + if (!isInitialized) { + isInitialized = true; + settings.init(themeSystem); + } + else { + settings.change(themeSystem); + } + + showCredits(themeSystem, themeName); + } + + if (stylesheetUrl) { + stylesheetEl = document.createElement('link'); + stylesheetEl.setAttribute('rel', 'stylesheet'); + stylesheetEl.setAttribute('href', stylesheetUrl); + document.querySelector('head').appendChild(stylesheetEl); + + loadingEl.style.display = 'inline'; + + whenStylesheetLoaded(stylesheetEl, function() { + if (currentStylesheetEl) { + currentStylesheetEl.parentNode.removeChild(currentStylesheetEl); + } + currentStylesheetEl = stylesheetEl; + loadingEl.style.display = 'none'; + done(); + }); + } else { + if (currentStylesheetEl) { + currentStylesheetEl.parentNode.removeChild(currentStylesheetEl); + currentStylesheetEl = null + } + done(); + } + } + + + function generateStylesheetUrl(themeSystem, themeName) { + if (themeSystem === 'bootstrap') { + if (themeName) { + return 'https://bootswatch.com/4/' + themeName + '/bootstrap.min.css'; + } + else { // the default bootstrap theme + return 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; + } + } + } + + + function showCredits(themeSystem, themeName) { + var creditId; + + if (themeSystem.match('bootstrap')) { + if (themeName) { + creditId = 'bootstrap-custom'; + } + else { + creditId = 'bootstrap-standard'; + } + } + + Array.prototype.slice.call( // convert to real array + document.querySelectorAll('.credits') + ).forEach(function(creditEl) { + if (creditEl.getAttribute('data-credit-id') === creditId) { + creditEl.style.display = 'block'; + } else { + creditEl.style.display = 'none'; + } + }) + } + + + 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 + } +} |