colorpicker 0.0.2 → 0.0.5

data/README.md

@@ -1,6 +1,8 @@
 # Colorpicker
 
-TODO: Write a gem description
+Add a simple canvas color picker for your rails projects
+
+![screen](http://i49.tinypic.com/ekrdjc.png)
 
 ## Installation
 
@@ -18,7 +20,37 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here
+You can simply add the following lines:
+
+in application.js
+
+    //= require colorpicker
+
+and in application.css
+
+    *= require colorpicker
+
+Now you are able to use the colorpicker 
+
+    options = {
+        trigger_event: "click",
+        color: {
+            r: 0,
+            g: 0,
+            b: 0
+        },
+        onChange: function(colorHSB) {
+            // do stuff with color
+            console.log(colorHSB.toRGB());
+            console.log(colorHSB.toHex());
+        }
+    }
+    new ColorPicker($("#myElemToClick"), options);
+
+That's all, every times you will click on your elem with id myElemToClick, the color picker will be display bellow.
+Of course options are optional and color can be gave with rgb map or hsb map or hex string.
+
+Hope you will enjoy it ;)
 
 ## Contributing
 

data/lib/colorpicker/version.rb

@@ -1,3 +1,3 @@
 module Colorpicker
-  VERSION = "0.0.2"
+  VERSION = "0.0.5"
 end

data/vendor/assets/javascripts/colorpicker.js.coffee

@@ -90,7 +90,8 @@ class ColorPicker
     </div>
   """
 
-  constructor: (@elem, @options) ->
+  constructor: (@elem, @options={}) ->
+    @options.trigger_event ||= "click"
     @color = new Color @options.color
     @view = $(ColorPicker.tmpl)
 
@@ -103,10 +104,22 @@ class ColorPicker
 
     _this = @
     $(document).bind "click", (e) => @hide()
-    $(@elem).click ->
+    $(@elem).bind @options.trigger_event, ->
       _this.show() if $(this).html() is ""
       false
     
+    if $(@elem).is("input")
+      newelem = $("<div></div>")
+      newelem.css
+        position: "absolute"
+        left: $(@elem).position().left
+        top: $(@elem).position().top
+      $(@elem).before newelem
+      @elem = newelem
+
+    $(@elem).bind 'click', ->
+      _this.show() if $(this).html() is ""
+      false
 
     @update()
 
@@ -179,7 +192,7 @@ class ColorPicker
     @elems["hue_cursor"].css
       top: parseInt @size - @size * @color.h / 360, 10
     
-    @options.onChange @color
+    @options.onChange @color if @options.onChange
     
   selectorMove: (e) ->
     return unless @selectorEdition

data/vendor/assets/stylesheets/colorpicker.css.scss

@@ -0,0 +1,78 @@
+.colorpicker {
+  top: 37px;
+  width: 285px;
+  height: 255px;
+  background: rgba(0,0,0,0.6);
+  padding: 10px;
+  position: relative;
+  &:before {
+    bottom: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: rgba(0,0,0,0.6);
+    border-width: 8px;
+    left: 0%;
+  }
+  >div {
+    overflow: hidden;
+    position: absolute;
+    border: solid 1px rgba(0,0,0,0.8);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none; 
+    user-select: none;
+  }
+}
+
+.colorpicker_color {
+  width: 255px;
+  height: 255px;
+  cursor: crosshair;
+  div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    overflow: hidden;
+    margin-top: -4px;
+    margin-left: -4px;
+    border: solid 1px white;
+    moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
+    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
+    -o-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+  }
+}
+  
+.colorpicker_hue {
+  left: 275px;
+  width: 20px;
+  height: 255px;
+  cursor: n-resize;
+  div {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    margin-top: 4px;
+    &:before {
+      bottom: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+      border-left-color: rgba(0,0,0,0.8);
+      border-width: 8px;
+      left: 0%;
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: colorpicker
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-10-26 00:00:00.000000000 Z
+date: 2013-01-20 00:00:00.000000000 Z
 dependencies: []
 description: A HTML5 color picker
 email:
@@ -27,7 +27,7 @@ files:
 - lib/colorpicker.rb
 - lib/colorpicker/version.rb
 - vendor/assets/javascripts/colorpicker.js.coffee
-- vendor/assets/stylesheets/colorpicker.css
+- vendor/assets/stylesheets/colorpicker.css.scss
 homepage: http://github.com/antho1404/colorpicker
 licenses: []
 post_install_message: 

data/vendor/assets/stylesheets/colorpicker.css

@@ -1,79 +0,0 @@
-.colorpicker {
-  top: 37px;
-  width: 285px;
-  height: 255px;
-  background: rgba(0,0,0,0.6);
-  padding: 10px;
-  position: relative;
-}
-
-.colorpicker:before {
-  bottom: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-  border-bottom-color: rgba(0,0,0,0.6);
-  border-width: 8px;
-  left: 0%;
-}
-
-.colorpicker_color {
-  width: 255px;
-  height: 255px;
-  position: absolute;
-  overflow: hidden;
-  cursor: crosshair;
-  border: solid 1px rgba(0,0,0,0.8);
-}
-
-.colorpicker_color div {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 8px;
-  height: 8px;
-  overflow: hidden;
-  margin-top: -4px;
-  margin-left: -4px;
-  border: solid 1px white;
-  moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
-  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
-  -o-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-}
-
-.colorpicker_hue {
-  position: absolute;
-  left: 275px;
-  width: 20px;
-  height: 255px;
-  cursor: n-resize;
-  overflow: hidden;
-  border: solid 1px rgba(0,0,0,0.8);
-}
-
-.colorpicker_hue div {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  margin-top: 4px;
-}
-
-.colorpicker_hue div:before {
-  bottom: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-  border-left-color: rgba(0,0,0,0.8);
-  border-width: 8px;
-  left: 0%;
-}