cytoplasm 0.2.6 → 0.2.7

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

@@ -9,12 +9,21 @@
 		widget:{
 			previewer:{
 				css:{
-					display:'inline-block',
-					"margin-right":10,
-					"border-radius":10,
-					"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"
+					width:'100%',
+					height:'100%',
+					"border-top-left-radius":10,
+					"border-bottom-left-radius":10
 				},
-				element:null
+				element:null,
+				wrapper:{
+					css:{
+						display:'inline-block',
+						"border-top-left-radius":10,
+						"border-bottom-left-radius":10,
+						background:"url(/assets/cytoplasm/transparent_bg.jpg)",
+						"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"
+					}
+				}
 			},
 			slider_table:{
 				attrs:{
@@ -36,8 +45,7 @@
 				},
 				css:{
 					display:'inline-block',
-					'vertical-align':'top',
-					'border-width':1
+					'vertical-align':'top'
 				},
 				element:null,
 				sliders:{
@@ -61,7 +69,7 @@
 				element:null
 			}
 		},
-		default_value:"hlsa(0,0%,100%,1)"
+		default_value:"hlsa(0,0%,50%,0)"
 	};
 	var attrs = ['hue','saturation','lightness','alpha'];
 	var methods = {
@@ -76,68 +84,70 @@
 				// Generate widget
 				$this.addClass('cytoColorPicker').css({display:'none'});
 				settings.widget.wrapper.element = $this.wrap("<div class='cytoColorPicker-wrapper' />").parent().css(settings.widget.wrapper.css);
-				settings.widget.previewer.element = $('<div />').addClass('cytoColorPicker-previewer').css(settings.widget.previewer.css).appendTo(settings.widget.wrapper.element).click(function(e){
+				settings.widget.previewer.wrapper.element = $('<div />').addClass('cytoColorPicker-previewer-wrapper').css(settings.widget.previewer.wrapper.css).appendTo(settings.widget.wrapper.element);
+				settings.widget.previewer.element = $('<div />').addClass('cytoColorPicker-previewer').css(settings.widget.previewer.css).appendTo(settings.widget.previewer.wrapper.element).click(function(e){
 					
 				});
 				
 				// Generate slider table
-				var slider_table = $('<table />').attr({cellPadding:0,cellSpacing:0}).css(settings.widget.slider_table.css).appendTo(settings.widget.wrapper.element);
-				for (var i=0;i<settings.format.length;i++) {
-					var letter = settings.format[i];
+				var slider_table = $('<table />').cytoTable().css(settings.widget.slider_table.css).appendTo(settings.widget.wrapper.element);
+				$.each(attrs,function(i,attr){
+					var letter = attr.charAt(0);
 					var tr = $('<tr />').appendTo(slider_table);
 					var lc = $('<td />').addClass('labelcell').html(letter.toUpperCase()+": ").append($('<span />').addClass('num').html(0)).appendTo(tr);
 					var sc = $('<td />').addClass('cytoColorPicker-sliderCell').appendTo(tr);
-					var slider = $('<div data-attr="'+attrs[i]+'" />').appendTo(sc).slider($.extend(true,{},settings.widget.slider_table.sliders.settings,settings.widget.slider_table.attrs[attrs[i]]));
+					var slider = $('<div data-attr="'+attr+'" />').appendTo(sc).slider($.extend(true,{},settings.widget.slider_table.sliders.settings,settings.widget.slider_table.attrs[attr]));
 					settings.widget.slider_table.sliders.elements.push(slider);
-				}
+				});
 				slider_table.find('td').css({'padding':"5px 10px"}).filter('.labelcell').width(50);
 				
-				settings.widget.previewer.element.width(slider_table.outerHeight()).height(slider_table.outerHeight());
-				
-				$this.data('cytoColorPicker',settings);
+				// Set dimensions of previewer
+				settings.widget.previewer.wrapper.element.width(slider_table.outerHeight()+5).height(slider_table.outerHeight()+5);
 				
 				// Get initial value as color
-				var wasSet = ($this.val()!="");
-				if (wasSet) settings.default_value = $this.val();
-				settings.value = $.Color(settings.default_value);
+				settings.value = $.Color(($this.val()!=null && $this.val()!="") ? $this.val() : settings.default_value);
 				
 				// Commit settings to data-cytoColorPicker attribute
 				$this.data('cytoColorPicker',settings);
 				methods.resize.apply($this);
-				if (wasSet) methods.value.apply($this,[settings.value]);
-				else methods.update.apply($this);
+				methods.value.apply($this,[settings.value]);
 			});
 		},
 		update:function(){
 			return this.each(function(){
 				var $this = $(this);
 				var settings = $this.data('cytoColorPicker');
-				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling this method!");
+				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the update method!");
 				
 				var wrapper = $this.parent();
 				var previewer = wrapper.find(".cytoColorPicker-previewer");
 				var sliders = wrapper.find('.ui-slider');
 				var color = {};
 				sliders.each(function(i){color[attrs[i]] = sliders.filter("[data-attr="+attrs[i]+"]").slider("value");});
-				color = $.Color(color);
-				previewer.css({"background-color":color.toHslaString()});
+				color = $.Color().hsla(color);
+				previewer.css({"background":color.toHslaString()});
 				
 				$this.val(color.toHslaString());
 				settings.events.change.apply($this,[color]);
 			});
 		},
 		value:function(color){
+			if (color == null) return $.Color(this.val()).toHslaString();
+			if (typeof color != "object") color = $.Color(color);
 			return this.each(function(){
 				var $this = $(this);
 				var settings = $this.data('cytoColorPicker');
-				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the set method!");
+				if (!$this.hasClass('cytoColorPicker') || settings==null) return console.warn("You must instanciate $.cytoColorPicker before calling the value method!");
 				
 				var wrapper = $this.parent();
-				color = $.Color(color);
 				var sliders = wrapper.find('.ui-slider');
-				sliders.each(function(i){sliders.filter("[data-attr="+attrs[i]+"]").slider("value",color.hsla()[i]);});
+				sliders.each(function(i){
+					var c = color.hsla()[i];
+					if (c==null) c = 0;
+					sliders.filter("[data-attr="+attrs[i]+"]").slider("value",c);
+				});
 				
-				methods.update.apply($this,[color]);
+				methods.update.apply($this);
 			});
 		},
 		resize:function(){

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

@@ -0,0 +1,173 @@
+(function($){
+	
+	var defaults = {
+		autoOpen:true,
+		events:{
+			onCreate:function(){},
+			onDestroy:function(){},
+			onOpen:function(){},
+			onShut:function(){}
+		},
+		options:{}, // Hash of options for the menu. Syntax: {html:click}
+		positioning:{
+			to:'bottom left',
+			offset:{
+				top:0,
+				left:0,
+				bottom:0,
+				right:0
+			}
+		},
+		transition:{
+			effect:"blind",
+			options:{
+				open:{},
+				shut:{}
+			},
+			speed:250
+		},
+		widget:{
+			list:{
+				css:{
+					margin:0,
+					padding:0,
+					overflow:'hidden'
+				},
+				element:false,
+				li:{
+					css:{
+						'list-style':'none',
+						'margin':0,
+						'padding':10,
+						'background':'#555',
+						'border':'1px solid #444',
+						'color':'white',
+						'cursor':'pointer',
+						'font':'<%=Cytoplasm.vars()[:fonts][:sizes][:small]+" "+Cytoplasm.vars()[:fonts][:faces][:light]%>'
+					},
+					hover:{
+						background:"<%=Cytoplasm.vars()[:colors][:global][:accent]%>",
+						color:'black'
+					},
+					elements:[]
+				}
+			},
+			wrapper:{
+				css:{
+					position:'absolute',
+					'box-shadow':'0px 0px 10px rgba(0,0,0,0.5)'
+				},
+				element:false
+			}
+		}
+	};
+	
+	var methods = {
+		init:function(options){
+			return this.each(function(){
+				// Initialize
+				var $this = $(this).addClass('CytoMenu-parent');
+				var settings = $.extend(true,{},defaults,options);
+				
+				// Generate Widget
+				settings.widget.wrapper.element = $('<div />').addClass('CytoMenu-wrapper').css(settings.widget.wrapper.css).appendTo('body').hide();
+				settings.widget.list.element = $('<ul />').addClass('CytoMenu-list').css(settings.widget.list.css).appendTo(settings.widget.wrapper.element);
+				
+				// Generate Options
+				$.each(settings.options,function(html,click){
+					var li = $('<li />').html(html).css(settings.widget.list.li.css).appendTo(settings.widget.wrapper.element).click(click).hover(function(){
+						$(this).css(settings.widget.list.li.hover);
+					},function(){
+						$(this).css(settings.widget.list.li.css);
+					});
+					settings.widget.list.li.elements.push(li);
+				});
+				
+				// Save settings
+				$this.data("CytoMenu",settings).data("CytoMenu-state","shut");
+				
+				// Positioning
+				methods.reposition.apply($this);
+				
+				// Finalize
+				settings.events.onCreate.apply($this);
+				if (settings.autoOpen) methods.open.apply($this);
+			});
+		},
+		destroy:function(){
+			return this.each(function(){
+				var $this = $(this);
+				var settings = $this.data('CytoMenu');
+				if (settings==null) return console.warn("You must instantiate $.CytoMenu before calling the destroy method!");
+				
+				settings.events.onDestroy.apply($this);
+			})
+		},
+		reposition:function(){
+			return this.each(function(){
+				var $this = $(this);
+				var settings = $this.data('CytoMenu');
+				if (settings==null) return console.warn("You must instantiate $.CytoMenu before calling the reposition method!");
+				
+				// Position to 
+				var to = settings.positioning.to;
+				if (to.indexOf("top")>-1) settings.widget.wrapper.element.css("top",$this.offset().top);
+				else if (to.indexOf("bottom")>-1) settings.widget.wrapper.element.css("top",$this.offset().top+$this.outerHeight());
+				if (to.indexOf("left")>-1) settings.widget.wrapper.element.css("left",$this.offset().left);
+				else if (to.indexOf("right")>-1) settings.widget.wrapper.element.css("right",$this.offset().left+$this.outerWidth()-settings.widget.wrapper.element.outerWidth());
+				
+				// Apply offsets
+				settings.widget.wrapper.element.css({
+					top:parseInt(settings.widget.wrapper.element.css("top")) + settings.positioning.offset.top - settings.positioning.offset.bottom,
+					left:parseInt(settings.widget.wrapper.element.css("left")) + settings.positioning.offset.left - settings.positioning.offset.right
+				});
+			});
+		},
+		open:function(){
+			return this.each(function(){
+				var $this = $(this);
+				var settings = $this.data('CytoMenu');
+				if (settings==null) return console.warn("You must instantiate $.CytoMenu before calling the open method!");
+				
+				settings.widget.wrapper.element.show(settings.transition.effect,settings.transition.options.open,400,function(){
+					$this.data("CytoMenu",settings).data("CytoMenu-state","open");
+					settings.events.onOpen.apply($this);
+					$(document).bind("click.CytoMenu-open",function(e){
+						e.preventDefault();
+						$(document).unbind(e);
+						methods.shut.apply($this);
+					});
+				});
+			});
+		},
+		shut:function(){
+			return this.each(function(){
+				var $this = $(this);
+				var settings = $this.data('CytoMenu');
+				if (settings==null) return console.warn("You must instantiate $.CytoMenu before calling the shut method!");
+				
+				settings.widget.wrapper.element.hide(settings.transition.effect,settings.transition.options.shut,400,function(){
+					$this.data("CytoMenu",settings).data("CytoMenu-state","shut");
+					settings.events.onShut.apply($this);
+					$(document).unbind("click.CytoMenu-open");
+				});
+			});
+		},
+		toggle:function(){
+			return this.each(function(){
+				var $this = $(this);
+				var settings = $this.data('CytoMenu');
+				if (settings==null) return console.warn("You must instantiate $.CytoMenu before calling the toggle method!");
+				
+				methods[(($this.data('CytoMenu-state')=="open")?'shut':'open')].apply($this);
+			});
+		}
+	};
+	
+	$.fn.CytoMenu = function(method){
+		if (methods[method]) return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
+		else if (typeof method == 'object' || !method) return methods[((this.hasClass('CytoMenu-parent'))?'toggle':'init')].apply(this,arguments);
+		else $.error('Method ' +  method + ' does not exist on $.CytoMenu!');
+	};
+	
+})(jQuery);

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

@@ -19,6 +19,7 @@
 					min:0,
 					max:100,
 					value:0,
+					step:1,
 					slide:function(e,ui){},
 					change:function(e,ui){}
 				}
