diff options
Diffstat (limited to 'includes/js/dojox/widget/ColorPicker.js')
-rw-r--r-- | includes/js/dojox/widget/ColorPicker.js | 284 |
1 files changed, 0 insertions, 284 deletions
diff --git a/includes/js/dojox/widget/ColorPicker.js b/includes/js/dojox/widget/ColorPicker.js deleted file mode 100644 index c180cf1..0000000 --- a/includes/js/dojox/widget/ColorPicker.js +++ /dev/null @@ -1,284 +0,0 @@ -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]; - } -}); - -} |