cytoplasm 0.1.5 → 0.1.6

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

@@ -0,0 +1,3 @@
+(function($){
+	
+})(jQuery);

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

@@ -86,10 +86,11 @@
 				if (settings.widget.inputList.inputs.elements.find(':checked')) methods.value.apply(settings.widget.inputList.inputs.elements,[settings.widget.inputList.inputs.elements.find(':checked').val()]);
 				
 				// Bindings
-				settings.widget.inputList.inputs.elements.change($.debounce(100,true,function(e){
+				//settings.widget.inputList.inputs.elements
+				$('input[name="'+$this.attr('name')+'"]:first-child').change($.debounce(100,true,function(e){
 					methods.value.apply(settings.widget.inputList.inputs.elements,[settings.widget.inputList.inputs.elements.filter(':checked').val()])
 					settings.events.change.apply(settings.widget.inputList.inputs.elements,[settings,e]);
-				})).trigger('change');
+				}));//.trigger('change');
 				settings.widget.buttonList.buttons.elements.bind({
 					mousedown:function(e){
 						e.preventDefault();

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

@@ -15,12 +15,7 @@ var Cytoplasm;
 		// Setup callback messages
 		$.each(["success","sending","error"],function(i,v){
 			var $this = $('#'+v+'_message');
-			if (!$this.is('*')) {
-				$this = $('<p />').addClass('callback_message').attr("id",v+"_message");
-				//if (header.children(':first-child').is('h1')) $this.insertAfter(header.children(':first-child'));
-				//else $this.prependTo(header);
-				$this.hide().appendTo(header);
-			}
+			if (!$this.is('*')) $this = $('<p />').addClass('callback_message').attr("id",v+"_message").hide().appendTo(header);
 		});
 	});
 })(jQuery);
@@ -33,7 +28,14 @@ var Cytoplasm;
 	};
 	var conf = {};
 	var vars = {};
