diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js | 1312 |
1 files changed, 0 insertions, 1312 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js deleted file mode 100644 index 2a53f20a5d..0000000000 --- a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js +++ /dev/null @@ -1,1312 +0,0 @@ -/* ************************************************************************ - - qooxdoo - the new era of web development - - http://qooxdoo.org - - Copyright: - 2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org - - License: - LGPL 2.1: http://www.gnu.org/licenses/lgpl.html - - Authors: - * Sebastian Werner (wpbasti) - * Andreas Ecker (ecker) - -************************************************************************ */ - -/* ************************************************************************ - - -************************************************************************ */ - -/** - * A typical color selector as known from native applications. - * - * Includes support for RGB and HSB color areas. - * - * @event dialogok {qx.event.type.Event} - * @event dialogcancel {qx.event.type.Event} - */ -qx.OO.defineClass("qx.ui.component.ColorSelector", qx.ui.layout.VerticalBoxLayout, -function(vPreviousRed, vPreviousGreen, vPreviousBlue) -{ - qx.ui.layout.VerticalBoxLayout.call(this); - - // ******************************************** - // CREATE CHILDREN - // ******************************************** - - // 1. Base Structure (Vertical Split) - this._createControlBar(); - this._createButtonBar(); - - // 2. Panes (Horizontal Split) - this._createControlPane(); - this._createHueSaturationPane(); - this._createBrightnessPane(); - - // 3. Control Pane Content - this._createPresetFieldSet(); - this._createInputFieldSet(); - this._createPreviewFieldSet(); - - // 4. Input FieldSet Content - this._createHexField(); - this._createRgbSpinner(); - this._createHsbSpinner(); - - // 5. Preview FieldSet Content - this._createPreviewContent(); - - - // ******************************************** - // INIT COLORS - // ******************************************** - - if (arguments.length == 3) { - this.setPreviousColor(vPreviousRed, vPreviousGreen, vPreviousBlue); - } -}); - -qx.OO.changeProperty({ name : "appearance", type : "string", defaultValue : "colorselector" }); - -qx.OO.addProperty({ name : "red", type : "number", defaultValue : 255 }); -qx.OO.addProperty({ name : "green", type : "number", defaultValue : 255 }); -qx.OO.addProperty({ name : "blue", type : "number", defaultValue : 255 }); - -qx.OO.addProperty({ name : "hue", type : "number", defaultValue : 0 }); -qx.OO.addProperty({ name : "saturation", type : "number", defaultValue : 0 }); -qx.OO.addProperty({ name : "brightness", type : "number", defaultValue : 100 }); - -/* ---------------------------------------------------------------------------- - LOCALIZATION SUPPORT ---------------------------------------------------------------------------- -*/ - -qx.Settings.setDefault("labelOK", "OK"); -qx.Settings.setDefault("labelCancel", "Cancel"); -qx.Settings.setDefault("labelPresets", "Presets"); -qx.Settings.setDefault("labelDetails", "Details"); -qx.Settings.setDefault("labelPreview", "Preview (Old/New)"); -qx.Settings.setDefault("labelRGB", "RGB"); -qx.Settings.setDefault("labelHSB", "HSB"); -qx.Settings.setDefault("labelHex", "Hex"); - - - - -/* ---------------------------------------------------------------------------- - CONTEXT HANDLING ---------------------------------------------------------------------------- -*/ - -qx.Proto._updateContext = null; - - - - - - - -/* ---------------------------------------------------------------------------- - CREATE #1: BASE STRUCTURE ---------------------------------------------------------------------------- -*/ - -qx.Proto._createControlBar = function() -{ - this._controlBar = new qx.ui.layout.HorizontalBoxLayout; - this._controlBar.setHeight("auto"); - this._controlBar.setParent(this); -} - -qx.Proto._createButtonBar = function() -{ - this._btnbar = new qx.ui.layout.HorizontalBoxLayout; - this._btnbar.setHeight("auto"); - this._btnbar.setSpacing(4); - this._btnbar.setHorizontalChildrenAlign("right"); - this._btnbar.setPadding(2, 4); - this.add(this._btnbar); - - this._btncancel = new qx.ui.form.Button(this.getSetting("labelCancel"), "icon/16/button-cancel.png"); - this._btnok = new qx.ui.form.Button(this.getSetting("labelOK"), "icon/16/button-ok.png"); - - this._btncancel.addEventListener("execute", this._onButtonCancelExecute, this); - this._btnok.addEventListener("execute", this._onButtonOkExecute, this); - - this._btnbar.add(this._btncancel, this._btnok); -} - - - - - - -/* ---------------------------------------------------------------------------- - CREATE #2: PANES ---------------------------------------------------------------------------- -*/ - -qx.Proto._createControlPane = function() -{ - this._controlPane = new qx.ui.layout.VerticalBoxLayout; - this._controlPane.setWidth("auto"); - this._controlPane.setPadding(4); - this._controlPane.setPaddingBottom(7); - this._controlPane.setParent(this._controlBar); -} - -qx.Proto._createHueSaturationPane = function() -{ - this._hueSaturationPane = new qx.ui.layout.CanvasLayout; - this._hueSaturationPane.setWidth("auto"); - this._hueSaturationPane.setPadding(6, 4); - this._hueSaturationPane.setParent(this._controlBar); - - this._hueSaturationPane.addEventListener("mousewheel", this._onHueSaturationPaneMouseWheel, this); - - this._hueSaturationField = new qx.ui.basic.Image("widget/colorselector/huesaturation-field.jpg"); - this._hueSaturationField.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); - this._hueSaturationField.setMargin(5); - this._hueSaturationField.setParent(this._hueSaturationPane); - - this._hueSaturationField.addEventListener("mousedown", this._onHueSaturationFieldMouseDown, this); - - this._hueSaturationHandle = new qx.ui.basic.Image("widget/colorselector/huesaturation-handle.gif"); - this._hueSaturationHandle.setLocation(0, 256); - this._hueSaturationHandle.setParent(this._hueSaturationPane); - - this._hueSaturationHandle.addEventListener("mousedown", this._onHueSaturationHandleMouseDown, this); - this._hueSaturationHandle.addEventListener("mouseup", this._onHueSaturationHandleMouseUp, this); - this._hueSaturationHandle.addEventListener("mousemove", this._onHueSaturationHandleMouseMove, this); -} - -qx.Proto._createBrightnessPane = function() -{ - this._brightnessPane = new qx.ui.layout.CanvasLayout; - this._brightnessPane.setWidth("auto"); - this._brightnessPane.setPadding(6, 4); - this._brightnessPane.setParent(this._controlBar); - - this._brightnessPane.addEventListener("mousewheel", this._onBrightnessPaneMouseWheel, this); - - this._brightnessField = new qx.ui.basic.Image("widget/colorselector/brightness-field.jpg"); - this._brightnessField.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); - this._brightnessField.setMargin(5, 7); - this._brightnessField.setParent(this._brightnessPane); - - this._brightnessField.addEventListener("mousedown", this._onBrightnessFieldMouseDown, this); - - this._brightnessHandle = new qx.ui.basic.Image("widget/colorselector/brightness-handle.gif"); - this._brightnessHandle.setLocation(0, 0); - this._brightnessHandle.setParent(this._brightnessPane); - - this._brightnessHandle.addEventListener("mousedown", this._onBrightnessHandleMouseDown, this); - this._brightnessHandle.addEventListener("mouseup", this._onBrightnessHandleMouseUp, this); - this._brightnessHandle.addEventListener("mousemove", this._onBrightnessHandleMouseMove, this); -} - - - - - - - -/* ---------------------------------------------------------------------------- - CREATE #3: CONTROL PANE CONTENT ---------------------------------------------------------------------------- -*/ - -qx.Proto._createPresetFieldSet = function() -{ - this._presetFieldSet = new qx.ui.groupbox.GroupBox("Presets"); - this._presetFieldSet.setHeight("auto"); - this._presetFieldSet.setParent(this._controlPane); - - this._presetGrid = new qx.ui.layout.GridLayout; - this._presetGrid.setHorizontalSpacing(2); - this._presetGrid.setVerticalSpacing(2); - this._presetGrid.setColumnCount(11); - this._presetGrid.setRowCount(4); - this._presetGrid.setColumnWidth(0, 18); - this._presetGrid.setColumnWidth(1, 18); - this._presetGrid.setColumnWidth(2, 18); - this._presetGrid.setColumnWidth(3, 18); - this._presetGrid.setColumnWidth(4, 18); - this._presetGrid.setColumnWidth(5, 18); - this._presetGrid.setColumnWidth(6, 18); - this._presetGrid.setColumnWidth(7, 18); - this._presetGrid.setColumnWidth(8, 18); - this._presetGrid.setColumnWidth(9, 18); - - this._presetGrid.setRowHeight(0, 16); - this._presetGrid.setRowHeight(1, 16); - this._presetFieldSet.add(this._presetGrid); - - this._presetTable = [ "maroon", "red", "orange", "yellow", "olive", "purple", "fuchsia", "lime", "green", "navy", "blue", "aqua", "teal", "black", "#333", "#666", "#999", "#BBB", "#EEE", "white" ]; - - var colorField; - - for (var i=0; i<2; i++) - { - for (var j=0; j<10; j++) - { - colorField = new qx.ui.basic.Terminator; - colorField.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); - colorField.setBackgroundColor(this._presetTable[i*10+j]); - colorField.addEventListener("mousedown", this._onColorFieldClick, this); - - this._presetGrid.add(colorField, j, i); - } - } -} - -qx.Proto._createInputFieldSet = function() -{ - this._inputFieldSet = new qx.ui.groupbox.GroupBox(this.getSetting("labelDetails")); - this._inputFieldSet.setHeight("auto"); - this._inputFieldSet.setParent(this._controlPane); - - this._inputLayout = new qx.ui.layout.VerticalBoxLayout; - this._inputLayout.setHeight("auto"); - this._inputLayout.setSpacing(10); - this._inputLayout.setParent(this._inputFieldSet.getFrameObject()); -} - -qx.Proto._createPreviewFieldSet = function() -{ - this._previewFieldSet = new qx.ui.groupbox.GroupBox(this.getSetting("labelPreview")); - this._previewFieldSet.setHeight("1*"); - this._previewFieldSet.setParent(this._controlPane); - - this._previewLayout = new qx.ui.layout.HorizontalBoxLayout; - this._previewLayout.setHeight("100%"); - this._previewLayout.setLocation(0, 0); - this._previewLayout.setRight(0); - this._previewLayout.setSpacing(10); - this._previewLayout.setParent(this._previewFieldSet.getFrameObject()); -} - - - - - - - - -/* ---------------------------------------------------------------------------- - CREATE #4: INPUT FIELDSET CONTENT ---------------------------------------------------------------------------- -*/ - -qx.Proto._createHexField = function() -{ - this._hexLayout = new qx.ui.layout.HorizontalBoxLayout; - this._hexLayout.setHeight("auto"); - this._hexLayout.setSpacing(4); - this._hexLayout.setVerticalChildrenAlign("middle"); - this._hexLayout.setParent(this._inputLayout); - - this._hexLabel = new qx.ui.basic.Label(this.getSetting("labelHex")); - this._hexLabel.setWidth(25); - this._hexLabel.setParent(this._hexLayout); - - this._hexHelper = new qx.ui.basic.Label("#"); - this._hexHelper.setParent(this._hexLayout); - - this._hexField = new qx.ui.form.TextField("FFFFFF"); - this._hexField.setWidth(50); - this._hexField.setFont('11px "Bitstream Vera Sans Mono", monospace'); - this._hexField.setParent(this._hexLayout); - - this._hexField.addEventListener("changeValue", this._onHexFieldChange, this); -} - -qx.Proto._createRgbSpinner = function() -{ - this._rgbSpinLayout = new qx.ui.layout.HorizontalBoxLayout; - this._rgbSpinLayout.setHeight("auto"); - this._rgbSpinLayout.setSpacing(4); - this._rgbSpinLayout.setVerticalChildrenAlign("middle"); - this._rgbSpinLayout.setParent(this._inputLayout); - - this._rgbSpinLabel = new qx.ui.basic.Label(this.getSetting("labelRGB")); - this._rgbSpinLabel.setWidth(25); - this._rgbSpinLabel.setParent(this._rgbSpinLayout); - - this._rgbSpinRed = new qx.ui.form.Spinner(0, 255, 255); - this._rgbSpinRed.setWidth(50); - - this._rgbSpinGreen = new qx.ui.form.Spinner(0, 255, 255); - this._rgbSpinGreen.setWidth(50); - - this._rgbSpinBlue = new qx.ui.form.Spinner(0, 255, 255); - this._rgbSpinBlue.setWidth(50); - - this._rgbSpinLayout.add(this._rgbSpinRed, this._rgbSpinGreen, this._rgbSpinBlue); - - this._rgbSpinRed.addEventListener("change", this._setRedFromSpinner, this); - this._rgbSpinGreen.addEventListener("change", this._setGreenFromSpinner, this); - this._rgbSpinBlue.addEventListener("change", this._setBlueFromSpinner, this); -} - -qx.Proto._createHsbSpinner = function() -{ - this._hsbSpinLayout = new qx.ui.layout.HorizontalBoxLayout; - this._hsbSpinLayout.setHeight("auto"); - this._hsbSpinLayout.setSpacing(4); - this._hsbSpinLayout.setVerticalChildrenAlign("middle"); - this._hsbSpinLayout.setParent(this._inputLayout); - - this._hsbSpinLabel = new qx.ui.basic.Label(this.getSetting("labelHSB")); - this._hsbSpinLabel.setWidth(25); - this._hsbSpinLayout.add(this._hsbSpinLabel); - - this._hsbSpinHue = new qx.ui.form.Spinner(0, 0, 360); - this._hsbSpinHue.setWidth(50); - - this._hsbSpinSaturation = new qx.ui.form.Spinner(0, 0, 100); - this._hsbSpinSaturation.setWidth(50); - - this._hsbSpinBrightness = new qx.ui.form.Spinner(0, 100, 100); - this._hsbSpinBrightness.setWidth(50); - - this._hsbSpinLayout.add(this._hsbSpinHue, this._hsbSpinSaturation, this._hsbSpinBrightness); - - this._hsbSpinHue.addEventListener("change", this._setHueFromSpinner, this); - this._hsbSpinSaturation.addEventListener("change", this._setSaturationFromSpinner, this); - this._hsbSpinBrightness.addEventListener("change", this._setBrightnessFromSpinner, this); -} - - - - - - - -/* ---------------------------------------------------------------------------- - CREATE #5: PREVIEW CONTENT ---------------------------------------------------------------------------- -*/ - -qx.Proto._createPreviewContent = function() -{ - this._oldColorPreview = new qx.ui.basic.Terminator; - this._oldColorPreview.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); - this._oldColorPreview.setWidth("1*"); - this._oldColorPreview.setBackgroundImage("static/image/dotted_white.gif"); - this._oldColorPreview.setParent(this._previewLayout); - - this._newColorPreview = new qx.ui.basic.Terminator; - this._newColorPreview.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); - this._newColorPreview.setWidth("1*"); - this._newColorPreview.setBackgroundColor("white"); - this._newColorPreview.setParent(this._previewLayout); -} - - - - - - - - -/* ---------------------------------------------------------------------------- - RGB MODIFIER ---------------------------------------------------------------------------- -*/ - -qx.Proto._modifyRed = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "redModifier"; - } - - if (this._updateContext !== "rgbSpinner") { - this._rgbSpinRed.setValue(propValue); - } - - if (this._updateContext !== "hexField") { - this._setHexFromRgb(); - } - - switch(this._updateContext) - { - case "rgbSpinner": - case "hexField": - case "redModifier": - this._setHueFromRgb(); - } - - this._setPreviewFromRgb(); - - if (this._updateContext === "redModifier") { - this._updateContext = null; - } - - return true; -} - -qx.Proto._modifyGreen = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "greenModifier"; - } - - if (this._updateContext !== "rgbSpinner") { - this._rgbSpinGreen.setValue(propValue); - } - - if (this._updateContext !== "hexField") { - this._setHexFromRgb(); - } - - switch(this._updateContext) - { - case "rgbSpinner": - case "hexField": - case "greenModifier": - this._setHueFromRgb(); - } - - this._setPreviewFromRgb(); - - if (this._updateContext === "greenModifier") { - this._updateContext = null; - } - - return true; -} - -qx.Proto._modifyBlue = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "blueModifier"; - } - - if (this._updateContext !== "rgbSpinner") { - this._rgbSpinBlue.setValue(propValue); - } - - if (this._updateContext !== "hexField") { - this._setHexFromRgb(); - } - - switch(this._updateContext) - { - case "rgbSpinner": - case "hexField": - case "blueModifier": - this._setHueFromRgb(); - } - - this._setPreviewFromRgb(); - - if (this._updateContext === "blueModifier") { - this._updateContext = null; - } - - return true; -} - - - - - - - -/* ---------------------------------------------------------------------------- - HSB MODIFIER ---------------------------------------------------------------------------- -*/ - -qx.Proto._modifyHue = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "hueModifier"; - } - - if (this._updateContext !== "hsbSpinner") { - this._hsbSpinHue.setValue(propValue); - } - - if (this._updateContext !== "hueSaturationField") - { - if (this._hueSaturationHandle.isCreated()) - { - this._hueSaturationHandle._applyRuntimeLeft(Math.round(propValue / 1.40625) + this._hueSaturationPane.getPaddingLeft()); - } - else - { - this._hueSaturationHandle.setLeft(Math.round(propValue / 1.40625)); - } - } - - switch(this._updateContext) - { - case "hsbSpinner": - case "hueSaturationField": - case "hueModifier": - this._setRgbFromHue(); - } - - if (this._updateContext === "hueModifier") { - this._updateContext = null; - } - - return true; -} - -qx.Proto._modifySaturation = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "saturationModifier"; - } - - if (this._updateContext !== "hsbSpinner") { - this._hsbSpinSaturation.setValue(propValue); - } - - if (this._updateContext !== "hueSaturationField") - { - if (this._hueSaturationHandle.isCreated()) - { - this._hueSaturationHandle._applyRuntimeTop(256 - Math.round(propValue * 2.56) + this._hueSaturationPane.getPaddingTop()); - } - else - { - this._hueSaturationHandle.setTop(256 - Math.round(propValue * 2.56)); - } - } - - switch(this._updateContext) - { - case "hsbSpinner": - case "hueSaturationField": - case "saturationModifier": - this._setRgbFromHue(); - } - - if (this._updateContext === "saturationModifier") { - this._updateContext = null; - } - - return true; -} - -qx.Proto._modifyBrightness = function(propValue, propOldValue, propData) -{ - if (this._updateContext === null) { - this._updateContext = "brightnessModifier"; - } - - if (this._updateContext !== "hsbSpinner") { - this._hsbSpinBrightness.setValue(propValue); - } - - if (this._updateContext !== "brightnessField") - { - var topValue = 256 - Math.round(propValue * 2.56); - - if (this._brightnessHandle.isCreated()) - { - this._brightnessHandle._applyRuntimeTop(topValue + this._brightnessPane.getPaddingTop()); - } - else - { - this._brightnessHandle.setTop(topValue); - } - } - - switch(this._updateContext) - { - case "hsbSpinner": - case "brightnessField": - case "brightnessModifier": - this._setRgbFromHue(); - } - - if (this._updateContext === "brightnessModifier") { - this._updateContext = null; - } - - return true; -} - - - - - - - - -/* ---------------------------------------------------------------------------- - BRIGHTNESS IMPLEMENTATION ---------------------------------------------------------------------------- -*/ - -qx.Proto._onBrightnessHandleMouseDown = function(e) -{ - // Activate Capturing - this._brightnessHandle.setCapture(true); - - // Calculate subtract: Position of Brightness Field - Current Mouse Offset - this._brightnessSubtract = qx.dom.Location.getPageOuterTop(this._brightnessField.getElement()) + (e.getPageY() - qx.dom.Location.getPageBoxTop(this._brightnessHandle.getElement())); - - // Block field event handling - e.setPropagationStopped(true); -} - -qx.Proto._onBrightnessHandleMouseUp = function(e) -{ - // Disabling capturing - this._brightnessHandle.setCapture(false); -} - -qx.Proto._onBrightnessHandleMouseMove = function(e) -{ - // Update if captured currently (through previous mousedown) - if (this._brightnessHandle.getCapture()) { - this._setBrightnessOnFieldEvent(e); - } -} - -qx.Proto._onBrightnessFieldMouseDown = function(e) -{ - // Calculate substract: Half height of handler - this._brightnessSubtract = qx.dom.Location.getPageOuterTop(this._brightnessField.getElement()) + Math.round(qx.dom.Dimension.getBoxHeight(this._brightnessHandle.getElement()) / 2); - - // Update - this._setBrightnessOnFieldEvent(e); - - // Afterwards: Activate Capturing for handle - this._brightnessHandle.setCapture(true); -} - -qx.Proto._onBrightnessPaneMouseWheel = function(e) { - this.setBrightness(qx.lang.Number.limit(this.getBrightness() + e.getWheelDelta(), 0, 100)); -} - -qx.Proto._setBrightnessOnFieldEvent = function(e) -{ - var vValue = qx.lang.Number.limit(e.getPageY() - this._brightnessSubtract, 0, 256); - - this._updateContext = "brightnessField"; - - if (this._brightnessHandle.isCreated()) - { - this._brightnessHandle._applyRuntimeTop(vValue + this._brightnessPane.getPaddingTop()); - } - else - { - this._brightnessHandle.setTop(vValue); - } - - this.setBrightness(100-Math.round(vValue / 2.56)); - - this._updateContext = null; -} - -qx.Proto._onButtonOkExecute = function(e) { - this.createDispatchEvent("dialogok"); -} - -qx.Proto._onButtonCancelExecute = function(e) { - this.createDispatchEvent("dialogcancel"); -} - - - - - - -/* ---------------------------------------------------------------------------- - HUE/SATURATION IMPLEMENTATION ---------------------------------------------------------------------------- -*/ - -qx.Proto._onHueSaturationHandleMouseDown = function(e) -{ - // Activate Capturing - this._hueSaturationHandle.setCapture(true); - - // Calculate subtract: Position of HueSaturation Field - Current Mouse Offset - this._hueSaturationSubtractTop = qx.dom.Location.getPageOuterTop(this._hueSaturationField.getElement()) + (e.getPageY() - qx.dom.Location.getPageBoxTop(this._hueSaturationHandle.getElement())); - this._hueSaturationSubtractLeft = qx.dom.Location.getPageOuterLeft(this._hueSaturationField.getElement()) + (e.getPageX() - qx.dom.Location.getPageBoxLeft(this._hueSaturationHandle.getElement())); - - // Block field event handling - e.setPropagationStopped(true); -} - -qx.Proto._onHueSaturationHandleMouseUp = function(e) -{ - // Disabling capturing - this._hueSaturationHandle.setCapture(false); -} - -qx.Proto._onHueSaturationHandleMouseMove = function(e) -{ - // Update if captured currently (through previous mousedown) - if (this._hueSaturationHandle.getCapture()) { - this._setHueSaturationOnFieldEvent(e); - } -} - -qx.Proto._onHueSaturationFieldMouseDown = function(e) -{ - // Calculate substract: Half width/height of handler - this._hueSaturationSubtractTop = qx.dom.Location.getPageOuterTop(this._hueSaturationField.getElement()) + Math.round(qx.dom.Dimension.getBoxHeight(this._hueSaturationHandle.getElement()) / 2); - this._hueSaturationSubtractLeft = qx.dom.Location.getPageOuterLeft(this._hueSaturationField.getElement()) + Math.round(qx.dom.Dimension.getBoxWidth(this._hueSaturationHandle.getElement()) / 2); - - // Update - this._setHueSaturationOnFieldEvent(e); - - // Afterwards: Activate Capturing for handle - this._hueSaturationHandle.setCapture(true); -} - -qx.Proto._onHueSaturationPaneMouseWheel = function(e) { - this.setSaturation(qx.lang.Number.limit(this.getSaturation() + e.getWheelDelta(), 0, 100)); -} - -qx.Proto._setHueSaturationOnFieldEvent = function(e) -{ - var vTop = qx.lang.Number.limit(e.getPageY() - this._hueSaturationSubtractTop, 0, 256); - var vLeft = qx.lang.Number.limit(e.getPageX() - this._hueSaturationSubtractLeft, 0, 256); - - if (this._hueSaturationHandle.isCreated()) - { - this._hueSaturationHandle._applyRuntimeTop(vTop + this._hueSaturationPane.getPaddingTop()); - this._hueSaturationHandle._applyRuntimeLeft(vLeft + this._hueSaturationPane.getPaddingLeft()); - } - else - { - this._hueSaturationHandle.setTop(vTop); - this._hueSaturationHandle.setLeft(vLeft); - } - - this._updateContext = "hueSaturationField"; - - this.setSaturation(100-Math.round(vTop / 2.56)); - this.setHue(Math.round(vLeft * 1.40625)); - - this._updateContext = null; -} - - - - - - - - - - -/* ---------------------------------------------------------------------------- - RGB SPINNER ---------------------------------------------------------------------------- -*/ - -qx.Proto._setRedFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "rgbSpinner"; - this.setRed(this._rgbSpinRed.getValue()); - this._updateContext = null; -} - -qx.Proto._setGreenFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "rgbSpinner"; - this.setGreen(this._rgbSpinGreen.getValue()); - this._updateContext = null; -} - -qx.Proto._setBlueFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "rgbSpinner"; - this.setBlue(this._rgbSpinBlue.getValue()); - this._updateContext = null; -} - - - - - - - - - - -/* ---------------------------------------------------------------------------- - HSB SPINNER ---------------------------------------------------------------------------- -*/ - -qx.Proto._setHueFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "hsbSpinner"; - this.setHue(this._hsbSpinHue.getValue()); - this._updateContext = null; -} - -qx.Proto._setSaturationFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "hsbSpinner"; - this.setSaturation(this._hsbSpinSaturation.getValue()); - this._updateContext = null; -} - -qx.Proto._setBrightnessFromSpinner = function() -{ - if (this._updateContext !== null) { - return; - } - - this._updateContext = "hsbSpinner"; - this.setBrightness(this._hsbSpinBrightness.getValue()); - this._updateContext = null; -} - - - - - - - - -/* ---------------------------------------------------------------------------- - HEX FIELD ---------------------------------------------------------------------------- -*/ - -qx.Proto._onHexFieldChange = function(e) -{ - if (this._updateContext !== null) { - return; - } - - var vValue = this._hexField.getValue().toLowerCase(); - - var vRed = 0; - var vGreen = 0; - var vBlue = 0; - - switch(vValue.length) - { - case 3: - vRed = qx.renderer.color.Color.m_rgb[vValue.charAt(0)]; - vGreen = qx.renderer.color.Color.m_rgb[vValue.charAt(1)]; - vBlue = qx.renderer.color.Color.m_rgb[vValue.charAt(2)]; - - vRed = (vRed * 16) + vRed; - vGreen = (vGreen * 16) + vGreen; - vBlue = (vBlue * 16) + vBlue; - - break; - - case 6: - vRed = (qx.renderer.color.Color.m_rgb[vValue.charAt(0)] * 16) + qx.renderer.color.Color.m_rgb[vValue.charAt(1)]; - vGreen = (qx.renderer.color.Color.m_rgb[vValue.charAt(2)] * 16) + qx.renderer.color.Color.m_rgb[vValue.charAt(3)]; - vBlue = (qx.renderer.color.Color.m_rgb[vValue.charAt(4)] * 16) + qx.renderer.color.Color.m_rgb[vValue.charAt(5)]; - - break; - - default: - return false; - } - - this._updateContext = "hexField"; - - this.setRed(vRed); - this.setGreen(vGreen); - this.setBlue(vBlue); - - this._updateContext = null; -} - -qx.Proto._setHexFromRgb = function() { - this._hexField.setValue(qx.lang.String.pad(this.getRed().toString(16).toUpperCase(), 2) + qx.lang.String.pad(this.getGreen().toString(16).toUpperCase(), 2) + qx.lang.String.pad(this.getBlue().toString(16).toUpperCase(), 2)); -} - - - - - - - - -/* ---------------------------------------------------------------------------- - COLOR FIELD ---------------------------------------------------------------------------- -*/ - -qx.Proto._onColorFieldClick = function(e) -{ - var vColor = e.getTarget().getBackgroundColor(); - - if (!vColor) { - return this.error("Missing backgroundColor value for field: " + e.getTarget()); - } - - this.setRed(vColor.getRed()); - this.setGreen(vColor.getGreen()); - this.setBlue(vColor.getBlue()); -} - - - - - - - - -/* ---------------------------------------------------------------------------- - RGB/HSB SYNC ---------------------------------------------------------------------------- -*/ - -qx.Proto._setHueFromRgb = function() -{ - switch(this._updateContext) - { - case "hsbSpinner": - case "hueSaturationField": - case "brightnessField": - break; - - default: - var vHsb = qx.util.ColorUtil.rgb2hsb(this.getRed(), this.getGreen(), this.getBlue()); - - this.setHue(vHsb.hue); - this.setSaturation(vHsb.saturation); - this.setBrightness(vHsb.brightness); - } -} - -qx.Proto._setRgbFromHue = function() -{ - switch(this._updateContext) - { - case "rgbSpinner": - case "hexField": - break; - - default: - var vRgb = qx.util.ColorUtil.hsb2rgb(this.getHue(), this.getSaturation(), this.getBrightness()); - - this.setRed(vRgb.red); - this.setGreen(vRgb.green); - this.setBlue(vRgb.blue); - } -} - - - - - - -/* ---------------------------------------------------------------------------- - PREVIEW SYNC ---------------------------------------------------------------------------- -*/ - -qx.Proto._setPreviewFromRgb = function() -{ - if (this._newColorPreview.isCreated()) - { - // faster (omit qx.renderer.color.Color instances) - this._newColorPreview._style.backgroundColor = qx.renderer.color.Color.rgb2style(this.getRed(), this.getGreen(), this.getBlue()); - } - else - { - this._newColorPreview.setBackgroundColor([this.getRed(), this.getGreen(), this.getBlue()]); - } -} - -qx.Proto.setPreviousColor = function(vRed, vGreen, vBlue) -{ - this._oldColorPreview.setBackgroundImage(null); - this._oldColorPreview.setBackgroundColor([vRed, vGreen, vBlue]); - - this.setRed(vRed); - this.setGreen(vGreen); - this.setBlue(vBlue); -} - - - - - - - -/* ---------------------------------------------------------------------------- - DISPOSER ---------------------------------------------------------------------------- -*/ - -qx.Proto.dispose = function() -{ - if (this.getDisposed()) { - return; - } - - if (this._controlBar) - { - this._controlBar.dispose(); - this._controlBar = null; - } - - if (this._btnbar) - { - this._btnbar.dispose(); - this._btnbar = null; - } - - if (this._btncancel) - { - this._btncancel.dispose(); - this._btncancel = null; - } - - if (this._btnok) - { - this._btnok.dispose(); - this._btnok = null; - } - - if (this._controlPane) - { - this._controlPane.dispose(); - this._controlPane = null; - } - - if (this._hueSaturationPane) - { - this._hueSaturationPane.removeEventListener("mousewheel", this._onHueSaturationPaneMouseWheel, this); - this._hueSaturationPane.dispose(); - this._hueSaturationPane = null; - } - - if (this._hueSaturationField) - { - this._hueSaturationField.removeEventListener("mousedown", this._onHueSaturationFieldMouseDown, this); - this._hueSaturationField.dispose(); - this._hueSaturationField = null; - } - - if (this._hueSaturationHandle) - { - this._hueSaturationHandle.removeEventListener("mousedown", this._onHueSaturationHandleMouseDown, this); - this._hueSaturationHandle.removeEventListener("mouseup", this._onHueSaturationHandleMouseUp, this); - this._hueSaturationHandle.removeEventListener("mousemove", this._onHueSaturationHandleMouseMove, this); - this._hueSaturationHandle.dispose(); - this._hueSaturationHandle = null; - } - - if (this._brightnessPane) - { - this._brightnessPane.removeEventListener("mousewheel", this._onBrightnessPaneMouseWheel, this); - this._brightnessPane.dispose(); - this._brightnessPane = null; - } - - if (this._brightnessField) - { - this._brightnessField.removeEventListener("mousedown", this._onBrightnessFieldMouseDown, this); - this._brightnessField.dispose(); - this._brightnessField = null; - } - - if (this._brightnessHandle) - { - this._brightnessHandle.removeEventListener("mousedown", this._onBrightnessHandleMouseDown, this); - this._brightnessHandle.removeEventListener("mouseup", this._onBrightnessHandleMouseUp, this); - this._brightnessHandle.removeEventListener("mousemove", this._onBrightnessHandleMouseMove, this); - this._brightnessHandle.dispose(); - this._brightnessHandle = null; - } - - if (this._presetFieldSet) - { - this._presetFieldSet.dispose(); - this._presetFieldSet = null; - } - - if (this._presetGrid) - { - this._presetGrid.dispose(); - this._presetGrid = null; - } - - this._presetTable = null; - - if (this._inputFieldSet) - { - this._inputFieldSet.dispose(); - this._inputFieldSet = null; - } - - if (this._inputLayout) - { - this._inputLayout.dispose(); - this._inputLayout = null; - } - - if (this._previewFieldSet) - { - this._previewFieldSet.dispose(); - this._previewFieldSet = null; - } - - if (this._previewLayout) - { - this._previewLayout.dispose(); - this._previewLayout = null; - } - - if (this._hexLayout) - { - this._hexLayout.dispose(); - this._hexLayout = null; - } - - if (this._hexLabel) - { - this._hexLabel.dispose(); - this._hexLabel = null; - } - - if (this._hexHelper) - { - this._hexHelper.dispose(); - this._hexHelper = null; - } - - if (this._hexField) - { - this._hexField.addEventListener("changeValue", this._onHexFieldChange, this); - this._hexField.dispose(); - this._hexField = null; - } - - if (this._rgbSpinLayout) - { - this._rgbSpinLayout.dispose(); - this._rgbSpinLayout = null; - } - - if (this._rgbSpinLabel) - { - this._rgbSpinLabel.dispose(); - this._rgbSpinLabel = null; - } - - if (this._rgbSpinRed) - { - this._rgbSpinRed.removeEventListener("change", this._setRedFromSpinner, this); - this._rgbSpinRed.dispose(); - this._rgbSpinRed = null; - } - - if (this._rgbSpinGreen) - { - this._rgbSpinGreen.removeEventListener("change", this._setGreenFromSpinner, this); - this._rgbSpinGreen.dispose(); - this._rgbSpinGreen = null; - } - - if (this._rgbSpinBlue) - { - this._rgbSpinBlue.removeEventListener("change", this._setBlueFromSpinner, this); - this._rgbSpinBlue.dispose(); - this._rgbSpinBlue = null; - } - - if (this._hsbSpinLayout) - { - this._hsbSpinLayout.dispose(); - this._hsbSpinLayout = null; - } - - if (this._hsbSpinLabel) - { - this._hsbSpinLabel.dispose(); - this._hsbSpinLabel = null; - } - - if (this._hsbSpinHue) - { - this._hsbSpinHue.removeEventListener("change", this._setHueFromSpinner, this); - this._hsbSpinHue.dispose(); - this._hsbSpinHue = null; - } - - if (this._hsbSpinSaturation) - { - this._hsbSpinSaturation.removeEventListener("change", this._setSaturationFromSpinner, this); - this._hsbSpinSaturation.dispose(); - this._hsbSpinSaturation = null; - } - - if (this._hsbSpinBrightness) - { - this._hsbSpinBrightness.removeEventListener("change", this._setBrightnessFromSpinner, this); - this._hsbSpinBrightness.dispose(); - this._hsbSpinBrightness = null; - } - - if (this._oldColorPreview) - { - this._oldColorPreview.dispose(); - this._oldColorPreview = null; - } - - if (this._newColorPreview) - { - this._newColorPreview.dispose(); - this._newColorPreview = null; - } - - return qx.ui.layout.VerticalBoxLayout.prototype.dispose.call(this); -} |