@@ -52,6 +53,7 @@
 					if ($this.data('unit')!=null) settings.widget.label.readout.unit = $this.data('unit');
 					if ($this.data('min')!=null) settings.widget.slider.options.min = $this.data('min');
 					if ($this.data('max')!=null) settings.widget.slider.options.max = $this.data('max');
+					if ($this.data('step')!=null) settings.widget.slider.options.step = $this.data('step');
 					if ($this.val()!=null && $this.val()!="") settings.widget.slider.options.value = parseInt($this.val());
 				} else settings = options;
 				

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

@@ -6,14 +6,51 @@
 			table:{
 				cell:{
 					padding:0,
-					spacing:0
+					spacing:0,
+				},
+				css:{
+					width:"100%",
+					"margin-bottom":15,
+					"box-shadow":"0px 0px 10px rgba(0,0,0,0.5)"
+				},
+				element:false,
+				tr:{
+					css:{},
+					elements:[],
+					td:{
+						css:{
+							padding:10
+						},
+						elements:[],
+						types:{
+							header:{
+								css:{},
+								tag:"h3"
+							},
+							icon:{
+								css:{
+									width:16,
+									cursor:'pointer'
+								}
+							},
+							info:{
+								css:{}
+							},
+							label:{
+								css:{
+									width:100,
+									font:"<%=Cytoplasm.vars()[:fonts][:sizes][:small]+" "+Cytoplasm.vars()[:fonts][:faces][:light]%>",
+								}
+							}
+						}
+					}
 				}
 			}
 		},
 		events:{
-			create:function(cy){},
-			change:function(cy,event){},
-			destroy:function(cy){}
+			onCreate:function(cy){},
+			onChange:function(cy,event){},
+			onDestroy:function(cy){}
 		}
 	};
 	
