cytoplasm 0.3.1 → 0.3.3

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

@@ -51,6 +51,37 @@
 	};
 	$.CytoAjax = $.cytoAjax;
 	$.Cytoplasm("ready",function(){
+		
+		// Set styles
+		var vars = $.Cytoplasm("vars");
+		$.Cytoplasm("addStyles","cytoajax_styles",{
+			'.cytoResponseMessage':{
+				display:'none',
+				padding:"10px",
+				'margin-bottom':"10px",
+				"border-radius":"5px",
+				font:vars.fonts.sizes.small+" "+vars.fonts.faces.light,
+				'&:first-line':{
+					font:vars.fonts.sizes.normal+" "+vars.fonts.faces.bold
+				},
+				'&[data-type=success]':{
+					"border-color":"green",
+					color:"green",
+					background:"linear-gradient(top, white, #a4ffa4)"
+				},
+				'&[data-type=loading]':{
+					"border-color":"yellow",
+					color:"#777700",
+					background:"linear-gradient(top, white, #000077)"
+				},
+				'&[data-type=error]':{
+					"border-color":"red",
+					color:"red",
+					background:"linear-gradient(top, white, rgb(255,170,170))"
+				}
+			}
+		});
+		
 		// Setup callback messages
 		$.each(["success","sending","error"],function(i,type){
 			var $this = $('.cytoResponseMessage[data-type="'+type+'"]');

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

@@ -39,14 +39,15 @@
 									cursor:'pointer'
 								},
 								hover:{
-									
+									backgroundOffset:"-=0.1",
+									css:{}
 								},
 								img:{
 									css:{
 										opacity:0.5
 									},
 									hover:{
-										opacity:0.8
+										css:{opacity:0.8}
 									}
 								}
 							},
@@ -113,14 +114,22 @@
 								break;
 							case "icon":
 								var img = td.children("img").css(settings.widget.table.tr.td.types.icon.img.css);
-								var originalBg = $.Color(td,"background-color");
-								var darkenedBg = originalBg.lightness("-=100");
-								//console.log(originalBg);
+								
+								// Calculate darkened background color
+								var oBg, currentParent = td;
+								while (true) {
+									oBg = currentParent.css("background-color");
+									if (oBg!="transparent") break;
+									currentParent = currentParent.parent();
+								}
+								oBg = $.Color(oBg);
+								var dBg = oBg.lightness(settings.widget.table.tr.td.types.icon.hover.backgroundOffset);
+								
 								td.hover(function(e){
-									td.css("background-color",darkenedBg).css(settings.widget.table.tr.td.types.icon.hover);
-									img.css(settings.widget.table.tr.td.types.icon.img.hover);
+									td.css("background-color",dBg).css(settings.widget.table.tr.td.types.icon.hover.css);
+									img.css(settings.widget.table.tr.td.types.icon.img.hover.css);
 								},function(e){
-									td.css("background-color",originalBg).css(settings.widget.table.tr.td.types.icon.css);
+									td.css("background-color",oBg).css(settings.widget.table.tr.td.types.icon.css);
 									img.css(settings.widget.table.tr.td.types.icon.img.css);
 								});
 								break;

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

@@ -31,6 +31,9 @@ var Cytoplasm;
 		}
 	];
 	
+	// Default styles
+	var static_styles = "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}.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}}}";
+	
 	// Gradient manipulation library
 	var parseGradient = function(grad,reverse){
 		// Return untouched if not gradient
@@ -140,22 +143,19 @@ var Cytoplasm;
 					vars = data.vars;
 					$(document).ready(function(){
 						$('body').data('cytoplasm',settings);
-						methods.setStyles.apply();
+						methods.initStyles.apply();
 						ready = true;
 						$.each(readyFunctions,function(i,f){f.apply();});
 					});
 				}
 			});
 		},
-		setStyles:function(userstyles){
+		initStyles:function(userstyles){
 			if (typeof userstyles != "object") userstyles = {};
-			// Remove existing cytoplasm styles
-			if ($('#cytoplasm_dynamic_styles').is("*")) $('#cytoplasm_dynamic_styles').remove();
 			
 			// 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}}}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}.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,
@@ -251,31 +251,6 @@ var Cytoplasm;
 						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)"
 					}
