Load themes as soon as possible to avoid FoUC

Also move theme configuration slightly to avoid sever-side caching bug

diff --git a/client/assets/src/app.js b/client/assets/src/app.js
index 6320c5f364c61f4799efa4eed9d1eb6ea85b42a3..f63db1fdd19834aa40beae1f1c60760bc8dd6915 100644 (file)
--- a/client/assets/src/app.js
+++ b/client/assets/src/app.js
@@ -114,14 +114,6 @@ _kiwi.global = {
         _kiwi.global.settings = _kiwi.model.DataStore.instance('kiwi.settings');\r
         _kiwi.global.settings.load();\r
 \r
-        if (opts.server_settings.client.themes) {\r
-            _.each(opts.server_settings.client.themes, function (theme) {\r
-                var link = $.parseHTML('<link rel="alternate stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/themes/' + theme.name.toLowerCase() + '/style.css" title="' + theme.name.toLowerCase() + '" disabled/>');\r
-                link.disabled = true;\r
-                $(link).appendTo($('head'));\r
-            });\r
-        }\r
-\r
         continueStart = function (locale, s, xhr) {\r
             if (locale) {\r
                 _kiwi.global.i18n = new Jed({locale_data: locale, domain: xhr.getResponseHeader('Content-Language')});\r

diff --git a/client/assets/src/index.html.tmpl b/client/assets/src/index.html.tmpl
index ba206e419e8e40772bada72aa0b314203790fff2..0ef01310d4f07feee6ee03e97a7df9da94d823e4 100644 (file)
--- a/client/assets/src/index.html.tmpl
+++ b/client/assets/src/index.html.tmpl
@@ -409,10 +409,22 @@
             opts.client_plugins = data.client_plugins;\r
             opts.translations = data.translations;\r
             opts.locale = data.locale;\r
+            opts.themes = data.themes;\r
 \r
             if (typeof data.kiwi_server !== 'undefined')\r
                 opts.kiwi_server = data.kiwi_server;\r
 \r
+            // Load themes\r
+            if (opts.themes) {\r
+                opts.themes.forEach(function (theme) {\r
+                    var disabled = (opts.server_settings.client.settings.theme !== theme),\r
+                        rel = (disabled?'alternate ':'') + 'stylesheet' /*+ (disabled?' prefetch':'')*/;\r
+                    var link = $.parseHTML('<link rel="' + rel + '" type="text/css" data-theme href="'+ opts.base_path + '/assets/themes/' + theme.name.toLowerCase() + '/style.css" title="' + theme.name.toLowerCase() + '"' + (disabled?'disabled':'') + '/>');\r
+                    link.disabled = disabled;\r
+                    $(link).appendTo($('head'));\r
+                });\r
+            }\r
+\r
             // Start loading scripts\r
             loadNextScript();\r
         });\r

diff --git a/client/assets/src/views/application.js b/client/assets/src/views/application.js
index 52bbc295600cb887138b8678b3b3dd1f93abb733..b7a1f80aae8bbdcf19cf5b6880a713e8b50d59d1 100644 (file)
--- a/client/assets/src/views/application.js
+++ b/client/assets/src/views/application.js
@@ -56,16 +56,15 @@ _kiwi.view.Application = Backbone.View.extend({
         theme_name = theme_name.toLowerCase();
 
         // Clear any current theme
-        $('[data-theme][rel="stylesheet"]').each(function (idx, link) {
+        $('[data-theme]:not([disabled])').each(function (idx, link) {
             var $link = $(link);
-            $link.attr('rel', 'alternate ' + $link.attr('rel'))[0].disabled = true;
+            $link.attr('rel', 'alternate ' + $link.attr('rel')).attr('disabled', true)[0].disabled = true;
         });
 
         // Apply the new theme
-        //this.$el.addClass('theme_' + (theme_name || 'relaxed'));
         var link = $('[data-theme][title=' + theme_name + ']');
         if (link.length > 0) {
-            link.attr('rel', 'stylesheet')[0].disabled = false;
+            link.attr('rel', 'stylesheet').attr('disabled', false)[0].disabled = false;
         }
     },
 

diff --git a/config.example.js b/config.example.js
index 8fb2bb29b4c23564b3b0654c5e5178d2239a49b0..3d80508925ad277b591c499109dc6d386d115976 100644 (file)
--- a/config.example.js
+++ b/config.example.js
@@ -182,15 +182,17 @@ conf.client = {
         show_timestamps: false,
         mute_sounds: false,
         show_emoticons: true
-    },
-    themes: [
-        'relaxed',
-        'mini',
-        'cli',
-        'basic'
-    ]
+    }
 };
 
+// List of themes available for the user to choose from
+conf.client_themes = [
+    'relaxed',
+    'mini',
+    'cli',
+    'basic'
+];
+
 
 // If set, the client may only connect to this 1 IRC server
 //conf.restrict_server = "irc.kiwiirc.com";

diff --git a/server/httphandler.js b/server/httphandler.js
index 22c27de5f64f76f3c9a01a37d5ab236702a8343d..f62f6b2621a54aed2fd1265ecc3da8556da6fd29 100644 (file)
--- a/server/httphandler.js
+++ b/server/httphandler.js
@@ -169,6 +169,7 @@ function serveSettings(request, response) {
             if (err) {
                 response.statusCode = 500;
                 response.end();
+                console.log(err);
             } else {
                 sendSettings.call(this, request, response, settings);
             }
@@ -309,12 +310,12 @@ function generateSettings(request, debug, callback) {
     }
 
     // Read theme information
-    readThemeInfo(vars.server_settings.client.themes, function (err, themes) {
+    readThemeInfo(config.get().client_themes, function (err, themes) {
         if (err) {
             return callback(err);
         }
         
-        vars.server_settings.client.themes = themes;
+        vars.themes = themes;
 
         // Get a list of available translations
         fs.readFile(__dirname + '/../client/assets/src/translations/translations.json', function (err, translations) {
@@ -348,7 +349,7 @@ function generateSettings(request, debug, callback) {
 
 function readThemeInfo(themes, prev, callback) {
     "use strict";
-    var theme = themes.shift();
+    var theme = themes[0];
 
     if (typeof prev === 'function') {
         callback = prev;
@@ -368,8 +369,8 @@ function readThemeInfo(themes, prev, callback) {
 
         prev.push(theme_json);
 
-        if (themes.length > 0) {
-            return readThemeInfo(themes, prev, callback);
+        if (themes.length > 1) {
+            return readThemeInfo(themes.slice(1), prev, callback);
         }
 
         callback(null, prev);