cytoplasm 0.2.6 → 0.2.7

data/app/assets/javascripts/cytoplasm/cytoplasm.js.erb

@@ -161,7 +161,7 @@ var Cytoplasm;
 			// Set variables
 			var boldweight = (vars.fonts.faces.bold==vars.fonts.faces.regular)?"bold":"normal";
 			var lightweight = (vars.fonts.faces.light==vars.fonts.faces.regular)?"lighter":"normal";
-			var styletag = "body{margin:0;height:100%;overflow-y:scroll}h1,h2,h3,h4,h5,h6{margin:20px 0}header{overflow:hidden;h1{margin:0;white-space:nowrap;cursor:pointer;display:inline;text-shadow:0 0 10px rgba(0,0,0,0.5)}#logo{z-index:1000}}nav{ul{padding:0;list-style:none;li{display:inline-block}}}#main_content{min-height:400px;background:white;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.8);clear:both;&>:first-child{margin-top:0;padding-top:0}&>:last-child{margin-bottom:0;padding-bottom:0}}footer{overflow:hidden}table.cytoTable{width:100%;margin-bottom:15px;box-shadow:0 0 10px rgba(0,0,0,0.5);td{padding:10px;&.labelcell{width:100px}&>h1,&>h2,&>h3,&>h4,&>h5,&>h6{margin:0;padding:0}}}.cytoField{width:100%;border:1px solid #aaa;border-radius:5px;font-size:14px;box-shadow:inset 0 0 5px rgba(0,0,0,0.25);&[type=text],&[type=password],&[type=email]{height:28px;padding:0 7px}}textarea.cytoField{resize:none;height:200px;padding:7px}button,input[type=submit]{&.cytoButton{border-radius:5px;cursor:pointer;&.large{width:100%;height:50px}}}";
+			var styletag = "body{margin:0;height:100%;overflow-y:scroll}h1,h2,h3,h4,h5,h6{margin:20px 0}header{overflow:hidden;h1{margin:0;white-space:nowrap;cursor:pointer;display:inline;text-shadow:0 0 10px rgba(0,0,0,0.5)}#logo{z-index:1000}}nav{ul{padding:0;list-style:none;li{display:inline-block}}}section{min-height:400px;background:white;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.8);clear:both;&>:first-child{margin-top:0;padding-top:0}&>:last-child{margin-bottom:0;padding-bottom:0}}footer{overflow:hidden}table.cytoTable{width:100%;margin-bottom:15px;box-shadow:0 0 10px rgba(0,0,0,0.5);td{padding:10px;&.labelcell{width:100px}&>h1,&>h2,&>h3,&>h4,&>h5,&>h6{margin:0;padding:0}}}.cytoField{width:100%;border:1px solid #aaa;border-radius:5px;font-size:14px;box-shadow:inset 0 0 5px rgba(0,0,0,0.25);&[type=text],&[type=password],&[type=email]{height:28px;padding:0 7px}}textarea.cytoField{resize:none;height:200px;padding:7px}button,input[type=submit]{&.cytoButton{border-radius:5px;cursor:pointer;&.large{width:100%;height:50px}}}";
 			var styles = $.extend(true,{},{
 				body:{
 					background:vars.colors.global.background,
@@ -192,25 +192,46 @@ var Cytoplasm;
 				header:{
 					margin:vars.layout.header.margin,
 					padding:vars.layout.header.padding,
+					height:vars.layout.header.height,
+					background:vars.colors.header.background,
+					color:vars.colors.header.text,
 					'#logo':{
 						position:vars.layout.header.logo.position,
 						top:vars.layout.header.logo.y+10
 					},
 					h1:{
-						color:"contrast("+vars.colors.global.background+",black,white)",
+						color:"contrast("+vars.colors.header.text+",black,white)",
 						"&:hover":{
 							color:vars.colors.global.accent
 						}
 					}
 				},
-				'#main_content':{
-					margin:vars.layout.content.margin,
-					padding:vars.layout.content.padding
+				section:{
+					background:vars.colors.section.background,
+					color:vars.colors.section.text,
+					margin:vars.layout.section.margin,
+					padding:vars.layout.section.padding
 				},
-				'footer':{
+				footer:{
+					background:vars.colors.footer.background,
+					color:vars.colors.footer.text,
 					margin:vars.layout.footer.margin,
 					padding:vars.layout.footer.padding
 				},
+				a:{
+					'&:link':{
+						color:vars.colors.links.unvisited.text
+					},
+					'&:visited':{
+						color:vars.colors.links.visited.text
+					},
+					'&:hover':{
+						color:vars.colors.links.hover.text
+					},
+					'&:active':{
+						color:vars.colors.links.active.text
+					}
+				},
 				'table.cytoTable':{
 					background:vars.colors.plugins.cytoTable.background,
 					table:{
@@ -218,7 +239,7 @@ var Cytoplasm;
 					},
 					td:{
 						border:vars.colors.plugins.cytoTable.border,
-						"&.labelcell":{"font-size":vars.fonts.sizes.small}
+						"&[data-type=label]":{"font-size":vars.fonts.sizes.small}
 					}
 				},
 				'.cytoField':{"font-family":vars.fonts.faces.regular},
@@ -230,6 +251,12 @@ var Cytoplasm;
 						background:reverseGradient(vars.colors.plugins.cytoButton.background),
 						"box-shadow":vars.layout.plugins.cytoButton.shadow
 					}
+				},
+				'.cytoColorPicker-wrapper':{
+					'.ui-slider[data-attr=hue]':{
+						background:"linear-gradient(to right,#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
+						"box-shadow":"inset 0px 0px 5px hsla(0,0%,0%,0.5)"
+					}
 				}
 			},userstyles);
 			
@@ -240,7 +267,7 @@ var Cytoplasm;
 				var hRange = huge - normal;
 				$.each([1,2,3,4,5,6],function(i,num){
 					if (verbose) console.log("----- H"+num+" -----");
-					var factor = Math.pow(vars.fonts.sizes.heading_factor,i);
+					var factor = Math.pow(vars.fonts.heading_factor,i);
 					if (verbose) console.log("Factor: "+factor);
 					var size = parseInt(vars.fonts.sizes.normal) + (hRange/factor);
 					if (verbose) console.log("Size: "+size);
@@ -298,7 +325,7 @@ var Cytoplasm;
 	$.Cytoplasm = function(method){
 		if (methods[method]) return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
 		else if (typeof method == 'object' || !method) return methods.init.apply(this,arguments);
-		else $.error('Method ' + method + ' does not exist on jQuery.Cytoplasm!');
+		else $.error('Method ' + method + ' does not exist on $.Cytoplasm!');
 	};
 	
 	$.Cytoplasm();

data/app/assets/javascripts/cytoplasm/jquery.color-2.1.0.min.js

@@ -0,0 +1,2 @@
+/*! jQuery Color v@2.1.0 http://github.com/jquery/jquery-color | jquery.org/license */
+(function(a,b){function m(a,b,c){var d=h[b.type]||{};return a==null?c||!b.def?null:b.def:(a=d.floor?~~a:parseFloat(a),isNaN(a)?b.def:d.mod?(a+d.mod)%d.mod:0>a?0:d.max<a?d.max:a)}function n(b){var c=f(),d=c._rgba=[];return b=b.toLowerCase(),l(e,function(a,e){var f,h=e.re.exec(b),i=h&&e.parse(h),j=e.space||"rgba";if(i)return f=c[j](i),c[g[j].cache]=f[g[j].cache],d=c._rgba=f._rgba,!1}),d.length?(d.join()==="0,0,0,0"&&a.extend(d,k.transparent),c):k[b]}function o(a,b,c){return c=(c+1)%1,c*6<1?a+(b-a)*c*6:c*2<1?b:c*3<2?a+(b-a)*(2/3-c)*6:a}var c="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",d=/^([\-+])=\s*(\d+\.?\d*)/,e=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1]*2.55,a[2]*2.55,a[3]*2.55,a[4]]}},{re:/#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}},{re:/#([a-f0-9])([a-f0-9])([a-f0-9])/,parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(a){return[a[1],a[2]/100,a[3]/100,a[4]]}}],f=a.Color=function(b,c,d,e){return new a.Color.fn.parse(b,c,d,e)},g={rgba:{props:{red:{idx:0,type:"byte"},green:{idx:1,type:"byte"},blue:{idx:2,type:"byte"}}},hsla:{props:{hue:{idx:0,type:"degrees"},saturation:{idx:1,type:"percent"},lightness:{idx:2,type:"percent"}}}},h={"byte":{floor:!0,max:255},percent:{max:1},degrees:{mod:360,floor:!0}},i=f.support={},j=a("<p>")[0],k,l=a.each;j.style.cssText="background-color:rgba(1,1,1,.5)",i.rgba=j.style.backgroundColor.indexOf("rgba")>-1,l(g,function(a,b){b.cache="_"+a,b.props.alpha={idx:3,type:"percent",def:1}}),f.fn=a.extend(f.prototype,{parse:function(c,d,e,h){if(c===b)return this._rgba=[null,null,null,null],this;if(c.jquery||c.nodeType)c=a(c).css(d),d=b;var i=this,j=a.type(c),o=this._rgba=[],p;d!==b&&(c=[c,d,e,h],j="array");if(j==="string")return this.parse(n(c)||k._default);if(j==="array")return l(g.rgba.props,function(a,b){o[b.idx]=m(c[b.idx],b)}),this;if(j==="object")return c instanceof f?l(g,function(a,b){c[b.cache]&&(i[b.cache]=c[b.cache].slice())}):l(g,function(b,d){var e=d.cache;l(d.props,function(a,b){if(!i[e]&&d.to){if(a==="alpha"||c[a]==null)return;i[e]=d.to(i._rgba)}i[e][b.idx]=m(c[a],b,!0)}),i[e]&&a.inArray(null,i[e].slice(0,3))<0&&(i[e][3]=1,d.from&&(i._rgba=d.from(i[e])))}),this},is:function(a){var b=f(a),c=!0,d=this;return l(g,function(a,e){var f,g=b[e.cache];return g&&(f=d[e.cache]||e.to&&e.to(d._rgba)||[],l(e.props,function(a,b){if(g[b.idx]!=null)return c=g[b.idx]===f[b.idx],c})),c}),c},_space:function(){var a=[],b=this;return l(g,function(c,d){b[d.cache]&&a.push(c)}),a.pop()},transition:function(a,b){var c=f(a),d=c._space(),e=g[d],i=this.alpha()===0?f("transparent"):this,j=i[e.cache]||e.to(i._rgba),k=j.slice();return c=c[e.cache],l(e.props,function(a,d){var e=d.idx,f=j[e],g=c[e],i=h[d.type]||{};if(g===null)return;f===null?k[e]=g:(i.mod&&(g-f>i.mod/2?f+=i.mod:f-g>i.mod/2&&(f-=i.mod)),k[e]=m((g-f)*b+f,d))}),this[d](k)},blend:function(b){if(this._rgba[3]===1)return this;var c=this._rgba.slice(),d=c.pop(),e=f(b)._rgba;return f(a.map(c,function(a,b){return(1-d)*e[b]+d*a}))},toRgbaString:function(){var b="rgba(",c=a.map(this._rgba,function(a,b){return a==null?b>2?1:0:a});return c[3]===1&&(c.pop(),b="rgb("),b+c.join()+")"},toHslaString:function(){var b="hsla(",c=a.map(this.hsla(),function(a,b){return a==null&&(a=b>2?1:0),b&&b<3&&(a=Math.round(a*100)+"%"),a});return c[3]===1&&(c.pop(),b="hsl("),b+c.join()+")"},toHexString:function(b){var c=this._rgba.slice(),d=c.pop();return b&&c.push(~~(d*255)),"#"+a.map(c,function(a,b){return a=(a||0).toString(16),a.length===1?"0"+a:a}).join("")},toString:function(){return this._rgba[3]===0?"transparent":this.toRgbaString()}}),f.fn.parse.prototype=f.fn,g.hsla.to=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/255,c=a[1]/255,d=a[2]/255,e=a[3],f=Math.max(b,c,d),g=Math.min(b,c,d),h=f-g,i=f+g,j=i*.5,k,l;return g===f?k=0:b===f?k=60*(c-d)/h+360:c===f?k=60*(d-b)/h+120:k=60*(b-c)/h+240,j===0||j===1?l=j:j<=.5?l=h/i:l=h/(2-i),[Math.round(k)%360,l,j,e==null?1:e]},g.hsla.from=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/360,c=a[1],d=a[2],e=a[3],f=d<=.5?d*(1+c):d+c-d*c,g=2*d-f,h,i,j;return[Math.round(o(g,f,b+1/3)*255),Math.round(o(g,f,b)*255),Math.round(o(g,f,b-1/3)*255),e]},l(g,function(c,e){var g=e.props,h=e.cache,i=e.to,j=e.from;f.fn[c]=function(c){i&&!this[h]&&(this[h]=i(this._rgba));if(c===b)return this[h].slice();var d,e=a.type(c),k=e==="array"||e==="object"?c:arguments,n=this[h].slice();return l(g,function(a,b){var c=k[e==="object"?a:b.idx];c==null&&(c=n[b.idx]),n[b.idx]=m(c,b)}),j?(d=f(j(n)),d[h]=n,d):f(n)},l(g,function(b,e){if(f.fn[b])return;f.fn[b]=function(f){var g=a.type(f),h=b==="alpha"?this._hsla?"hsla":"rgba":c,i=this[h](),j=i[e.idx],k;return g==="undefined"?j:(g==="function"&&(f=f.call(this,j),g=a.type(f)),f==null&&e.empty?this:(g==="string"&&(k=d.exec(f),k&&(f=j+parseFloat(k[2])*(k[1]==="+"?1:-1))),i[e.idx]=f,this[h](i)))}})}),f.hook=function(b){var c=b.split(" ");l(c,function(b,c){a.cssHooks[c]={set:function(b,d){var e,g,h="";if(a.type(d)!=="string"||(e=n(d))){d=f(e||d);if(!i.rgba&&d._rgba[3]!==1){g=c==="backgroundColor"?b.parentNode:b;while((h===""||h==="transparent")&&g&&g.style)try{h=a.css(g,"backgroundColor"),g=g.parentNode}catch(j){}d=d.blend(h&&h!=="transparent"?h:"_default")}d=d.toRgbaString()}try{b.style[c]=d}catch(d){}}},a.fx.step[c]=function(b){b.colorInit||(b.start=f(b.elem,c),b.end=f(b.end),b.colorInit=!0),a.cssHooks[c].set(b.elem,b.start.transition(b.end,b.pos))}})},f.hook(c),a.cssHooks.borderColor={expand:function(a){var b={};return l(["Top","Right","Bottom","Left"],function(c,d){b["border"+d+"Color"]=a}),b}},k=a.Color.names={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}})(jQuery);

data/app/controllers/cytoplasm/settings_controller.rb

@@ -22,8 +22,9 @@ module Cytoplasm
 		end
 		
 		def update
-			Cytoplasm.save_config(params)
-			redirect_to cytoplasm_advanced_config_url
+			conf = params.except(":action",":controller")
+			Cytoplasm.save_config(conf)
+			redirect_to cytoplasm_settings_url
 		end
 		
 		def fetch_vars

data/app/views/cytoplasm/fonts/_li.html.erb

@@ -1,7 +1,10 @@
-<% f["variants"] = f["familyinfo"] if dir == "fontsquirrel" %>
-<li data-family="<%=fam%>" data-directory="<%=dir%>" data-uid="<%=uid = Cytoplasm.generate_uid()%>" style="padding:0px;list-style:none;margin:0px;">
-		<table class="cytoTable">
-			<tr><td colspan=2><h6><%=link_to(fam,cytoplasm_show_font_url(dir,fam))%></h6></td></tr>
+<%
+f["variants"] = f["familyinfo"] if dir == "fontsquirrel"
+enabled = Cytoplasm::FontsController.is_enabled?(dir,fam)
+%>
+<li data-family="<%=fam%>" data-directory="<%=dir%>" data-uid="<%=uid = Cytoplasm.generate_uid()%>" style="padding:0px;list-style:none;margin:0px 0px 15px;">
+		<table class="cytoTable" style="margin:0px;">
+			<tr><td data-type="header" data-tag="h2"><%=link_to(fam,cytoplasm_show_font_url(dir,fam))%></td></tr>
 			<% unless f["variants"].nil? or f["variants"].empty? %><% f["variants"].each do |v| %>
 				<tr>
 					<% if dir=="fontsquirrel" %>
@@ -11,13 +14,19 @@
 						<td class="labelcell"><%=v%>:</td>
 						<td style="background:white;text-align:center;"><span class="gwf-preview" style="font-family:'<%=fam%>';font-size:48px;font-weight:<%=v%>;">AaBbCcDdEeFfGgHhIiJjKk</span></td>
 					<% end %>
+					<td class="iconcell"><%=image_tag("cytoplasm/actions-circle-"+((!enabled)?"add":"remove")+"-1.png")%></td>
+					<td class="iconcell"><%=image_tag("cytoplasm/artwork-paintroll.png")%></td>
+					<td class="iconcell"><%=image_tag("cytoplasm/edition-delete-1.png")%></td>
 				</tr>
 			<% end end %>
 			<tr>
-				<td colspan=2>
+				<td data-type="info">
 					<%=link_to("Details",((dir=="fontsquirrel")?"http://www.fontsquirrel.com/fonts/":"http://www.google.com/webfonts/specimen/")+fam,:class => "font_details",:target => "_blank")%> | 
-					<%=link_to("Preview","#",:class => "font_preview")%> | 
-					<%=link_to((Cytoplasm::FontsController.is_enabled?(dir,fam))?"Disable":"Enable","#",:class => "font_enable_disable")%> | 
+					<% if enabled %>
+						<%=link_to("Preview","#",:class => "font_preview")%> | 
+						<%=link_to("Set as...","#",:class => "font_set")%> | 
+					<% end %>
+					<%=link_to((enabled)?"Disable":"Enable","#",:class => "font_enable_disable")%> | 
 					<%=link_to("Uninstall","#",:class => "font_uninstall")%>
 				</td>
 			</tr>
@@ -28,6 +37,28 @@
 (function($){
 	$.Cytoplasm("ready",function(){
 		
+		$('[data-uid="<%=uid%>"] .font_preview').click(function(e){
+			e.preventDefault();
+			
+		});
+		
+		$('[data-uid="<%=uid%>"] .font_set').click(function(e){
+			e.preventDefault();
+			var opts = {};
+			<% Cytoplasm.vars()[:fonts][:faces].each do |style,currentFace| %>
+			$
+				opts["<%=style.capitalize%> (<%=currentFace%>)"] = function(e){
+					alert("<%=style%>");
+					/*$.post("<%=cytoplasm_update_url%>",{style:"<%=style%>"},function(data){
+						$.cytoAjaxResponse("");
+					});*/
+				};
+			<% end %>
+			$(this).CytoMenu({
+				options:opts
+			});
+		});
+		
 		$('[data-uid="<%=uid%>"] .font_enable_disable').click(function(e){
 			e.preventDefault();
 			var $this = $(this);
@@ -48,7 +79,7 @@
 			} else return false;
 		});
 		
-		$('.font_uninstall').click(function(e){
+		$('[data-uid="<%=uid%>"] .font_uninstall').click(function(e){
 			e.preventDefault();
 			var $this = $(this);
 			var li = $this.parents("li");

data/app/views/cytoplasm/fonts/_style_list.html.erb

@@ -1,45 +1,84 @@
-<table class="cytoTable">
-	<tr><td class='headercell' colspan=2><h3>Fonts</h3></td></tr>
-	<tr><td class='infocell' colspan=2>Select individual fonts below if desired.</td></tr>
-	<tr><td class='headercell' colspan=2><h4>Font Faces</h4></td></tr>
-	<% ['Light','Regular','Bold'].each do |style| %>
-	<tr>
-		<td class='labelcell'><%=style%>:</td>
-		<td>
-			<a href="#" target="_blank" class="font-preview"><img src="" style="display:none" /></a>
-			<select data-exclude="true" name="fonts_<%=style.downcase%>_family" class="ind_font_fam_select cytoSelect">
-				<option value="Arial, Helvetica, sans-serif">Arial</option>
-				<option value="Arial Black, Gadget, sans-serif">Arial Black</option>
-				<option value="Comic Sans MS, cursive">Comic Sans MS</option>
-				<option value="Courier New, monospace">Courier New</option>
-				<option value="Georgia, serif">Georgia</option>
-				<option value="Impact, Charcoal">Impact</option>
-				<option value="Lucida Console, Monaco, monospace">Lucida Console</option>
-				<option value="Lucida Sans Unicode, Lucida Grande, sans-serif">Lucida Sans Unicode</option>
-				<option value="Palatino Linotype, Book Antiqua, Palatino, serif">Palatino Linotype</option>
-				<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
-				<option value="Times New Roman, Times, serif">Times New Roman</option>
-				<option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
-				<option value="Verdana, Geneva, sans-serif">Verdana</option>
-			</select>
-			<select name="fonts_<%=style.downcase%>" id="fontselect_<%=style.downcase%>" class="ind_font_select cytoSelect" data-style="<%=style%>"></select>
-		</td>
-	</tr>
-	<% end %>
-	<tr><td class='headercell' colspan=2><h4>Font Sizes</h4></td></tr>
-	
-	<% ['Small','Normal','Bold'].each do |size| %>
-	<tr>
-		<td class='labelcell'>Font Sizes:</td>
-		<td><input type="hidden" name="fonts_sizes_<%=size.downcase%>" class="cytoSlider" data-label="<%=size%>" data-unit="px" /></td>
-	</tr>
-	<% end %>
-</table>
+<%
+styles = Cytoplasm.vars()[:fonts][:faces].keys
+sizes = Cytoplasm.vars()[:fonts][:sizes]
+%>
+<form id="cytoplasm_fonts_settings_form" action="<%=cytoplasm_update_url%>" method="post">
+	<table class="cytoTable">
+		<tr><td class='headercell' colspan=2><h3>Typography Settings</h3></td></tr>
+		<tr><td class='infocell' colspan=2>Select individual fonts below if desired.</td></tr>
+		
+		<tr><td class='headercell' colspan=2><h4>Font Faces</h4></td></tr>
+		<% styles.each do |style| %>
+		<tr>
+			<td class='labelcell'><%=style.capitalize%>:</td>
+			<td>
+				<a href="#" target="_blank" class="font-preview"><img src="" style="display:none" /></a>
+				<select data-exclude="true" class="ind_font_fam_select cytoSelect">
+					<option value="Arial, Helvetica, sans-serif">Arial</option>
+					<option value="Arial Black, Gadget, sans-serif">Arial Black</option>
+					<option value="Comic Sans MS, cursive">Comic Sans MS</option>
+					<option value="Courier New, monospace">Courier New</option>
+					<option value="Georgia, serif">Georgia</option>
+					<option value="Impact, Charcoal">Impact</option>
+					<option value="Lucida Console, Monaco, monospace">Lucida Console</option>
+					<option value="Lucida Sans Unicode, Lucida Grande, sans-serif">Lucida Sans Unicode</option>
+					<option value="Palatino Linotype, Book Antiqua, Palatino, serif">Palatino Linotype</option>
+					<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
+					<option value="Times New Roman, Times, serif">Times New Roman</option>
+					<option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
+					<option value="Verdana, Geneva, sans-serif">Verdana</option>
+				</select>
+				<select name="fonts[faces][<%=style%>]" id="fontselect_<%=style%>" class="ind_font_select cytoSelect" data-style="<%=style.capitalize%>"></select>
+			</td>
+		</tr>
+		<% end %>
+		
+		<tr><td class='headercell' colspan=2><h4>Sizing</h4></td></tr>
+		<tr>
+			<td class='labelcell'>Font Sizes:</td>
+			<td>
+				<% sizes.each do |size,value| %>
+					<input type="hidden" name="fonts[sizes][<%=size%>]" class="cytoSlider" value="<%=value%>" data-label="<%=size.capitalize%>" data-unit="px" />
+				<% end %>
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Other:</td>
+			<td>
+				<input type="hidden" name="fonts[heading_factor]" class="cytoSlider" data-label="Heading Factor" data-max="5" data-step="0.01" />
+				<p style="font-size:<%=Cytoplasm.vars("fonts.sizes.small")%>">The <b>Heading Factor</b> is used to calculate the font sizes for h1-h6 tags. H1 tags use the "Huge" size above; h6 tags use the "Normal" size. The higher you set the Heading Factor, the quicker the descent from "Huge" to "Normal" for the font sizes of the remaining heading tags.</p>
+			</td>
+		</tr>
+		
+		<tr><td colspan=2><button class="cytoButton large">Save Settings</button></td></tr>
+	</table>
+</form>
 
 <script type="text/javascript">
 (function($){
 	$.Cytoplasm("ready",function(){
+		var getInput = function(key){return $('input[name="'+key+'"]');};
+		var layoutFontUpdate = function(){
+			$.Cytoplasm("setStyles",{
+				"body":{
+					"font-family":getInput("fonts[faces][regular]"),
+					"font-size":getInput("fonts[sizes][normal]")
+				}
+			});
+		};
+		
+		// Font selects
+		<% styles.each do |face| %>
+		
+		<% end %>
+		
+		// Font size sliders
+		<% sizes.keys.each do |size| %>
+		$('input[name="fonts[sizes][<%=size%>]"]').cytoSlider("options",{events:{change:function(cy){cy.widget.label.element.css("font-size",$(this).val());}}});
+		<% end %>
 		
+		// Heading Factor slider
+		$('input[name="fonts[heading_factor]"]').cytoSlider("value",$.Cytoplasm("vars","fonts.heading_factor"));
 	});
 })(jQuery);
 </script>

data/app/views/cytoplasm/settings/_colors.html.erb

@@ -1,62 +1,97 @@
+<%
+containers = {'header' => 'Header', 'section' => 'Content Section', 'footer' => 'Footer'}
+links = ['unvisited','visited','hover','active']
+%>
 <table class="cytoTable">
 	<tr><td class='headercell' colspan=2><h3>Color Palette</h3></td></tr>
-	<% ['Background','Text','Accent'].each do |color| %>
+	<% ['background','text','accent'].each do |color| %>
 		<tr>
-			<td class='labelcell'><%=color%> Color:</td>
-			<td><input type="colorpicker" name="colors[global][<%=color.downcase%>]" class="cytoColorPicker" /></td>
+			<td class='labelcell'><%=color.capitalize%> Color:</td>
+			<td><input type="colorpicker" name="colors[global][<%=color%>]" value="<%=Cytoplasm.vars("colors.global."+color)%>" /></td>
 		</tr>
 	<% end %>
+	<tr><td class='headercell' colspan=2><h3>Containers</h3></td></tr>
+	<% containers.each do |key,label| %>
+	<tr>
+		<td class="labelcell"><%=label%>:</td>
+		<td>
+			<% ['background','text'].each do |color| %>
+				<label for="colors[<%=key%>][<%=color%>]"><%=color.capitalize%>:</label>
+				<input type="colorpicker" name="colors[<%=key%>][<%=color%>]" value="<%=Cytoplasm.vars("colors."+key+"."+color)%>" />
+			<% end %>
+		</td>
+	</tr>
+	<% end %>
+	<tr><td class='headercell' colspan=2><h3>Links</h3></td></tr>
+	<% links.each do |link| %>
+		<tr>
+			<td class="labelcell"><%=link.capitalize%>:</td>
+			<td>
+				<label for="colors[link][<%=link%>][text]">Text:</label>
+				<input type="colorpicker" name="colors[link][<%=link%>][text]" value="<%=Cytoplasm.vars("colors.link."+link+".text")%>" />
+			</td>
+		</tr>
+	<% end %>
+	<tr><td class='headercell' colspan=2><h3>Plugins</h3></td></tr>
+	<% {"cytoTable" => ["background","text"],"cytoField" => ["background","text"],"cytoSelect" => ["background","text"],"cytoRadio" => ["background","text"],"cytoUpload" => ["background","text"],"cytoSlider" => ["text"]}.each do |plugin,colors| %>
+	<tr>
+		<td class="labelcell"><%=plugin.capitalize%>:</td>
+		<td>
+			<% colors.each do |color| %>
+				<label for="colors[plugins][<%=plugin%>][<%=color%>]"><%=color.capitalize%>:</label>
+				<input type="colorpicker" name="colors[plugins][<%=plugin%>][<%=color%>]" value="<%=Cytoplasm.vars("colors.plugins."+plugin+"."+color)%>" />
+			<% end %>
+		</td>
+	</tr>
+	<% end %>
 </table>
 
 <script type="text/javascript">
 (function($){
 	$.Cytoplasm("ready",function(){
 		// Color Pickers
-		var colorTweak = function(color,h,s,l,a) {
-			if (color==null || h==null) return color;
-			if (s==null) s=0;
-			if (l==null) l=0;
-			if (a==null) a=1;
-			color = color.hue(color.hue()+h).saturation(color.saturation()+s).lightness(color.lightness()+l).alpha(a);
-			return color.toHslaString();
-		};
-		var percentToDecimal = function(percent) {return parseInt(percent)/100;};
+		var getVal = function(key){return $('input[name="'+key+'"]').cytoColorPicker("value");};
 		var layoutColorUpdate = function() {
-			var bg = $('input[name="colors[global][background]"]').val();
-			var text = $('input[name="colors[global][text]"]').val();
-			var accent = $('input[name="colors[global][accent]"]').val();
-			try {
-				bg = $.Color(bg);
-				text = $.Color(text);
-				accent = $.Color(accent);
-				var l = (bg.lightness!=null) ? parseFloat(bg.lightness()) : 0;
-				$('body').css({
-					"background-color":bg,
-					color:text
-				});
-				$('.formTable td').css({
-					"background-color":colorTweak(color,0,0,percentToDecimal($('input[name=colors_table_background_offset]').val()),percentToDecimal($('input[name=colors_table_opacity_offset]').val())),
-					"border-color":colorTweak(color,0,0,percentToDecimal($('input[name=colors_table_border_offset]').val()))
-				});
-				/*$('button').css({
-					"border-color":"1px solid "+((l<0.5)?colorTweak(color,0,0,percentToDecimal($('input[name=button_border_offset]').val())):"#333333"),
-					"background":"linear-gradient(to bottom,"+colorTweak(color,0,0,percentToDecimal($('input[name=button_gradient_amount]').val()))+" 0%,"+colorTweak(color,0,0,-percentToDecimal($('input[name=button_gradient_amount]').val()))+" 100%) no-repeat scroll 0 0 transparent",
-					"color":((l<0.5)?"white":"black")
-				});*/
-			} catch (e) {
-				console.warn("There was an error updating the layout! "+e);
-				return false;
-			}
+			$.Cytoplasm("setStyles",{
+				"body":{
+					"background":getVal("colors[global][background]"),
+					color:getVal("colors[global][text]")
+				},
+				"header":{
+					"background":getVal("colors[header][background]"),
+					color:getVal("colors[header][text]")
+				},
+				"section":{
+					"background":getVal("colors[section][background]"),
+					color:getVal("colors[section][text]")
+				},
+				"footer":{
+					"background":getVal("colors[footer][background]"),
+					color:getVal("colors[footer][text]")
+				},
+				"a":{
+					"&:link":{
+						color:getVal("colors[link][unvisited][text]")
+					},
+					"&:visited":{
+						color:getVal("colors[link][visited][text]")
+					},
+					"&:hover":{
+						color:getVal("colors[link][hover][text]")
+					},
+					"&:active":{
+						color:getVal("colors[link][active][text]")
+					}
+				}
+			});
 		};
 		
-		$('input[name="colors[global][background]"]').cytoColorPicker("value",$.Cytoplasm("vars","colors.global.background"));
-		$('input[name="colors[global][text]"]').cytoColorPicker("value",$.Cytoplasm("vars","colors.global.text"));
-		$('input[name="colors[global][accent]"]').cytoColorPicker("value",$.Cytoplasm("vars","colors.global.accent"));
-		
-		$('input[type=colorpicker]').cytoColorPicker("options",{events:{change:layoutColorUpdate}});
+		$('input[type=colorpicker]').cytoColorPicker({events:{change:layoutColorUpdate}});
 		
 		// Set up sliders
-		$.each(['colors_table_background_offset','colors_table_opacity_offset','colors_table_border_offset','button_gradient_amount','button_border_offset'],function(i,prop){$('input[name="'+prop+'"]').cytoSlider("options",{events:{change:layoutColorUpdate}});});
+		
+		$("input[name="+['colors_table_background_offset','colors_table_opacity_offset','colors_table_border_offset','button_gradient_amount','button_border_offset'].join("],input[name=")+"]").cytoSlider("options",{events:{change:layoutColorUpdate}});
+		
 	});
 })(jQuery);
 </script>