cytoplasm 0.2.3 → 0.2.4

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

@@ -153,7 +153,8 @@ var Cytoplasm;
 				}
 			});
 		},
-		setStyles:function(){
+		setStyles:function(userstyles){
+			if (typeof userstyles != "object") userstyles = {};
 			// Remove existing cytoplasm styles
 			if ($('#cytoplasm_dynamic_styles').is("*")) $('#cytoplasm_dynamic_styles').remove();
 			
@@ -161,7 +162,7 @@ var Cytoplasm;
 			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 styles = {
+			var styles = $.extend(true,{},{
 				body:{
 					background:vars.colors.global.background,
 					font:vars.fonts.sizes.normal+" "+vars.fonts.faces.regular,
@@ -212,6 +213,9 @@ var Cytoplasm;
 				},
 				'table.cytoTable':{
 					background:vars.colors.plugins.cytoTable.background,
+					table:{
+						'margin-bottom':'0px'
+					},
 					td:{
 						border:vars.colors.plugins.cytoTable.border,
 						"&.labelcell":{"font-size":vars.fonts.sizes.small}
@@ -227,7 +231,7 @@ var Cytoplasm;
 						"box-shadow":vars.layout.plugins.cytoButton.shadow
 					}
 				}
-			};
+			},userstyles);
 			
 			// Heading sizes
 			(function(){
@@ -252,28 +256,6 @@ var Cytoplasm;
 			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");});
 		},
-		conf:function(which,value){
-			var returnvar;
-			if (which==null) return conf;
-			if (typeof which != "string") return console.warn("Incorrect argument type passed to $.Cytoplasm(\"conf\")!");
-			if (which.indexOf(".")>-1) {
-				returnvar = conf;
-				var levels = [];
-				$.each(which.split("."),function(i,level){
-					levels.push(level);
-					if (returnvar[level]!=null) returnvar = returnvar[level];
-				});
-			} else returnvar = conf[which];
-			if (returnvar==null) return console.warn("Failed to find Cytoplasm config variable "+which+"!");
-			if (value==null) return returnvar;
-			else {
-				if (levels==null || levels==[]) return conf[which] = value;
-				var exp = "conf";
-				$.each(levels,function(i,level){exp += "["+level.toString()+"]"});
-				exp += " = "+value.toString();
-				return eval(exp);
-			}
-		},
 		vars:function(which,value){
 			var returnvar;
 			if (which==null) return vars;

data/app/controllers/cytoplasm/fonts_controller.rb

@@ -32,14 +32,13 @@ module Cytoplasm
 			end
 			def fetch_fs_all
 				fs = {}
-				fetch_json("http://www.fontsquirrel.com/api/fontlist/all").each do |f|
-					fs[f["family_urlname"]] = f
-				end
+				fetch_json("http://www.fontsquirrel.com/api/fontlist/all").each {|f| fs[f["family_urlname"]] = f}
 				return fs
 			end
 			def fetch_gwf_all
 				gwf = {}
-				fetch_json("https://www.googleapis.com/webfonts/v1/webfonts?key="+Cytoplasm.conf("fontloader.googlewebfonts_apikey"))["items"].each {|f| gwf[f["family"]] = f}
+				puts "CONFIG: "+Cytoplasm.vars.to_s
+				fetch_json("https://www.googleapis.com/webfonts/v1/webfonts?key="+Cytoplasm.vars("setup.fontloader.googlewebfonts_apikey"))["items"].each {|f| gwf[f["family"]] = f}
 				return gwf
 			end
 			def fetch_family(dir,fam)

data/app/controllers/cytoplasm/settings_controller.rb

@@ -13,25 +13,26 @@ module Cytoplasm
 			
 		end
 		
-		def update
+		def colors
 			
 		end
 		
-		def fetch_conf
-			Cytoplasm.configure_with("config/initializers/cytoplasm.yml")
-			return Cytoplasm.conf()
+		def advanced
+			
+		end
+		
+		def update
+			Cytoplasm.save_config(params)
+			redirect_to cytoplasm_advanced_config_url
 		end
 		
 		def fetch_vars
-			Cytoplasm.load_vars_from("config/initializers/cytoplasm.vars.yml")
+			Cytoplasm.load_vars_from("config/cytoplasm-config.yml")
 			return Cytoplasm.vars()
 		end
 		
 		def fetch
-			success = {}
-			success["conf"] = fetch_conf()
-			success["vars"] = fetch_vars()
-			render :text => Cytoplasm::Ajax.success(success)
+			render :text => Cytoplasm::Ajax.success({"vars" => fetch_vars()})
 		end
 		
 	end

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

@@ -0,0 +1,35 @@
+<%
+def recursive_config_row(k,v)
+	k = k.to_s
+	output = "<tr><td class='labelcell'>"+k.split("[").pop().split("]")[0].capitalize+":</td><td>"
+	if v.is_a? Hash
+		output += "<table class='cytoTable'>"
+		v.each {|kk,vv| output += recursive_config_row(k+"["+kk.to_s+"]",vv)}
+		output += "</table>"
+	else
+		v = v.to_s
+		output += "<input type='text' class='cytoField' name='"+k+"' value='"+v+"' placeholder='"+Cytoplasm.defaults(k.split("[").join(".").gsub("]","")).to_s+"' />"
+	end
+	output += "</td></tr>"
+	return output
+end
+%>
+
+<h2>Advanced Configuration Tool</h2>
+
+<form id="advanced_config_form" action="<%=cytoplasm_update_url%>" method="post">
+	<table class="cytoTable">
+		<% Cytoplasm.vars().each do |k,v| %>
+			<%= raw recursive_config_row(k,v)%>
+		<% end %>
+		<tr><td colspan=2><button class="cytoButton large">Save and Apply!</button></td></tr>
+	</table>
+</form>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		
+	});
+})(jQuery);
+</script>

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

