Phi: Add theme switch

webgui/3rdparty/jquery/jquery.jui_theme_switch.min.js

@@ -0,0 +1,11 @@
+/**
+ * @fileOverview jui_theme_switch: jquery plugin to switch juery-ui themes
+ *               <p>License MIT
+ *               <br />Copyright 2012 Christos Pontikis <a href="http://pontikis.net">http://pontikis.net</a>
+ *               <br />Project page <a href="http://pontikis.net/labs/jui_theme_switch">http://pontikis.net/labs/jui_theme_switch</a>
+ *               <br />Minified using Online YUI Compressor http://www.refresh-sf.com/yui/
+ * @version 1.0.6 (21 Jan 2013)
+ * @author Christos Pontikis http://pontikis.net
+ * @requires jquery, jquery-ui
+ */
+"use strict";(function(e){var d="jui_theme_switch",c="jui_theme_switch_status";var a={init:function(f){var g=this;return this.each(function(){var k=g.data(d);if(typeof(k)=="undefined"){var n=g.jui_theme_switch("getDefaults");k=e.extend({},n,f)}else{k=e.extend({},k,f)}g.data(d,k);if(typeof g.data(c)==="undefined"){g.data(c,{});g.data(c)["selected_theme"]={}}g.unbind("onChangeTheme").bind("onChangeTheme",k.onChangeTheme);g.unbind("onDisplay").bind("onDisplay",k.onDisplay);var p=g.attr("id"),r,q,s="",h=b(k.switcher_id_prefix,p),u=b(k.switcher_label_id_prefix,p),t,m,w=e("#"+k.stylesheet_link_id),o="",l,j="",v="";e.ajax({url:k.datasource_url,dataType:"json",cache:false,success:function(i){r=i.length;s+='<label id="'+u+'" for="'+h+'">'+k.switcher_label+"</label>";s+='<select id="'+h+'" size="'+k.list_size+'">';for(q=0;q<r;q++){if(l=i[q]["active"]=="yes"||k.show_all=="yes"){if(k.use_groups=="yes"){l=i[q]["group"];if(l!==j){s+='<optgroup label="'+l+'">';j=l}}if(k.default_theme==i[q]["theme_name"]){g.data(c)["selected_theme"]=i[q];o=' selected="selected"'}else{o=""}v="";if(i[q].hasOwnProperty("hosted_locally")){if(i[q]["hosted_locally"]=="yes"){v=k.project_url}}s+='<option value="'+v+i[q]["theme_url"]+'"'+o+">";s+=i[q]["theme_name"];s+="</option>";if(k.use_groups=="yes"){if(q<r-1&&i[parseInt(q)+1]["group"]!==j){s+="</optgroup>"}}}}s+="</select>";g.html(s);m=e("#"+u);t=e("#"+h);m.removeClass().addClass(k.labelClass);t.removeClass().addClass(k.listClass);g.removeClass().addClass(k.containerClass);g.off("change",t).on("change",t,function(){w.attr("href",t.val());for(q=0;q<r;q++){if(e("#"+h+" option:selected").text()==i[q]["theme_name"]){g.data(c)["selected_theme"]=i[q];break}}g.triggerHandler("onChangeTheme",i[q])});g.triggerHandler("onDisplay")}})})},getDefaults:function(){return{switcher_label:"Select theme",default_theme:"ui-lightness",list_size:"1",use_groups:"yes",show_all:"no",project_url:"",containerClass:"switcher_container",labelClass:"switcher_label",listClass:"switcher_list",switcher_label_id_prefix:"lbl_",switcher_id_prefix:"switcher_",onChangeTheme:function(){},onDisplay:function(){}}},getOption:function(f){var g=this;return g.data(d)[f]},getAllOptions:function(){var f=this;return f.data(d)},setOption:function(f,i,h){var g=this;g.data(d)[f]=i;if(h){g.jui_theme_switch("init")}},refresh:function(){var f=this;f.jui_theme_switch()},destroy:function(){return e(this).each(function(){var f=e(this);f.removeData(d)})},getTheme:function(){var f=this;return f.data(c)["selected_theme"]}};var b=function(g,f){return g+f};e.fn.jui_theme_switch=function(g){if(this.size()!=1){var f="You must use this plugin ("+d+") with a unique element (at once)";this.html('<span style="color: red;">ERROR: '+f+"</span>");e.error(f)}if(a[g]){return a[g].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof g==="object"||!g){return a.init.apply(this,arguments)}else{e.error("Method "+g+" does not exist on jQuery."+d)}}}})(jQuery);

