cytoplasm 0.1.5 → 0.1.6

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

@@ -4,171 +4,17 @@
 
 <% if @enabled["fontsquirrel"].any? or @enabled["googlewebfonts"].any? %>
 	<h3>Enabled Fonts</h3>
-	<p>These fonts are loaded at runtime. Remember: <b>less is more!</b> Enabling lots of fonts can slow page loading times and clutter up layouts.</p>
-	
-	<% {"fontsquirrel" => "FontSquirrel","googlewebfonts" => "Google Web Fonts"}.each do |dir,name| %>
-		<% if @enabled[dir].any? %>
-			<h6><%=name%></h6>
-			<ul>
-				<% @enabled[dir].each do |fam,f| %>
-					<%=render :partial => 'font_li', :locals => {:fam => fam, :f => f, :dir => dir} %>
-				<% end %>
-			</ul>
-		<% end %>
-	<% end %>
-	
+	<p>The following fonts are being loaded into every page of your site. To use them, simply add a font-family CSS rule referencing the <b>CSS Name</b> to any element.</p>
+	<p><b>Remember: less is more!</b> Loading tons of fonts can severely affect page load times, and using more than a few at a time is widely considered poor design practice anyway. It is recommended that you simply disable any fonts that you aren't using.</p>
+	<%=render :partial => 'list', :object => @enabled %>
 	<hr />
 <% end %>
 
 <% if @installed["fontsquirrel"].any? or @installed["googlewebfonts"].any? %>
 	<h3>Installed Fonts</h3>
 	<p>This includes all fonts that are currently installed into this Cytoplasm project.</p>
-	
-	<% {"fontsquirrel" => "FontSquirrel","googlewebfonts" => "Google Web Fonts"}.each do |dir,name| %>
-		<% if @installed[dir].any? %>
-			<h6><%=name%></h6>
-			<ul>
-				<% @installed[dir].each do |fam,f| %>
-					<%=render :partial => 'font_li', :locals => {:fam => fam, :f => f, :dir => dir} %>
-				<% end %>
-			</ul>
-		<% end %>
-	<% end %>
-	
+	<%=render :partial => 'list', :object => @installed %>
 	<hr />
 <% end %>
 