-	var ready = false;
+	var ready = false, readyFunctions = [
+		function(){
+			var allexceptheader = $('body').children(':not(header)').animate({opacity:1},250,function(){
+				$('body').css('overflow-y','scroll');
+				$(window).bind('beforeunload',function(){allexceptheader.animate({opacity:0},100);});
+			});
+		}
+	];
 	
 	// Gradient manipulation library
 	var parseGradient = function(grad,reverse){
@@ -136,12 +138,19 @@ var Cytoplasm;
 			$('body').css("overflow","hidden").children(':not(header)').css("opacity",0);
 			
 			// Fetch latest settings via AJAX
-			$.cytoAjax("/cytoplasm/settings/fetch",{},function(data){
-				conf = data.conf;
-				vars = data.vars;
-				$('body').data('cytoplasm',settings);
-				methods.setStyles.apply(this);
-				ready = true;
+			$.ajax("/cytoplasm/settings/fetch",{
+				type:"POST",
+				success:function(data){
+					data = $.parseJSON(data);
+					conf = data.conf;
+					vars = data.vars;
+					$(document).ready(function(){
+						$('body').data('cytoplasm',settings);
+						methods.setStyles.apply();
+						ready = true;
+						$.each(readyFunctions,function(i,f){f.apply();});
+					});
+				}
 			});
 		},
 		setStyles:function(){
@@ -156,7 +165,8 @@ var Cytoplasm;
 				body:{
 					background:vars.colors.global.background,
 					font:vars.fonts.sizes.normal+" "+vars.fonts.faces.regular,
-					color:vars.colors.global.text
+					color:vars.colors.global.text,
+					padding:vars.layout.padding
 				},
 				'::selection':{
 					background:vars.colors.global.accent,
@@ -179,6 +189,8 @@ var Cytoplasm;
 					"font-weight":lightweight
 				},
 				header:{
+					margin:vars.layout.header.margin,
+					padding:vars.layout.header.padding,
 					'#logo':{
 						position:vars.layout.header.logo.position,
 						top:vars.layout.header.logo.y+10
@@ -190,6 +202,14 @@ var Cytoplasm;
 						}
 					}
 				},
+				'#main_content':{
+					margin:vars.layout.content.margin,
+					padding:vars.layout.content.padding
+				},
+				'footer':{
+					margin:vars.layout.footer.margin,
+					padding:vars.layout.footer.padding
+				},
 				'table.cytoTable':{
 					background:vars.colors.plugins.cytoTable.background,
 					td:{
@@ -286,17 +306,24 @@ var Cytoplasm;
 		destroy:function(){
 			$('body').data('cytoplasm',null);
 		},
-		ready:function(callback){
+		ready:function(func){
+			if (typeof func != "function") return console.warn("$.Cytoplasm's ready method requires a function to be passed as its first and only argument.");
+			if (ready==true) return func.apply();
+			else readyFunctions.push(func);
+			
+			/*
+			
 			var interval = setInterval(function(){
-				if (ready) {
+				if (ready==true) {
 					clearInterval(interval);
 					var allexceptheader = $('body').children(':not(header)').animate({opacity:1},250,function(){
 						$('body').css('overflow-y','scroll');
 						$(window).bind('beforeunload',function(){allexceptheader.animate({opacity:0},100);});
-						callback.apply();
+						func.apply();
 					});
 				}
 			},10);
+			*/
 		}
 	};
 	
@@ -306,6 +333,6 @@ var Cytoplasm;
 		else $.error('Method ' + method + ' does not exist on jQuery.Cytoplasm!');
 	};
 	
-	$(document).ready(function(){$.Cytoplasm()});
+	$.Cytoplasm();
 	
 })(jQuery);

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

@@ -15,8 +15,6 @@ h1, h2, h3, h4, h5, h6 {
 
 // Header
 header {
-	margin:0px;
-	padding:10px;
 	overflow:hidden;
 	
 	h1 {
@@ -45,8 +43,6 @@ nav {
 // Main Content
 #main_content {
 	min-height:400px;
-	margin:0px;
-	padding:20px;
 	background:white;
 	overflow:hidden;
 	box-shadow:0px 0px 10px rgba(0,0,0,0.8);
@@ -64,7 +60,7 @@ nav {
 
 // Footer
 footer {
-	padding:10px;
+	
 }
 
 // jQuery Plugins

data/app/controllers/cytoplasm/fonts_controller.rb

@@ -6,15 +6,22 @@ require 'fileutils'
 
 module Cytoplasm
 	class FontsController < ApplicationController
+		before_filter :load_cache, :only => [:index,:show,:fetch_all]
 		
-		@@cache = false
+		# Configuration
+		@@directories = {"fontsquirrel" => "FontSquirrel","googlewebfonts" => "Google Web Fonts"}
 		@@fontsdir = "public/fonts"
 		@@gwf_file = @@fontsdir + "/googlewebfonts.yml"
 		@@enabled_file = @@fontsdir + "/enabled.yml"
 		
+		# For internal usage, DO NOT MODIFY
+		@@cache = false
+		
 		class << self
-			#attr_accessor :fonts
 			
+			def directories
+				@@directories
+			end
 			def fonts
 				@@cache = fetch_fonts() if @@cache == false
 				return @fonts
@@ -195,9 +202,11 @@ module Cytoplasm
 					e = {}
 					["fontsquirrel","googlewebfonts"].each do |dir|
 						e[dir] = {}
-						enabled[dir].keys.each do |fam|
+						enabled[dir].each do |fam,variants|
 							# Make list of variants to enable
-							e[dir][fam] = []
+							c = []
+							c += variants.keys if dir=="googlewebfonts"
+							e[dir][fam] = c
 						end
 					end
 					open(@@enabled_file,"w+") {|f| f.write(e.to_yaml)}
@@ -315,16 +324,18 @@ module Cytoplasm
 		end
 		
 		def fetch_all
-			@@cache = Cytoplasm::FontsController.fetch_fonts() if @@cache == false
 			render :text => Cytoplasm::Ajax.success(@@cache)
 		end
 		
 		def index
-			@@cache = Cytoplasm::FontsController.fetch_fonts() if @@cache == false
 			@installed = Cytoplasm::FontsController.fetch_imported()
 			@enabled = Cytoplasm::FontsController.fetch_enabled()
 		end
 		
+		def show
+			@font = Cytoplasm::FontsController.fetch_family(params[:directory],params[:family])
+		end
+		
 		def import
 			render :text => Cytoplasm::Ajax.success(Cytoplasm::FontsController.import(params[:directory],params[:family]))
 		end
@@ -338,5 +349,14 @@ module Cytoplasm
 			render :text => Cytoplasm::Ajax.success(Cytoplasm::FontsController.disable(params[:directory],params[:family]))
 		end
 		
+		private
+			def load_cache
+				@@cache = Cytoplasm::FontsController.fetch_fonts() if @@cache == false
+			end
+			def refresh_cache
+				@@cache = false
+				load_cache()
+			end
+		
 	end
 end

data/app/controllers/cytoplasm/settings_controller.rb

@@ -9,6 +9,10 @@ module Cytoplasm
 			
 		end
 		
+		def layout
+			
+		end
+		
 		def update
 			
 		end

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

@@ -0,0 +1,107 @@
+<h3>Install New Fonts</h3>
+<table class="cytoTable">
+	<tr>
+		<td class='labelcell'>Directory:</td>
+		<td>
+			<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" />
+		</td>
+	</tr>
+	<tr>
+		<td class='labelcell'>Family:</td>
+		<td><select name="fonts_family" id="fontfamilyselect" data-exclude="true" class="cytoSelect"></select></td>
+	</tr>
+	<tr>
+		<td class='labelcell'>Options:</td>
+		<td><input type="checkbox" id="font_import_autoenable" data-exclude="true" checked="checked" /> Automatically enable this font after installing</td>
+	</tr>
+	<tr><td colspan="2"><button id="font_import_button" class="cytoButton large">Install Font Family</button></td></tr>
+</table>
+
+<script type="text/javascript">
+(function($){
+	var Cytofonts;
+	$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
+		Cytofonts = data;
+		$.Cytoplasm("ready",function(){
+			var fds = $('input[name=fonts_directory]');
+			var ffs = $('#fontfamilyselect');
+			var iae = $('#font_import_autoenable');
+			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(Cytofonts.fontsquirrel,function(fam,f){fonts[fam] = f.family_name;});
+								if (Cytofonts.imported.length>0) {
+									$.each(Cytofonts.imported,function(fam,f){imported[fam] = fam;});
+									iffs.cytoSelect("update",imported);
+								}
+								break;
+							case "googlewebfonts":
+								$.each(Cytofonts.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 = Cytofonts[dir][$(this).cytoSelect("value")];
+						if (f!=null) switch (dir) {
+							case "fontsquirrel":
+								// Check if font has already been imported
+								if (!$.isEmptyObject(Cytofonts.imported[dir]) && Cytofonts.imported[dir][f.family_urlname] != null) ib.addClass('active').html("Font Family Installed");
+								else ib.removeClass('active').html("Install Font Family");
+								break;
+							case "googlewebfonts":
+								console.log(Cytofonts.imported[dir][f.family]);
+								if (!$.isEmptyObject(Cytofonts.imported[dir]) && Cytofonts.imported[dir][f.family] != null) ib.addClass('active').html("Font Family Installed");
+								else ib.removeClass('active').html("Install Font Family");
+								break;
+						}
+					}
+				}
+			});
+			
+			// Font Import Button
+			ib.css({"margin-top":10}).click(function(e){
+				e.preventDefault();
+				var dir = fds.cytoRadio("value");
+				var f = Cytofonts[dir][ffs.cytoSelect("value")];
+				var name = (dir=="fontsquirrel") ? f.family_name : f.family;
+				var urlname = (dir=="fontsquirrel") ? f.family_urlname : f.family;
+				if (!ib.hasClass('active')) {
+					// Import font
+					$.cytoAjax("/cytoplasm/fonts/import",{directory:dir,family:urlname},function(data){
+						if (!iae.prop("checked")) $.cytoAjaxResponse('Font "'+name+'" has been installed successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+						else $.cytoAjax("/cytoplasm/fonts/enable",{family:urlname,directory:dir},function(data2){
+							$.cytoAjaxResponse('Font "'+name+'" has been enabled successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+						});
+						ib.addClass('active').html("Font Family Installed");
+					});
+				} else {
+					// Remove font
+					if (confirm("Are you sure you want to uninstall this font from your fonts library?")) $.cytoAjax("/cytoplasm/fonts/remove",{directory:dir,family:f},function(data){
+						$.cytoAjaxResponse('Font "'+name+'" has been uninstalled successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+						ib.removeClass('active').html("Install Font Family");
+					});
+				}
+			});
+			
+		});
+		
+	});
+})(jQuery);
+</script>

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

@@ -0,0 +1,65 @@
+<% 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>
+			<% unless f["variants"].nil? or f["variants"].empty? %><% f["variants"].each do |v| %>
+				<tr>
+					<% if dir=="fontsquirrel" %>
+						<td class="labelcell"><%=v["style_name"]%>:</td>
+						<td style="background:white;text-align:center;"><%=image_tag(v["listing_image"])%></td>
+					<% elsif dir=="googlewebfonts" %>
+						<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 %>
+				</tr>
+			<% end end %>
+			<tr>
+				<td colspan=2>
+					<%=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")%> | 
+					<%=link_to("Uninstall","#",:class => "font_uninstall")%>
+				</td>
+			</tr>
+		</table>
+</li>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		
+		$('[data-uid="<%=uid%>"] .font_enable_disable').click(function(e){
+			e.preventDefault();
+			var $this = $(this);
+			var li = $this.parents("li");
+			var fam = li.data('family');
+			var dir = li.data('directory');
+			
+			if ($this.html()=="Enable") {
+				$.cytoAjax("/cytoplasm/fonts/enable",{family:fam,directory:dir},function(data){
+					$.cytoAjaxResponse('Font "'+fam+'" has been enabled successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+					$this.html("Disable");
+				});
+			} else if ($this.html()=="Disable") {
+				$.cytoAjax("/cytoplasm/fonts/disable",{family:li.data('family'),directory:dir},function(data){
+					$.cytoAjaxResponse('Font "'+fam+'" has been disabled successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+					$this.html("Enable");
+				});
+			} else return false;
+		});
+		
+		$('.font_uninstall').click(function(e){
+			e.preventDefault();
+			var $this = $(this);
+			var li = $this.parents("li");
+			var fam = li.data('family');
+			var dir = li.data('directory');
+			
+			if (confirm('Are you sure you want to uninstall this font?')) $.cytoAjax("/cytoplasm/fonts/remove",{family:fam,directory:dir},function(data){
+				$.cytoAjaxResponse('Font "'+fam+'" has been uninstalled successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
+				li.hide(400);
+			});
+		});
+	});
+})(jQuery);
+</script>

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

@@ -0,0 +1,20 @@
+<%
+uid = Cytoplasm.generate_uid()
+Cytoplasm::FontsController.directories.each do |dir,name| %>
+	<% if list[dir].any? %>
+		<h4><%=name%></h4>
+		<ul data-uid="<%=uid%>" style="margin:0px;padding:0px;">
+			<% list[dir].each do |fam,f| %>
+				<%=render :partial => 'li', :locals => {:fam => fam, :f => f, :dir => dir} %>
+			<% end %>
+		</ul>
+	<% end %>
+<% end %>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		var ul = $('[data-uid="<%=uid%>"]');
+	});
+})(jQuery);
+</script>