webgui/index.html

@@ -32,7 +32,7 @@
 
 <link rel="stylesheet" type="text/css" href="/Fonts/LiberationFonts/LiberationFonts.css">
 <link rel="stylesheet" href="3rdparty/leaflet-0.7.3/leaflet.css" />
-<link rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />
+<link id="ui-theme" rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />
 
 <style>
 * {
@@ -202,6 +202,23 @@ html, body, #wrapper {
 	padding: 5px;
 	overflow: scroll;
 }
+
+.switcher_container:before {
+  content: 'Theme';
+  padding-right: 0.5em;
+  color: white;
+}
+
+.switcher_container {
+padding-right: 5px;
+float: right;
+}
+.switcher_list {
+padding: 2px;
+}
+.switcher_label {
+display: none;
+}
 </style>
 
 <link href="widgets/radiostack.css" rel="stylesheet" type="text/css" />
@@ -222,6 +239,7 @@ html, body, #wrapper {
                    click: $root.selectTopic">
                     </li>
                 </ul>
+                <div id="ui-theme-switcher"></div>
             </div>
             <div id="htabs-content" data-bind="component: { name: selectedTopic }"></div>
         </div>

webgui/jquery-ui-themes.json

@@ -0,0 +1,194 @@
+[
+{
+"theme_name": "black-tie",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/black-tie/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "blitzer",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/blitzer/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "cupertino",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/cupertino/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "dark-hive",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/dark-hive/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "dot-luv",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/dot-luv/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "eggplant",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/eggplant/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "excite-bike",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/excite-bike/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "flick",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/flick/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "hot-sneaks",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/hot-sneaks/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "humanity",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/humanity/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "le-frog",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/le-frog/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "mint-choc",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/mint-choc/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "overcast",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/overcast/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "pepper-grinder",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/pepper-grinder/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "redmond",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/redmond/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "smoothness",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "south-street",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/south-street/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "start",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/start/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "sunny",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/sunny/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "swanky-purse",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/swanky-purse/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "trontastic",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/trontastic/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "ui-darkness",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/ui-darkness/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "ui-lightness",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/ui-lightness/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+},
+{
+"theme_name": "vader",
+"theme_url": "3rdparty/jquery-ui-themes-1.11.2/themes/vader/jquery-ui.css",
+"group": "Official",
+"active": "yes",
+"author": "jQuery Project",
+"license": "http://jquery.org/license"
+}
+]

webgui/main.js

@@ -14,8 +14,8 @@ require.config({
 });
 
 require([
-        'knockout', 'jquery',
+        'knockout', 'jquery', 'themeswitch'
-], function(ko) {
+], function(ko,jquery) {
 
     function KnockProps(aliases) {
 
@@ -287,4 +287,5 @@ require([
     });
 
     ko.applyBindings(new PhiViewModel());
+
 });

webgui/mkthemes.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+echo "["
+THEMES=`ls 3rdparty/jquery-ui-themes-1.11.2/themes/`
+set -- $THEMES
+while [ $# -gt 0 ]; do
+echo "{"
+echo "\"theme_name\": \"$1\","
+echo "\"theme_url\": \"3rdparty/jquiery-ui-themes-1.11.2/themes/$1/jquery-ui.css\","
+echo "\"group\": \"Official\","
+echo "\"active\": \"yes\","
+echo "\"author\": \"jQuery Project\","
+echo "\"license\": \"http://jquery.org/license\""
+echo "},"
+  shift
+done
+echo "]"
+

webgui/themeswitch.js

@@ -0,0 +1,19 @@
+require([
+        'jquery', 
+], function(jquery) {
+  // nested require to ensure jquery is ready before
+  // jui_theme_switch starts
+  require([
+        '3rdparty/jquery/jquery.jui_theme_switch.min'
+  ], function() {
+
+
+    $(function() {
+      $("#ui-theme-switcher").jui_theme_switch({
+        stylesheet_link_id: "ui-theme",
+        datasource_url: "jquery-ui-themes.json"
+      });
+    });
+});
+
+});