Insert javascript-dependent HTML from javascript

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");

diff --git a/js/90-tracker.js b/js/90-tracker.js
index 50ba7d48baeea680432a49940d5419a8a20e6898..1fa4905ed0887ba2f36221591fb3fe59b6b3bdb2 100644 (file)
--- a/js/90-tracker.js
+++ b/js/90-tracker.js
@@ -9,6 +9,8 @@
                $('.tracker-info').removeClass('tracker-info info');
        }
 
+       var tracker;
+
        function update_tracker(){
                var data = localStorage.getItem('tracker_data');
                var user = localStorage.getItem('tracker_username');
@@ -74,7 +76,7 @@
        function start_tracking(user){
                localStorage.setItem('tracker_username', user);
                $('#tracker_userlink').attr('href', '/us/' + user).html(user);
-               $('#tracker_tracking').removeClass('hidden');
+               tracker.removeClass('hidden');
                update_tracker();
                var lastfetch = localStorage.getItem('tracker_lastfetch');
                if(Date.now() - lastfetch > 60 * 10 * 1000)
@@ -100,11 +102,12 @@
                localStorage.removeItem('tracker_username');
                localStorage.removeItem('tracker_data');
                localStorage.removeItem('tracker_lastfetch');
-               $('#tracker_tracking').addClass('hidden');
+               tracker.addClass('hidden');
        }
 
        $( document ).ready(function(){
-               $('#tracker').detach().prependTo($('#sidebar'));
+               tracker = $('<div id="tracker" class="hidden">Tracking <a id="tracker_userlink"></a>.<br><a id="tracker_stop" role="button">Stop tracking</a><br><a id="tracker_log">Job log</a><dl class="dl-horizontal"><dt>Solved</dt>    <dd id="tracker_solved">?</dd><dt>Attempted</dt> <dd id="tracker_attempted">?</dd><dt>Contests</dt>  <dd id="tracker_contests">?</dd></dl></div>');
+               tracker.prependTo($('#sidebar'));
                $('#tracker_stop').on('click', stop_tracking);
                $('#track_user').on('click', function() { stop_tracking(); start_tracking($(this).data('user')) });
                $('#submitform').on('submit', function() { localStorage.removeItem('tracker_lastfetch') });

diff --git a/js/95-login.js b/js/95-login.js
index 60ede9d841f25513cbae78eb5ee1daf5b5e5ee36..7f52deb6f2f5761d60e6ce7f1e00e0096d577782 100644 (file)
--- a/js/95-login.js
+++ b/js/95-login.js
@@ -2,7 +2,7 @@
        'use strict';
 
        $( document ).ready(function(){
-               $('#login').detach().prependTo($('#sidebar')).on('click', function(e) {
+               $('<a role="button">Log in').prependTo($('#sidebar')).wrap('<div id="login">').on('click', function(e) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', '/login');
                        xhr.onload = function () {

diff --git a/tmpl/skel.en b/tmpl/skel.en
index 6ae836aea13a969de2a515d7c646938cb78b8867..22411f95583d5c67a91c5ea2aec31a4021fb40aa 100644 (file)
--- a/tmpl/skel.en
+++ b/tmpl/skel.en
@@ -33,31 +33,6 @@
 
 <div id="content">Content goes here</div>
 
-<div id="login" class="reqjs" static="no"><a href="#">Log in</a></div>
-
-<div id="theme-selector" class="reqjs">
-Themes:
-<ul class="list-inline">
-<li><a href="#" id="theme_cyborg">Black</a>
-<li><a href="#" id="theme_slate">Gray</a>
-<li><a href="#" id="theme_readable">White</a>
-</ul>
-</div>
-
-<div id="tracker" class="reqjs">
-<div id="tracker_tracking" class="hidden">
-<br>
-Tracking <a href="#" id="tracker_userlink"></a>.<br>
-<a href="#" id="tracker_stop">Stop tracking</a><br>
-<a href="#" id="tracker_log">Job log</a>
-<dl class="dl-horizontal">
-<dt>Solved</dt>    <dd id="tracker_solved">?</dd>
-<dt>Attempted</dt> <dd id="tracker_attempted">?</dd>
-<dt>Contests</dt>  <dd id="tracker_contests">?</dd>
-</dl>
-</div>
-</div>
-
 <footer>
 Dilmom: Why don't you call your product the Gruntmaster 6000?<br>
 Dilbert: What kind of product do you see when you imagine a Gruntmaster 6000?<br>