Phi: Add theme switch
This commit is contained in:
Torsten Dreyer
parent
b234ff7acb
commit
1c7825cc8f
6 changed files with 264 additions and 3 deletions
11
webgui/3rdparty/jquery/jquery.jui_theme_switch.min.js
vendored
Normal file
11
webgui/3rdparty/jquery/jquery.jui_theme_switch.min.js
vendored
Normal file
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
194
webgui/jquery-ui-themes.json
Normal file
194
webgui/jquery-ui-themes.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
|
|
@ -14,8 +14,8 @@ require.config({
|
|||
});
|
||||
|
||||
require([
|
||||
'knockout', 'jquery',
|
||||
], function(ko) {
|
||||
'knockout', 'jquery', 'themeswitch'
|
||||
], function(ko,jquery) {
|
||||
|
||||
function KnockProps(aliases) {
|
||||
|
||||
|
|
@ -287,4 +287,5 @@ require([
|
|||
});
|
||||
|
||||
ko.applyBindings(new PhiViewModel());
|
||||
|
||||
});
|
||||
|
|
|
|||
18
webgui/mkthemes.sh
Normal file
18
webgui/mkthemes.sh
Normal file
|
|
@ -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 "]"
|
||||
|
||||
19
webgui/themeswitch.js
Normal file
19
webgui/themeswitch.js
Normal file
|
|
@ -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"
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue