Insert javascript-dependent HTML from javascript

[plack-app-gruntmaster.git] / js / 90-themes.js

diff --git a/js/90-themes.js b/js/90-themes.js
index 74506c83b98ba7e951d92a5749955c4f1a3d1ec5..6afd44448943594cea0a80416b42ea0495e8d420 100644 (file)
--- a/js/90-themes.js
+++ b/js/90-themes.js
@@ -1,20 +1,30 @@
 (function(){
        'use strict';
        function set_style(name){
-               $('#stylesheet').attr("href", "/css/" + name + ".css");
+               $('link[rel~="stylesheet"]').prop('disabled', true);
+               $('link[title="' + name + '"]').prop('disabled', false);
                localStorage.setItem("theme", name);
        }
 
+       var selector;
+
+       function add_themelink(theme, text) {
+               var link = $('<a role="button">' + text + '</a>');
+               link.appendTo(selector.find('ul')).wrap('<li>').on('click', function () { set_style(theme) });
+       }
+
        $( document ).ready(function() {
-               $('#theme-selector').removeClass('hidden');
-               $('#theme_slate'   ).on('click', function () { set_style("slate"); });
-               $('#theme_cerulean').on('click', function () { set_style("cerulean"); });
-               $('#theme_cyborg'  ).on('click', function () { set_style("cyborg"); });
-               $('#theme_cosmo'   ).on('click', function () { set_style("cosmo"); });
+               selector = $('<div>Themes: <ul class="list-inline"></ul></div>');
+               add_themelink('cyborg', 'Black');
+               add_themelink('slate', 'Grey');
+               add_themelink('readable', 'White');
+               $('#sidebar').prepend(selector);
        });
 
        var theme = localStorage.getItem("theme");
        if(theme) {
+               if(theme == "cerulean" || theme == "cosmo")
+                       theme = "readable";
                set_style(theme);
        }
 })();