-<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><input type="checkbox" id="font_import_autoenable" data-exclude="true" checked="checked" /> Automatically enable this font after installing</p>
-<p><button id="font_import_button" class="cytoButton large">Install Font Family</button></p>
-
-<script type="text/javascript">
-(function($){
-	$.Cytoplasm("ready",function(){
-		$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
-			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(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 Installed");
-								else ib.removeClass('active').html("Install 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 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 = data[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>
-
-<script type="text/javascript">
-(function($){
-	$.Cytoplasm("ready",function(){
-		$('.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>
+<%=render :partial => 'installer'%>

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

@@ -0,0 +1,11 @@
+<h2><%=@font['family_name']%></h2>
+
+<table class="cytoTable">
+	<tr><td colspan=2><h3>Variants</h3></td></tr>
+	<% @font['familyinfo'].each do |variant| %>
+				<tr>
+					<td class="labelcell"><%=variant['style_name']%>:</td>
+					<td style="background:white;text-align:center;"><%=image_tag(variant['sample_image'])%></td>
+				</tr>
+	<% end %>
+</table>

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

@@ -0,0 +1 @@
+<h2>Cytoplasm Colors Settings</h2>

data/app/views/cytoplasm/settings/{edit.html.erb → general.html.erb}

@@ -1,17 +1,9 @@
-<h2>Cytoplasm Settings</h2>
+<h2>Cytoplasm General Settings</h2>
+<p>This interface generates a YAML file at config/initializers/cytoplasm.vars.yml.</p>
+
 <form id="site_settings_form" action="" method="post">
-	<p class="callback_message" id="success_message"></p>
-	<p class="callback_message" id="status_message"></p>
-	<p class="callback_message" id="error_message"></p>
 	<table id="layout_settings_table" class='cytoTable' cellpadding=0 cellspacing=0>
 		<tr><td class='headercell' colspan=2><h3>General</h3></td></tr>
-		<tr>
-			<td class='labelcell'>Layout Mode:</td>
-			<td>
-				<input type="radio" name="layout_mode" value="fluid" data-label="Fluid" class="cytoRadio" />
-				<input type="radio" name="layout_mode" value="boxed" data-label="Boxed" />
-			</td>
-		</tr>
 		<tr>
 			<td class='labelcell'>Layout Padding:</td>
 			<td><input type="hidden" name="layout_padding" class="cytoSlider" value="20" data-max="200" data-unit="px" data-label="Amount of padding for your content" /></td>
@@ -116,21 +108,6 @@
 		</tr>
 		
 		<tr><td class='headercell' colspan=2><h3>Fonts</h3></td></tr>
-		<tr>
-			<td class='labelcell'>Font Directory:</td>
-			<td>
-				<input type="radio" name="fonts_directory" data-label="Standard Web Fonts" value="standard" data-exclude="true" class="cytoRadio" />
-				<input type="radio" name="fonts_directory" data-label="Font Squirrel API" value="fontsquirrel" data-exclude="true" />
-				<input type="radio" name="fonts_directory" data-label="Google Web Fonts" value="googlewebfonts" data-exclude="true" />
-			</td>
-		</tr>
-		<tr>
-			<td class='labelcell'>Font Family:</td>
-			<td>
-				<select name="fonts_family" id="fontfamilyselect" data-exclude="true" class="cytoSelect"></select>
-				<button id="font_import_button" class="cytoButton large">Import Font Family</button>
-			</td>
-		</tr>
 		<tr><td class='infocell' colspan=2>Select individual fonts below if desired.</td></tr>
 		<% ['Light','Regular','Bold'].each do |style| %>
 		<tr>
@@ -306,173 +283,6 @@
 		$('input[name=nav_background_color],input[name=nav_background_gradient_start],input[name=nav_background_gradient_stop]').cytoColorPicker("options",{widget:{wrapper:{css:{'margin-top':10}}}});
 		$('input[name=nav_background_color]').cytoColorPicker("value",$.Cytoplasm("vars","layout.header.nav.background"));
 		
-		// Fetch fonts
-		$.cytoAjax("/cytoplasm/fonts/fetch_all",function(data){
-			console.log(data);
-			var fds = $('input[name=fonts_directory]');
-			var ffs = $('#fontfamilyselect');
-			var iffs = $('.ind_font_fam_select');
-			var ifs = $('.ind_font_select');
-			
-			/*
-				// Fetch family details
-				$.cytoAjax("settings/fs_fetch_family.php",{family:f.family_urlname},function(data){
-					ifs.each(function(){
-						var select = $(this);
-						
-						// Populate list
-						var fam = {};
-						$.each(data.family,function(i,member){
-							fam[member.fontface_name] = member;
-							select.append($('<option />').val(member.fontface_name).html(member.fontface_name+" ("+member.style_name+")"));
-						});
-						// Try to select defaults
-						var font = _page.less["fonts_"+select.data('style').toLowerCase()]
-						if (font.charAt(0)=='"') font = font.slice(1,-1);
-						if (fam[font] != null) select.val(font);
-						else $.each(fam,function(ffname,member){
-							if (member.style_name.indexOf(select.data('style'))>-1 || member.style_name.indexOf(select.data('style').toLowerCase())>-1) {
-								select.val(ffname);
-								return false;
-							}
-						});
-						// Set preview image and refresh cytoSelect
-						select.parent().siblings('a.font-preview').css({background:'white',display:'block',width:"100%","text-align":"center","padding-top":5,"border-top-left-radius":5,"border-top-right-radius":5,"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"}).children('img').attr("src",fam[select.val()].listing_image).show();
-						select.cytoSelect("refresh").data('font',fam[select.val()]);
-					});
-				});
-			*/
-			
-			// Directory select
-			fds.cytoRadio("value",$.Cytoplasm("conf","fontloader.directory")).cytoRadio("options",{
-				events:{
-					change:$.debounce(100,true,function(e){
-						var fonts = {};
-						var imported = {};
-						switch ($(this).cytoRadio("value")) {
-							case "fontsquirrel":
-								if (!$('#font_import_button').is(':visible')) $('#font_import_button').show(400);
-								var importedFamily = {};
-								$.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":
-								if ($('#font_import_button').is(':visible')) $('#font_import_button').hide(400);
-								$.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 (data.imported.length>0 && data.imported[f.family_urlname] != null) $('#font_import_button').addClass('active').html("Font Family Imported");
-								else $('#font_import_button').removeClass('active').html("Import Font Family");
-								
-								break;
-							case "googlewebfonts":
-								
-								break;
-						}
-					}
-				}
-			});
-			
-			// Font Import Button
-			$('#font_import_button').css({"margin-top":10}).click(function(e){
-				e.preventDefault();
-				var $this = $(this);
-				var f = data[fds.cytoRadio("value")][ffs.cytoSelect("value")];
-				if (!$this.hasClass('active')) {
-					// Import font
-					$.cytoAjax("settings/fs_import.php",{family:f},function(data){
-						$.cytoAjaxResponse('Font "'+f.family_name+'" has been imported successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
-						$this.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("settings/fs_remove.php",{family:f},function(data){
-						$.cytoAjaxResponse('Font "'+f.family_name+'" has been removed successfully.<br /><a href="#" onClick="window.location.reload();">You must reload to apply these changes.</a>');
-						$this.removeClass('active').html("Import Font Family");
-					});
-				}
-			});
-			
-			// Individual font selects
-			$('.font-preview').css({background:'white',display:'block',width:"100%","text-align":"center","padding-top":5,"border-top-left-radius":5,"border-top-right-radius":5,"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"});
-			iffs.cytoSelect("options",{
-				widget:{
-					valueButton:{
-						css:{
-							'border-top-left-radius':0,
-							'border-bottom-left-radius':0
-						}
-					},
-					arrowButton:{
-						css:{
-							'border-top-right-radius':0,
-							'border-bottom-right-radius':0
-						}
-					}
-				},
-				events:{
-					change:function(cy,e){
-						if (data.imported[$(this).cytoSelect("value")] == undefined) return;
-						var subsets = {};
-						var fs = $('select[name="'+$(this).attr('name').split("_").slice(0,-1).join("_")+'"]');
-						$.each(data.imported[$(this).cytoSelect("value")],function(i,f){subsets[f.fontface_name] = f.fontface_name;});
-						fs.cytoSelect("update",subsets).cytoSelect("value",$.Cytoplasm("vars","fonts.faces."+fs.data('style').toLowerCase()));
-					}
-				}
-			});
-			
-			ifs.cytoSelect("options",{
-				widget:{
-					valueButton:{css:{'border-top-left-radius':0}},
-					arrowButton:{css:{'border-top-right-radius':0}},
-					optionsList:{
-						li:{
-							hover:function(cy,e){
-								var $this = cy.widget.wrapper.element.children('select.cytoSelect');
-								var fs = $('select[name="'+$this.attr('name')+'_family"]');
-								$(this).css({background:$.Cytoplasm("vars","colors.global.accent")});
-								if (data.imported.length>0) {
-									var font = data.imported[fs.cytoSelect("value")][$this.cytoSelect("value")];
-									cy.widget.wrapper.element.siblings('a.font-preview').attr('href',"http://www.fontsquirrel.com/fonts/"+font.family_urlname).children('img').attr("src",font.listing_image).show();
-								} else {
-									
-								}
-							}
-						}
-					}
-				},
-				events:{
-					change:function(cy,e){
-						var fs = $('select[name="'+$(this).attr('name')+'_family"]');
-						if (data.imported>0) {
-							var font = data.imported[fs.cytoSelect("value")][$(this).cytoSelect("value")];
-							cy.widget.wrapper.element.siblings('a.font-preview').attr('href',"http://www.fontsquirrel.com/fonts/"+font.family_urlname).children('img').attr("src",font.listing_image).show();
-						} else {
-							
-						}
-					}
-				}
-			});
-		});
-		
 		// Font size sliders
 		$.each(['fonts_small','fonts_normal','fonts_huge'],function(i,prop){$('input[name='+prop+']').cytoSlider("options",{events:{change:function(cy){cy.widget.label.element.css("font-size",$(this).val());}}});});
 		

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

@@ -1,13 +1,11 @@
-<h2 style="margin:0px;">Welcome to Cytoplasm's Management Interface!</h2>
-<p>This portion of Cytoplasm serves as a management tool for your website's graphical layout.</p>
+<h2 style="margin:0px;">Cytoplasm Backstage</h2>
 
 <hr />
 
 <ul>
-	<li><%=link_to("Tweak your current layout",cytoplasm_edit_url)%></li>
-	<li><%=link_to("Save and publish your current layout as a theme","#")%></li>
-	<li><%=link_to("Load up a layout theme","#")%></li>
-	<li><%=link_to("Browse layout themes","#")%></li>
+	<li><%=link_to("General Settings",cytoplasm_general_settings_url)%></li>
+	<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>
 </ul>
 

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

@@ -0,0 +1,56 @@
+<h2>Cytoplasm Layout Settings</h2>
+<p>This interface generates a YAML file at config/initializers/cytoplasm.vars.yml.</p>
+
+<form id="cytoplasm_settings_form" action="" method="post" enctype="multipart/form-data">
+	<table id="layout_settings_table" class="cytoTable">
+		<tr><td class='headercell' colspan=2><h3>General</h3></td></tr>
+		<tr>
+			<td class="labelcell">Layout Mode:</td>
+			<td>
+				<input type="radio" name="layout[mode]" value="fluid" data-label="Fluid" class="cytoRadio" />
+				<input type="radio" name="layout[mode]" value="boxed" data-label="Boxed" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Layout Padding:</td>
+			<td>
+				<input type="radio" name="layout[padding_mode]" value="all" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[padding_mode]" value="hv" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[padding_mode]" value="sbs" data-label="Side by Side" />
+				<input type="hidden" name="layout[padding]" class="cytoSlider" value="20" data-max="200" data-unit="px" data-label="Pixels of padding for the layout" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Header</h3></td></tr>
+		<tr><td class='headercell' colspan=2><h3>Content</h3></td></tr>
+		<tr>
+			<td class='labelcell'>Margin:</td>
+			<td>
+				<input type="radio" name="layout_content_margin_mode" value="all" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout_content_margin_mode" value="hv" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout_content_margin_mode" value="sbs" data-label="Side by Side" />
+				<input type="hidden" name="layout[content][margin]" class="cytoSlider" value="20" data-max="200" data-unit="px" data-label="Pixels of margin for the content" />
+			</td>
+		</tr>
+		<tr>
+			<td class='labelcell'>Padding:</td>
+			<td>
+				<input type="radio" name="layout[content][padding_mode]" value="all" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[content][padding_mode]" value="hv" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[content][padding_mode]" value="sbs" data-label="Side by Side" />
+				<input type="hidden" name="layout[content][padding]" class="cytoSlider" value="20" data-max="200" data-unit="px" data-label="Pixels of padding for the content" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Footer</h3></td></tr>
+		<tr><td class='headercell' colspan=2><h3>Plugins</h3></td></tr>
+	</table>
+</form>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		$('input[name="layout[content][margin_mode]"]').cytoRadio("options",{events:{change:function(){
+			console.log("changed!");
+		}}});
+	});
+})(jQuery);
+</script>