+++ /dev/null
-if(!dojo._hasResource["dojox.widget.ColorPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
-dojo._hasResource["dojox.widget.ColorPicker"] = true;
-dojo.provide("dojox.widget.ColorPicker");
-dojo.experimental("dojox.widget.ColorPicker"); // level: prototype
-
-dojo.require("dijit.form._FormWidget");
-dojo.require("dojo.dnd.move");
-dojo.require("dojo.fx");
-
-dojo.declare("dojox.widget.ColorPicker",
- dijit.form._FormWidget,
- {
- // summary: a HSV color picker - like PhotoShop
- //
- // description:
- // provides an interactive HSV ColorPicker similar to
- // PhotoShop's color selction tool. Will eventually
- // mixin FormWidget and be used as a suplement or a
- // 'more interactive' replacement for ColorPalette
- //
- // example:
- //
- // code:
- // var picker = new dojox.widget.ColorPicker({
- // // a couple of example toggles:
- // animatePoint:false,
- // showHsv: false,
- // webSafe: false,
- // showRgb: false
- // });
- //
- // markup:
- // <div dojoType="dojox.widget.ColorPicker"></div>
- //
-
- // showRgb: Boolean
- // show/update RGB input nodes
- showRgb: true,
-
- // showHsv: Boolean
- // show/update HSV input nodes
- showHsv: true,
-
- // showHex: Boolean
- // show/update Hex value field
- showHex: true,
-
- // webSafe: Boolean
- // deprecated? or just use a toggle to show/hide that node, too?
- webSafe: true,
-
- // animatePoint: Boolean
- // toggle to use slideTo (true) or just place the cursor (false) on click
- animatePoint: true,
-
- // slideDuration: Integer
- // time in ms picker node will slide to next location (non-dragging) when animatePoint=true
- slideDuration: 250,
-
- _underlay: dojo.moduleUrl("dojox.widget","ColorPicker/images/underlay.png"),
- templateString:"<div class=\"dojoxColorPicker\">\n\t<div class=\"dojoxColorPickerBox\">\n\t\t<div dojoAttachPoint=\"cursorNode\" class=\"dojoxColorPickerPoint\"></div>\n\t\t<img dojoAttachPoint=\"colorUnderlay\" dojoAttachEvent=\"onclick: _setPoint\" class=\"dojoxColorPickerUnderlay\" src=\"${_underlay}\">\n\t</div>\n\t<div class=\"dojoxHuePicker\">\n\t\t<div dojoAttachPoint=\"hueCursorNode\" class=\"dojoxHuePickerPoint\"></div>\n\t\t<div dojoAttachPoint=\"hueNode\" class=\"dojoxHuePickerUnderlay\" dojoAttachEvent=\"onclick: _setHuePoint\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"previewNode\" class=\"dojoxColorPickerPreview\"></div>\n\t<div dojoAttachPoint=\"safePreviewNode\" class=\"dojoxColorPickerWebSafePreview\"></div>\n\t<div class=\"dojoxColorPickerOptional\">\n\t\t<div class=\"dijitInline dojoxColorPickerRgb\" dojoAttachPoint=\"rgbNode\">\n\t\t\t<table>\n\t\t\t<tr><td>r</td><td><input dojoAttachPoint=\"Rval\" size=\"1\"></td></tr>\n\t\t\t<tr><td>g</td><td><input dojoAttachPoint=\"Gval\" size=\"1\"></td></tr>\n\t\t\t<tr><td>b</td><td><input dojoAttachPoint=\"Bval\" size=\"1\"></td></tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div class=\"dijitInline dojoxColorPickerHsv\" dojoAttachPoint=\"hsvNode\">\n\t\t\t<table>\n\t\t\t<tr><td>h</td><td><input dojoAttachPoint=\"Hval\"size=\"1\"> °</td></tr>\n\t\t\t<tr><td>s</td><td><input dojoAttachPoint=\"Sval\" size=\"1\"> %</td></tr>\n\t\t\t<tr><td>v</td><td><input dojoAttachPoint=\"Vval\" size=\"1\"> %</td></tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div class=\"dojoxColorPickerHex\" dojoAttachPoint=\"hexNode\">\t\n\t\t\thex: <input dojoAttachPoint=\"hexCode, focusNode\" size=\"6\" class=\"dojoxColorPickerHexCode\">\n\t\t</div>\n\t</div>\n</div>\n",
-
- postCreate: function(){
- // summary: As quickly as we can, set up ie6 alpha-filter support for our
- // underlay. we don't do image handles (done in css), just the 'core'
- // of this widget: the underlay.
- if(dojo.isIE && dojo.isIE<7){
- this.colorUnderlay.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this._underlay+"', sizingMethod='scale')";
- this.colorUnderlay.src = dojo.moduleUrl("dojo","resources/blank.gif").toString();
- }
- // hide toggle-able nodes:
- if (!this.showRgb){ this.rgbNode.style.display = "none"; }
- if (!this.showHsv){ this.hsvNode.style.display = "none"; }
- if (!this.showHex){ this.hexNode.style.display = "none"; }
- if (!this.webSafe){ this.safePreviewNode.style.display = "none"; }
- },
-
- startup: function(){
- // summary: defer all additional calls until we're started, and our
- // embeded sliders are loaded? (not implemented yet)
-
- // this._offset = ((dojo.marginBox(this.cursorNode).w)/2);
- this._offset = 0;
-
- this._mover = new dojo.dnd.Moveable(this.cursorNode, {
- mover: dojo.dnd.boxConstrainedMover({ t:0, l:0, w:150, h:150 })
- });
- this._hueMover = new dojo.dnd.Moveable(this.hueCursorNode, {
- mover: dojo.dnd.boxConstrainedMover({ t:0, l:0, w:0, h:150 })
- });
-
- // no dnd/move/move published ... use a timer:
- dojo.subscribe("/dnd/move/stop",dojo.hitch(this,"_clearTimer"));
- dojo.subscribe("/dnd/move/start",dojo.hitch(this,"_setTimer"));
-
- // ugly scaling calculator. need a XYslider badly
- this._sc = (1/dojo.coords(this.colorUnderlay).w);
- this._hueSc = (255/(dojo.coords(this.hueNode).h+this._offset));
-
- // initial color
- this._updateColor();
-
- },
-
- _setTimer: function(/* dojo.dnd.Mover */mover){
- this._timer = setInterval(dojo.hitch(this,"_updateColor"),45);
- },
- _clearTimer: function(/* dojo.dnd.Mover */mover){
- clearInterval(this._timer);
- this.onChange(this.value);
- },
-
- _setHue: function(/* Decimal */h){
- // summary: sets a natural color background for the
- // underlay image against closest hue value (full saturation)
- // h: 0..255
-
- // this is not a pretty conversion:
- var hue = dojo.colorFromArray(this._hsv2rgb(h,1,1,{ inputRange: 1 })).toHex();
- dojo.style(this.colorUnderlay,"backgroundColor",hue);
- },
-
- _updateColor: function(){
- // summary: update the previewNode color, and input values [optional]
- var h = Math.round((255+(this._offset))-((dojo.style(this.hueCursorNode,"top")+this._offset)*this._hueSc));
- var s = Math.round((dojo.style(this.cursorNode,"left")*this._sc)*100);
- var v = Math.round(100-(dojo.style(this.cursorNode,"top")*this._sc)*100);
-
- // limit hue calculations to only when it changes
- if(h != this._hue){ this._setHue(h); }
-
- var rgb = this._hsv2rgb(h,s/100,v/100,{ inputRange: 1 });
- var hex = (dojo.colorFromArray(rgb).toHex());
-
- this.previewNode.style.backgroundColor = hex;
- if(this.webSafe){ this.safePreviewNode.style.backgroundColor = hex; }
- if(this.showHex){ this.hexCode.value = hex; }
- if(this.showRgb){
- this.Rval.value = rgb[0];
- this.Gval.value = rgb[1];
- this.Bval.value = rgb[2];
- }
- if(this.showHsv){
- this.Hval.value = Math.round((h*360)/255); // convert to 0..360
- this.Sval.value = s;
- this.Vval.value = v;
- }
- this.value=hex;
-
- // anytime we muck with the color, fire onChange?
- if (!this._timer && !(arguments[1])){
- this.setValue(this.value);
- this.onChange(this.value);
- }
- },
-
- _setHuePoint: function(/* Event */evt){
- // summary: set the hue picker handle on relative y coordinates
- if(this.animatePoint){
- dojo.fx.slideTo({
- node: this.hueCursorNode,
- duration:this.slideDuration,
- top: evt.layerY,
- left: 0,
- onEnd: dojo.hitch(this,"_updateColor")
- }).play();
- }else{
- dojo.style(this.hueCursorNode,"top",(evt.layerY)+"px");
- this._updateColor(false);
- }
- },
-
- _setPoint: function(/* Event */evt){
- // summary: set our picker point based on relative x/y coordinates
- if(this.animatePoint){
- dojo.fx.slideTo({
- node: this.cursorNode,
- duration:this.slideDuration,
- top: evt.layerY-this._offset,
- left: evt.layerX-this._offset,
- onEnd: dojo.hitch(this,"_updateColor")
- }).play();
- }else{
- dojo.style(this.cursorNode,"left",(evt.layerX-this._offset)+"px");
- dojo.style(this.cursorNode,"top",(evt.layerY-this._offset)+"px");
- this._updateColor(false);
- }
- },
-
- // this ported directly from 0.4 dojo.gfx.colors.hsv, with bugs :)
- // FIXME: use ttrenka's HSB ?
- _hsv2rgb: function(/* int || Array */h, /* int */s, /* int */v, /* Object? */options){
- // summary
- // converts an HSV value set to RGB, ranges depending on optional options object.
- // patch for options by Matthew Eernisse
- if (dojo.isArray(h)) {
- if(s){
- options = s;
- }
- v = h[2] || 0;
- s = h[1] || 0;
- h = h[0] || 0;
- }
-
- var opt = {
- inputRange: (options && options.inputRange) ? options.inputRange : [255, 255, 255],
- outputRange: (options && options.outputRange) ? options.outputRange : 255
- };
-
- switch(opt.inputRange[0]) {
- // 0.0-1.0
- case 1: h = h * 360; break;
- // 0-100
- case 100: h = (h / 100) * 360; break;
- // 0-360
- case 360: h = h; break;
- // 0-255
- default: h = (h / 255) * 360;
- }
- if (h == 360){ h = 0;}
-
- // no need to alter if inputRange[1] = 1
- switch(opt.inputRange[1]){
- case 100: s /= 100; break;
- case 255: s /= 255;
- }
-
- // no need to alter if inputRange[1] = 1
- switch(opt.inputRange[2]){
- case 100: v /= 100; break;
- case 255: v /= 255;
- }
-
- var r = null;
- var g = null;
- var b = null;
-
- if (s == 0){
- // color is on black-and-white center line
- // achromatic: shades of gray
- r = v;
- g = v;
- b = v;
- }else{
- // chromatic color
- var hTemp = h / 60; // h is now IN [0,6]
- var i = Math.floor(hTemp); // largest integer <= h
- var f = hTemp - i; // fractional part of h
-
- var p = v * (1 - s);
- var q = v * (1 - (s * f));
- var t = v * (1 - (s * (1 - f)));
-
- switch(i){
- case 0: r = v; g = t; b = p; break;
- case 1: r = q; g = v; b = p; break;
- case 2: r = p; g = v; b = t; break;
- case 3: r = p; g = q; b = v; break;
- case 4: r = t; g = p; b = v; break;
- case 5: r = v; g = p; b = q; break;
- }
- }
-
- switch(opt.outputRange){
- case 1:
- r = dojo.math.round(r, 2);
- g = dojo.math.round(g, 2);
- b = dojo.math.round(b, 2);
- break;
- case 100:
- r = Math.round(r * 100);
- g = Math.round(g * 100);
- b = Math.round(b * 100);
- break;
- default:
- r = Math.round(r * 255);
- g = Math.round(g * 255);
- b = Math.round(b * 255);
- }
- return [r, g, b];
- }
-});
-
-}
projects / eow / blobdiff