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 7221ddeac3eb40f7ea1e22255aa5ead6ed84d872..6afd44448943594cea0a80416b42ea0495e8d420 100644 (file)
--- a/js/90-themes.js
+++ b/js/90-themes.js
@@ -6,11 +6,19 @@
                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').detach().prependTo($('#sidebar'));
-               $('#theme_slate'   ).on('click', function () { set_style("slate"); });
-               $('#theme_cyborg'  ).on('click', function () { set_style("cyborg"); });
-               $('#theme_readable').on('click', function () { set_style("readable"); });
+               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");