Permalink
Browse files

Add support for alpha

  • Loading branch information...
1 parent 0dd1b50 commit 03a7478ea93ce765c877f5a212822bf93dc377f9 @bebraw committed Jul 11, 2012
Showing with 127 additions and 27 deletions.
  1. +4 −2 README.md
  2. +13 −1 css/colorjoe.css
  3. +50 −10 dist/colorjoe.js
  4. +1 −1 dist/colorjoe.min.js
  5. +9 −3 index.html
  6. +13 −3 src/colorjoe.js
  7. +37 −7 src/extras.js
View
@@ -64,17 +64,19 @@ provides a few extras. The following example shows how to use them:
```javascript
var joe = colorjoe.hsl('hslPicker', 'red', [
'currentColor',
+ 'alpha',
['fields', {space: 'HSL', limit: 255, fix: 0},
'hex'
]);
```
The code above would generate a HSL picker that shows in addition the currently
-selected color, HSL input fields and a hex field.
+selected color, alpha slider, HSL input fields and a hex field.
As you can see `fields` has been defined using an array. This array contains
the name of the extra and then parameters passed to inside an object. In this
-case the extra accepts name of a color space (RGB, HSL, HSV or CMYK). In
+case the extra accepts name of a color space (RGB, HSL, HSV or CMYK). If you
+append `A` to the color space, it will show a control for alpha too. In
addition it takes a limit value (defaults to 255) and a fix value
(defaults to 0). fix represents the amount of numbers shown after decimal.
View
@@ -1,4 +1,4 @@
-#rgbValue {
+#rgbValue, #hslaValue {
float: right;
}
@@ -16,7 +16,12 @@
margin: 0.5em;
}
+.colorPicker .extras .currentColorContainer {
+ overflow: hidden;
+}
+
.colorPicker .extras .currentColor {
+ float: right;
width: 65px;
height: 30px;
border: 1px solid #BBB;
@@ -175,3 +180,10 @@
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
}
+#hslPicker .extras {
+ width: 100px;
+}
+
+#hslPicker .oned.alpha {
+ margin: 0;
+}
View
@@ -1021,11 +1021,12 @@ ONECOLOR.installMethod('toAlpha', function (color) {
(function(root, factory) {
if(typeof define === 'function' && define.amd)
- define(['./elemutils'], factory);
- else root.colorjoeextras = factory(root.elemutils);
-}(this, function(utils) {
+ define(['./elemutils', './drag'], factory);
+ else root.colorjoeextras = factory(root.elemutils, root.drag);
+}(this, function(utils, drag) {
function currentColor(p) {
- var e = utils.div('currentColor', p);
+ var e1 = utils.div('currentColorContainer', p);
+ var e = utils.div('currentColor', e1);
return {
change: function(col) {
@@ -1049,12 +1050,15 @@ function fields(p, joe, o) {
C: 'cyan',
M: 'magenta',
Y: 'yellow',
- K: 'black'
+ K: 'black',
+ A: 'alpha'
};
var inputLen = ('' + fac).length + fix;
inputLen = fix? inputLen + 1: inputLen;
var initials = cs.split('').map(function(n) {return n.toUpperCase();});
+ var useAlpha = cs[cs.length - 1] == 'A';
+ cs = useAlpha? cs.slice(0, -1): cs;
if(['RGB', 'HSL', 'HSV', 'CMYK'].indexOf(cs) < 0)
return console.warn('Invalid field names', cs);
@@ -1071,7 +1075,8 @@ function fields(p, joe, o) {
var col = [cs];
elems.forEach(function(o) {col.push(o.e.input.value / fac);});
- col.push(1); // alpha
+
+ if(!useAlpha) col.push(joe.getAlpha());
joe.set(col);
}
@@ -1085,6 +1090,30 @@ function fields(p, joe, o) {
};
}
+function alpha(p, joe) {
+ var e = drag.slider({
+ parent: p,
+ 'class': 'oned alpha',
+ cbs: {
+ begin: change,
+ change: change
+ }
+ });
+
+ function change(p) {
+ var val = utils.clamp(p.y, 0, 1);
+
+ utils.Y(p.pointer, val);
+ joe.setAlpha(1 - val);
+ }
+
+ return {
+ change: function(col) {
+ utils.Y(e.pointer, 1 - col.alpha());
+ }
+ };
+}
+
function hex(p, joe, o) {
var e = utils.labelInput('hex', o.label || '', p, 7);
e.input.value = '#';
@@ -1116,7 +1145,8 @@ function pad(a, n, c) {
return {
currentColor: currentColor,
fields: fields,
- hex: hex
+ hex: hex,
+ alpha: alpha
};
}));
@@ -1287,7 +1317,17 @@ function setup(o) {
var oldCol = this.get();
col = cbs.init(getColor(c), xy, z);
- if(oldCol.hex() != col.hex()) this.update();
+ if(!oldCol.equals(col)) this.update();
+
+ return this;
+ },
+ getAlpha: function() {
+ return col.alpha();
+ },
+ setAlpha: function(v) {
+ col = col.alpha(v);
+
+ this.update();
return this;
},
@@ -1340,7 +1380,7 @@ function setupExtras(p, joe, extras) {
var name;
var params;
- extras.forEach(function(e) {
+ extras.forEach(function(e, i) {
if(isArray(e)) {
name = e[0];
params = e.length > 1? e[1]: {};
@@ -1352,7 +1392,7 @@ function setupExtras(p, joe, extras) {
extra = name in picker._extras? picker._extras[name]: null;
if(extra) {
- cbs = extra(c, extraProxy(joe, name), params);
+ cbs = extra(c, extraProxy(joe, name + i), params);
for(var k in cbs) joe.on(k, cbs[k], name);
}
});
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -55,6 +55,8 @@
<h2>HSL Picker with Extras</h2>
+ <div id="hslaValue"></div>
+
<div id="hslPicker"></div>
</section>
@@ -108,6 +110,7 @@
});
defer('dist/colorjoe.js', function () {
var val = document.getElementById('rgbValue');
+ var hVal = document.getElementById('hslaValue');
colorjoe.registerExtra('text', function(p, joe, o) {
e(p, o.text? o.text: 'text')
@@ -130,11 +133,14 @@
['text', {text: 'param demo'}]
]);
colorjoe.hsl('hslPicker', '#113c38', [
+ 'alpha',
'currentColor',
- ['fields', {space: 'HSL', limit: 100}],
- ['fields', {space: 'CMYK', limit: 100}],
+ ['fields', {space: 'HSLA', limit: 100}],
+ ['fields', {space: 'CMYKA', limit: 100}],
'hex'
- ]);
+ ]).on('change', function(c) {
+ hVal.innerHTML = 'Alpha: ' + c.alpha().toFixed(2);
+ }).update();
});
}());
</script>
View
@@ -165,7 +165,17 @@ function setup(o) {
var oldCol = this.get();
col = cbs.init(getColor(c), xy, z);
- if(oldCol.hex() != col.hex()) this.update();
+ if(!oldCol.equals(col)) this.update();
+
+ return this;
+ },
+ getAlpha: function() {
+ return col.alpha();
+ },
+ setAlpha: function(v) {
+ col = col.alpha(v);
+
+ this.update();
return this;
},
@@ -218,7 +228,7 @@ function setupExtras(p, joe, extras) {
var name;
var params;
- extras.forEach(function(e) {
+ extras.forEach(function(e, i) {
if(isArray(e)) {
name = e[0];
params = e.length > 1? e[1]: {};
@@ -230,7 +240,7 @@ function setupExtras(p, joe, extras) {
extra = name in picker._extras? picker._extras[name]: null;
if(extra) {
- cbs = extra(c, extraProxy(joe, name), params);
+ cbs = extra(c, extraProxy(joe, name + i), params);
for(var k in cbs) joe.on(k, cbs[k], name);
}
});
View
@@ -1,10 +1,11 @@
(function(root, factory) {
if(typeof define === 'function' && define.amd)
- define(['./elemutils'], factory);
- else root.colorjoeextras = factory(root.elemutils);
-}(this, function(utils) {
+ define(['./elemutils', './drag'], factory);
+ else root.colorjoeextras = factory(root.elemutils, root.drag);
+}(this, function(utils, drag) {
function currentColor(p) {
- var e = utils.div('currentColor', p);
+ var e1 = utils.div('currentColorContainer', p);
+ var e = utils.div('currentColor', e1);
return {
change: function(col) {
@@ -28,12 +29,15 @@ function fields(p, joe, o) {
C: 'cyan',
M: 'magenta',
Y: 'yellow',
- K: 'black'
+ K: 'black',
+ A: 'alpha'
};
var inputLen = ('' + fac).length + fix;
inputLen = fix? inputLen + 1: inputLen;
var initials = cs.split('').map(function(n) {return n.toUpperCase();});
+ var useAlpha = cs[cs.length - 1] == 'A';
+ cs = useAlpha? cs.slice(0, -1): cs;
if(['RGB', 'HSL', 'HSV', 'CMYK'].indexOf(cs) < 0)
return console.warn('Invalid field names', cs);
@@ -50,7 +54,8 @@ function fields(p, joe, o) {
var col = [cs];
elems.forEach(function(o) {col.push(o.e.input.value / fac);});
- col.push(1); // alpha
+
+ if(!useAlpha) col.push(joe.getAlpha());
joe.set(col);
}
@@ -64,6 +69,30 @@ function fields(p, joe, o) {
};
}
+function alpha(p, joe) {
+ var e = drag.slider({
+ parent: p,
+ 'class': 'oned alpha',
+ cbs: {
+ begin: change,
+ change: change
+ }
+ });
+
+ function change(p) {
+ var val = utils.clamp(p.y, 0, 1);
+
+ utils.Y(p.pointer, val);
+ joe.setAlpha(1 - val);
+ }
+
+ return {
+ change: function(col) {
+ utils.Y(e.pointer, 1 - col.alpha());
+ }
+ };
+}
+
function hex(p, joe, o) {
var e = utils.labelInput('hex', o.label || '', p, 7);
e.input.value = '#';
@@ -95,6 +124,7 @@ function pad(a, n, c) {
return {
currentColor: currentColor,
fields: fields,
- hex: hex
+ hex: hex,
+ alpha: alpha
};
}));

0 comments on commit 03a7478

Please sign in to comment.