From 388b15cd589298b32c1ade9cc4aa6a6a97411047 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 16:04:52 +0100 Subject: Ported colorpicker --- framework/Web/Javascripts/packages.php | 2 +- .../source/prado/colorpicker/colorpicker.js | 419 ++++++++++++--------- 2 files changed, 235 insertions(+), 186 deletions(-) (limited to 'framework/Web') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index 4743a000..edd250f1 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -117,8 +117,8 @@ $dependencies = array( 'effects' => array('jquery', 'jqueryui'), 'datepicker' => array('jquery', 'prado', 'datepicker'), 'activedatepicker' => array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'), + 'colorpicker' => array('jquery', 'prado', 'colorpicker'), /* - 'colorpicker' => array('prototype', 'prado', 'colorpicker'), 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), 'keyboard' => array('prototype', 'prado', 'keyboard'), diff --git a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js index 14195090..54680922 100644 --- a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js +++ b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js @@ -79,7 +79,7 @@ Rico.Color.prototype = { }, asHex: function() { - return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart(); + return "#" + this.toColorPart(this.rgb.r) + this.toColorPart(this.rgb.g) + this.toColorPart(this.rgb.b); }, asHSB: function() { @@ -88,8 +88,13 @@ Rico.Color.prototype = { toString: function() { return this.asHex(); - } + }, + toColorPart: function(number) { + number = (number > 255 ? 255 : (number < 0 ? 0 : number)); + var hex = number.toString(16); + return hex.length < 2 ? "0" + hex : hex; + } }; Rico.Color.createFromHex = function(hexCode) { @@ -122,7 +127,7 @@ Rico.Color.createFromHex = function(hexCode) { */ Rico.Color.createColorFromBackground = function(elem) { - var actualColor = Element.getStyle($(elem), "background-color"); + var actualColor = jQuery(elem).css("background-color"); if ( actualColor == "transparent" && elem.parent ) return Rico.Color.createColorFromBackground(elem.parent); @@ -241,40 +246,9 @@ Rico.Color.RGBtoHSB = function(r, g, b) { return { h : hue, s : saturation, b : brightness }; }; +Prado.WebUI.TColorPicker = jQuery.klass(Prado.WebUI.Control, { -Prado.WebUI.TColorPicker = jQuery.klass(); - -Object.extend(Prado.WebUI.TColorPicker, -{ - palettes: - { - Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], - ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], - ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], - ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], - ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], - ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], - ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], - - Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/], - ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/], - ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] - }, - - UIImages : - { - 'button.gif' : 'button.gif', -// 'target_black.gif' : 'target_black.gif', -// 'target_white.gif' : 'target_white.gif', - 'background.png' : 'background.png' -// 'slider.gif' : 'slider.gif', -// 'hue.gif' : 'hue.gif' - } -}); - -Object.extend(Prado.WebUI.TColorPicker.prototype, -{ - initialize : function(options) + onInit : function(options) { var basics = { @@ -289,16 +263,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element = null; this.showing = false; - options = Object.extend(basics, options); + options = jQuery.extend(basics, options); this.options = options; - this.input = $(options['ID']); - this.button = $(options['ID']+'_button'); - this._buttonOnClick = this.buttonOnClick.bind(this); + this.input = $('#'+options['ID']).get(0); + this.button = $('#'+options['ID']+'_button').get(0); + this._buttonOnClick = jQuery.proxy(this.buttonOnClick, this); if(options['ShowColorPicker']) - Event.observe(this.button, "click", this._buttonOnClick); - Event.observe(this.input, "change", this.updatePicker.bind(this)); + this.observe(this.button, "click", this._buttonOnClick); + this.observe(this.input, "change", jQuery.proxy(this.updatePicker, this)); - Prado.Registry.set(options.ID, this); + Prado.Registry[options.ID] = this; }, updatePicker : function(e) @@ -317,15 +291,6 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.input.parentNode.appendChild(this.element); this.element.style.display = "none"; - if(Prado.Browser().ie) - { - this.iePopUp = document.createElement('iframe'); - this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif']; - this.iePopUp.style.position = "absolute" - this.iePopUp.scrolling="no" - this.iePopUp.frameBorder="0" - this.input.parentNode.appendChild(this.iePopUp); - } if(mode == "Full") this.initializeFullPicker(); } @@ -336,20 +301,18 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { if(!this.showing) { - var pos = this.input.positionedOffset(); - pos[1] += this.input.offsetHeight; + var pos = jQuery(this.input).position(); + pos['top'] += this.input.offsetHeight; - this.element.style.top = (pos[1]-1) + "px"; - this.element.style.left = pos[0] + "px"; + this.element.style.top = (pos['top']-1) + "px"; + this.element.style.left = pos['left'] + "px"; this.element.style.display = "block"; - this.ieHack(type); - //observe for clicks on the document body - this._documentClickEvent = this.hideOnClick.bindEvent(this, type); - this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type); - Event.observe(document.body, "click", this._documentClickEvent); - Event.observe(document,"keydown", this._documentKeyDownEvent); + this._documentClickEvent = jQuery.bind(this.hideOnClick, this, type); + this._documentKeyDownEvent = jQuery.bind(this.keyPressed, this, type); + this.observe(document.body, "click", this._documentClickEvent); + this.observe(document,"keydown", this._documentKeyDownEvent); this.showing = true; if(type == "Full") @@ -366,17 +329,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { if(this.showing) { - if(this.iePopUp) - this.iePopUp.style.display = "none"; - this.element.style.display = "none"; this.showing = false; - Event.stopObserving(document.body, "click", this._documentClickEvent); - Event.stopObserving(document,"keydown", this._documentKeyDownEvent); + this.stopObserving(document.body, "click", this._documentClickEvent); + this.stopObserving(document,"keydown", this._documentKeyDownEvent); if(this._observingMouseMove) { - Event.stopObserving(document.body, "mousemove", this._onMouseMove); + this.stopObserving(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = false; } } @@ -384,14 +344,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, keyPressed : function(event,type) { - if(Event.keyCode(event) == Event.KEY_ESC) + // esc + if(event.keyCode == 27) this.hide(event,type); }, hideOnClick : function(ev) { if(!this.showing) return; - var el = Event.element(ev); + var el = ev.target; var within = false; do { within = within || String(el.className).indexOf('FullColorPicker') > -1 @@ -404,53 +365,60 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, if(!within) this.hide(ev); }, - ieHack : function() - { - // IE hack - if(this.iePopUp) - { - this.iePopUp.style.display = "block"; - this.iePopUp.style.top = (this.element.offsetTop) + "px"; - this.iePopUp.style.left = (this.element.offsetLeft)+ "px"; - this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px"; - this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px"; - } - }, - getBasicPickerContainer : function(pickerID, palette) { - var table = TABLE({className:'basic_colors palette_'+palette},TBODY()); + var div; + var table; + var tbody; + var tr; + var td; + + // main div + div = document.createElement("div"); + div.className = this.options['ClassName']+" BasicColorPicker"; + div.id = pickerID+"_picker"; + + table = document.createElement("table"); + table.className = 'basic_colors palette_'+palette; + div.appendChild(table); + + tbody = document.createElement("tbody"); + table.appendChild(tbody); + var colors = Prado.WebUI.TColorPicker.palettes[palette]; var pickerOnClick = this.cellOnClick.bind(this); - colors.each(function(color) + var obj=this; + jQuery.each(colors, function(idx, color) { var row = document.createElement("tr"); - color.each(function(c) + jQuery.each(color, function(idx, c) { var td = document.createElement("td"); - var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16}); + var img = document.createElement("img"); + img.src=Prado.WebUI.TColorPicker.UIImages['button.gif']; + img.width=16; + img.height=16; img.style.backgroundColor = "#"+c; - Event.observe(img,"click", pickerOnClick); - Event.observe(img,"mouseover", function(e) + obj.observe(img,"click", pickerOnClick); + obj.observe(img,"mouseover", function(e) { - Element.addClassName(Event.element(e), "pickerhover"); + jQuery(e.target).addClass("pickerhover"); }); - Event.observe(img,"mouseout", function(e) + obj.observe(img,"mouseout", function(e) { - Element.removeClassName(Event.element(e), "pickerhover"); + jQuery(e.target).removeClass("pickerhover"); }); td.appendChild(img); row.appendChild(td); }); table.childNodes[0].appendChild(row); }); - return DIV({className:this.options['ClassName']+" BasicColorPicker", - id:pickerID+"_picker"}, table); + return div; }, cellOnClick : function(e) { - var el = Event.element(e); + var el = e.target; if(el.tagName.toLowerCase() != "img") return; var color = Rico.Color.createColorFromBackground(el); @@ -469,98 +437,148 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, getFullPickerContainer : function(pickerID) { - //create the 3 buttons + //create the buttons + var okBtn = document.createElement("input"); + okBtn.className = 'button'; + okBtn.type = 'button'; + okBtn.value = this.options.OKButtonText; + + var cancelBtn = document.createElement("input"); + cancelBtn.className = 'button'; + cancelBtn.type = 'button'; + cancelBtn.value = this.options.CancelButtonText; + this.buttons = { - //Less : INPUT({value:'Less Colors', className:'button', type:'button'}), - OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), - Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) + OK : okBtn, + Cancel : cancelBtn }; //create the 6 inputs var inputs = {}; - ['H','S','V','R','G','B'].each(function(type) + jQuery.each(['H','S','V','R','G','B'], function(idx, type) { - inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'}); + inputs[type] = document.createElement("input"); + inputs[type].type='text'; + inputs[type].size='3'; + inputs[type].maxlength='3'; }); //create the HEX input - inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'}); + inputs['HEX'] = document.createElement("input"); + inputs['HEX'].className = 'hex'; + inputs['HEX'].type='text'; + inputs['HEX'].size='6'; + inputs['HEX'].maxlength='6'; + this.inputs = inputs; var images = Prado.WebUI.TColorPicker.UIImages; - this.inputs['currentColor'] = SPAN({className:'currentColor'}); - this.inputs['oldColor'] = SPAN({className:'oldColor'}); - - var inputsTable = - TABLE({className:'inputs'}, TBODY(null, - TR(null, - TD({className:'currentcolor',colSpan:2}, - this.inputs['currentColor'], this.inputs['oldColor'])), - - TR(null, - TD(null,'H:'), - TD(null,this.inputs['H'], '??')), + this.inputs['currentColor'] = document.createElement("span"); + this.inputs['currentColor'].className='currentColor'; + this.inputs['oldColor'] = document.createElement("span"); + this.inputs['oldColor'].className='oldColor'; - TR(null, - TD(null,'S:'), - TD(null,this.inputs['S'], '%')), + var inputsTable = document.createElement("table"); + inputsTable.className='inputs'; - TR(null, - TD(null,'V:'), - TD(null,this.inputs['V'], '%')), + var tbody = document.createElement("tbody"); + inputsTable.appendChild(tbody); - TR(null, - TD({className:'gap'},'R:'), - TD({className:'gap'},this.inputs['R'])), + var tr = document.createElement("tr"); + tbody.appendChild(tr); - TR(null, - TD(null,'G:'), - TD(null, this.inputs['G'])), + var td= document.createElement("td"); + tr.appendChild(td); + td.className='currentcolor'; + td.colSpan=2; + td.appendChild(this.inputs['currentColor']); + td.appendChild(this.inputs['oldColor']); - TR(null, - TD(null,'B:'), - TD(null, this.inputs['B'])), - - TR(null, - TD({className:'gap'},'#'), - TD({className:'gap'},this.inputs['HEX'])) - )); + this.internalAddRow(tbody, 'H:', this.inputs['H'], '°'); + this.internalAddRow(tbody, 'S:', this.inputs['S'], '%'); + this.internalAddRow(tbody, 'V:', this.inputs['V'], '%'); + this.internalAddRow(tbody, 'R:', this.inputs['R'], null, 'gap'); + this.internalAddRow(tbody, 'G:', this.inputs['G']); + this.internalAddRow(tbody, 'B:', this.inputs['B']); + this.internalAddRow(tbody, '#', this.inputs['HEX'], null, 'gap'); var UIimages = { - selector : SPAN({className:'selector'}), - background : SPAN({className:'colorpanel'}), - slider : SPAN({className:'slider'}), - hue : SPAN({className:'strip'}) + selector : document.createElement("span"), + background : document.createElement("span"), + slider : document.createElement("span"), + hue : document.createElement("span") } - //png alpha channels for IE - if(Prado.Browser().ie) - { - var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; - UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"}) - } + UIimages['selector'].className='selector'; + UIimages['background'].className='colorpanel'; + UIimages['slider'].className='slider'; + UIimages['hue'].className='strip'; + + this.inputs = jQuery.extend(this.inputs, UIimages); + + var pickerTable = document.createElement("table"); + tbody=document.createElement("tbody"); + pickerTable.appendChild(tbody); + + var tr = document.createElement("tr"); + tr.className='selection'; + tbody.appendChild(tr); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='colors'; + td.appendChild(UIimages['selector']); + td.appendChild(UIimages['background']); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='hue'; + td.appendChild(UIimages['slider']); + td.appendChild(UIimages['hue']); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='inputs'; + td.appendChild(inputsTable); + + var tr = document.createElement("tr"); + tr.className='options'; + tbody.appendChild(tr); + + var td= document.createElement("td"); + tr.appendChild(td); + td.colSpan=3; + td.appendChild(this.buttons['OK']); + td.appendChild(this.buttons['Cancel']); + + var div = document.createElement('div'); + div.className=this.options['ClassName']+" FullColorPicker"; + div.id=pickerID+"_picker"; + div.appendChild(pickerTable); + return div; + }, - this.inputs = Object.extend(this.inputs, UIimages); - - var pickerTable = - TABLE(null,TBODY(null, - TR({className:'selection'}, - TD({className:'colors'},UIimages['selector'],UIimages['background']), - TD({className:'hue'},UIimages['slider'],UIimages['hue']), - TD({className:'inputs'}, inputsTable) - ), - TR({className:'options'}, - TD({colSpan:3}, - this.buttons['OK'], - this.buttons['Cancel']) - ) - )); - - return DIV({className:this.options['ClassName']+" FullColorPicker", - id:pickerID+"_picker"},pickerTable); + internalAddRow : function(tbody, label1, object2, label2, className) + { + var tr = document.createElement("tr"); + tbody.appendChild(tr); + + var td= document.createElement("td"); + if(className!==undefined && className!==null) + td.className=className; + tr.appendChild(td); + td.appendChild(document.createTextNode(label1)); + + var td= document.createElement("td"); + if(className!==undefined && className!==null) + td.className=className; + tr.appendChild(td); + td.appendChild(object2); + if(label2!==undefined && label2!==null) + td.appendChild(document.createTextNode(label2)); }, initializeFullPicker : function() @@ -572,7 +590,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var i = 0; for(var type in this.inputs) { - Event.observe(this.inputs[type], "change", + this.observe(this.inputs[type], "change", jQuery.proxy(this.onInputChanged,this,type)); i++; @@ -587,24 +605,24 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this._onMouseUp = this.onMouseUp.bind(this); this._onMouseMove = this.onMouseMove.bind(this); - Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown); - Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); - Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); - Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); + this.observe(this.inputs.background, "mousedown", this._onColorMouseDown); + this.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); + this.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); + this.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); - Event.observe(document.body, "mouseup", this._onMouseUp); + this.observe(document.body, "mouseup", this._onMouseUp); this.observeMouseMovement(); - Event.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode'])); - Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); + this.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode'])); + this.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); }, observeMouseMovement : function() { if(!this._observingMouseMove) { - Event.observe(document.body, "mousemove", this._onMouseMove); + this.observe(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = true; } }, @@ -613,21 +631,21 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { this.isMouseDownOnColor = true; this.onMouseMove(ev); - Event.stop(ev); + ev.stopPropagation(); }, onHueMouseDown : function(ev) { this.isMouseDownOnHue = true; this.onMouseMove(ev); - Event.stop(ev); + ev.stopPropagation(); }, onMouseUp : function(ev) { this.isMouseDownOnColor = false; this.isMouseDownOnHue = false; - Event.stop(ev); + ev.stopPropagation(); }, onMouseMove : function(ev) @@ -636,17 +654,17 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.changeSV(ev); if(this.isMouseDownOnHue) this.changeH(ev); - Event.stop(ev); + ev.stopPropagation(); }, changeSV : function(ev) { - var px = Event.pointerX(ev); - var py = Event.pointerY(ev); - var pos = this.inputs.background.cumulativeOffset(); + var px = ev.pageX; + var py = ev.pageY; + var pos = jQuery(this.inputs.background).offset(); - var x = this.truncate(px - pos[0],0,255); - var y = this.truncate(py - pos[1],0,255); + var x = this.truncate(px - pos['left'],0,255); + var y = this.truncate(py - pos['top'],0,255); var s = x/255; @@ -673,9 +691,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, changeH : function(ev) { - var py = Event.pointerY(ev); - var pos = this.inputs.background.cumulativeOffset(); - var y = this.truncate(py - pos[1],0,255); + var py = ev.pageY; + var pos = jQuery(this.inputs.background).offset(); + var y = this.truncate(py - pos['top'],0,255); var h = (255-y)/255; var current_h = this.truncate(this.inputs.H.value,0,360); @@ -750,8 +768,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var images = Prado.WebUI.TColorPicker.UIImages; - var changeCss = color.isBright() ? 'removeClassName' : 'addClassName'; - Element[changeCss](this.inputs.selector, 'target_white'); + if(color.isBright()) + jQuery(this.inputs.selector).removeClass('target_white'); + else + jQuery(this.inputs.selector).addClass('target_white'); if(update) this.updateSelectors(color); @@ -778,3 +798,32 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, return value < min ? min : value > max ? max : value; } }); + +jQuery.extend(Prado.WebUI.TColorPicker, +{ + palettes: + { + Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], + ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], + ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], + ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], + ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], + ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], + ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], + + Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/], + ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/], + ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] + }, + + UIImages : + { + 'button.gif' : 'button.gif', +// 'target_black.gif' : 'target_black.gif', +// 'target_white.gif' : 'target_white.gif', +// 'background.png' : 'background.png' +// 'slider.gif' : 'slider.gif', +// 'hue.gif' : 'hue.gif' + } +}); + -- cgit v1.2.3