colorpicker 0.0.2 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Colorpicker
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Add a simple canvas color picker for your rails projects
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -18,7 +20,37 @@ Or install it yourself as:
|
|
|
18
20
|
|
|
19
21
|
## Usage
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
You can simply add the following lines:
|
|
24
|
+
|
|
25
|
+
in application.js
|
|
26
|
+
|
|
27
|
+
//= require colorpicker
|
|
28
|
+
|
|
29
|
+
and in application.css
|
|
30
|
+
|
|
31
|
+
*= require colorpicker
|
|
32
|
+
|
|
33
|
+
Now you are able to use the colorpicker
|
|
34
|
+
|
|
35
|
+
options = {
|
|
36
|
+
trigger_event: "click",
|
|
37
|
+
color: {
|
|
38
|
+
r: 0,
|
|
39
|
+
g: 0,
|
|
40
|
+
b: 0
|
|
41
|
+
},
|
|
42
|
+
onChange: function(colorHSB) {
|
|
43
|
+
// do stuff with color
|
|
44
|
+
console.log(colorHSB.toRGB());
|
|
45
|
+
console.log(colorHSB.toHex());
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
new ColorPicker($("#myElemToClick"), options);
|
|
49
|
+
|
|
50
|
+
That's all, every times you will click on your elem with id myElemToClick, the color picker will be display bellow.
|
|
51
|
+
Of course options are optional and color can be gave with rgb map or hsb map or hex string.
|
|
52
|
+
|
|
53
|
+
Hope you will enjoy it ;)
|
|
22
54
|
|
|
23
55
|
## Contributing
|
|
24
56
|
|
data/lib/colorpicker/version.rb
CHANGED
|
@@ -90,7 +90,8 @@ class ColorPicker
|
|
|
90
90
|
</div>
|
|
91
91
|
"""
|
|
92
92
|
|
|
93
|
-
constructor: (@elem, @options) ->
|
|
93
|
+
constructor: (@elem, @options={}) ->
|
|
94
|
+
@options.trigger_event ||= "click"
|
|
94
95
|
@color = new Color @options.color
|
|
95
96
|
@view = $(ColorPicker.tmpl)
|
|
96
97
|
|
|
@@ -103,10 +104,22 @@ class ColorPicker
|
|
|
103
104
|
|
|
104
105
|
_this = @
|
|
105
106
|
$(document).bind "click", (e) => @hide()
|
|
106
|
-
$(@elem).
|
|
107
|
+
$(@elem).bind @options.trigger_event, ->
|
|
107
108
|
_this.show() if $(this).html() is ""
|
|
108
109
|
false
|
|
109
110
|
|
|
111
|
+
if $(@elem).is("input")
|
|
112
|
+
newelem = $("<div></div>")
|
|
113
|
+
newelem.css
|
|
114
|
+
position: "absolute"
|
|
115
|
+
left: $(@elem).position().left
|
|
116
|
+
top: $(@elem).position().top
|
|
117
|
+
$(@elem).before newelem
|
|
118
|
+
@elem = newelem
|
|
119
|
+
|
|
120
|
+
$(@elem).bind 'click', ->
|
|
121
|
+
_this.show() if $(this).html() is ""
|
|
122
|
+
false
|
|
110
123
|
|
|
111
124
|
@update()
|
|
112
125
|
|
|
@@ -179,7 +192,7 @@ class ColorPicker
|
|
|
179
192
|
@elems["hue_cursor"].css
|
|
180
193
|
top: parseInt @size - @size * @color.h / 360, 10
|
|
181
194
|
|
|
182
|
-
@options.onChange @color
|
|
195
|
+
@options.onChange @color if @options.onChange
|
|
183
196
|
|
|
184
197
|
selectorMove: (e) ->
|
|
185
198
|
return unless @selectorEdition
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
.colorpicker {
|
|
2
|
+
top: 37px;
|
|
3
|
+
width: 285px;
|
|
4
|
+
height: 255px;
|
|
5
|
+
background: rgba(0,0,0,0.6);
|
|
6
|
+
padding: 10px;
|
|
7
|
+
position: relative;
|
|
8
|
+
&:before {
|
|
9
|
+
bottom: 100%;
|
|
10
|
+
border: solid transparent;
|
|
11
|
+
content: " ";
|
|
12
|
+
height: 0;
|
|
13
|
+
width: 0;
|
|
14
|
+
position: absolute;
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
border-bottom-color: rgba(0,0,0,0.6);
|
|
17
|
+
border-width: 8px;
|
|
18
|
+
left: 0%;
|
|
19
|
+
}
|
|
20
|
+
>div {
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
position: absolute;
|
|
23
|
+
border: solid 1px rgba(0,0,0,0.8);
|
|
24
|
+
-webkit-user-select: none;
|
|
25
|
+
-moz-user-select: none;
|
|
26
|
+
-o-user-select: none;
|
|
27
|
+
user-select: none;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.colorpicker_color {
|
|
32
|
+
width: 255px;
|
|
33
|
+
height: 255px;
|
|
34
|
+
cursor: crosshair;
|
|
35
|
+
div {
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
width: 8px;
|
|
40
|
+
height: 8px;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
margin-top: -4px;
|
|
43
|
+
margin-left: -4px;
|
|
44
|
+
border: solid 1px white;
|
|
45
|
+
moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
46
|
+
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
47
|
+
-o-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
48
|
+
box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
49
|
+
-webkit-border-radius: 8px;
|
|
50
|
+
-moz-border-radius: 8px;
|
|
51
|
+
border-radius: 8px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.colorpicker_hue {
|
|
56
|
+
left: 275px;
|
|
57
|
+
width: 20px;
|
|
58
|
+
height: 255px;
|
|
59
|
+
cursor: n-resize;
|
|
60
|
+
div {
|
|
61
|
+
position: absolute;
|
|
62
|
+
width: 10px;
|
|
63
|
+
height: 10px;
|
|
64
|
+
margin-top: 4px;
|
|
65
|
+
&:before {
|
|
66
|
+
bottom: 100%;
|
|
67
|
+
border: solid transparent;
|
|
68
|
+
content: " ";
|
|
69
|
+
height: 0;
|
|
70
|
+
width: 0;
|
|
71
|
+
position: absolute;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
border-left-color: rgba(0,0,0,0.8);
|
|
74
|
+
border-width: 8px;
|
|
75
|
+
left: 0%;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: colorpicker
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.5
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2013-01-20 00:00:00.000000000 Z
|
|
13
13
|
dependencies: []
|
|
14
14
|
description: A HTML5 color picker
|
|
15
15
|
email:
|
|
@@ -27,7 +27,7 @@ files:
|
|
|
27
27
|
- lib/colorpicker.rb
|
|
28
28
|
- lib/colorpicker/version.rb
|
|
29
29
|
- vendor/assets/javascripts/colorpicker.js.coffee
|
|
30
|
-
- vendor/assets/stylesheets/colorpicker.css
|
|
30
|
+
- vendor/assets/stylesheets/colorpicker.css.scss
|
|
31
31
|
homepage: http://github.com/antho1404/colorpicker
|
|
32
32
|
licenses: []
|
|
33
33
|
post_install_message:
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
.colorpicker {
|
|
2
|
-
top: 37px;
|
|
3
|
-
width: 285px;
|
|
4
|
-
height: 255px;
|
|
5
|
-
background: rgba(0,0,0,0.6);
|
|
6
|
-
padding: 10px;
|
|
7
|
-
position: relative;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.colorpicker:before {
|
|
11
|
-
bottom: 100%;
|
|
12
|
-
border: solid transparent;
|
|
13
|
-
content: " ";
|
|
14
|
-
height: 0;
|
|
15
|
-
width: 0;
|
|
16
|
-
position: absolute;
|
|
17
|
-
pointer-events: none;
|
|
18
|
-
border-bottom-color: rgba(0,0,0,0.6);
|
|
19
|
-
border-width: 8px;
|
|
20
|
-
left: 0%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.colorpicker_color {
|
|
24
|
-
width: 255px;
|
|
25
|
-
height: 255px;
|
|
26
|
-
position: absolute;
|
|
27
|
-
overflow: hidden;
|
|
28
|
-
cursor: crosshair;
|
|
29
|
-
border: solid 1px rgba(0,0,0,0.8);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.colorpicker_color div {
|
|
33
|
-
position: absolute;
|
|
34
|
-
top: 0;
|
|
35
|
-
left: 0;
|
|
36
|
-
width: 8px;
|
|
37
|
-
height: 8px;
|
|
38
|
-
overflow: hidden;
|
|
39
|
-
margin-top: -4px;
|
|
40
|
-
margin-left: -4px;
|
|
41
|
-
border: solid 1px white;
|
|
42
|
-
moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
43
|
-
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
44
|
-
-o-box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
45
|
-
box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
|
|
46
|
-
-webkit-border-radius: 8px;
|
|
47
|
-
-moz-border-radius: 8px;
|
|
48
|
-
border-radius: 8px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.colorpicker_hue {
|
|
52
|
-
position: absolute;
|
|
53
|
-
left: 275px;
|
|
54
|
-
width: 20px;
|
|
55
|
-
height: 255px;
|
|
56
|
-
cursor: n-resize;
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
border: solid 1px rgba(0,0,0,0.8);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.colorpicker_hue div {
|
|
62
|
-
position: absolute;
|
|
63
|
-
width: 10px;
|
|
64
|
-
height: 10px;
|
|
65
|
-
margin-top: 4px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.colorpicker_hue div:before {
|
|
69
|
-
bottom: 100%;
|
|
70
|
-
border: solid transparent;
|
|
71
|
-
content: " ";
|
|
72
|
-
height: 0;
|
|
73
|
-
width: 0;
|
|
74
|
-
position: absolute;
|
|
75
|
-
pointer-events: none;
|
|
76
|
-
border-left-color: rgba(0,0,0,0.8);
|
|
77
|
-
border-width: 8px;
|
|
78
|
-
left: 0%;
|
|
79
|
-
}
|