From 5664b269ad3bf0a5cfb52e21f16e8728563563fc Mon Sep 17 00:00:00 2001
From: Jack Allnutt <jack@allnutt.eu>
Date: Fri, 25 Oct 2013 14:35:18 +0100
Subject: [PATCH] Auto-generate 'thumbnail' previews of themes in settings
 applet

---
 client/assets/src/app.js                    |  2 +-
 client/assets/src/applets/settings.js       | 40 ++++++------
 client/assets/src/index.html.tmpl           | 26 +++-----
 client/assets/src/themes/basic/theme.json   |  4 ++
 client/assets/src/themes/cli/theme.json     |  4 ++
 client/assets/src/themes/mini/theme.json    |  4 ++
 client/assets/src/themes/relaxed/theme.json |  4 ++
 server/httphandler.js                       | 67 ++++++++++++++++-----
 8 files changed, 101 insertions(+), 50 deletions(-)
 create mode 100644 client/assets/src/themes/basic/theme.json
 create mode 100644 client/assets/src/themes/cli/theme.json
 create mode 100644 client/assets/src/themes/mini/theme.json
 create mode 100644 client/assets/src/themes/relaxed/theme.json

diff --git a/client/assets/src/app.js b/client/assets/src/app.js
index 7002e0b..d70e0ab 100644
--- a/client/assets/src/app.js
+++ b/client/assets/src/app.js
@@ -116,7 +116,7 @@ _kiwi.global = {
 
         if (opts.server_settings.client.themes) {
             _.each(opts.server_settings.client.themes, function (theme) {
-                link = $.parseHTML('<link rel="alternate stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/src/themes/' + theme + '/style.css" title="' + theme.toLowerCase() + '" disabled/>');
+                link = $.parseHTML('<link rel="alternate stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/src/themes/' + theme.name.toLowerCase() + '/style.css" title="' + theme.name.toLowerCase() + '" disabled/>');
                 link.disabled = true;
                 $(link).appendTo($('head'));
             });
diff --git a/client/assets/src/applets/settings.js b/client/assets/src/applets/settings.js
index 32bf855..6fb7cb1 100644
--- a/client/assets/src/applets/settings.js
+++ b/client/assets/src/applets/settings.js
@@ -8,24 +8,28 @@
         },
 
         initialize: function (options) {
-            var text = {
-                tabs: _kiwi.global.i18n.translate('client_applets_settings_channelview_tabs').fetch(),
-                list: _kiwi.global.i18n.translate('client_applets_settings_channelview_list').fetch(),
-                large_amounts_of_chans: _kiwi.global.i18n.translate('client_applets_settings_channelview_list_notice').fetch(),
-                join_part: _kiwi.global.i18n.translate('client_applets_settings_notification_joinpart').fetch(),
-                timestamps: _kiwi.global.i18n.translate('client_applets_settings_timestamp').fetch(),
-                mute: _kiwi.global.i18n.translate('client_applets_settings_notification_sound').fetch(),
-                emoticons: _kiwi.global.i18n.translate('client_applets_settings_emoticons').fetch(),
-                scroll_history: _kiwi.global.i18n.translate('client_applets_settings_history_length').fetch(),
-                languages: _kiwi.app.translations,
-                default_client: _kiwi.global.i18n.translate('client_applets_settings_default_client').fetch(),
-                make_default: _kiwi.global.i18n.translate('client_applets_settings_default_client_enable').fetch(),
-                locale_restart_needed: _kiwi.global.i18n.translate('client_applets_settings_locale_restart_needed').fetch(),
-                default_note: _kiwi.global.i18n.translate('client_applets_settings_default_client_notice').fetch('<a href="chrome://settings/handlers">chrome://settings/handlers</a>'),
-                html5_notifications: _kiwi.global.i18n.translate('client_applets_settings_html5_notifications').fetch(),
-                enable_notifications: _kiwi.global.i18n.translate('client_applets_settings_enable_notifications').fetch()
-            };
-            this.$el = $(_.template($('#tmpl_applet_settings').html().trim(), text));
+            var template_vars = {
+                    tabs: _kiwi.global.i18n.translate('client_applets_settings_channelview_tabs').fetch(),
+                    list: _kiwi.global.i18n.translate('client_applets_settings_channelview_list').fetch(),
+                    large_amounts_of_chans: _kiwi.global.i18n.translate('client_applets_settings_channelview_list_notice').fetch(),
+                    join_part: _kiwi.global.i18n.translate('client_applets_settings_notification_joinpart').fetch(),
+                    timestamps: _kiwi.global.i18n.translate('client_applets_settings_timestamp').fetch(),
+                    mute: _kiwi.global.i18n.translate('client_applets_settings_notification_sound').fetch(),
+                    emoticons: _kiwi.global.i18n.translate('client_applets_settings_emoticons').fetch(),
+                    scroll_history: _kiwi.global.i18n.translate('client_applets_settings_history_length').fetch(),
+                    languages: _kiwi.app.translations,
+                    default_client: _kiwi.global.i18n.translate('client_applets_settings_default_client').fetch(),
+                    make_default: _kiwi.global.i18n.translate('client_applets_settings_default_client_enable').fetch(),
+                    locale_restart_needed: _kiwi.global.i18n.translate('client_applets_settings_locale_restart_needed').fetch(),
+                    default_note: _kiwi.global.i18n.translate('client_applets_settings_default_client_notice').fetch('<a href="chrome://settings/handlers">chrome://settings/handlers</a>'),
+                    html5_notifications: _kiwi.global.i18n.translate('client_applets_settings_html5_notifications').fetch(),
+                    enable_notifications: _kiwi.global.i18n.translate('client_applets_settings_enable_notifications').fetch(),
+                    theme_thumbnails: _.map(_kiwi.app.server_settings.client.themes, function (theme) {
+                        return _.template($('#tmpl_theme_thumbnail').html().trim(), theme);
+                    })
+                };
+
+            this.$el = $(_.template($('#tmpl_applet_settings').html().trim(), template_vars));
 
             if (!navigator.registerProtocolHandler) {
                 this.$el.find('.protocol_handler').remove();
diff --git a/client/assets/src/index.html.tmpl b/client/assets/src/index.html.tmpl
index 61c6efc..ba206e4 100644
--- a/client/assets/src/index.html.tmpl
+++ b/client/assets/src/index.html.tmpl
@@ -173,28 +173,22 @@
         </div>
     </script>
 
+    <script type="text/html" id="tmpl_theme_thumbnail">
+        <a class="thumbnail" data-setting="theme" data-value="<%= name.toLowerCase() %>" href="#">
+            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: <%= thumbnail_colour %>;"></div></div>
+            <div class="caption"><u><%= name %></u></div>
+        </a>
+    </script>
+
     <script type="text/html" id="tmpl_applet_settings">
         <div class="settings_container">
             <section>
                 <h6>Theme</h6>
                 <div class="control-group">
                     <div class="thumbnails">
-                        <a class="thumbnail" data-setting="theme" data-value="relaxed" href="#">
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>
-                            <div class="caption"><u>Relaxed</u></div>
-                        </a>
-                        <a class="thumbnail" data-setting="theme" data-value="mini" href="#">
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #fff;"></div></div>
-                            <div class="caption"><u>Mini</u></div>
-                        </a>
-                        <a class="thumbnail" data-setting="theme" data-value="cli" href="#">
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #222;"></div></div>
-                            <div class="caption"><u>CLI</u></div>
-                        </a>
-                        <a class="thumbnail" data-setting="theme" data-value="basic" href="#">
-                            <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>
-                            <div class="caption"><u>Basic</u></div>
-                        </a>
+                        <% _.forEach(theme_thumbnails, function(thumbnail) { %>
+                            <%= thumbnail %>
+                        <% }); %>
                     </div>
                 </div>
             </section>
diff --git a/client/assets/src/themes/basic/theme.json b/client/assets/src/themes/basic/theme.json
new file mode 100644
index 0000000..f88b50d
--- /dev/null
+++ b/client/assets/src/themes/basic/theme.json
@@ -0,0 +1,4 @@
+{
+	"name": "Basic",
+	"thumbnail_colour": "#e7e7e7"
+}
\ No newline at end of file
diff --git a/client/assets/src/themes/cli/theme.json b/client/assets/src/themes/cli/theme.json
new file mode 100644
index 0000000..e70afca
--- /dev/null
+++ b/client/assets/src/themes/cli/theme.json
@@ -0,0 +1,4 @@
+{
+	"name": "CLI",
+	"thumbnail_colour": "#222"
+}
\ No newline at end of file
diff --git a/client/assets/src/themes/mini/theme.json b/client/assets/src/themes/mini/theme.json
new file mode 100644
index 0000000..47c54ff
--- /dev/null
+++ b/client/assets/src/themes/mini/theme.json
@@ -0,0 +1,4 @@
+{
+	"name": "Mini",
+	"thumbnail_colour": "#fff"
+}
\ No newline at end of file
diff --git a/client/assets/src/themes/relaxed/theme.json b/client/assets/src/themes/relaxed/theme.json
new file mode 100644
index 0000000..3535a1a
--- /dev/null
+++ b/client/assets/src/themes/relaxed/theme.json
@@ -0,0 +1,4 @@
+{
+	"name": "Relaxed",
+	"thumbnail_colour": "#e7e7e7"
+}
\ No newline at end of file
diff --git a/server/httphandler.js b/server/httphandler.js
index bed9b49..80bec4c 100644
--- a/server/httphandler.js
+++ b/server/httphandler.js
@@ -308,33 +308,70 @@ function generateSettings(request, debug, callback) {
         vars.client_plugins = config.get().client_plugins;
     }
 
-    // Get a list of available translations
-    fs.readFile(__dirname + '/../client/assets/src/translations/translations.json', function (err, translations) {
+    // Read theme information
+    readThemeInfo(vars.server_settings.client.themes, function (err, themes) {
         if (err) {
             return callback(err);
         }
+        
+        vars.server_settings.client.themes = themes;
 
-        var translation_files;
-        translations = JSON.parse(translations);
-        fs.readdir(__dirname + '/../client/assets/src/translations/', function (err, pofiles) {
-            var hash, settings;
+        // Get a list of available translations
+        fs.readFile(__dirname + '/../client/assets/src/translations/translations.json', function (err, translations) {
             if (err) {
                 return callback(err);
             }
 
-            pofiles.forEach(function (file) {
-                var locale = file.slice(0, -3);
-                if ((file.slice(-3) === '.po') && (locale !== 'template')) {
-                    vars.translations.push({tag: locale, language: translations[locale]});
+            translations = JSON.parse(translations);
+            fs.readdir(__dirname + '/../client/assets/src/translations/', function (err, pofiles) {
+                var settings;
+                if (err) {
+                    return callback(err);
                 }
-            });
 
-            settings = cached_settings[debug?'debug':'production'];
-            settings.settings = JSON.stringify(vars);
-            settings.hash = crypto.createHash('md5').update(settings.settings).digest('hex');
+                pofiles.forEach(function (file) {
+                    var locale = file.slice(0, -3);
+                    if ((file.slice(-3) === '.po') && (locale !== 'template')) {
+                        vars.translations.push({tag: locale, language: translations[locale]});
+                    }
+                });
+
+                settings = cached_settings[debug?'debug':'production'];
+                settings.settings = JSON.stringify(vars);
+                settings.hash = crypto.createHash('md5').update(settings.settings).digest('hex');
 
-            return callback(null, settings);
+                return callback(null, settings);
+            });
         });
     });
 }
 
+function readThemeInfo(themes, prev, callback) {
+    "use strict";
+    var theme = themes.shift();
+
+    if (typeof prev === 'function') {
+        callback = prev;
+        prev = [];
+    }
+
+    fs.readFile(__dirname + '/../client/assets/src/themes/' + theme.toLowerCase() + '/theme.json', function (err, theme_json) {
+        if (err) {
+            return callback(err);
+        }
+
+        try {
+            theme_json = JSON.parse(theme_json);
+        } catch (e) {
+            return callback(e);
+        }
+
+        prev.push(theme_json);
+
+        if (themes.length > 0) {
+            return readThemeInfo(themes, prev, callback);
+        }
+
+        callback(null, prev);
+    });
+}
-- 
2.25.1