@@ -7,6 +7,7 @@
 	<li><%=link_to("Layout Settings",cytoplasm_layout_settings_url)%></li>
 	<li><%=link_to("Colors Settings",cytoplasm_colors_settings_url)%></li>
 	<li><%=link_to("Manage Fonts",cytoplasm_fonts_url)%></li>
+	<li><%=link_to("Advanced Configuration Tool",cytoplasm_advanced_config_url)%></li>
 </ul>
 
 <script type="text/javascript">

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

@@ -21,6 +21,22 @@
 			</td>
 		</tr>
 		<tr><td class='headercell' colspan=2><h3>Header</h3></td></tr>
+		<tr>
+			<td class="labelcell">Position Mode:</td>
+			<td>
+				<input type="radio" name="layout[header][position]" value="inherit" data-label="Inherit" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[header][position]" value="static" data-label="Static" />
+				<input type="radio" name="layout[header][position]" value="relative" data-label="Relative" />
+				<input type="radio" name="layout[header][position]" value="absolute" data-label="Absolute" />
+				<input type="radio" name="layout[header][position]" value="fixed" data-label="Fixed" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Height:</td>
+			<td>
+				<input type="hidden" name="layout[header][height]" class="cytoSlider" value="140" data-max="500" data-unit="px" data-label="Height of the header tag" />
+			</td>
+		</tr>
 		<tr><td class='headercell' colspan=2><h3>Content</h3></td></tr>
 		<tr>
 			<td class='labelcell'>Margin:</td>
