/*\r
- * jQuery UI Draggable\r
+ * jQuery UI Color Picker\r
*\r
* Copyright (c) 2008 Stefan Petre, Paul Bakaus\r
* Dual licensed under the MIT (MIT-LICENSE.txt)\r
* and GPL (GPL-LICENSE.txt) licenses.\r
* \r
- * http://docs.jquery.com/UI/Draggables\r
+ * http://docs.jquery.com/UI/ColorPicker\r
*\r
* Depends:\r
* ui.core.js\r
*/\r
(function ($) {\r
\r
- $.widget("ui.colorpicker", {\r
+$.widget("ui.colorpicker", {\r
+ \r
+ init: function() {\r
\r
- init: function() {\r
- \r
- this.charMin = 65;\r
- var o = this.options, self = this,\r
- tpl = '<div class="ui-colorpicker"><div class="ui-colorpicker-color"><div><div></div></div></div><div class="ui-colorpicker-hue"><div></div></div><div class="ui-colorpicker-new-color"></div><div class="ui-colorpicker-current-color"></div><div class="ui-colorpicker-hex"><input type="text" maxlength="6" size="6" /></div><div class="ui-colorpicker-rgb-r ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-g ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-h ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-s ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-submit"></div></div>';\r
+ this.charMin = 65;\r
+ var o = this.options, self = this,\r
+ tpl = '<div class="ui-colorpicker"><div class="ui-colorpicker-color"><div><div></div></div></div><div class="ui-colorpicker-hue"><div></div></div><div class="ui-colorpicker-new-color"></div><div class="ui-colorpicker-current-color"></div><div class="ui-colorpicker-hex"><input type="text" maxlength="6" size="6" /></div><div class="ui-colorpicker-rgb-r ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-g ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-h ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-s ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-submit"></div></div>';\r
\r
- if (typeof o.color == 'string') {\r
- this.color = this.HexToHSB(o.color);\r
- } else if (o.color.r != undefined && o.color.g != undefined && o.color.b != undefined) {\r
- this.color = this.RGBToHSB(o.color);\r
- } else if (o.color.h != undefined && o.color.s != undefined && o.color.b != undefined) {\r
- this.color = this.fixHSB(o.color);\r
- } else {\r
- return this;\r
- }\r
- \r
- this.origColor = this.color;\r
- this.picker = $(tpl);\r
- \r
- if (o.flat) {\r
- this.picker.appendTo(this.element).show();\r
- } else {\r
- this.picker.appendTo(document.body);\r
- }\r
- \r
- this.fields = this.picker.find('input')\r
- .bind('keydown', function(e) { return self.keyDown.call(self, e); })\r
- .bind('change', function(e) { return self.change.call(self, e); })\r
- .bind('blur', function(e) { return self.blur.call(self, e); })\r
- .bind('focus', function(e) { return self.focus.call(self, e); });\r
- \r
- this.picker.find('span').bind('mousedown', function(e) { return self.downIncrement.call(self, e); });\r
- \r
- this.selector = this.picker.find('div.ui-colorpicker-color').bind('mousedown', function(e) { return self.downSelector.call(self, e); });\r
- this.selectorIndic = this.selector.find('div div');\r
- this.hue = this.picker.find('div.ui-colorpicker-hue div');\r
- this.picker.find('div.ui-colorpicker-hue').bind('mousedown', function(e) { return self.downHue.call(self, e); });\r
- \r
- this.newColor = this.picker.find('div.ui-colorpicker-new-color');\r
- this.currentColor = this.picker.find('div.ui-colorpicker-current-color');\r
- \r
- this.picker.find('div.ui-colorpicker-submit')\r
- .bind('mouseenter', function(e) { return self.enterSubmit.call(self, e); })\r
- .bind('mouseleave', function(e) { return self.leaveSubmit.call(self, e); })\r
- .bind('click', function(e) { return self.clickSubmit.call(self, e); });\r
+ if (typeof o.color == 'string') {\r
+ this.color = this.HexToHSB(o.color);\r
+ } else if (o.color.r != undefined && o.color.g != undefined && o.color.b != undefined) {\r
+ this.color = this.RGBToHSB(o.color);\r
+ } else if (o.color.h != undefined && o.color.s != undefined && o.color.b != undefined) {\r
+ this.color = this.fixHSB(o.color);\r
+ } else {\r
+ return this;\r
+ }\r
+ \r
+ this.origColor = this.color;\r
+ this.picker = $(tpl);\r
\r
- this.fillRGBFields(this.color);\r
- this.fillHSBFields(this.color);\r
- this.fillHexFields(this.color);\r
- this.setHue(this.color);\r
- this.setSelector(this.color);\r
- this.setCurrentColor(this.color);\r
- this.setNewColor(this.color);\r
- \r
- if (o.flat) {\r
- this.picker.css({\r
- position: 'relative',\r
- display: 'block'\r
- });\r
- } else {\r
- $(this.element).bind(o.eventName+".colorpicker", function(e) { return self.show.call(self, e); });\r
- }\r
+ if (o.flat) {\r
+ this.picker.appendTo(this.element).show();\r
+ } else {\r
+ this.picker.appendTo(document.body);\r
+ }\r
+ \r
+ this.fields = this.picker.find('input')\r
+ .bind('keydown', function(e) { return self.keyDown.call(self, e); })\r
+ .bind('change', function(e) { return self.change.call(self, e); })\r
+ .bind('blur', function(e) { return self.blur.call(self, e); })\r
+ .bind('focus', function(e) { return self.focus.call(self, e); });\r
+ \r
+ this.picker.find('span').bind('mousedown', function(e) { return self.downIncrement.call(self, e); });\r
+ \r
+ this.selector = this.picker.find('div.ui-colorpicker-color').bind('mousedown', function(e) { return self.downSelector.call(self, e); });\r
+ this.selectorIndic = this.selector.find('div div');\r
+ this.hue = this.picker.find('div.ui-colorpicker-hue div');\r
+ this.picker.find('div.ui-colorpicker-hue').bind('mousedown', function(e) { return self.downHue.call(self, e); });\r
+ \r
+ this.newColor = this.picker.find('div.ui-colorpicker-new-color');\r
+ this.currentColor = this.picker.find('div.ui-colorpicker-current-color');\r
+ \r
+ this.picker.find('div.ui-colorpicker-submit')\r
+ .bind('mouseenter', function(e) { return self.enterSubmit.call(self, e); })\r
+ .bind('mouseleave', function(e) { return self.leaveSubmit.call(self, e); })\r
+ .bind('click', function(e) { return self.clickSubmit.call(self, e); });\r
+ \r
+ this.fillRGBFields(this.color);\r
+ this.fillHSBFields(this.color);\r
+ this.fillHexFields(this.color);\r
+ this.setHue(this.color);\r
+ this.setSelector(this.color);\r
+ this.setCurrentColor(this.color);\r
+ this.setNewColor(this.color);\r
+ \r
+ if (o.flat) {\r
+ this.picker.css({\r
+ position: 'relative',\r
+ display: 'block'\r
+ });\r
+ } else {\r
+ $(this.element).bind(o.eventName+".colorpicker", function(e) { return self.show.call(self, e); });\r
+ }\r
\r
- },\r
+ },\r
+ \r
+ destroy: function() {\r
+ \r
+ this.picker.remove();\r
+ this.element.removeData("colorpicker").unbind(".colorpicker");\r
\r
- destroy: function() {\r
+ },\r
+ \r
+ fillRGBFields: function(hsb) {\r
+ var rgb = this.HSBToRGB(hsb);\r
+ this.fields\r
+ .eq(1).val(rgb.r).end()\r
+ .eq(2).val(rgb.g).end()\r
+ .eq(3).val(rgb.b).end();\r
+ },\r
+ fillHSBFields: function(hsb) {\r
+ this.fields\r
+ .eq(4).val(hsb.h).end()\r
+ .eq(5).val(hsb.s).end()\r
+ .eq(6).val(hsb.b).end();\r
+ },\r
+ fillHexFields: function (hsb) {\r
+ this.fields\r
+ .eq(0).val(this.HSBToHex(hsb)).end();\r
+ },\r
+ setSelector: function(hsb) {\r
+ this.selector.css('backgroundColor', '#' + this.HSBToHex({h: hsb.h, s: 100, b: 100}));\r
+ this.selectorIndic.css({\r
+ left: parseInt(150 * hsb.s/100, 10),\r
+ top: parseInt(150 * (100-hsb.b)/100, 10)\r
+ });\r
+ },\r
+ setHue: function(hsb) {\r
+ this.hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));\r
+ },\r
+ setCurrentColor: function(hsb) {\r
+ this.currentColor.css('backgroundColor', '#' + this.HSBToHex(hsb));\r
+ },\r
+ setNewColor: function(hsb) {\r
+ this.newColor.css('backgroundColor', '#' + this.HSBToHex(hsb));\r
+ },\r
+ keyDown: function(e) {\r
+ var pressedKey = e.charCode || e.keyCode || -1;\r
+ if ((pressedKey >= this.charMin && pressedKey <= 90) || pressedKey == 32) {\r
+ return false;\r
+ }\r
+ },\r
+ change: function(e, target) {\r
\r
- this.picker.remove();\r
- this.element.removeData("colorpicker").unbind(".colorpicker");\r
- \r
- },\r
- \r
- fillRGBFields: function(hsb) {\r
- var rgb = this.HSBToRGB(hsb);\r
- this.fields\r
- .eq(1).val(rgb.r).end()\r
- .eq(2).val(rgb.g).end()\r
- .eq(3).val(rgb.b).end();\r
- },\r
- fillHSBFields: function(hsb) {\r
- this.fields\r
- .eq(4).val(hsb.h).end()\r
- .eq(5).val(hsb.s).end()\r
- .eq(6).val(hsb.b).end();\r
- },\r
- fillHexFields: function (hsb) {\r
- this.fields\r
- .eq(0).val(this.HSBToHex(hsb)).end();\r
- },\r
- setSelector: function(hsb) {\r
- this.selector.css('backgroundColor', '#' + this.HSBToHex({h: hsb.h, s: 100, b: 100}));\r
- this.selectorIndic.css({\r
- left: parseInt(150 * hsb.s/100, 10),\r
- top: parseInt(150 * (100-hsb.b)/100, 10)\r
+ var col;\r
+ target = target || e.target;\r
+ if (target.parentNode.className.indexOf('-hex') > 0) {\r
+ this.color = col = this.HexToHSB(this.value);\r
+ this.fillRGBFields(col.color);\r
+ this.fillHSBFields(col);\r
+ } else if (target.parentNode.className.indexOf('-hsb') > 0) {\r
+ this.color = col = this.fixHSB({\r
+ h: parseInt(this.fields.eq(4).val(), 10),\r
+ s: parseInt(this.fields.eq(5).val(), 10),\r
+ b: parseInt(this.fields.eq(6).val(), 10)\r
});\r
- },\r
- setHue: function(hsb) {\r
- this.hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));\r
- },\r
- setCurrentColor: function(hsb) {\r
- this.currentColor.css('backgroundColor', '#' + this.HSBToHex(hsb));\r
- },\r
- setNewColor: function(hsb) {\r
- this.newColor.css('backgroundColor', '#' + this.HSBToHex(hsb));\r
- },\r
- keyDown: function(e) {\r
- var pressedKey = e.charCode || e.keyCode || -1;\r
- if ((pressedKey >= this.charMin && pressedKey <= 90) || pressedKey == 32) {\r
- return false;\r
- }\r
- },\r
- change: function(e, target) {\r
- \r
- var col;\r
- target = target || e.target;\r
- if (target.parentNode.className.indexOf('-hex') > 0) {\r
- this.color = col = this.HexToHSB(this.value);\r
- this.fillRGBFields(col.color);\r
- this.fillHSBFields(col);\r
- } else if (target.parentNode.className.indexOf('-hsb') > 0) {\r
- this.color = col = this.fixHSB({\r
- h: parseInt(this.fields.eq(4).val(), 10),\r
- s: parseInt(this.fields.eq(5).val(), 10),\r
- b: parseInt(this.fields.eq(6).val(), 10)\r
- });\r
- this.fillRGBFields(col);\r
- this.fillHexFields(col);\r
- } else {\r
- this.color = col = this.RGBToHSB(this.fixRGB({\r
- r: parseInt(this.fields.eq(1).val(), 10),\r
- g: parseInt(this.fields.eq(2).val(), 10),\r
- b: parseInt(this.fields.eq(3).val(), 10)\r
- }));\r
- this.fillHexFields(col);\r
- this.fillHSBFields(col);\r
- }\r
- this.setSelector(col);\r
- this.setHue(col);\r
- this.setNewColor(col);\r
- \r
- this.trigger('change', e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });\r
- },\r
- blur: function(e) {\r
- \r
- var col = this.color;\r
this.fillRGBFields(col);\r
- this.fillHSBFields(col);\r
this.fillHexFields(col);\r
- this.setHue(col);\r
- this.setSelector(col);\r
- this.setNewColor(col);\r
- this.fields.parent().removeClass('ui-colorpicker-focus');\r
- \r
- },\r
- focus: function(e) {\r
- \r
- this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65;\r
- this.fields.parent().removeClass('ui-colorpicker-focus');\r
- $(e.target.parentNode).addClass('ui-colorpicker-focus');\r
- \r
- },\r
- downIncrement: function(e) {\r
- \r
- var field = $(e.target).parent().find('input').focus(), self = this;\r
- this.currentIncrement = {\r
- el: $(e.target).parent().addClass('ui-colorpicker-slider'),\r
- max: e.target.parentNode.className.indexOf('-hsb-h') > 0 ? 360 : (e.target.parentNode.className.indexOf('-hsb') > 0 ? 100 : 255),\r
- y: e.pageY,\r
- field: field,\r
- val: parseInt(field.val(), 10)\r
- };\r
- $(document).bind('mouseup.cpSlider', function(e) { return self.upIncrement.call(self, e); });\r
- $(document).bind('mousemove.cpSlider', function(e) { return self.moveIncrement.call(self, e); });\r
- return false;\r
- \r
- },\r
- moveIncrement: function(e) {\r
- this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10))));\r
- this.change.apply(this, [e, this.currentIncrement.field.get(0)]);\r
- return false;\r
- },\r
- upIncrement: function(e) {\r
- this.currentIncrement.el.removeClass('ui-colorpicker-slider').find('input').focus();\r
- this.change.apply(this, [e, this.currentIncrement.field.get(0)]);\r
- $(document).unbind('mouseup.cpSlider');\r
- $(document).unbind('mousemove.cpSlider');\r
- return false;\r
- },\r
- downHue: function(e) {\r
- \r
- this.currentHue = {\r
- y: this.picker.find('div.ui-colorpicker-hue').offset().top\r
- };\r
- \r
- this.change.apply(this, [e, this\r
- .fields\r
- .eq(4)\r
- .val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))\r
- .get(0)]);\r
+ } else {\r
+ this.color = col = this.RGBToHSB(this.fixRGB({\r
+ r: parseInt(this.fields.eq(1).val(), 10),\r
+ g: parseInt(this.fields.eq(2).val(), 10),\r
+ b: parseInt(this.fields.eq(3).val(), 10)\r
+ }));\r
+ this.fillHexFields(col);\r
+ this.fillHSBFields(col);\r
+ }\r
+ this.setSelector(col);\r
+ this.setHue(col);\r
+ this.setNewColor(col);\r
+ \r
+ this.trigger('change', e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });\r
+ },\r
+ blur: function(e) {\r
+ \r
+ var col = this.color;\r
+ this.fillRGBFields(col);\r
+ this.fillHSBFields(col);\r
+ this.fillHexFields(col);\r
+ this.setHue(col);\r
+ this.setSelector(col);\r
+ this.setNewColor(col);\r
+ this.fields.parent().removeClass('ui-colorpicker-focus');\r
+ \r
+ },\r
+ focus: function(e) {\r
+ \r
+ this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65;\r
+ this.fields.parent().removeClass('ui-colorpicker-focus');\r
+ $(e.target.parentNode).addClass('ui-colorpicker-focus');\r
+ \r
+ },\r
+ downIncrement: function(e) {\r
+ \r
+ var field = $(e.target).parent().find('input').focus(), self = this;\r
+ this.currentIncrement = {\r
+ el: $(e.target).parent().addClass('ui-colorpicker-slider'),\r
+ max: e.target.parentNode.className.indexOf('-hsb-h') > 0 ? 360 : (e.target.parentNode.className.indexOf('-hsb') > 0 ? 100 : 255),\r
+ y: e.pageY,\r
+ field: field,\r
+ val: parseInt(field.val(), 10)\r
+ };\r
+ $(document).bind('mouseup.cpSlider', function(e) { return self.upIncrement.call(self, e); });\r
+ $(document).bind('mousemove.cpSlider', function(e) { return self.moveIncrement.call(self, e); });\r
+ return false;\r
+ \r
+ },\r
+ moveIncrement: function(e) {\r
+ this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10))));\r
+ this.change.apply(this, [e, this.currentIncrement.field.get(0)]);\r
+ return false;\r
+ },\r
+ upIncrement: function(e) {\r
+ this.currentIncrement.el.removeClass('ui-colorpicker-slider').find('input').focus();\r
+ this.change.apply(this, [e, this.currentIncrement.field.get(0)]);\r
+ $(document).unbind('mouseup.cpSlider');\r
+ $(document).unbind('mousemove.cpSlider');\r
+ return false;\r
+ },\r
+ downHue: function(e) {\r
+ \r
+ this.currentHue = {\r
+ y: this.picker.find('div.ui-colorpicker-hue').offset().top\r
+ };\r
+ \r
+ this.change.apply(this, [e, this\r
+ .fields\r
+ .eq(4)\r
+ .val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))\r
+ .get(0)]);\r
\r
- var self = this;\r
- $(document).bind('mouseup.cpSlider', function(e) { return self.upHue.call(self, e); });\r
- $(document).bind('mousemove.cpSlider', function(e) { return self.moveHue.call(self, e); });\r
- return false;\r
- \r
- },\r
- moveHue: function(e) {\r
- \r
- this.change.apply(this, [e, this\r
- .fields\r
- .eq(4)\r
- .val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))\r
- .get(0)]);\r
+ var self = this;\r
+ $(document).bind('mouseup.cpSlider', function(e) { return self.upHue.call(self, e); });\r
+ $(document).bind('mousemove.cpSlider', function(e) { return self.moveHue.call(self, e); });\r
+ return false;\r
+ \r
+ },\r
+ moveHue: function(e) {\r
+ \r
+ this.change.apply(this, [e, this\r
+ .fields\r
+ .eq(4)\r
+ .val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))\r
+ .get(0)]);\r
\r
- return false;\r
- \r
- },\r
- upHue: function(e) {\r
- $(document).unbind('mouseup.cpSlider');\r
- $(document).unbind('mousemove.cpSlider');\r
- return false;\r
- },\r
- downSelector: function(e) {\r
- \r
- var self = this;\r
- this.currentSelector = {\r
- pos: this.picker.find('div.ui-colorpicker-color').offset()\r
- };\r
- \r
- this.change.apply(this, [e, this\r
- .fields\r
- .eq(6)\r
- .val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))\r
- .end()\r
- .eq(5)\r
- .val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))\r
- .get(0)\r
- ]);\r
- $(document).bind('mouseup.cpSlider', function(e) { return self.upSelector.call(self, e); });\r
- $(document).bind('mousemove.cpSlider', function(e) { return self.moveSelector.call(self, e); });\r
- return false;\r
- \r
- },\r
- moveSelector: function(e) {\r
- \r
- this.change.apply(this, [e, this\r
- .fields\r
- .eq(6)\r
- .val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))\r
- .end()\r
- .eq(5)\r
- .val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))\r
- .get(0)\r
- ]);\r
- return false;\r
- \r
- },\r
- upSelector: function(e) {\r
- $(document).unbind('mouseup.cpSlider');\r
- $(document).unbind('mousemove.cpSlider');\r
- return false;\r
- },\r
- enterSubmit: function(e) {\r
- this.picker.find('div.ui-colorpicker-submit').addClass('ui-colorpicker-focus');\r
- },\r
- leaveSubmit: function(e) {\r
- this.picker.find('div.ui-colorpicker-submit').removeClass('ui-colorpicker-focus');\r
- },\r
- clickSubmit: function(e) {\r
- \r
- var col = this.color;\r
- this.origColor = col;\r
- this.setCurrentColor(col);\r
- \r
- this.trigger("submit", e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });\r
- return false;\r
- \r
- },\r
- show: function(e) {\r
- \r
- this.trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) });\r
- \r
- var pos = this.element.offset();\r
- var viewPort = this.getScroll();\r
- var top = pos.top + this.element[0].offsetHeight;\r
- var left = pos.left;\r
- if (top + 176 > viewPort.t + Math.min(viewPort.h,viewPort.ih)) {\r
- top -= this.element[0].offsetHeight + 176;\r
- }\r
- if (left + 356 > viewPort.l + Math.min(viewPort.w,viewPort.iw)) {\r
- left -= 356;\r
- }\r
- this.picker.css({left: left + 'px', top: top + 'px'});\r
- if (this.trigger("show", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {\r
- this.picker.show();\r
- }\r
- \r
- var self = this;\r
- $(document).bind('mousedown.colorpicker', function(e) { return self.hide.call(self, e); });\r
- return false;\r
- \r
- },\r
- hide: function(e) {\r
- \r
- if (!this.isChildOf(this.picker[0], e.target, this.picker[0])) {\r
- if (this.trigger("hide", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {\r
- this.picker.hide();\r
- }\r
- $(document).unbind('mousedown.colorpicker');\r
+ return false;\r
+ \r
+ },\r
+ upHue: function(e) {\r
+ $(document).unbind('mouseup.cpSlider');\r
+ $(document).unbind('mousemove.cpSlider');\r
+ return false;\r
+ },\r
+ downSelector: function(e) {\r
+ \r
+ var self = this;\r
+ this.currentSelector = {\r
+ pos: this.picker.find('div.ui-colorpicker-color').offset()\r
+ };\r
+ \r
+ this.change.apply(this, [e, this\r
+ .fields\r
+ .eq(6)\r
+ .val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))\r
+ .end()\r
+ .eq(5)\r
+ .val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))\r
+ .get(0)\r
+ ]);\r
+ $(document).bind('mouseup.cpSlider', function(e) { return self.upSelector.call(self, e); });\r
+ $(document).bind('mousemove.cpSlider', function(e) { return self.moveSelector.call(self, e); });\r
+ return false;\r
+ \r
+ },\r
+ moveSelector: function(e) {\r
+ \r
+ this.change.apply(this, [e, this\r
+ .fields\r
+ .eq(6)\r
+ .val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))\r
+ .end()\r
+ .eq(5)\r
+ .val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))\r
+ .get(0)\r
+ ]);\r
+ return false;\r
+ \r
+ },\r
+ upSelector: function(e) {\r
+ $(document).unbind('mouseup.cpSlider');\r
+ $(document).unbind('mousemove.cpSlider');\r
+ return false;\r
+ },\r
+ enterSubmit: function(e) {\r
+ this.picker.find('div.ui-colorpicker-submit').addClass('ui-colorpicker-focus');\r
+ },\r
+ leaveSubmit: function(e) {\r
+ this.picker.find('div.ui-colorpicker-submit').removeClass('ui-colorpicker-focus');\r
+ },\r
+ clickSubmit: function(e) {\r
+ \r
+ var col = this.color;\r
+ this.origColor = col;\r
+ this.setCurrentColor(col);\r
+ \r
+ this.trigger("submit", e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });\r
+ return false;\r
+ \r
+ },\r
+ show: function(e) {\r
+ \r
+ this.trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) });\r
+ \r
+ var pos = this.element.offset();\r
+ var viewPort = this.getScroll();\r
+ var top = pos.top + this.element[0].offsetHeight;\r
+ var left = pos.left;\r
+ if (top + 176 > viewPort.t + Math.min(viewPort.h,viewPort.ih)) {\r
+ top -= this.element[0].offsetHeight + 176;\r
+ }\r
+ if (left + 356 > viewPort.l + Math.min(viewPort.w,viewPort.iw)) {\r
+ left -= 356;\r
+ }\r
+ this.picker.css({left: left + 'px', top: top + 'px'});\r
+ if (this.trigger("show", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {\r
+ this.picker.show();\r
+ }\r
+ \r
+ var self = this;\r
+ $(document).bind('mousedown.colorpicker', function(e) { return self.hide.call(self, e); });\r
+ return false;\r
+ \r
+ },\r
+ hide: function(e) {\r
+ \r
+ if (!this.isChildOf(this.picker[0], e.target, this.picker[0])) {\r
+ if (this.trigger("hide", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {\r
+ this.picker.hide();\r
}\r
- \r
- },\r
- isChildOf: function(parentEl, el, container) {\r
- if (parentEl == el) {\r
+ $(document).unbind('mousedown.colorpicker');\r
+ }\r
+ \r
+ },\r
+ isChildOf: function(parentEl, el, container) {\r
+ if (parentEl == el) {\r
+ return true;\r
+ }\r
+ if (parentEl.contains && !$.browser.safari) {\r
+ return parentEl.contains(el);\r
+ }\r
+ if ( parentEl.compareDocumentPosition ) {\r
+ return !!(parentEl.compareDocumentPosition(el) & 16);\r
+ }\r
+ var prEl = el.parentNode;\r
+ while(prEl && prEl != container) {\r
+ if (prEl == parentEl)\r
return true;\r
+ prEl = prEl.parentNode;\r
+ }\r
+ return false;\r
+ },\r
+ getScroll: function() {\r
+ var t,l,w,h,iw,ih;\r
+ if (document.documentElement) {\r
+ t = document.documentElement.scrollTop;\r
+ l = document.documentElement.scrollLeft;\r
+ w = document.documentElement.scrollWidth;\r
+ h = document.documentElement.scrollHeight;\r
+ } else {\r
+ t = document.body.scrollTop;\r
+ l = document.body.scrollLeft;\r
+ w = document.body.scrollWidth;\r
+ h = document.body.scrollHeight;\r
+ }\r
+ iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;\r
+ ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;\r
+ return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };\r
+ },\r
+ fixHSB: function(hsb) {\r
+ return {\r
+ h: Math.min(360, Math.max(0, hsb.h)),\r
+ s: Math.min(100, Math.max(0, hsb.s)),\r
+ b: Math.min(100, Math.max(0, hsb.b))\r
+ };\r
+ }, \r
+ fixRGB: function(rgb) {\r
+ return {\r
+ r: Math.min(255, Math.max(0, rgb.r)),\r
+ g: Math.min(255, Math.max(0, rgb.g)),\r
+ b: Math.min(255, Math.max(0, rgb.b))\r
+ };\r
+ }, \r
+ HexToRGB: function (hex) {\r
+ var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);\r
+ return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};\r
+ },\r
+ HexToHSB: function(hex) {\r
+ return this.RGBToHSB(this.HexToRGB(hex));\r
+ },\r
+ RGBToHSB: function(rgb) {\r
+ var hsb = {};\r
+ hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);\r
+ hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);\r
+ hsb.b = Math.round((hsb.b /255)*100);\r
+ if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;\r
+ else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);\r
+ else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60 + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);\r
+ else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);\r
+ else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);\r
+ else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);\r
+ else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);\r
+ else hsb.h = 0;\r
+ hsb.h = Math.round(hsb.h);\r
+ return hsb;\r
+ },\r
+ HSBToRGB: function(hsb) {\r
+ var rgb = {};\r
+ var h = Math.round(hsb.h);\r
+ var s = Math.round(hsb.s*255/100);\r
+ var v = Math.round(hsb.b*255/100);\r
+ if(s == 0) {\r
+ rgb.r = rgb.g = rgb.b = v;\r
+ } else {\r
+ var t1 = v;\r
+ var t2 = (255-s)*v/255;\r
+ var t3 = (t1-t2)*(h%60)/60;\r
+ if(h==360) h = 0;\r
+ if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;}\r
+ else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;}\r
+ else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;}\r
+ else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;}\r
+ else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;}\r
+ else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;}\r
+ else {rgb.r=0; rgb.g=0; rgb.b=0;}\r
+ }\r
+ return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};\r
+ },\r
+ RGBToHex: function(rgb) {\r
+ var hex = [\r
+ rgb.r.toString(16),\r
+ rgb.g.toString(16),\r
+ rgb.b.toString(16)\r
+ ];\r
+ $.each(hex, function (nr, val) {\r
+ if (val.length == 1) {\r
+ hex[nr] = '0' + val;\r
}\r
- if (parentEl.contains && !$.browser.safari) {\r
- return parentEl.contains(el);\r
- }\r
- if ( parentEl.compareDocumentPosition ) {\r
- return !!(parentEl.compareDocumentPosition(el) & 16);\r
- }\r
- var prEl = el.parentNode;\r
- while(prEl && prEl != container) {\r
- if (prEl == parentEl)\r
- return true;\r
- prEl = prEl.parentNode;\r
- }\r
- return false;\r
- },\r
- getScroll: function() {\r
- var t,l,w,h,iw,ih;\r
- if (document.documentElement) {\r
- t = document.documentElement.scrollTop;\r
- l = document.documentElement.scrollLeft;\r
- w = document.documentElement.scrollWidth;\r
- h = document.documentElement.scrollHeight;\r
- } else {\r
- t = document.body.scrollTop;\r
- l = document.body.scrollLeft;\r
- w = document.body.scrollWidth;\r
- h = document.body.scrollHeight;\r
- }\r
- iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;\r
- ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;\r
- return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };\r
- },\r
- fixHSB: function(hsb) {\r
- return {\r
- h: Math.min(360, Math.max(0, hsb.h)),\r
- s: Math.min(100, Math.max(0, hsb.s)),\r
- b: Math.min(100, Math.max(0, hsb.b))\r
- };\r
- }, \r
- fixRGB: function(rgb) {\r
- return {\r
- r: Math.min(255, Math.max(0, rgb.r)),\r
- g: Math.min(255, Math.max(0, rgb.g)),\r
- b: Math.min(255, Math.max(0, rgb.b))\r
- };\r
- }, \r
- HexToRGB: function (hex) {\r
- var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);\r
- return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};\r
- },\r
- HexToHSB: function(hex) {\r
- return this.RGBToHSB(this.HexToRGB(hex));\r
- },\r
- RGBToHSB: function(rgb) {\r
- var hsb = {};\r
- hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);\r
- hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);\r
- hsb.b = Math.round((hsb.b /255)*100);\r
- if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;\r
- else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);\r
- else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60 + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);\r
- else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);\r
- else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);\r
- else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);\r
- else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);\r
- else hsb.h = 0;\r
- hsb.h = Math.round(hsb.h);\r
- return hsb;\r
- },\r
- HSBToRGB: function(hsb) {\r
- var rgb = {};\r
- var h = Math.round(hsb.h);\r
- var s = Math.round(hsb.s*255/100);\r
- var v = Math.round(hsb.b*255/100);\r
- if(s == 0) {\r
- rgb.r = rgb.g = rgb.b = v;\r
- } else {\r
- var t1 = v;\r
- var t2 = (255-s)*v/255;\r
- var t3 = (t1-t2)*(h%60)/60;\r
- if(h==360) h = 0;\r
- if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;}\r
- else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;}\r
- else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;}\r
- else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;}\r
- else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;}\r
- else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;}\r
- else {rgb.r=0; rgb.g=0; rgb.b=0;}\r
- }\r
- return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};\r
- },\r
- RGBToHex: function(rgb) {\r
- var hex = [\r
- rgb.r.toString(16),\r
- rgb.g.toString(16),\r
- rgb.b.toString(16)\r
- ];\r
- $.each(hex, function (nr, val) {\r
- if (val.length == 1) {\r
- hex[nr] = '0' + val;\r
- }\r
- });\r
- return hex.join('');\r
- },\r
- HSBToHex: function(hsb) {\r
- return this.RGBToHex(this.HSBToRGB(hsb));\r
- },\r
- setColor: function(col) {\r
- if (typeof col == 'string') {\r
- col = this.HexToHSB(col);\r
- } else if (col.r != undefined && col.g != undefined && col.b != undefined) {\r
- col = this.RGBToHSB(col);\r
- } else if (col.h != undefined && col.s != undefined && col.b != undefined) {\r
- col = this.fixHSB(col);\r
- } else {\r
- return this;\r
- }\r
+ });\r
+ return hex.join('');\r
+ },\r
+ HSBToHex: function(hsb) {\r
+ return this.RGBToHex(this.HSBToRGB(hsb));\r
+ },\r
+ setColor: function(col) {\r
+ if (typeof col == 'string') {\r
+ col = this.HexToHSB(col);\r
+ } else if (col.r != undefined && col.g != undefined && col.b != undefined) {\r
+ col = this.RGBToHSB(col);\r
+ } else if (col.h != undefined && col.s != undefined && col.b != undefined) {\r
+ col = this.fixHSB(col);\r
+ } else {\r
+ return this;\r
+ }\r
\r
- this.color = col;\r
- this.origColor = col;\r
- this.fillRGBFields(col);\r
- this.fillHSBFields(col);\r
- this.fillHexFields(col);\r
- this.setHue(col);\r
- this.setSelector(col);\r
- this.setCurrentColor(col);\r
- this.setNewColor(col);\r
+ this.color = col;\r
+ this.origColor = col;\r
+ this.fillRGBFields(col);\r
+ this.fillHSBFields(col);\r
+ this.fillHexFields(col);\r
+ this.setHue(col);\r
+ this.setSelector(col);\r
+ this.setCurrentColor(col);\r
+ this.setNewColor(col);\r
\r
- }\r
- \r
- });\r
+ }\r
\r
- $.extend($.ui.colorpicker, {\r
- defaults: {\r
- eventName: 'click',\r
- color: 'ff0000',\r
- flat: false\r
- }\r
- });\r
+});\r
+\r
+$.extend($.ui.colorpicker, {\r
+ defaults: {\r
+ eventName: 'click',\r
+ color: 'ff0000',\r
+ flat: false\r
+ }\r
+});\r
\r
})(jQuery);
\ No newline at end of file
projects / jquery-ui.git / commitdiff