@@ -21,19 +58,65 @@
 		init:function(options){
 			return this.each(function(){
 				var $this = $(this);
+				if (!$this.is('table')) return console.warn("$.cytoTable expects a table!");
 				var settings = $.extend(true,{},defaults,options);
 				
 				// Setup table
-				$this.attr({cellpadding:0,cellspacing:0});
+				settings.widget.table.element = $(this).addClass('cytoTable')
+					.attr({cellpadding:settings.widget.table.cell.padding,cellspacing:settings.widget.table.cell.spacing})
+					.css(settings.widget.table.css);
+				// Setup tr
+				var colspan = 0;
+				settings.widget.table.tr.elements = settings.widget.table.element.find("tr").each(function(){
+					var tds = $(this).css(settings.widget.table.tr.css).find("td");
+					if (tds.length > colspan) colspan = tds.length;
+					tds.each(function(){settings.widget.table.tr.td.elements.push($(this));});
+				});
+				// Setup td
+				$.each(settings.widget.table.tr.td.elements,function(i,td){
+					td.css(settings.widget.table.tr.td.css);
+					$.each(settings.widget.table.tr.td.types,function(type,opts){if (td.hasClass(type+'cell')) td.attr('data-type',type);});
+					if (td.data("type")!=null) {
+						var type = td.data('type');
+						td.css(settings.widget.table.tr.td.types[type].css);
+						switch (type) {
+							case "header":
+								td.attr('colspan',colspan);
+								var tag = settings.widget.table.tr.td.types.header.tag;
+								if (td.data('tag')!=null) tag = td.data('tag');
+								if (!td.children(tag).length) {
+									tag = $('<'+tag+'>').html(td.html())
+									td.html("").append(tag);
+								} else {
+									tag = td.children(tag);
+									tag.css("margin",0);
+								}
+								break;
+							case "icon":
+								
+								break;
+							case "info":
+								td.attr('colspan',colspan);
+								break;
+							
+							case "label":
+								break;
+						}
+					}
+				});
 				
 				$this.data('cytoTable',settings);
 			});
 		},
 		resize:function(){
-			
+			return this.each(function(){
+				
+			});
 		},
 		destroy:function(){
-			
+			return this.each(function(){
+				
+			});
 		}
 	};