@@ -48,6 +64,22 @@
 <script type="text/javascript">
 (function($){
 	$.Cytoplasm("ready",function(){
+		// Header
+		$('input[name="layout[header][position]"]').cytoRadio("options",{events:{change:function(){
+			$('header').css("position",$(this).cytoRadio("value"));
+			switch ($(this).cytoRadio("value")) {
+				case "relative":
+				case "absolute":
+				case "fixed":
+					
+					break;
+			}
+		}}});
+		$('input[name="layout[header][height]"]').cytoSlider("options",{events:{change:function(){
+			$('header').height($(this).cytoSlider("value"));
+		}}});
+		
+		// Content
 		$('input[name="layout[content][margin_mode]"]').cytoRadio("options",{events:{change:function(){
 			console.log("changed!");
 		}}});

data/config/routes.rb

@@ -5,7 +5,9 @@ Rails.application.routes.draw do
 	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/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

data/lib/cytoplasm.rb

@@ -4,22 +4,18 @@ require 'yaml'
 require 'active_support/core_ext/hash/deep_merge'
 
 module Cytoplasm
-	# List of all Cytoplasm configuration settings, with their corresponding default values.
-	# Create a YAML file at config/initializers/cytoplasm.yml to extend the default settings.
-	@conf = {
-		:jqueryui => {
-			:version => "1.9.2",
-			:theme => "ui-darkness"
-		},
-		:fontloader => {
-			:directory => "fontsquirrel",
-			:googlewebfonts_apikey => "AIzaSyDs7hjZSILIAN3T4oFv3qf_DCyy6PfC30E"
-		}
-	}
-	
 	# List of all Cytoplasm variables, with their corresponding default values.
-	# Create a YAML file at config/initializers/cytoplasm.vars.yml to extend the default values.
-	@vars = {
+	# Create a YAML file at config/cytoplasm-config.yml to extend the default values.
+	@defaults = {
+		:setup => {
+			:jqueryui => {
+				:version => "1.9.2",
+				:theme => "ui-darkness"
+			},
+			:fontloader => {
+				:googlewebfonts_apikey => "AIzaSyDs7hjZSILIAN3T4oFv3qf_DCyy6PfC30E"
+			}
+		},
 		:layout => {
 			:mode => "fluid",
 			:padding => "0px",
@@ -114,6 +110,7 @@ module Cytoplasm
 			}
 		}
 	}
+	@vars = @defaults
 	@cssvars = ""
 	
 	# Dependencies
@@ -139,43 +136,21 @@ module Cytoplasm
   };
 	
 	def initialize
-		configure_with("config/initializers/cytoplasm.yml")
-		load_vars_from("config/initializers/cytoplasm.vars.yml")
+		load_vars_from("config/cytoplasm-config.yml")
 	end
 	
-	# Configure through hash
-	def self.configure(opts={})
-		opts.each {|k,v| @conf[k.to_sym] = v if @valid_settings.include? k.to_sym}
-	end
 	def self.load_vars(opts={})
-		opts = optsToSym(opts)
-		@vars.deep_merge!(opts)
-		#opts.each {|k,v| @vars[k.to_sym] = v if @valid_vars.include? k.to_sym}
+		@vars = @defaults
+		@vars.deep_merge!(opts_to_sym(opts))
 	end
 	
-	def self.optsToSym(opts)
+	def self.opts_to_sym(opts)
 		fixed = {}
-		unless opts.is_a? Hash
-			return opts
-		else
-			opts.each do |k,v|
-				fixed[k.to_sym] = ((v.is_a?(Hash)) ? optsToSym(v) : v)
-			end
-		end
+		return opts unless opts.is_a? Hash
+		opts.each {|k,v| fixed[k.to_sym] = ((v.is_a?(Hash)) ? opts_to_sym(v) : v)}
 		return fixed
 	end
 	
-	# Configure through yaml file
-	def self.configure_with(path_to_yaml_file)
-		begin
-			conf = YAML::load(IO.read(path_to_yaml_file))
-		rescue Errno::ENOENT
-			puts "YAML configuration file couldn't be found. Using defaults."; return
-		rescue Psych::SyntaxError
-			puts "YAML configuration file contains invalid syntax. Using defaults."; return
-		end
-		configure(conf)
-	end
 	def self.load_vars_from(path_to_yaml_file)
 		begin
 			vars = YAML::load(IO.read(path_to_yaml_file))
@@ -188,55 +163,46 @@ module Cytoplasm
 		compile_css()
 	end
 	
+	def self.save_config(opts={})
+		puts "SAVING CONFIGURATION FILE"
+		load_vars(opts)
+		File.open("config/cytoplasm-config.yml", 'w+') {|f| f.write(@vars.to_yaml) }
+	end
+	
 	# Getters and setters
-	def self.config(which=nil,value=nil)
-		return @conf if which.nil?
+	def self.traverse_hash(hash,which=nil,value=nil)
+		return hash if which.nil?
 		if which.is_a? String and which.include? '.'
-			returnvar = @conf
+			returnvar = hash
 			levels = []
 			which.split(".").each do |level|
 				levels << level
 				returnvar = returnvar[level.to_sym] unless returnvar[level.to_sym].nil?
 			end
 		else
-			returnvar = @conf[which.to_sym]
+			returnvar = hash[which.to_sym]
 		end
 		
 		unless returnvar.nil?
 			if value.nil?
-				return returnvar
+				return returnvar.to_s
 			else
-				@conf[which.to_sym] = value
+				if which.include? "."
+					
+				else
+					hash[which.to_sym] = value
+				end
 			end
 		end
 	end
 	def self.variable(which=nil,value=nil)
-		return @vars if which.nil?
-		if which.is_a? String and which.include? '.'
-			returnvar = @vars
-			levels = []
-			which.split(".").each do |level|
-				levels << level
-				returnvar = returnvar[level.to_sym] unless returnvar[level.to_sym].nil?
-			end
-		else
-			returnvar = @vars[which.to_sym]
-		end
-		
-		unless returnvar.nil?
-			if value.nil?
-				return returnvar
-			else
-				@vars[which.to_sym] = value
-			end
-		end
-	end
-	# Shortcuts to the above
-	def self.conf(which=nil,value=nil)
-		return config(which,value)
+		traverse_hash(@vars,which,value)
 	end
 	def self.vars(which=nil,value=nil)
-		return variable(which,value)
+		variable(which,value)
+	end
+	def self.defaults(which=nil,value=nil)
+		traverse_hash(@defaults,which,value)
 	end
 	
 	# Dependency loaders
@@ -254,16 +220,11 @@ module Cytoplasm
 					end
 				end
 			when "css"
-				deps << "http://ajax.googleapis.com/ajax/libs/jqueryui/"+conf("jqueryui.version")+"/themes/"+conf("jqueryui.theme")+"/jquery-ui.css"
+				deps << "http://ajax.googleapis.com/ajax/libs/jqueryui/"+vars("setup.jqueryui.version")+"/themes/"+vars("setup.jqueryui.theme")+"/jquery-ui.css"
 				deps += load_fonts()
-				#deps << "cytoplasm/cytoplasm-"+Time.now.to_i.to_s
-				@dependencies[:css].each do |stylesheet|
-					deps << "cytoplasm/"+stylesheet
-				end
+				@dependencies[:css].each {|stylesheet| deps << "cytoplasm/"+stylesheet}
 			when "js"
-				@dependencies[:js].each do |plugin|
-					deps << "cytoplasm/"+plugin
-				end
+				@dependencies[:js].each {|plugin| deps << "cytoplasm/"+plugin}
 		end
 		return deps
 	end
@@ -287,9 +248,7 @@ module Cytoplasm
 		
 		File.open(varfile,"wb") do |f|
 			css = ""
-			@vars.each do |k,v|
-				css += hash_to_css(k,v)
-			end
+			@vars.each {|k,v| css += hash_to_css(k,v)}
 			f.write(css)
 		end
 	end
@@ -298,9 +257,7 @@ module Cytoplasm
 		output = ""
 		if v.is_a? Hash
 			parent += "#{k}_"
-			v.each do |kk,vv|
-				output += hash_to_css(kk,vv,parent)
-			end
+			v.each {|kk,vv| output += hash_to_css(kk,vv,parent)}
 			return output
 		else
 			k = k.to_s

data/lib/cytoplasm/version.rb

@@ -1,3 +1,3 @@
 module Cytoplasm
-  VERSION = "0.2.3"
-end
+  VERSION = "0.2.4"
+end

data/test/dummy/config/cytoplasm-config.yml

@@ -0,0 +1,73 @@
+---
+:setup:
+  :jqueryui:
+    :version: 1.9.2
+    :theme: ui-darkness
+  :fontloader:
+    :googlewebfonts_apikey: AIzaSyDs7hjZSILIAN3T4oFv3qf_DCyy6PfC30E
+:layout:
+  :mode: fluid
+  :padding: 0px
+  :header:
+    :margin: 0px
+    :padding: 10px
+    :logo:
+      :enabled: 'true'
+      :position: absolute
+      :align: left
+      :x: 0px
+      :y: 0px
+    :nav:
+      :enabled: 'true'
+      :align: right
+      :background: transparent
+      :font: light
+  :content:
+    :margin: 0px
+    :padding: 20px
+  :footer:
+    :margin: 0px
+    :padding: 10px
+  :plugins:
+    :cytoButton:
+      :shadow: inset 0px 0px 10px rgba(0,0,0,0.5)
+:fonts:
+  :faces:
+    :light: TitilliumTextLight
+    :regular: TitilliumTextRegular
+    :bold: TitilliumTextBold
+  :sizes:
+    :small: 12px
+    :normal: 14px
+    :huge: 48px
+    :heading_factor: '1.8'
+:colors:
+  :global:
+    :background: green
+    :text: black
+    :accent: ! '#aaff7f'
+  :header:
+    :background: transparent
+    :text: white
+  :content:
+    :background: white
+    :text: inherit
+  :footer:
+    :background: transparent
+    :text: white
+  :plugins:
+    :cytoTable:
+      :background: ! '#eeeeee'
+      :border: ! '1px solid #cccccc'
+      :text: inherit
+    :cytoButton:
+      :background: linear-gradient(to bottom, yellow, green)
+      :border: 1px solid green
+      :text: inherit
+    :cytoSelect: {}
+    :cytoRadio: {}
+    :cytoSlider: {}
+    :cytoUpload: {}
+    :cytoColorPicker: {}
+:controller: cytoplasm/settings
+:action: update