Return-Path: Delivered-To: apmail-incubator-click-commits-archive@locus.apache.org Received: (qmail 34069 invoked from network); 17 Dec 2008 18:29:20 -0000 Received: from hermes.apache.org (HELO mail.apache.org) (140.211.11.2) by minotaur.apache.org with SMTP; 17 Dec 2008 18:29:20 -0000 Received: (qmail 8047 invoked by uid 500); 17 Dec 2008 18:29:32 -0000 Delivered-To: apmail-incubator-click-commits-archive@incubator.apache.org Received: (qmail 8033 invoked by uid 500); 17 Dec 2008 18:29:32 -0000 Mailing-List: contact click-commits-help@incubator.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: click-dev@incubator.apache.org Delivered-To: mailing list click-commits@incubator.apache.org Received: (qmail 8022 invoked by uid 99); 17 Dec 2008 18:29:32 -0000 Received: from athena.apache.org (HELO athena.apache.org) (140.211.11.136) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 17 Dec 2008 10:29:32 -0800 X-ASF-Spam-Status: No, hits=-2000.0 required=10.0 tests=ALL_TRUSTED X-Spam-Check-By: apache.org Received: from [140.211.11.4] (HELO eris.apache.org) (140.211.11.4) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 17 Dec 2008 18:29:19 +0000 Received: by eris.apache.org (Postfix, from userid 65534) id D8778238887A; Wed, 17 Dec 2008 10:28:58 -0800 (PST) Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Subject: svn commit: r727457 - in /incubator/click/trunk/click/extras/src: META-INF/web/click/colorpicker/colorpicker.css META-INF/web/click/colorpicker/colorpicker.js net/sf/click/extras/control/ColorPicker.htm Date: Wed, 17 Dec 2008 18:28:58 -0000 To: click-commits@incubator.apache.org From: sabob@apache.org X-Mailer: svnmailer-1.0.8 Message-Id: <20081217182858.D8778238887A@eris.apache.org> X-Virus-Checked: Checked by ClamAV on apache.org Author: sabob Date: Wed Dec 17 10:28:58 2008 New Revision: 727457 URL: http://svn.apache.org/viewvc?rev=727457&view=rev Log: restored ColorPicker features such as preview when textfield is hidden and conditionally displaying clear button Modified: incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.css incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.js incubator/click/trunk/click/extras/src/net/sf/click/extras/control/ColorPicker.htm Modified: incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.css URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.css?rev=727457&r1=727456&r2=727457&view=diff ============================================================================== --- incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.css (original) +++ incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.css Wed Dec 17 10:28:58 2008 @@ -29,3 +29,10 @@ .colorPickerClearImg:hover, .colorPickerCloseImg:hover { border: 1px solid #CCCCCC; } +.colorPickerPreview { + border: 1px solid #CCCCCC; + width: 18px; + height: 18px; + float: left; + clear:left; +} \ No newline at end of file Modified: incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.js URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.js?rev=727457&r1=727456&r2=727457&view=diff ============================================================================== --- incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.js (original) +++ incubator/click/trunk/click/extras/src/META-INF/web/click/colorpicker/colorpicker.js Wed Dec 17 10:28:58 2008 @@ -67,11 +67,14 @@ SAT_VAL_SQUARE_LOCATION: '/click/colorpicker/images/sv.png', BUTTON_CLOSE_LOCATION: '/click/colorpicker/images/close.png', BUTTON_CLEAR_LOCATION: '/click/colorpicker/images/clear.png', - colorPickerInputObjId: null, + inputObjId: null, colorPickerId: null, - colorPickerCloseMsg: 'Close', - colorPickerClearMsg: 'Clear color', - colorPickerResourcePath: '.' + closeMsg: 'Close', + clearMsg: 'Clear color', + resourcePath: '.', + previewId:null, + imageId:null, + isRequired:false } // Here are some boring utility functions. The real code comes later. @@ -170,8 +173,16 @@ function trackDrag(node, handler) { function fixCoords(x, y) { var nodePageCoords = pageCoords(node); - x = (x - nodePageCoords.x) + document.documentElement.scrollLeft; - y = (y - nodePageCoords.y) + document.documentElement.scrollTop; + var de = document.documentElement; + + // Get Y offset independent of browser or compatibility mode + var offsetY = self.pageYOffset || ( de && de.scrollTop ) || document.body.scrollTop; + + // Get X offset independent of browser or compatibility mode + var offsetX = self.pageXOffset || ( de && de.scrollLeft ) || document.body.scrollLeft; + + x = (x - nodePageCoords.x) + offsetX; + y = (y - nodePageCoords.y) + offsetY; if (x < 0) x = 0; if (y < 0) y = 0; if (x > node.offsetWidth - 1) x = node.offsetWidth - 1; @@ -189,8 +200,7 @@ function moveHandler(ev) { var coords = fixCoords(ev.clientX, ev.clientY); - if (coords.x != lastX || coords.y != lastY) - { + if (coords.x != lastX || coords.y != lastY) { lastX = coords.x; lastY = coords.y; handler(coords.x, coords.y); @@ -385,59 +395,10 @@ }; } - function makeColorSelector(inputBox) { - var path = options.colorPickerResourcePath; + function makeColorSelector(inputBox, preview) { + var path = options.resourcePath; // The real code begins here. - var huePositionImg = document.createElement('img'); - huePositionImg.galleryImg = false; - huePositionImg.width = 35; - huePositionImg.height = 11; - huePositionImg.src = path + options.HUE_SLIDER_ARROWS_LOCATION; - huePositionImg.style.position = 'absolute'; - - var hueSelectorImg = document.createElement('img'); - hueSelectorImg.galleryImg = false; - hueSelectorImg.width = 35; - hueSelectorImg.height = 200; - hueSelectorImg.src = path + options.HUE_SLIDER_LOCATION; - hueSelectorImg.style.display = 'block'; - - var satValImg = document.createElement('img'); - satValImg.galleryImg = false; - satValImg.width = 200; - satValImg.height = 200; - satValImg.src = path + options.SAT_VAL_SQUARE_LOCATION; - satValImg.style.display = 'block'; - - var crossHairsImg = document.createElement('img'); - crossHairsImg.galleryImg = false; - crossHairsImg.width = 21; - crossHairsImg.height = 21; - crossHairsImg.src = path + options.CROSSHAIRS_LOCATION; - crossHairsImg.style.position = 'absolute'; - - var buttonCloseImg = document.createElement('img'); - buttonCloseImg.galleryImg = false; - buttonCloseImg.width = 17; - buttonCloseImg.height = 17; - buttonCloseImg.src = path + options.BUTTON_CLOSE_LOCATION; - buttonCloseImg.title = options.colorPickerCloseMsg; - buttonCloseImg.style.position = 'absolute'; - buttonCloseImg.style.cursor='pointer'; - buttonCloseImg.className='colorPickerCloseImg'; - buttonCloseImg.onclick=hideColorPicker; - - var buttonClearImg = document.createElement('img'); - buttonClearImg.galleryImg = false; - buttonClearImg.width = 17; - buttonClearImg.height = 17; - buttonClearImg.src = path + options.BUTTON_CLEAR_LOCATION; - buttonClearImg.title = options.colorPickerClearMsg; - buttonClearImg.style.position = 'absolute'; - buttonClearImg.style.cursor='pointer'; - buttonClearImg.className='colorPickerClearImg'; - buttonClearImg.onclick=clearColorAndHideColorPicker; var rgb, hsv; @@ -448,13 +409,16 @@ var hueRgb = hsvToRgb(hsv.h, 1, 1); var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b); inputBox.value=hex; - /* - // popox idea - inputBox.style.background = hex; - if(((rgb.r*100+rgb.g*100+rgb.b*100)/3)<65) //change text color to white if the background color is to dark - inputBox.style.color="#fff"; - else inputBox.style.color="#000"; - */ + if(preview) { + preview.style.background = hex; + /* + // popox idea + inputBox.style.background = hex; + if(((rgb.r*100+rgb.g*100+rgb.b*100)/3)<65) //change text color to white if the background color is to dark + inputBox.style.color="#fff"; + else inputBox.style.color="#000"; + */ + } satValDiv.style.background = hueHex; crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px'; @@ -480,17 +444,40 @@ colorSelectorDiv.style.height = '227px'; colorSelectorDiv.style.width = '210px'; - var clearButton = document.createElement('div'); - clearButton.style.position = 'absolute'; - clearButton.style.diplay="inline"; - clearButton.style.height = '17px'; - clearButton.style.width = '17px'; - clearButton.style.top="2px"; - clearButton.style.left="6px"; + if(!options.isRequired) { + var buttonClearImg = document.createElement('img'); + buttonClearImg.galleryImg = false; + buttonClearImg.width = 17; + buttonClearImg.height = 17; + buttonClearImg.src = path + options.BUTTON_CLEAR_LOCATION; + buttonClearImg.title = options.clearMsg; + buttonClearImg.style.position = 'absolute'; + buttonClearImg.style.cursor='pointer'; + buttonClearImg.className='colorPickerClearImg'; + buttonClearImg.onclick=clearColorAndHideColorPicker; + + var clearButton = document.createElement('div'); + clearButton.style.position = 'absolute'; + clearButton.style.diplay="inline"; + clearButton.style.height = '17px'; + clearButton.style.width = '17px'; + clearButton.style.top="2px"; + clearButton.style.left="6px"; - clearButton.appendChild(buttonClearImg); + clearButton.appendChild(buttonClearImg); + colorSelectorDiv.appendChild(clearButton); + } - colorSelectorDiv.appendChild(clearButton); + var buttonCloseImg = document.createElement('img'); + buttonCloseImg.galleryImg = false; + buttonCloseImg.width = 17; + buttonCloseImg.height = 17; + buttonCloseImg.src = path + options.BUTTON_CLOSE_LOCATION; + buttonCloseImg.title = options.closeMsg; + buttonCloseImg.style.position = 'absolute'; + buttonCloseImg.style.cursor='pointer'; + buttonCloseImg.className='colorPickerCloseImg'; + buttonCloseImg.onclick=hideColorPicker; var buttonclose = document.createElement('div'); buttonclose.style.position = 'absolute'; @@ -501,19 +488,35 @@ buttonclose.style.left="224px"; buttonclose.appendChild(buttonCloseImg); - colorSelectorDiv.appendChild(buttonclose); + var satValImg = document.createElement('img'); + satValImg.galleryImg = false; + satValImg.width = 200; + satValImg.height = 200; + satValImg.src = path + options.SAT_VAL_SQUARE_LOCATION; + satValImg.style.display = 'block'; + var satValDiv = document.createElement('div'); satValDiv.style.position = 'absolute'; satValDiv.style.diplay="inline"; satValDiv.style.top = '28px'; satValDiv.style.width = '200px'; satValDiv.style.height = '200px'; + var newSatValImg = fixPNG(satValImg); satValDiv.appendChild(newSatValImg); + + var crossHairsImg = document.createElement('img'); + crossHairsImg.galleryImg = false; + crossHairsImg.width = 21; + crossHairsImg.height = 21; + crossHairsImg.src = path + options.CROSSHAIRS_LOCATION; + crossHairsImg.style.position = 'absolute'; + var crossHairs = crossHairsImg.cloneNode(false); satValDiv.appendChild(crossHairs); + function satValDragged(x, y) { hsv.s = 1-(y/199); hsv.v = (x/199); @@ -523,6 +526,20 @@ colorSelectorDiv.appendChild(satValDiv); + var hueSelectorImg = document.createElement('img'); + hueSelectorImg.galleryImg = false; + hueSelectorImg.width = 35; + hueSelectorImg.height = 200; + hueSelectorImg.src = path + options.HUE_SLIDER_LOCATION; + hueSelectorImg.style.display = 'block'; + + var huePositionImg = document.createElement('img'); + huePositionImg.galleryImg = false; + huePositionImg.width = 35; + huePositionImg.height = 11; + huePositionImg.src = path + options.HUE_SLIDER_ARROWS_LOCATION; + huePositionImg.style.position = 'absolute'; + var hueDiv = document.createElement('div'); hueDiv.style.position = 'absolute'; hueDiv.style.diplay="inline"; @@ -530,6 +547,7 @@ hueDiv.style.top = '28px'; hueDiv.style.width = '35px'; hueDiv.style.height = '200px'; + var huePos = fixPNG(huePositionImg); hueDiv.appendChild(hueSelectorImg.cloneNode(false)); hueDiv.appendChild(huePos); @@ -556,17 +574,17 @@ return colorSelectorDiv; } - function colorPickerGetTopPos(inputObj) { - var returnValue = inputObj.offsetTop-inputObj.offsetHeight; - while((inputObj = inputObj.offsetParent) != null) { - returnValue += inputObj.offsetTop; + function getTopPos(elem) { + var returnValue = elem.offsetTop-elem.offsetHeight; + while((elem = elem.offsetParent) != null) { + returnValue += elem.offsetTop; } return returnValue; } - function colorPickerGetLeftPos(inputObj) { - var returnValue = inputObj.offsetLeft+inputObj.offsetWidth; - while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft; + function getLeftPos(elem) { + var returnValue = elem.offsetLeft; + while((elem = elem.offsetParent) != null)returnValue += elem.offsetLeft; return returnValue; } @@ -589,20 +607,22 @@ * Public API. */ Click.colorPicker.showColorPicker = function(opts) { - var inputObj = document.getElementById(opts.colorPickerInputObjId); + var inputObj = document.getElementById(opts.inputObjId); if (inputObj) { hideColorPicker(); options = overrideDefaults(Click.colorPicker.defaults, opts); - options.colorPickerId=options.colorPickerInputObjId+'_cp'; + options.colorPickerId=options.inputObjId+'_cp'; var color_picker_div = document.createElement('DIV'); - color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px'; + var img = document.getElementById(options.imageId); + var preview = document.getElementById(options.previewId); + color_picker_div.style.left = getLeftPos(img) + 'px'; color_picker_div.style.width='250px'; color_picker_div.style.heigth='190px'; - color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px'; + color_picker_div.style.top = getTopPos(img) + img.offsetHeight + 1 + 'px'; color_picker_div.id = options.colorPickerId; color_picker_div.className = 'colorPicker'; color_picker_div.style.display='block'; - color_picker_div.appendChild(makeColorSelector(inputObj)); + color_picker_div.appendChild(makeColorSelector(inputObj, preview)); document.body.appendChild(color_picker_div); is_div_init=true; } else { @@ -611,9 +631,13 @@ } function clearColorAndHideColorPicker() { if (options.colorPickerId && is_div_init) { - var colorInputObj = document.getElementById(options.colorPickerInputObjId); + var colorInputObj = document.getElementById(options.inputObjId); + var preview = document.getElementById(options.previewId); if(colorInputObj) { colorInputObj.value=''; + if (preview) { + preview.style.backgroundColor = ''; + } } hideColorPicker(); } Modified: incubator/click/trunk/click/extras/src/net/sf/click/extras/control/ColorPicker.htm URL: http://svn.apache.org/viewvc/incubator/click/trunk/click/extras/src/net/sf/click/extras/control/ColorPicker.htm?rev=727457&r1=727456&r2=727457&view=diff ============================================================================== --- incubator/click/trunk/click/extras/src/net/sf/click/extras/control/ColorPicker.htm (original) +++ incubator/click/trunk/click/extras/src/net/sf/click/extras/control/ColorPicker.htm Wed Dec 17 10:28:58 2008 @@ -17,10 +17,17 @@ under the License. --> -#if($field.showTextField) - +#if(${field.showTextField}) + #else - + + #end - \ No newline at end of file + \ No newline at end of file