theme-chooser.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. function initThemeChooser(settings) {
  2. var isInitialized = false;
  3. var $currentStylesheet = $();
  4. var $loading = $('#loading');
  5. var $systemSelect = $('#theme-system-selector select')
  6. .on('change', function() {
  7. setThemeSystem(this.value);
  8. });
  9. setThemeSystem($systemSelect.val());
  10. function setThemeSystem(themeSystem) {
  11. var $allSelectWraps = $('.selector[data-theme-system]').hide();
  12. var $selectWrap = $allSelectWraps.filter('[data-theme-system="' + themeSystem +'"]').show();
  13. var $select = $selectWrap.find('select')
  14. .off('change') // avoid duplicate handlers :(
  15. .on('change', function() {
  16. setTheme(themeSystem, this.value);
  17. });
  18. setTheme(themeSystem, $select.val());
  19. }
  20. function setTheme(themeSystem, themeName) {
  21. var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName);
  22. var $stylesheet;
  23. function done() {
  24. if (!isInitialized) {
  25. isInitialized = true;
  26. settings.init(themeSystem);
  27. }
  28. else {
  29. settings.change(themeSystem);
  30. }
  31. showCredits(themeSystem, themeName);
  32. }
  33. if (stylesheetUrl) {
  34. $stylesheet = $('<link rel="stylesheet" type="text/css" href="' + stylesheetUrl + '"/>').appendTo('head');
  35. $loading.show();
  36. whenStylesheetLoaded($stylesheet[0], function() {
  37. $currentStylesheet.remove();
  38. $currentStylesheet = $stylesheet;
  39. $loading.hide();
  40. done();
  41. });
  42. } else {
  43. $currentStylesheet.remove();
  44. $currentStylesheet = $();
  45. done();
  46. }
  47. }
  48. function generateStylesheetUrl(themeSystem, themeName) {
  49. if (themeSystem === 'jquery-ui') {
  50. return 'https://code.jquery.com/ui/1.12.1/themes/' + themeName + '/jquery-ui.css';
  51. }
  52. else if (themeSystem === 'bootstrap3') {
  53. if (themeName) {
  54. return 'https://bootswatch.com/3/' + themeName + '/bootstrap.min.css';
  55. }
  56. else { // the default bootstrap theme
  57. return 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
  58. }
  59. }
  60. else if (themeSystem === 'bootstrap4') {
  61. if (themeName) {
  62. return 'https://bootswatch.com/4/' + themeName + '/bootstrap.min.css';
  63. }
  64. else { // the default bootstrap4 theme
  65. return 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
  66. }
  67. }
  68. }
  69. function showCredits(themeSystem, themeName) {
  70. var creditId;
  71. if (themeSystem === 'jquery-ui') {
  72. creditId = 'jquery-ui';
  73. }
  74. else if (themeSystem === 'bootstrap3') {
  75. if (themeName) {
  76. creditId = 'bootstrap-custom';
  77. }
  78. else {
  79. creditId = 'bootstrap-standard';
  80. }
  81. }
  82. $('.credits').hide()
  83. .filter('[data-credit-id="' + creditId + '"]').show();
  84. }
  85. function whenStylesheetLoaded(linkNode, callback) {
  86. var isReady = false;
  87. function ready() {
  88. if (!isReady) { // avoid double-call
  89. isReady = true;
  90. callback();
  91. }
  92. }
  93. linkNode.onload = ready; // does not work cross-browser
  94. setTimeout(ready, 2000); // max wait. also handles browsers that don't support onload
  95. }
  96. }