wcolorpicker-rails 1.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in wcolorpicker-rails.gemspec
+gemspec

data/README.md

@@ -0,0 +1,22 @@
+# Websanova Color Picker for Rails
+
+This gem vendors the Websanova Color Picker jQuery plugin assets for Rails 3.1 and greater.
+The files will be added to the asset pipeline and available for you to use.
+
+For info on how to use the plugin see the original documentation:
+
+[Websanova Color Picker](http://www.websanova.com/plugins/websanova/color-picker)
+
+## Installation
+
+In your Gemfile, add this line:
+
+    gem 'wcolorpicker-rails'
+
+You can include it by adding the following to your javascript file:
+
+    //= require wcolorpicker
+
+And to the css file:
+
+    *= require wcolorpicker

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/lib/wcolorpicker-rails.rb

@@ -0,0 +1,8 @@
+require "wcolorpicker-rails/version"
+
+module Wcolorpicker
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/wcolorpicker-rails/version.rb

@@ -0,0 +1,5 @@
+module Wcolorpicker
+  module Rails
+    VERSION = "1.1"
+  end
+end

data/vendor/assets/javascripts/wcolorpicker.js

@@ -0,0 +1,357 @@
+/******************************************
+ * Websanova.com
+ *
+ * Resources for web entrepreneurs
+ *
+ * @author          Websanova
+ * @copyright       Copyright (c) 2012 Websanova.
+ * @license         This websanova color picker jQuery plug-in is dual licensed under the MIT and GPL licenses.
+ * @link            http://www.websanova.com
+ * @docs            http://www.websanova.com/plugins/websanova/color-picker
+ * @version         Version 1.1
+ *
+ ******************************************/
+(function($)
+{
+	var defaultSettings = {
+		color			: 'black', 		// colors - black, white, cream, red, green, blue, yellow, orange, plum
+		opacity			: 0.8,			// opacity level
+		initColor		: '#FF0000',	// initial colour to set palette to
+		mode			: 'flat',		// flat mode inserts the palette to container, other modes insert button into container - hover, click
+		buttonSize		: 20,			// size of button if mode is ohter than flat
+		effect			: 'slide',		// none/slide/fade
+		showSpeed		: 500,			// time to run the effects on show
+		hideSpeed		: 500,			// time to run the effects on hide
+		onMouseover		: null,			// function to run when palette color is moused over
+		onMouseout		: null,			// function to run when palette color is moused out
+		onSelect		: null			// function to run when palette color is selected
+	};
+	
+	$.fn.wColorPicker = function(settings)
+	{
+		settings = $.extend({}, defaultSettings, settings || {});
+		
+		return this.each(function()
+		{
+			var elem = $(this);	
+			
+			var cp = new ColorPicker(settings);
+
+			cp.generate();
+
+			cp.appendToElement(elem);			
+		
+			cp.colorSelect(cp, settings.initColor);
+		});
+	};
+
+	/**
+	 * ColorPicker class definition
+	 */
+	function ColorPicker(settings)
+	{ 
+		this.colorPicker = null;
+		this.settings = settings;
+		this.currentColor = settings.initColor;
+		
+		this.height = null;					// init this, need to get height/width proper while element is still showing
+		this.width = null;
+		this.slideTopToBottom = null;		// used to assist with sliding in proper direction
+		
+		this.customTarget = null;			
+		this.buttonColor = null;
+		this.paletteHolder = null;
+		
+		return this;
+	}
+	
+	ColorPicker.prototype =
+	{
+		generate: function ()
+		{
+			if(this.colorPicker) return this.colorPicker;
+
+			var $this = this;
+
+			var clearFloats = {clear: 'both', height: 0, lineHeight: 0, fontSize: 0}; 
+
+			//custom colors
+			this.customTarget = $('<div class="_wColorPicker_customTarget"></div>');
+			this.customInput =
+			$('<input type="text" class="_wColorPicker_customInput" value=""/>').keyup(function(e)
+			{
+				var code = (e.keyCode ? e.keyCode : e.which);
+				
+				var hex = $this.validHex($(this).val());
+				
+				$(this).val(hex)
+				
+				//auto set color in target if it's valid hex code
+				if(hex.length == 7) $this.customTarget.css('backgroundColor', hex);
+				
+				if(code == 13)//set color if user hits enter while on input
+				{
+					$this.colorSelect($this, $(this).val());
+					if($this.buttonColor) $this.hidePalette($this)
+				}
+			})
+			.click(function(e){e.stopPropagation();});
+			
+			//setup custom area
+			var custom = 
+			$('<div class="_wColorPicker_custom"></div>')
+			.append(this.appendColors($('<div class="_wColorPicker_noColor">'), ['transparent'], 1))
+			.append(this.customTarget)
+			.append(this.customInput)
+			//clear floats
+			.append($('<div></div>').css(clearFloats))
+
+			//grays/simple palette
+			var simpleColors = ['000000', '333333', '666666', '999999', 'CCCCCC', 'FFFFFF', 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF'];
+			var simplePalette = this.appendColors($('<div class="_wColorPicker_palette_simple"></div>'), simpleColors, 1);
+			
+			//colors palette
+			var mixedColors = [
+				'000000', '003300', '006600', '009900', '00CC00', '00FF00', '330000', '333300', '336600', '339900', '33CC00', '33FF00', '660000', '663300', '666600', '669900', '66CC00', '66FF00',
+				'000033', '003333', '006633', '009933', '00CC33', '00FF33', '330033', '333333', '336633', '339933', '33CC33', '33FF33', '660033', '663333', '666633', '669933', '66CC33', '66FF33',
+				'000066', '003366', '006666', '009966', '00CC66', '00FF66', '330066', '333366', '336666', '339966', '33CC66', '33FF66', '660066', '663366', '666666', '669966', '66CC66', '66FF66',
+				'000099', '003399', '006699', '009999', '00CC99', '00FF99', '330099', '333399', '336699', '339999', '33CC99', '33FF99', '660099', '663399', '666699', '669999', '66CC99', '66FF99',
+				'0000CC', '0033CC', '0066CC', '0099CC', '00CCCC', '00FFCC', '3300CC', '3333CC', '3366CC', '3399CC', '33CCCC', '33FFCC', '6600CC', '6633CC', '6666CC', '6699CC', '66CCCC', '66FFCC',
+				'0000FF', '0033FF', '0066FF', '0099FF', '00CCFF', '00FFFF', '3300FF', '3333FF', '3366FF', '3399FF', '33CCFF', '33FFFF', '6600FF', '6633FF', '6666FF', '6699FF', '66CCFF', '66FFFF',
+				'990000', '993300', '996600', '999900', '99CC00', '99FF00', 'CC0000', 'CC3300', 'CC6600', 'CC9900', 'CCCC00', 'CCFF00', 'FF0000', 'FF3300', 'FF6600', 'FF9900', 'FFCC00', 'FFFF00',
+				'990033', '993333', '996633', '999933', '99CC33', '99FF33', 'CC0033', 'CC3333', 'CC6633', 'CC9933', 'CCCC33', 'CCFF33', 'FF0033', 'FF3333', 'FF6633', 'FF9933', 'FFCC33', 'FFFF33',
+				'990066', '993366', '996666', '999966', '99CC66', '99FF66', 'CC0066', 'CC3366', 'CC6666', 'CC9966', 'CCCC66', 'CCFF66', 'FF0066', 'FF3366', 'FF6666', 'FF9966', 'FFCC66', 'FFFF66',
+				'990099', '993399', '996699', '999999', '99CC99', '99FF99', 'CC0099', 'CC3399', 'CC6699', 'CC9999', 'CCCC99', 'CCFF99', 'FF0099', 'FF3399', 'FF6699', 'FF9999', 'FFCC99', 'FFFF99',
+				'9900CC', '9933CC', '9966CC', '9999CC', '99CCCC', '99FFCC', 'CC00CC', 'CC33CC', 'CC66CC', 'CC99CC', 'CCCCCC', 'CCFFCC', 'FF00CC', 'FF33CC', 'FF66CC', 'FF99CC', 'FFCCCC', 'FFFFCC',
+				'9900FF', '9933FF', '9966FF', '9999FF', '99CCFF', '99FFFF', 'CC00FF', 'CC33FF', 'CC66FF', 'CC99FF', 'CCCCFF', 'CCFFFF', 'FF00FF', 'FF33FF', 'FF66FF', 'FF99FF', 'FFCCFF', 'FFFFFF',
+			];
+			var mixedPalette = this.appendColors($('<div class="_wColorPicker_palette_mixed"></div>'), mixedColors, 18);
+			
+			//palette container
+			var bg = $('<div class="_wColorPicker_bg"></div>').css({opacity: this.settings.opacity});
+			var content =
+			$('<div class="_wColorPicker_content"></div>')			
+			.append(custom)
+			.append(simplePalette)
+			.append(mixedPalette)
+			.append($('<div></div>').css(clearFloats));
+			
+			//put it all together
+			this.colorPicker =
+			$('<div class="_wColorPicker_holder"></div>')
+			.click(function(e){e.stopPropagation();})
+			.append(
+				$('<div class="_wColorPicker_outer"></div>')
+				.append(
+					$('<div class="_wColorPicker_inner"></div>')
+					.append( bg )
+					.append( content )
+				)
+			)
+			.addClass('_wColorPicker_' + this.settings.color)
+			
+			return this.colorPicker;
+		},
+		
+		appendColors: function($palette, colors, lineCount)
+		{
+			var counter = 1;
+			var $this = this;
+			
+			for(index in colors)
+			{
+				$palette.append(
+					$('<div id="_wColorPicker_color_' + counter + '" class="_wColorPicker_color _wColorPicker_color_' + counter + '"></div>').css('backgroundColor', '#' + colors[index])
+					.click(function(){$this.colorSelect($this, $(this).css('backgroundColor'));})
+					.mouseout(function(e){$this.colorHoverOff($this, $(this));})
+					.mouseover(function(){$this.colorHoverOn($this, $(this));})
+				);
+				
+				if(counter == lineCount)
+				{
+					$palette.append($('<div></div>').css({clear:'both', height:0, fontSize:0, lineHeight:0, marginTop:-1}))
+					counter = 0;
+				}
+				
+				counter++;
+			}
+			
+			return $palette;
+		},
+		
+		colorSelect: function($this, color)
+		{
+			color = $this.toHex(color);;
+			
+			$this.customTarget.css('backgroundColor', color);
+			$this.currentColor = color;
+			$this.customInput.val(color);
+			
+			if($this.settings.onSelect) $this.settings.onSelect(color);
+			
+			if($this.buttonColor)
+			{
+				$this.buttonColor.css('backgroundColor', color);
+				$this.hidePalette($this);
+			} 
+		},
+		
+		colorHoverOn: function($this, $element)
+		{
+			$element.parent().children('active').removeClass('active');
+			$element.addClass('active').next().addClass('activeLeft');
+			$element.nextAll('.' + $element.attr('id') + ':first').addClass('activeTop');
+			
+			var color = $this.toHex($element.css('backgroundColor'));
+			
+			$this.customTarget.css('backgroundColor', color);
+			$this.customInput.val(color);
+			
+			if($this.settings.onMouseover) $this.settings.onMouseover(color);
+		},
+		
+		colorHoverOff: function($this, $element)
+		{
+			$element.removeClass('active').next().removeClass('activeLeft')
+			$element.nextAll('.' + $element.attr('id') + ':first').removeClass('activeTop')
+			
+			$this.customTarget.css('backgroundColor', $this.currentColor);
+			$this.customInput.val($this.currentColor);
+			
+			if($this.settings.onMouseout) $this.settings.onMouseout($this.currentColor);
+		},
+		
+		appendToElement: function($element)
+		{
+			var $this = this;
+			
+			if($this.settings.mode == 'flat') $element.append($this.colorPicker);
+			else
+			{
+				//setup button
+				$this.paletteHolder = $('<div class="_wColorPicker_paletteHolder"></div>').css({position: 'absolute', overflow: 'hidden', width: 1000}).append($this.colorPicker);
+				
+				$this.buttonColor = $('<div class="_wColorPicker_buttonColor"></div>').css({width: $this.settings.buttonSize, height: $this.settings.buttonSize});
+				
+				var buttonHolder =
+				$('<div class="_wColorPicker_buttonHolder"></div>')
+				.css({position: 'relative'})
+				.append($('<div class="_wColorPicker_buttonBorder"></div>').append($this.buttonColor))
+				.append($this.paletteHolder);
+
+				$element.append(buttonHolder);
+				
+				$this.width = $this.colorPicker.outerWidth();
+				$this.height = $this.colorPicker.outerHeight();
+				$this.paletteHolder.css({width: $this.width, height: $this.height}).hide();
+				
+				//setup events
+				if($this.settings.mode == 'hover')
+				{
+					buttonHolder.hover(
+						function(e){$this.showPalette(e, $this);},
+						function(e){$this.hidePalette($this);}
+					)
+				}
+				else if($this.settings.mode == 'click')
+				{
+					$(document).click(function(){if($this.paletteHolder.hasClass('active'))$this.hidePalette($this);});
+					
+					buttonHolder
+					.click(function(e)
+					{
+						e.stopPropagation();
+						$this.paletteHolder.hasClass('active') ? $this.hidePalette($this) : $this.showPalette(e, $this);
+					});
+				}
+				
+				$this.colorSelect($this, $this.settings.initColor);
+			}
+		},
+		
+		showPalette: function(e, $this)
+		{
+			var offset = $this.paletteHolder.parent().offset();
+			
+			//init some vars
+			var left = 0;
+			var top = $this.paletteHolder.parent().outerHeight();
+			$this.slideTopToBottom = top;
+			
+			if(offset.left - $(window).scrollLeft() + $this.width > $(window).width()) left = -1 * ($this.width - $this.paletteHolder.parent().outerWidth());
+			if(offset.top - $(window).scrollTop() + $this.height > $(window).height())
+			{
+				$this.slideTopToBottom = 0;
+				top = -1 * ($this.height);
+			}
+			
+			$this.paletteHolder.css({left: left, top: top});
+			
+			$this.paletteHolder.addClass('active')
+			
+			if($this.settings.effect == 'slide')
+			{
+				$this.paletteHolder.stop(true, false).css({height: 0, top: ($this.slideTopToBottom == 0 ? 0 : top)}).show().animate({height: $this.height, top: top}, $this.settings.showSpeed);
+			}
+			else if($this.settings.effect == 'fade')
+			{
+				$this.paletteHolder.stop(true, false).css({opacity: 0}).show().animate({opacity: 1}, $this.settings.showSpeed);
+			}
+			else
+			{
+				$this.paletteHolder.show();
+			}
+		},
+		
+		hidePalette: function($this)
+		{
+			//need this to avoid the double hide when you click on colour (once on click, once on mouse out) - this way it's only triggered once
+			if($this.paletteHolder.hasClass('active'))
+			{
+				$this.paletteHolder.removeClass('active');
+				
+				if($this.settings.effect == 'slide')
+				{
+					$this.paletteHolder.stop(true, false).animate({height: 0, top: ($this.slideTopToBottom == 0 ? 0 : $this.slideTopToBottom)}, $this.settings.hideSpeed, function(){$this.paletteHolder.hide()});
+				}
+				else if($this.settings.effect == 'fade')
+				{
+					$this.paletteHolder.stop(true, false).animate({opacity: 0}, $this.settings.hideSpeed, function(){$this.paletteHolder.hide()});
+				}
+				else
+				{
+					$this.paletteHolder.hide();
+				}
+			}
+		},
+		
+		toHex: function(color)
+		{
+			if(color.substring(0,3) == 'rgb')
+			{
+				var rgb = color.substring(4, color.length - 1).replace(/\s/g, '').split(',');
+				
+				for(i in rgb)
+				{
+					rgb[i] = parseInt(rgb[i]).toString(16);
+					if(rgb[i] == '0') rgb[i] = '00';
+				}
+				
+				var hex = '#' + rgb.join('').toUpperCase();
+			}
+			else
+			{
+				hex = color;//color.substring(0, 1) == '#' ? color.substring(1, color.length) : color;
+			}
+			
+			return  hex;
+		},
+		
+		validHex: function(hex)
+		{			
+			return '#' + hex.replace(/[^0-9a-f]/ig, '').substring(0,6).toUpperCase();
+		}
+	}
+
+})(jQuery);
+

data/vendor/assets/stylesheets/wcolorpicker.css

@@ -0,0 +1,70 @@
+/*** layout/positioning - stuff you probably won't need to change ***/
+._wColorPicker_holder{display:inline-block; position:static; z-index:999999; cursor:default;}
+._wColorPicker_outer{position:relative;}
+._wColorPicker_inner{position:relative;}
+._wColorPicker_bg{position:absolute; left:0; top:0; width:100%; height:100%;}
+._wColorPicker_content{position:relative;}
+
+/*** palettes layout ***/
+._wColorPicker_custom{margin-bottom:10px;}
+._wColorPicker_noColor{float:left; padding-top:6px;}
+._wColorPicker_customTarget{float:left; width:40px; height:18px; margin:0 5px 0 10px; border:solid black 1px;}
+._wColorPicker_customInput{float:left; position:relative; width:65px; height:18px; line-height:18px; padding:0 5px; font-size:10px; font-family:arial; border: solid black 1px;}
+
+._wColorPicker_palette_simple,
+._wColorPicker_palette_mixed{float:left; line-height:0px; font-size:0px;}
+._wColorPicker_palette_simple{margin-right:10px;}
+._wColorPicker_color{float:left; width:10px; height:10px; border-width:1px; border-style:solid; margin-left:-1px; margin-top:-1px; cursor:pointer; font-size:0px; line-height:0px;}
+
+/*** visuals ***/
+._wColorPicker_holder{border-width:2px; border-style:solid; border-radius:6px;}/*outer border*/
+._wColorPicker_outer{border-width:1px; border-style:solid; border-radius:5px; margin:1px; }/*inner border*/
+._wColorPicker_content{padding:5px; font-weight:bold; font-family:verdana; font-size:11px; line-height:15px;}/*content*/
+
+._wColorPicker_color{border-color:#000000;}
+._wColorPicker_color.active{border-color:#FF0000;}
+._wColorPicker_color.activeLeft{border-left-color:#FF0000;}
+._wColorPicker_color.activeTop{border-top-color:#FF0000;}
+
+/*** palette button ***/
+._wColorPicker_buttonHolder{display:inline-block; cursor:pointer;}
+._wColorPicker_buttonBorder{border:solid #9A9A9A 1px; border-radius:5px;}
+._wColorPicker_buttonColor{margin:2px; border-radius:4px;}
+._wColorPicker_paletteHolder{z-index:999999;}
+
+/*** colors ***/
+._wColorPicker_red, ._wColorPicker_red ._wColorPicker_outer{border-color:#CE6F6F;}
+._wColorPicker_red ._wColorPicker_bg{background-color:#F79992;}
+._wColorPicker_red ._wColorPicker_inner{color:#9C2F2F;}
+
+._wColorPicker_green, ._wColorPicker_green ._wColorPicker_outer{border-color:#A9DB66;}
+._wColorPicker_green ._wColorPicker_bg{background-color:#CDE6AC;}
+._wColorPicker_green ._wColorPicker_inner{color:#58792E;}
+
+._wColorPicker_blue, ._wColorPicker_blue ._wColorPicker_outer{border-color:#ADD9ED;}
+._wColorPicker_blue ._wColorPicker_bg{background-color:#E5F6FE;}
+._wColorPicker_blue ._wColorPicker_inner{color:#4D9FBF;}
+
+._wColorPicker_white, ._wColorPicker_white ._wColorPicker_outer{border-color:#E2E2E2;}
+._wColorPicker_white ._wColorPicker_bg{ background-color:#FFFFFF;}
+._wColorPicker_white ._wColorPicker_inner{color:#454545;}
+
+._wColorPicker_black, ._wColorPicker_black ._wColorPicker_outer{border-color:#303030;}
+._wColorPicker_black ._wColorPicker_bg{background-color:#505050;}
+._wColorPicker_black ._wColorPicker_inner{color:#F3F3F3;}
+
+._wColorPicker_cream, ._wColorPicker_cream ._wColorPicker_outer{border-color:#F9E98E;}
+._wColorPicker_cream ._wColorPicker_bg{background-color:#FBF7AA;}
+._wColorPicker_cream ._wColorPicker_inner{color: #A27D35;}
+
+._wColorPicker_yellow, ._wColorPicker_yellow ._wColorPicker_outer{border-color:#E9D315;}
+._wColorPicker_yellow ._wColorPicker_bg{background-color:#F9F2BA;}
+._wColorPicker_yellow ._wColorPicker_inner{color:#5B5316;}
+
+._wColorPicker_orange, ._wColorPicker_orange ._wColorPicker_outer{border-color:#E56717;}
+._wColorPicker_orange ._wColorPicker_bg{background-color:#F87217;}
+._wColorPicker_orange ._wColorPicker_inner{color:#9C2F2F;}
+
+._wColorPicker_plum, ._wColorPicker_plum ._wColorPicker_outer{border-color:#7E354D;}
+._wColorPicker_plum ._wColorPicker_bg{background-color:#B93B8F;}
+._wColorPicker_plum ._wColorPicker_inner{color:#F9B7FF;}

data/wcolorpicker-rails.gemspec

@@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/wcolorpicker-rails/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["RogerE"]
+  gem.email         = ["roger@webfokus.no"]
+  gem.description   = "This gem Provides the Websanova Color Picker assets for your Rails application ."
+  gem.summary       = "Use Websanova Color Picker with Rails Asset Pipeline"
+  gem.homepage      = "https://github.com/RogerE/wcolorpicker-rails"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "wcolorpicker-rails"
+  gem.require_paths = ["lib"]
+  gem.version       = Wcolorpicker::Rails::VERSION
+end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification 
+name: wcolorpicker-rails
+version: !ruby/object:Gem::Version 
+  hash: 13
+  prerelease: 
+  segments: 
+  - 1
+  - 1
+  version: "1.1"
+platform: ruby
+authors: 
+- RogerE
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-03-28 00:00:00 Z
+dependencies: []
+
+description: This gem Provides the Websanova Color Picker assets for your Rails application .
+email: 
+- roger@webfokus.no
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- lib/wcolorpicker-rails.rb
+- lib/wcolorpicker-rails/version.rb
+- vendor/assets/javascripts/wcolorpicker.js
+- vendor/assets/stylesheets/wcolorpicker.css
+- wcolorpicker-rails.gemspec
+homepage: https://github.com/RogerE/wcolorpicker-rails
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: Use Websanova Color Picker with Rails Asset Pipeline
+test_files: []
+