cytoplasm 0.1.3 → 0.1.4

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

@@ -15,21 +15,20 @@
 	};
 	$.cytoAjax = function(script,data_to_pass,success,error){
 		// Set default parameters
-		if (typeof script != "string" || script == "") return false;
+		if (typeof script != "string" || script == "") return console.warn("$.cytoAjax requires a string as the first parameter (script).");
 		if (data_to_pass==null || typeof data_to_pass != "object") {
 			if (typeof data_to_pass == "function") {
-				if (typeof success == "function") error = success;
+				if (success!=null && typeof success == "function") error = success;
 				success = data_to_pass;
 			}
-			data_to_pass = {ajax:script};
-		} else data_to_pass = $.extend(true,{},{ajax:script},data_to_pass);
+			data_to_pass = {};
+		}
 		
 		// Make request
 		$.ajax({
       url:script,
-      type:'get',
-      dataType:'html',
-      processData:false,
+      type:'POST',
+      data:data_to_pass,
       success:function(data,textStatus,jqXHR) {
       	try {
 					data = $.parseJSON(data);

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

@@ -94,6 +94,10 @@
 					mousedown:function(e){
 						e.preventDefault();
 						if ($(this).hasClass('active')) return false;
+						$(this).addClass('active');
+					},
+					mouseup:function(e){
+						e.preventDefault();
 						methods.value.apply($this,[$(this).data('cytoradio-value')]);
 						settings.widget.inputList.inputs.elements.trigger('change');
 					},

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

@@ -392,7 +392,7 @@
 				var settings = $this.data('cytoSelect');
 				if (!$this.hasClass('cytoSelect') || settings==null) return console.warn("You must instanciate $.cytoSelect before calling the clear method!");
 				
-				$this.children('option').not("[value=''],[value='0']").remove();
+				$this.children('option').remove();
 				if (refresh) methods.refresh.apply($this);
 			});
 		},

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

@@ -10,11 +10,7 @@ var Cytoplasm;
 	
 	$(document).ready(function(){
 		// Setup header
-		var header = $("header");
-		header.find('h1').click(function(){window.location = "<%=((defined? root_url) ? root_url : "/")%>";});
-		
-		// Fix for cytoButtons not activating
-		
+		var header = $("header").find('h1').click(function(){window.location = "<%=((defined? root_url) ? root_url : "/")%>";}).end();
 		
 		// Setup callback messages
 		$.each(["success","sending","error"],function(i,v){
@@ -39,24 +35,95 @@ var Cytoplasm;
 	var vars = {};
 	var ready = false;
 	
+	var parseGradient = function(grad,reverse){
+		// Return untouched if not gradient
+		if (grad.indexOf("gradient")==-1) return grad;
+		if (reverse!=true) reverse = false;
+		var o = {};
+		
+		var halves = grad.split("(");
+		o.type = halves[0];
+		o.params = halves[1].split(")")[0].split(",");
+		if (o.type.indexOf("linear")>-1) {
+			if (isColorStop(o.params[0])) o.params.unshift("to bottom");
+			o.params[0] = normalizeDirection(o.params[0]);
+			if (reverse) o.params[0] = invertDirection(o.params[0]);
+			o.dir = o.params[0];
+			o.colors = o.params.slice(1);
+		} else if (o.type.indexOf("radial")>-1) {
+			var firstcolor;
+			if (isColorStop(o.params[0])) o.params.unshift("center");
+			$.each(o.params,function(i,p){if (isColorStop(p)) {firstcolor = i;return false;}});
+			o.dir = o.params[0];
+			o.colors = o.params.slice(firstcolor);
+		} else return false;
+		
+		var params = o.params.join(",");
+		
+		// String types
+		o.shortened = o.type+"("+denormalizeDirection(o.dir)+","+o.colors.join(",")+");";
+		
+		o.expanded = "background-color:"+((o.colors[0].indexOf("%")>-1) ? o.colors[0].split(" ").slice(0,-1).join(" ") : o.colors[0]) + ";";
+		o.expanded += "background-image:-webkit-"+o.type+"("+params+");";
+		o.expanded += "background-image:-moz-"+o.type+"("+params+");";
+		o.expanded += "background-image:-o-"+o.type+"("+params+");";
+		o.expanded += "background-image:-ms-"+o.type+"("+params+");";
+		o.expanded += "background-image:"+o.shortened;
+		
+		return o;
+	};
+	var expandGradient = function(orig){
+		if (typeof orig != "string") return console.warn("Cytoplasm.expandGradient only accepts string arguments!");
+		// Return untouched if not gradient
+		if (orig.indexOf("gradient")==-1) return orig;
+		
+		var g = parseGradient(orig);
+		return g.expanded;
+	};
 	var reverseGradient = function(orig){
 		if (typeof orig != "string") return console.warn("Cytoplasm.reverseGradient only accepts string arguments!");
 		// Return untouched if not gradient
 		if (orig.indexOf("gradient")==-1) return orig;
-		// Get direction
-		var dir = orig.split("(")[1].split(",")[0];
-		// Reverse direction
+		
+		var g = parseGradient(orig,true);
+		return g.shortened;
+	};
+	var normalizeDirection = function(dir){
 		var newdir = dir;
+		if (newdir.slice(0,3)!="to ") return newdir;
+		return invertDirection(newdir).slice(3);
+	};
+	var denormalizeDirection = function(dir){
+		var newdir = dir;
+		if (newdir.slice(0,3)=="to ") return newdir;
+		return "to "+invertDirection(newdir);
+	};
+	var invertDirection = function(dir){
+		var newdir = "  "+dir+"  ";
 		if (dir.indexOf("top")>-1) newdir = newdir.replace("top","bottom");
 		else if (dir.indexOf("bottom")>-1) newdir = newdir.replace("bottom","top");
 		if (dir.indexOf("left")>-1) newdir = newdir.replace("left","right");
 		else if (dir.indexOf("right")>-1) newdir = newdir.replace("right","left");
-		return orig.replace(dir,newdir)
+		newdir = newdir.slice(2,-2);
+		return newdir;
+	};
+	var isColorStop = function(str){
+		var cache, p=parseInt, nstr = str;
+		if (nstr.slice(-1) == "%") nstr = nstr.split(" ").slice(0,-1).join(" ");
+		nstr = nstr.replace(/\s\s*/g,'') // Remove all spaces
+		if ($.inArray(nstr,['aqua','black','blue','fuchsia','gray','grey','green','lime','maroon','navy','olive','purple','red','silver','teal','white','yellow'])>-1) return true;
+		return (nstr.match(/^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/) || nstr.match(/^#([\da-fA-F])([\da-fA-F])([\da-fA-F])/) || nstr.match(/^rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/) || nstr.match(/^rgb\(([\d]+),([\d]+),([\d]+)\)/));
 	};
 	var compileStyles = function(element,styles){
 		output = "";
 		output += element+" { ";
-		$.each(styles,function(prop,value){output += (typeof value == "object") ? compileStyles(prop,value) : prop+" : "+value+"; ";});
+		$.each(styles,function(prop,value){
+			if (typeof value == "object") output += compileStyles(prop,value);
+			else {
+				if (prop == "background" && value.indexOf("gradient")>-1) output += expandGradient(value);
+				else output += prop+" : "+value+"; ";
+			}
+		});
 		output += " } ";
 		return output;
 	};
@@ -140,7 +207,19 @@ var Cytoplasm;
 			};
 			
 			// Heading sizes
-			$.each([1,2,3,4,5,6],function(i,num){$('h'+num.toString()).css("font-size",parseInt(vars.fonts.sizes.huge) - (parseInt(vars.fonts.sizes.heading_factor)*i));});
+			(function(){
+				var verbose = false;
+				var huge = parseInt(vars.fonts.sizes.huge), normal = parseInt(vars.fonts.sizes.normal);
+				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);
+					if (verbose) console.log("Factor: "+factor);
+					var size = parseInt(vars.fonts.sizes.normal) + (hRange/factor);
+					if (verbose) console.log("Size: "+size);
+					$('h'+num.toString()).css("font-size",size);
+				});
+			})();
 			// Logo positioning
 			if (vars.layout.header.logo.align == "center") styles.header["#logo"].left = (($(window).width()-$('header #logo').width())/2) + vars.layout.header.logo.x;
 			else styles.header["#logo"][vars.layout.header.logo.align] = vars.layout.header.logo.x+10;

data/app/assets/stylesheets/cytoplasm/cytoplasm.less

@@ -8,6 +8,11 @@ body {
 	overflow-y:scroll;
 }
 
+// Headings
+h1, h2, h3, h4, h5, h6 {
+	margin:20px 0px;
+}
+
 // Header
 header {
 	margin:0px;

data/app/controllers/cytoplasm/fonts_controller.rb

@@ -1,42 +1,113 @@
 require 'net/http'
 require 'open-uri'
+require 'yaml'
 
 module Cytoplasm
 	class FontsController < ApplicationController
 		
+		@@fonts = {
+			"fontsquirrel" => false,
+			"googlewebfonts" => false,
+			"imported" => false
+		}
+		@@fontsdir = "public/fonts"
+		@@gwf_file = @@fontsdir + "/googlewebfonts.yml"
+		
 		def fetch_imported
-			imported = {}
-			fontsdir = "public/fonts"
+			return @@fonts["imported"] unless @@fonts["imported"] == false
+			
+			imported = {"fontsquirrel" => {}, "googlewebfonts" => {}}
 			
-			# Find fonts directory, create one if it doesn't exist
-			if File.exists?(fontsdir)
-				fontsdir = Dir.open(fontsdir)
-			else
+			# Create @@fontsdir if it doesn't exist	
+			unless File.exists?(@@fontsdir)
 				Dir.chdir("public")
-				fontsdir = Dir.mkdir("fonts")
+				@@fontsdir = Dir.mkdir("fonts")
 				Dir.chdir("../")
 			end
 			
-			fontsdir.each do |file|
-				imported[file] = fetch_fs_family(file) if File.directory?(file) and file!="." and file!=".."
+			# Create @@gwf_file if it doesn't exist
+			File.open(@@gwf_file,'w') {|f| f.write("")} unless File.exists?(@@gwf_file)
+			
+			# Fetch imported FontSquirrel fonts
+			Dir.open(@@fontsdir).each {|file| imported["fontsquirrel"][file] = fetch_fs_family(file) if File.directory?(file) and file!="." and file!=".."}
+			
+			# Attempt to load YAML from @@gwf_file
+			begin
+				c = YAML::load_file(@@gwf_file)
+			rescue
+				puts "Failed to parse YAML in #{@@gwf_file}!"
 			end
-			return imported
+			
+			# Fetch imported GoogleWebFonts fonts
+			c["imported"].each {|f| imported["googlewebfonts"][f] = fetch_gwf_family(f)} unless c["imported"].nil?
+			
+			@@fonts["imported"] = imported
+			return @@fonts["imported"]
 		end
 		
-		def fetch_fs_family(font)
-			return fetch_json("http://www.fontsquirrel.com/api/familyinfo/"+font)
+		def fetch_fs_all
+			return @@fonts["fontsquirrel"] unless @@fonts["fontsquirrel"] == false
+			fonts = {}
+			fetch_json("http://www.fontsquirrel.com/api/fontlist/all").each {|f| fonts[f["family_name"]] = f}
+			@@fonts["fontsquirrel"] = fonts
+			return @@fonts["fontsquirrel"]
+		end
+		def fetch_gwf_all
+			return @@fonts["googlewebfonts"] unless @@fonts["googlewebfonts"] == false
+			gwf = {}
+			fetch_json("https://www.googleapis.com/webfonts/v1/webfonts?key="+Cytoplasm.conf("fontloader.googlewebfonts_apikey"))["items"].each {|f| gwf[f["family"]] = f}
+			@@fonts["googlewebfonts"] = gwf
+			return @@fonts["googlewebfonts"]
+		end
+		def fetch_fs_family(family)
+			fetch_json("http://www.fontsquirrel.com/api/familyinfo/"+family)
+		end
+		def fetch_gwf_family(family)
+			gwf = fetch_gwf_all()
+			return (!gwf[family].nil?) ? gwf[family] : false;
 		end
 		
 		def fetch_all
-			success = {"fontsquirrel" => {}, "googlewebfonts" => {},"imported" => {}}
+			success = {"fontsquirrel" => {}, "googlewebfonts" => {},"imported" => {"fontsquirrel" => {}, "googlewebfonts" => {}}}
 			
-			success["fontsquirrel"] = fetch_json("http://www.fontsquirrel.com/api/fontlist/all")
-			fetch_json("https://www.googleapis.com/webfonts/v1/webfonts?key="+Cytoplasm.conf("fontloader.googlewebfonts_apikey"))["items"].each {|f| success["googlewebfonts"][f["family"]] = f}
+			success["fontsquirrel"] = fetch_fs_all()
+			success["googlewebfonts"] = fetch_gwf_all()
 			success["imported"] = fetch_imported()
 			
 			render :text => Cytoplasm::Ajax.success(success)
 		end
 		
+		def import
+			puts params
+			success = {}
+			case params[:directory]
+				when "fontsquirrel"
+					open(@@fontsdir+"/"+params[:family]['family_urlname']+".zip","wb") do |file|
+						success["url"] = "http://www.fontsquirrel.com/fontfacekit/"+params[:family]['family_urlname']
+						file << open(success["url"]).read
+					end
+					
+					
+				when "googlewebfonts"
+					
+			end
+			render :text => Cytoplasm::Ajax.success(success)
+		end
+		
+		def remove
+			case params[:directory]
+				when "fontsquirrel"
+					
+				when "googlewebfonts"
+					
+			end
+			render :text => Cytoplasm::Ajax.success()
+		end
+		
+		def index
+			@installed = fetch_imported()
+		end
+		
 		private
 			def fetch_json(url)
 				return ActiveSupport::JSON.decode(open(url).read)

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

@@ -0,0 +1,113 @@
+<h2>Cytoplasm Font Manager</h2>
+
+<hr />
+
+<% if @installed["fontsquirrel"].any? or @installed["googlewebfonts"].any? %>
+	<h3>Installed Fonts</h3>
+	
+	<% {"fontsquirrel" => "FontSquirrel","googlewebfonts" => "Google Web Fonts"}.each do |dir,name| %>
+		<% if @installed[dir].any? %>
+			<h6><%=name%></h6>
+			<ul>
+				<% @installed[dir].each do |fam,f| %>
+					<li><%=fam%></li>
+				<% end %>
+			</ul>
+		<% end %>
+	<% end %>
+<% end %>
+
+<hr />
+
+<h3>Install New Fonts</h3>
+
+<p>
+	<input type="radio" name="fonts_directory" data-label="Font Squirrel API" value="fontsquirrel" data-exclude="true" checked="checked" class="cytoRadio" />
+	<input type="radio" name="fonts_directory" data-label="Google Web Fonts" value="googlewebfonts" data-exclude="true" />
+</p>
+
+<p><select name="fonts_family" id="fontfamilyselect" data-exclude="true" class="cytoSelect"></select></p>
+
+<p><button id="font_import_button" class="cytoButton large">Import Font Family</button></p>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
+			console.log(data);
+			console.log(data.imported);
+			var fds = $('input[name=fonts_directory]');
+			var ffs = $('#fontfamilyselect');
+			var ib = $('#font_import_button');
+			
+			// Directory select
+			fds.cytoRadio("options",{
+				events:{
+					change:$.debounce(100,true,function(e){
+						var fonts = {};
+						var imported = {};
+						switch ($(this).cytoRadio("value")) {
+							case "fontsquirrel":
+								$.each(data.fontsquirrel,function(fam,f){fonts[fam] = f.family_name;});
+								if (data.imported.length>0) {
+									$.each(data.imported,function(fam,f){imported[fam] = fam;});
+									iffs.cytoSelect("update",imported);
+								}
+								break;
+							case "googlewebfonts":
+								$.each(data.googlewebfonts,function(fam,f){fonts[fam] = fam;});
+								break;
+							default:return false;
+						}
+						ffs.cytoSelect("update",fonts);
+					})
+				}
+			});
+			
+			// Family select
+			ffs.cytoSelect("options",{
+				events:{
+					change:function(cy,e){
+						var dir = fds.cytoRadio("value");
+						var f = data[dir][$(this).cytoSelect("value")];
+						if (f!=null) switch (dir) {
+							case "fontsquirrel":
+								// Check if font has already been imported
+								if (!$.isEmptyObject(data.imported[dir]) && data.imported[dir][f.family_urlname] != null) ib.addClass('active').html("Font Family Imported");
+								else ib.removeClass('active').html("Import Font Family");
+								break;
+							case "googlewebfonts":
+								console.log(data.imported[dir][f.family]);
+								if (!$.isEmptyObject(data.imported[dir]) && data.imported[dir][f.family] != null) ib.addClass('active').html("Font Family Imported");
+								else ib.removeClass('active').html("Import Font Family");
+								break;
+						}
+					}
+				}
+			});
+			
+			// Font Import Button
+			ib.css({"margin-top":10}).click(function(e){
+				e.preventDefault();
+				var dir = fds.cytoRadio("value");
+				var f = data[dir][ffs.cytoSelect("value")];
+				var name = (dir=="fontsquirrel") ? f.family_name : f.family;
+				if (!ib.hasClass('active')) {
+					// Import font
+					$.cytoAjax("/cytoplasm/fonts/import",{directory:dir,family:f},function(data){
+						$.cytoAjaxResponse('Font "'+name+'" has been imported successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+						ib.addClass('active').html("Font Family Imported");
+					});
+				} else {
+					// Remove font
+					if (confirm("Are you sure you want to remove this font from your fonts library?")) $.cytoAjax("/cytoplasm/fonts/remove",{directory:dir,family:f},function(data){
+						$.cytoAjaxResponse('Font "'+name+'" has been removed successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+						ib.removeClass('active').html("Import Font Family");
+					});
+				}
+			});
+			
+		});
+	});
+})(jQuery);
+</script>

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

@@ -309,8 +309,6 @@
 		// Fetch fonts
 		$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
 			console.log(data);
-			
-			// Directory select
 			var fds = $('input[name=fonts_directory]');
 			var ffs = $('#fontfamilyselect');
 			var iffs = $('.ind_font_fam_select');
@@ -345,6 +343,7 @@
 				});
 			*/
 			
+			// Directory select
 			fds.cytoRadio("value",$.Cytoplasm("conf","fontloader.directory")).cytoRadio("options",{
 				events:{
 					change:$.debounce(100,true,function(e){
@@ -371,6 +370,7 @@
 				}
 			});
 			
+			// Family select
 			ffs.cytoSelect("options",{
 				events:{
 					change:function(cy,e){