click-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sa...@apache.org
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 GMT
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)
-<input id="$id" type="text" name="$field.name" value="$value" $attributes/>
+#if(${field.showTextField})
+  <input id="${id}" type="text" name="${field.name}" value="${value}" ${attributes}/>
 #else
-<input id="$id" type="hidden" name="$field.name" value="$value" $attributes/>
+  <input id="${id}" type="hidden" name="${field.name}" value="${value}" ${attributes}/>
+  <span id="${id}_p" style="background-color:${value}" class="colorPickerPreview"></span>
 #end
 
-<img align="top" class="colorPickerImg" onclick="Click.colorPicker.showColorPicker({colorPickerInputObjId:'${id}',
colorPickerCloseMsg:'${closeMsg}', colorPickerClearMsg: '${noColorMsg}', colorPickerResourcePath:'${path}'})"
title="${chooseColorMsg}" src="${path}/click/colorpicker/images/color-picker.png"/>
\ No newline at end of file
+<img align="top" class="colorPickerImg" id="${id}_i"
+    onclick="Click.colorPicker.showColorPicker({
+        inputObjId:'${id}', imageId: '${id}_i', closeMsg:'${closeMsg}',
+        clearMsg: '${noColorMsg}', resourcePath:'${path}', isRequired:${field.required}
+        #if(!${field.showTextField}),previewId:'${id}_p' #end
+    })"
+    title="${chooseColorMsg}" src="${path}/click/colorpicker/images/color-picker.png"/>
\ No newline at end of file



Mime
View raw message