-				},
-				'.cytoResponseMessage':{
-					display:'none',
-					padding:"10px",
-					'margin-bottom':"10px",
-					"border-radius":"5px",
-					font:vars.fonts.sizes.small+" "+vars.fonts.faces.light,
-					'&:first-line':{
-						font:vars.fonts.sizes.normal+" "+vars.fonts.faces.bold
-					},
-					'&[data-type=success]':{
-						"border-color":"green",
-						color:"green",
-						background:"linear-gradient(top, white, #a4ffa4)"
-					},
-					'&[data-type=loading]':{
-						"border-color":"yellow",
-						color:"#777700",
-						background:"linear-gradient(top, white, #000077)"
-					},
-					'&[data-type=error]':{
-						"border-color":"red",
-						color:"red",
-						background:"linear-gradient(top, white, rgb(255,170,170))"
-					}
 				}
 			},userstyles);
 			
@@ -298,9 +273,44 @@ var Cytoplasm;
 			else styles.header["#logo"][vars.layout.header.logo.align] = vars.layout.header.logo.x+10;
 			
 			// Compile the styles for HTML and add to <head>
-			$.each(styles,function(e,s){styletag += compileStyles(e,s);});
+			methods.addStyles.apply(this,["cytoplasm_static_styles",static_styles]);
+			methods.addStyles.apply(this,["cytoplasm_dynamic_styles",styles]);
+		},
+		addStyles:function(id,styles){
+			if (typeof id != "string") return console.warn("$.Cytoplasm's addStyles method requires an id string as the first parameter!");
+			
+			// Compile the styles for HTML and add to <head>
+			var styletag  = "";
+			switch (typeof styles) {
+				case "object":
+					$.each(styles,function(e,s){styletag += compileStyles(e,s);});
+					break;
+				case "string":
+					styletag += styles;
+					break;
+				default:
+					return console.warn("$.Cytoplasm's addStyles method requires either an object containing JSON-formatted LESS CSS or a string containing LESS CSS as its second parameter!");
+			}
+			
+			// Set styles
+			methods.removeStyles.apply(this,[id]);
 			var parser = new(less.Parser)({});
-			parser.parse(styletag,function(e,tree){$("<style type='text/css' rel='stylesheet' media='screen' id='cytoplasm_dynamic_styles'>"+tree.toCSS({compress:true})+"</style>").appendTo("head");});
+			parser.parse(styletag,function(e,tree){$("<style type='text/css' rel='stylesheet' media='screen' id='"+id+"' class='cytoplasm-dynamic-stylesheet'>"+tree.toCSS({compress:true})+"</style>").appendTo("head");});
+		},
+		removeStyles:function(id){
+			if (typeof id != "string") return console.warn("$.Cytoplasm's addStyles method requires an id string as the first parameter!");
+			if ($('style#'+id).is("*")) $('style#'+id).remove();
+		},
+		resetStyles:function(){
+			$('style.cytoplasm-dynamic-stylesheet').remove();
+			methods.initStyles.apply(this);
+		},
+		saveStyles:function(){
+			var styletag = "";
+			$('.cytoplasm-dynamic-stylesheet').each(function(){styletag += $(this).text();});
+			$.post("/cytoplasm/precompile",{styles:styletag},function(data){
+				$.cytoAjaxResponse("Styles saved successfully!");
+			});
 		},
 		vars:function(which,value){
 			var returnvar;
@@ -324,12 +334,6 @@ var Cytoplasm;
 				exp += " = "+value.toString();
 				return eval(exp);
 			}
-		},
-		style:function(){
-			
-		},
-		refresh:function(){
-			
 		},
 		destroy:function(){
 			$('body').data('cytoplasm',null);

data/app/controllers/cytoplasm/settings_controller.rb

@@ -27,6 +27,13 @@ module Cytoplasm
 			redirect_to cytoplasm_settings_url
 		end
 		
+		def precompile
+			if request.post?
+				Cytoplasm.precompile_styles(params[:styles])
+				render :text => Cytoplasm::Ajax.success()
+			end
+		end
+		
 		def fetch_vars
 			Cytoplasm.load_vars_from("config/cytoplasm-config.yml")
 			return Cytoplasm.vars()

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

@@ -1,28 +1,65 @@
 <h2 style="margin:0px;">Cytoplasm Backstage</h2>
 <hr />
 
-<h3><%=link_to("Settings",cytoplasm_general_settings_url)%></h3>
-<ul>
-	<li><%=link_to("Layout Settings",cytoplasm_layout_settings_url)%></li>
-	<li><%=link_to("Colors Settings",cytoplasm_colors_settings_url)%></li>
-	<li><%=link_to("Advanced Configuration Tool",cytoplasm_advanced_config_url)%></li>
-</ul>
-
-<h3><%=link_to("Fonts",cytoplasm_fonts_url)%></h3>
-<ul>
-	<li><%=link_to("Install New Fonts","#")%></li>
-	<li><%=link_to("Manage Installed Fonts",cytoplasm_fonts_url)%></li>
-	<li><%=link_to("Layout Font Settings","#")%></li>
-</ul>
-
-<h3><%=link_to("Transitions","#")%></h3>
-<ul>
-	<li><%=link_to("Layout Transition Settings","#")%></li>
-	<li><%=link_to("Create a Transition","#")%></li>
+<ul class="tile_list">
+	<li>
+		<%=image_tag("cytoplasm/settings-settings-3.png",:width => 256)%>
+		<h3><%=link_to("Settings",cytoplasm_general_settings_url)%></h3>
+		<ul>
+			<li><%=link_to("Layout Settings",cytoplasm_layout_settings_url)%></li>
+			<li><%=link_to("Colors Settings",cytoplasm_colors_settings_url)%></li>
+			<li><%=link_to("Advanced Configuration Tool",cytoplasm_advanced_config_url)%></li>
+		</ul>
+	</li>
+	
+	<li>
+		<%=image_tag("cytoplasm/text-underline-color.png",:width => 256)%>
+		<h3><%=link_to("Fonts",cytoplasm_fonts_url)%></h3>
+		<ul>
+			<li><%=link_to("Install New Fonts","#")%></li>
+			<li><%=link_to("Manage Installed Fonts",cytoplasm_fonts_url)%></li>
+			<li><%=link_to("Layout Font Settings","#")%></li>
+		</ul>
+	</li>
+	
+	<li>
+		<%=image_tag("cytoplasm/transition.png",:width => 256)%>
+		<h3><%=link_to("Transitions","#")%></h3>
+		<ul>
+			<li><%=link_to("Layout Transition Settings","#")%></li>
+			<li><%=link_to("Create a Transition","#")%></li>
+		</ul>
+	</li>
+	
+	<li>
+		<%=image_tag("cytoplasm/settings-dashboard.png",:width => 256)%>
+		<h3><%=link_to("Performance","#")%></h3>
+		<ul>
+			<li><%=link_to("Precompile CSS",cytoplasm_precompile_url)%></li>
+		</ul>
+	</li>
 </ul>
 
 <script type="text/javascript">
+(function($){
 $.Cytoplasm("ready",function(){
-	
+	$('.tile_list').css({
+		'list-style':'none',
+		margin:0,
+		padding:"25px 0px"
+	}).children('li').css({
+		float:'left',
+		width:'25%',
+		'text-align':'center'
+	}).children('img').click(function(e){
+		window.location = $(this).siblings("h3").find("a").attr("href");
+	}).end().children('ul').css({
+		'list-style':'none',
+		padding:0,
+		margin:0
+	}).children('li').css({
+		
+	});
 });
+})(jQuery);
 </script>

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

@@ -0,0 +1,13 @@
+<h2>Precompile Cytoplasm's Dynamic CSS</h2>
+<p>This will save your current dynamic CSS settings to a minified CSS file at public/css/cytoplasm-styles.css.  Use this once you're satisfied with the layout you've created to eliminate preprocessing and speed up loading times.</p>
+<button id="go_button" class="cytoButton large">Precompile Dynamic CSS!</button>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		$('#go_button').click(function(e){
+			$.Cytoplasm("saveStyles");
+		});
+	});
+})(jQuery);
+</script>

data/config/routes.rb

@@ -1,21 +1,29 @@
 Rails.application.routes.draw do
+	# Development environment only
+	if Rails.env.development?
+		# Settings
+		get "/cytoplasm" => "Cytoplasm/settings#index", :as => :cytoplasm_settings
+		get "/cytoplasm/general" => "Cytoplasm/settings#general", :as => :cytoplasm_general_settings
+		get "/cytoplasm/layout" => "Cytoplasm/settings#layout", :as => :cytoplasm_layout_settings
+		get "/cytoplasm/colors" => "Cytoplasm/settings#colors", :as => :cytoplasm_colors_settings
+		get "/cytoplasm/advanced" => "Cytoplasm/settings#advanced", :as => :cytoplasm_advanced_config
+		post "/cytoplasm/update" => "Cytoplasm/settings#update", :as => :cytoplasm_update
+		
+		# Fonts
+		get "/cytoplasm/fonts" => "Cytoplasm/fonts#index", :controller => Cytoplasm::FontsController, :action => :index, :as => :cytoplasm_fonts
+		get "/cytoplasm/fonts/:directory/:family" => "Cytoplasm/fonts#show", :controller => Cytoplasm::FontsController, :action => :show, :as => :cytoplasm_show_font
+		post "/cytoplasm/fonts/import" => "Cytoplasm/fonts#import"
+		post "/cytoplasm/fonts/remove" => "Cytoplasm/fonts#remove"
+		post "/cytoplasm/fonts/enable" => "Cytoplasm/fonts#enable"
+		post "/cytoplasm/fonts/disable" => "Cytoplasm/fonts#disable"
+	end
 	
+	# All environments
 	# Settings
-	get "/cytoplasm" => "Cytoplasm/settings#index", :as => :cytoplasm_settings
-	get "/cytoplasm/general" => "Cytoplasm/settings#general", :as => :cytoplasm_general_settings
-	get "/cytoplasm/layout" => "Cytoplasm/settings#layout", :as => :cytoplasm_layout_settings
-	get "/cytoplasm/colors" => "Cytoplasm/settings#colors", :as => :cytoplasm_colors_settings
-	get "/cytoplasm/advanced" => "Cytoplasm/settings#advanced", :as => :cytoplasm_advanced_config
+	get "/cytoplasm/precompile" => "Cytoplasm/settings#precompile", :as => :cytoplasm_precompile
+	post "/cytoplasm/precompile" => "Cytoplasm/settings#precompile"
 	post "/cytoplasm/settings/fetch" => "Cytoplasm/settings#fetch"
-	post "/cytoplasm/update" => "Cytoplasm/settings#update", :as => :cytoplasm_update
 	
 	# Fonts
-	get "/cytoplasm/fonts" => "Cytoplasm/fonts#index", :controller => Cytoplasm::FontsController, :action => :index, :as => :cytoplasm_fonts
-	get "/cytoplasm/fonts/:directory/:family" => "Cytoplasm/fonts#show", :controller => Cytoplasm::FontsController, :action => :show, :as => :cytoplasm_show_font
 	post "/cytoplasm/fonts/fetch_all" => "Cytoplasm/fonts#fetch_all"
-	post "/cytoplasm/fonts/import" => "Cytoplasm/fonts#import"
-	post "/cytoplasm/fonts/remove" => "Cytoplasm/fonts#remove"
-	post "/cytoplasm/fonts/enable" => "Cytoplasm/fonts#enable"
-	post "/cytoplasm/fonts/disable" => "Cytoplasm/fonts#disable"
-	
 end

data/lib/cytoplasm.rb

@@ -175,7 +175,6 @@ module Cytoplasm
 			puts "YAML configuration file contains invalid syntax. Using defaults."; return
 		end
 		load_vars(vars)
-		compile_css()
 	end
 	
 	def self.save_config(opts={})
@@ -184,6 +183,27 @@ module Cytoplasm
 		File.open("config/cytoplasm-config.yml", 'w+') {|f| f.write(@vars.to_yaml) }
 	end
 	
+	def self.precompile_styles(styles)
+		puts "PRECOMPILING CSS TO FILE"
+		File.open(create_path_unless_exists("public/css")+"/cytoplasm-styles.css", 'w+') {|f| f.write(styles)} if styles.is_a? String and styles!=""
+	end
+	
+	def self.create_path_unless_exists(path)
+		unless File.exists?(path)
+			count = 0
+			path.split("/").each do |dir|
+				Dir.mkdir(dir) unless File.exists?(dir)
+				Dir.chdir(dir)
+				count += 1
+			end
+			while count > 0 do
+				Dir.chdir("../")
+				count -= 1
+			end
+		end
+		return path
+	end
+	
 	# Getters and setters
 	def self.traverse_hash(hash,which=nil,value=nil)
 		return hash if which.nil?
@@ -246,21 +266,6 @@ module Cytoplasm
 	def self.js()
 		return dependencies("js")
 	end
-	def self.compile_css()
-		varfile = ::Rails.root+"public/cytoplasm/cytoplasm.vars.less"
-		# Check for varfile, create one if it doesn't exist
-		unless File.exists?("public/cytoplasm")
-			Dir.chdir("public")
-			Dir.mkdir("cytoplasm")
-			Dir.chdir("../")
-		end
-		
-		File.open(varfile,"wb") do |f|
-			css = ""
-			@vars.each {|k,v| css += hash_to_css(k,v)}
-			f.write(css)
-		end
-	end
 	
 	def self.hash_to_css(k,v,parent="")
 		output = ""

data/lib/cytoplasm/version.rb

@@ -1,3 +1,3 @@
 module Cytoplasm
-  VERSION = "0.3.1"
+  VERSION = "0.3.3"
 end

data/test/dummy/Gemfile.lock

@@ -37,7 +37,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.4.0)
-    cytoplasm (0.3.0)
+    cytoplasm (0.3.2)
       jquery-rails
       jquery-ui-rails
       rails (~> 3.2.9)
@@ -59,7 +59,7 @@ GEM
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
-    mime-types (1.20.1)
+    mime-types (1.21)
     multi_json (1.5.0)
     polyglot (0.3.3)
     rack (1.4.5)