diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component')
3 files changed, 2217 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorPopup.js b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorPopup.js new file mode 100644 index 0000000000..523a98df8f --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorPopup.js @@ -0,0 +1,387 @@ +/* ************************************************************************ + + 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 color popup +*/ +qx.OO.defineClass("qx.ui.component.ColorPopup", qx.ui.popup.Popup, +function(tables) +{ + qx.ui.popup.Popup.call(this); + + this.setPadding(4); + this.auto(); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + this.setBackgroundColor("threedface"); + + this._tables = tables; + + this._createLayout(); + this._createAutoBtn(); + this._createBoxes(); + this._createPreview(); + this._createSelectorBtn(); + + this.addEventListener("beforeAppear", this._onBeforeAppear); +}); + +qx.OO.addProperty({ name : "value", type : "object", instance : "qx.renderer.color.Color" }); + +qx.OO.addProperty({ name : "red", type : "number", defaultValue : 0 }); +qx.OO.addProperty({ name : "green", type : "number", defaultValue : 0 }); +qx.OO.addProperty({ name : "blue", type : "number", defaultValue : 0 }); + +qx.Proto._minZIndex = 1e5; + + + + + +/* +--------------------------------------------------------------------------- + CREATOR SUBS +--------------------------------------------------------------------------- +*/ + +qx.Proto._createLayout = function() +{ + this._layout = new qx.ui.layout.VerticalBoxLayout; + this._layout.setLocation(0, 0); + this._layout.auto(); + this._layout.setSpacing(2); + + this.add(this._layout); +} + +qx.Proto._createAutoBtn = function() +{ + this._automaticBtn = new qx.ui.form.Button("Automatic"); + this._automaticBtn.setWidth(null); + this._automaticBtn.setAllowStretchX(true); + this._automaticBtn.addEventListener("execute", this._onAutomaticBtnExecute, this); + + this._layout.add(this._automaticBtn); +} + +qx.Proto._recentTableId = "recent"; +qx.Proto._fieldWidth = 14; +qx.Proto._fieldHeight = 14; +qx.Proto._fieldNumber = 12; + +qx.Proto._createBoxes = function() +{ + this._boxes = {}; + + var tables = this._tables; + var table, box, boxLayout, field; + + for (var tableId in tables) + { + table = tables[tableId]; + + box = new qx.ui.groupbox.GroupBox(table.label); + box.setHeight("auto"); + + this._boxes[tableId] = box; + this._layout.add(box); + + boxLayout = new qx.ui.layout.HorizontalBoxLayout; + boxLayout.setLocation(0, 0); + boxLayout.setSpacing(1); + boxLayout.auto(); + box.add(boxLayout); + + for (var i=0; i<this._fieldNumber; i++) + { + field = new qx.ui.basic.Terminator; + + field.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset); + field.setBackgroundColor(table.values[i] || null); + field.setDimension(this._fieldWidth, this._fieldHeight); + + field.addEventListener("mousedown", this._onFieldMouseDown, this); + field.addEventListener("mouseover", this._onFieldMouseOver, this); + + boxLayout.add(field); + } + } +} + +qx.Proto._createPreview = function() +{ + this._previewBox = new qx.ui.groupbox.GroupBox("Preview (Old/New)"); + this._previewLayout = new qx.ui.layout.HorizontalBoxLayout; + this._selectedPreview = new qx.ui.basic.Terminator; + this._currentPreview = new qx.ui.basic.Terminator; + + this._previewLayout.setHeight("auto"); + this._previewLayout.setWidth("100%"); + this._previewLayout.setSpacing(4); + this._previewLayout.add(this._selectedPreview, this._currentPreview); + + this._previewBox.setHeight("auto"); + this._previewBox.add(this._previewLayout); + + this._layout.add(this._previewBox); + + this._selectedPreview.setBorder(qx.renderer.border.BorderPresets.getInstance().inset); + this._selectedPreview.setWidth("1*"); + this._selectedPreview.setHeight(24); + + this._currentPreview.setBorder(qx.renderer.border.BorderPresets.getInstance().inset); + this._currentPreview.setWidth("1*"); + this._currentPreview.setHeight(24); +} + +qx.Proto._createSelectorBtn = function() +{ + this._selectorButton = new qx.ui.form.Button("Open ColorSelector"); + this._selectorButton.setWidth(null); + this._selectorButton.setAllowStretchX(true); + this._selectorButton.addEventListener("execute", this._onSelectorButtonExecute, this); + + this._layout.add(this._selectorButton); +} + +qx.Proto._createColorSelector = function() +{ + if (this._colorSelector) { + return; + } + + this._colorSelectorWindow = new qx.ui.window.Window("Color Selector"); + this._colorSelectorWindow.setMinWidth(null); + this._colorSelectorWindow.setMinHeight(null); + this._colorSelectorWindow.setResizeable(false); + this._colorSelectorWindow.auto(); + + this._colorSelector = new qx.ui.component.ColorSelector; + this._colorSelector.setBorder(null); + this._colorSelector.setLocation(0, 0); + this._colorSelector.addEventListener("dialogok", this._onColorSelectorOk, this); + this._colorSelector.addEventListener("dialogcancel", this._onColorSelectorCancel, this); + + this._colorSelectorWindow.add(this._colorSelector); + this._colorSelectorWindow.addToDocument(); +} + + + + + + + +/* +--------------------------------------------------------------------------- + MODIFIER +--------------------------------------------------------------------------- +*/ + +qx.Proto._modifyValue = function(propValue, propOldValue, propData) +{ + if (propValue === null) + { + this.setRed(null); + this.setGreen(null); + this.setBlue(null); + } + else + { + this.setRed(propValue.getRed()); + this.setGreen(propValue.getGreen()); + this.setBlue(propValue.getBlue()); + }; + + this._selectedPreview.setBackgroundColor(propValue); + this._rotatePreviousColors(); + + return true; +} + +qx.Proto._rotatePreviousColors = function() +{ + var vRecentTable = this._tables[this._recentTableId].values; + var vRecentBox = this._boxes[this._recentTableId]; + + if (!vRecentTable) { + return; + } + + var newValue = this.getValue(); + + if (!newValue) { + return; + } + + // use style compatible value (like the incoming value from the user or as RGB value string) + newValue = newValue.getStyle(); + + // Modifying incoming table + var vIndex = vRecentTable.indexOf(newValue); + + if (vIndex != -1) { + qx.lang.Array.removeAt(vRecentTable, vIndex); + } else if (vRecentTable.length == this._fieldNumber) { + vRecentTable.shift(); + } + + vRecentTable.push(newValue); + + // Sync to visible fields + var vFields = vRecentBox.getFrameObject().getFirstChild().getChildren(); + for (var i=0; i<vFields.length; i++) { + vFields[i].setBackgroundColor(vRecentTable[i] || null); + } +} + + + + + + +/* +--------------------------------------------------------------------------- + EVENT HANDLER +--------------------------------------------------------------------------- +*/ + +qx.Proto._onFieldMouseDown = function(e) { + this.setValue(this._currentPreview.getBackgroundColor()); +} + +qx.Proto._onFieldMouseOver = function(e) { + this._currentPreview.setBackgroundColor(e.getTarget().getBackgroundColor()); +} + +qx.Proto._onAutomaticBtnExecute = function(e) { + this.setValue(null); + this.hide(); +} + +qx.Proto._onSelectorButtonExecute = function(e) +{ + this._createColorSelector(); + + this._colorSelectorWindow.setTop(qx.dom.Location.getPageBoxTop(this._selectorButton.getElement()) + 10); + this._colorSelectorWindow.setLeft(qx.dom.Location.getPageBoxLeft(this._selectorButton.getElement()) + 100); + + this.hide(); + + this._colorSelectorWindow.open(); +} + +qx.Proto._onColorSelectorOk = function(e) +{ + var sel = this._colorSelector; + this.setValue(qx.renderer.color.ColorCache([sel.getRed(), sel.getGreen(), sel.getBlue()])); + this._colorSelectorWindow.close(); +} + +qx.Proto._onColorSelectorCancel = function(e) { + this._colorSelectorWindow.close(); +} + +qx.Proto._onBeforeAppear = function(e) { + this._currentPreview.setBackgroundColor(null); +} + + + + + + + + + +/* +--------------------------------------------------------------------------- + DISPOSER +--------------------------------------------------------------------------- +*/ + +qx.Proto.dispose = function() +{ + if (this.getDisposed()) { + return; + } + + this._tables = null; + this._boxes = null; + + if (this._layout) + { + this._layout.dispose(); + this._layout = null; + } + + if (this._automaticBtn) + { + this._automaticBtn.dispose(); + this._automaticBtn = null; + } + + if (this._previewBox) + { + this._previewBox.dispose(); + this._previewBox = null; + } + + if (this._previewLayout) + { + this._previewLayout.dispose(); + this._previewLayout = null; + } + + if (this._selectedPreview) + { + this._selectedPreview.dispose(); + this._selectedPreview = null; + } + + if (this._currentPreview) + { + this._currentPreview.dispose(); + this._currentPreview = null; + } + + if (this._selectorButton) + { + this._selectorButton.dispose(); + this._selectorButton = null; + } + + if (this._colorSelectorWindow) + { + this._colorSelectorWindow.dispose(); + this._colorSelectorWindow = null; + } + + if (this._colorSelector) + { + this._colorSelector.dispose(); + this._colorSelector = null; + } + + return qx.ui.popup.Popup.prototype.dispose.call(this); +} 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 new file mode 100644 index 0000000000..2a53f20a5d --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/ColorSelector.js @@ -0,0 +1,1312 @@ +/* ************************************************************************ + + 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); +} diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js new file mode 100644 index 0000000000..fdfb2af65e --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js @@ -0,0 +1,518 @@ +/* ************************************************************************ + + qooxdoo - the new era of web development + + http://qooxdoo.org + + Copyright: + 2006 by STZ-IDA, Germany, http://www.stz-ida.de + + License: + LGPL 2.1: http://www.gnu.org/licenses/lgpl.html + + Authors: + * Til Schneider (til132) + +************************************************************************ */ + +/* ************************************************************************ + +#require(qx.util.format.DateFormat) + +************************************************************************ */ + +/** + * Shows calendar and allows choosing a date. + * + * @param date {Date ? null} The initial date to show. If <code>null</code> + * the current day (today) is shown. + * + * @event select {qx.event.type.DataEvent} Fired when a date was selected. The + * event holds the new selected date in its data property. + */ +qx.OO.defineClass("qx.ui.component.DateChooser", qx.ui.layout.BoxLayout, +function(date) { + qx.ui.layout.BoxLayout.call(this); + + this.setOrientation("vertical"); + + // Create the navigation bar + var navBar = new qx.ui.layout.BoxLayout; + navBar.set({ width:null, height:"auto", spacing:1 }); + + var lastYearBt = new qx.ui.toolbar.Button(null, "widget/datechooser/lastYear.png"); + var lastMonthBt = new qx.ui.toolbar.Button(null, "widget/datechooser/lastMonth.png"); + var monthYearLabel = new qx.ui.basic.Label; + var nextMonthBt = new qx.ui.toolbar.Button(null, "widget/datechooser/nextMonth.png"); + var nextYearBt = new qx.ui.toolbar.Button(null, "widget/datechooser/nextYear.png"); + + lastYearBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Last year"), spacing:0 }); + lastMonthBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Last month") }); + nextMonthBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Next month") }); + nextYearBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Next year") }); + + lastYearBt.setAppearance("datechooser-toolbar-button"); + lastMonthBt.setAppearance("datechooser-toolbar-button"); + nextMonthBt.setAppearance("datechooser-toolbar-button"); + nextYearBt.setAppearance("datechooser-toolbar-button"); + + lastYearBt.addEventListener("click", this._onNavButtonClicked, this); + lastMonthBt.addEventListener("click", this._onNavButtonClicked, this); + nextMonthBt.addEventListener("click", this._onNavButtonClicked, this); + nextYearBt.addEventListener("click", this._onNavButtonClicked, this); + + this._lastYearBt = lastYearBt; + this._lastMonthBt = lastMonthBt; + this._nextMonthBt = nextMonthBt; + this._nextYearBt = nextYearBt; + + monthYearLabel.setAppearance("datechooser-monthyear"); + monthYearLabel.set({ width:"1*" }); + + navBar.add(lastYearBt, lastMonthBt, monthYearLabel, nextMonthBt, nextYearBt); + this._monthYearLabel = monthYearLabel; + navBar.setHtmlAttribute("id", "navBar"); + + // Calculate the cell width and height + var testLabel = new qx.ui.basic.Label; + var testParent = new qx.ui.layout.CanvasLayout; + testParent.add(testLabel); + testLabel.setHtml("Xx"); + testLabel.set({ paddingLeft : 5, paddingRight : 5 }); + testLabel.setAppearance("datechooser-weekday"); + var cellWidth = testLabel.getBoxWidth(); + var cellHeight = testLabel.getBoxHeight(); + testLabel.dispose(); + testParent.dispose(); + + // Create the date pane + var datePane = new qx.ui.layout.GridLayout; + datePane.setAppearance("datechooser-datepane"); + datePane.set({ width:"100%", height:"auto" }); + datePane.setColumnCount(8); + datePane.setRowCount(7); + for (var i = 0; i < datePane.getColumnCount(); i++) { + datePane.setColumnWidth(i, cellWidth); + } + for (var i = 0; i < datePane.getRowCount(); i++) { + datePane.setRowHeight(i, cellHeight); + } + + // Create the weekdays + // Add an empty label as spacer for the week numbers + var label = new qx.ui.basic.Label; + label.setAppearance("datechooser-week"); + label.set({ width:"100%", height:"100%" }); + label.addState("header"); + datePane.add(label, 0, 0); + + this._weekdayLabelArr = []; + for (var i = 0; i < 7; i++) { + var label = new qx.ui.basic.Label; + label.setAppearance("datechooser-weekday"); + label.set({ width:"100%", height:"100%" }); + datePane.add(label, i + 1, 0); + this._weekdayLabelArr.push(label); + } + + // Add the days + this._dayLabelArr = []; + this._weekLabelArr = []; + for (var y = 0; y < 6; y++) { + // Add the week label + var label = new qx.ui.basic.Label; + label.setAppearance("datechooser-week"); + label.set({ width:"100%", height:"100%" }); + datePane.add(label, 0, y + 1); + this._weekLabelArr.push(label); + + // Add the day labels + for (var x = 0; x < 7; x++) { + var label = new qx.ui.basic.Label; + label.setAppearance("datechooser-day"); + label.set({ width:"100%", height:"100%" }); + label.addEventListener("mousedown", this._onDayClicked, this); + label.addEventListener("dblclick", this._onDayDblClicked, this); + datePane.add(label, x + 1, y + 1); + this._dayLabelArr.push(label); + } + } + + // Make focusable + this.setTabIndex(1); + this.addEventListener("keypress", this._onkeypress); + + // Show the right date + var shownDate = (date != null) ? date : new Date(); + this.showMonth(shownDate.getMonth(), shownDate.getFullYear()); + + // Add the main widgets + this.add(navBar); + this.add(datePane); + +}); + + +// ***** Properties ***** + +/** The start of the week. 0 = sunday, 1 = monday, and so on. */ +qx.OO.addProperty({ name:"startOfWeek", type:"number", defaultValue:1 }); +/** The currently shown month. 0 = january, 1 = february, and so on. */ +qx.OO.addProperty({ name:"shownMonth", type:"number", defaultValue:null }); +/** The currently shown year. */ +qx.OO.addProperty({ name:"shownYear", type:"number", defaultValue:null }); +/** {Date} The currently selected date. */ +qx.OO.addProperty({ name:"date", type:"object", defaultValue:null }); + + +// property checker +qx.Proto._checkDate = function(propValue, propData) { + // Use a clone of the date internally since date instances may be changed + return (propValue == null) ? null : new Date(propValue.getTime()); +} + + +// property modifier +qx.Proto._modifyDate = function(propValue, propOldValue, propData) { + var DateChooser = qx.ui.component.DateChooser; + + if ((propValue != null) && (this.getShownMonth() != propValue.getMonth() + || this.getShownYear() != propValue.getFullYear())) + { + // The new date is in another month -> Show that month + this.showMonth(propValue.getMonth(), propValue.getFullYear()); + } else { + // The new date is in the current month -> Just change the states + var newDay = (propValue == null) ? -1 : propValue.getDate(); + for (var i = 0; i < 6 * 7; i++) { + var dayLabel = this._dayLabelArr[i]; + + if (dayLabel.hasState("otherMonth")) { + if (dayLabel.hasState("selected")) { + dayLabel.removeState("selected"); + } + } else { + var day = parseInt(dayLabel.getHtml()); + if (day == newDay) { + dayLabel.addState("selected"); + } else if (dayLabel.hasState("selected")) { + dayLabel.removeState("selected"); + } + } + } + } + + return true; +} + + +/** + * Event handler. Called when a navigation button has been clicked. + * + * @param evt {Map} the event. + */ +qx.Proto._onNavButtonClicked = function(evt) { + var year = this.getShownYear(); + var month = this.getShownMonth(); + + switch(evt.getCurrentTarget()) { + case this._lastYearBt: + year--; + break; + case this._lastMonthBt: + month--; + if (month < 0) { + month = 11; + year--; + } + break; + case this._nextMonthBt: + month++; + if (month >= 12) { + month = 0; + year++; + } + break; + case this._nextYearBt: + year++; + break; + } + + this.showMonth(month, year); +} + + +/** + * Event handler. Called when a day has been clicked. + * + * @param evt {Map} the event. + */ +qx.Proto._onDayClicked = function(evt) { + var time = evt.getCurrentTarget().dateTime; + this.setDate(new Date(time)); +} + +qx.Proto._onDayDblClicked = function() { + this.createDispatchDataEvent("select", this.getDate()); +} + +/** + * Event handler. Called when a key was pressed. + * + * @param evt {Map} the event. + */ +qx.Proto._onkeypress = function(evt) { + var dayIncrement = null; + var monthIncrement = null; + var yearIncrement = null; + if (evt.getModifiers() == 0) { + switch(evt.getKeyIdentifier()) { + case "Left": + dayIncrement = -1; + break; + case "Right": + dayIncrement = 1; + break; + case "Up": + dayIncrement = -7; + break; + case "Down": + dayIncrement = 7; + break; + case "PageUp": + monthIncrement = -1; + break; + case "PageDown": + monthIncrement = 1; + break; + case "Escape": + if (this.getDate() != null) { + this.setDate(null); + return true; + } + break; + case "Enter": + case "Space": + if (this.getDate() != null) { + this.createDispatchDataEvent("select", this.getDate()); + } + return; + } + } else if (evt.getShiftKey()) { + switch(evt.getKeyIdentifier()) { + case "PageUp": + yearIncrement = -1; + break; + case "PageDown": + yearIncrement = 1; + break; + } + } + + if (dayIncrement != null || monthIncrement != null || yearIncrement != null) { + var date = this.getDate(); + if (date != null) { + date = new Date(date.getTime()); // TODO: Do cloning in getter + } + if (date == null) { + date = new Date(); + } else { + if (dayIncrement != null) date.setDate(date.getDate() + dayIncrement); + if (monthIncrement != null) date.setMonth(date.getMonth() + monthIncrement); + if (yearIncrement != null) date.setFullYear(date.getFullYear() + yearIncrement); + } + this.setDate(date); + } +} + + +// ***** Methods ***** + + +/** + * Returns whether a certain day of week belongs to the week end. + * + * @param dayOfWeek {int} the day to check. (0 = sunday, 1 = monday, ..., + * 6 = saturday) + * @return {boolean} whether the day belongs to the week end. + */ +qx.Proto._isWeekend = function(dayOfWeek) { + return (dayOfWeek == 0) || (dayOfWeek == 6); +} + + +/** + * Shows a certain month. + * + * @param month {int ? null} the month to show (0 = january). If not set the month + * will remain the same. + * @param year {int ? null} the year to show. If not set the year will remain the + * same. + */ +qx.Proto.showMonth = function(month, year) { + if ((month != null && month != this.getShownMonth()) + || (year != null && year != this.getShownYear())) + { + if (month != null) { + this.setShownMonth(month); + } + if (year != null) { + this.setShownYear(year); + } + + this._updateDatePane(); + } +} + + +/** + * Updates the date pane. + */ +qx.Proto._updateDatePane = function() { + var DateChooser = qx.ui.component.DateChooser; + + var today = new Date(); + var todayYear = today.getFullYear(); + var todayMonth = today.getMonth(); + var todayDayOfMonth = today.getDate(); + + var selDate = this.getDate(); + var selYear = (selDate == null) ? -1 : selDate.getFullYear(); + var selMonth = (selDate == null) ? -1 : selDate.getMonth(); + var selDayOfMonth = (selDate == null) ? -1 : selDate.getDate(); + + var shownMonth = this.getShownMonth(); + var shownYear = this.getShownYear(); + + var startOfWeek = this.getStartOfWeek(); + + // Create a help date that points to the first of the current month + var helpDate = new Date(this.getShownYear(), this.getShownMonth(), 1); + + this._monthYearLabel.setHtml(DateChooser.MONTH_YEAR_FORMAT.format(helpDate)); + + // Show the day names + var firstDayOfWeek = helpDate.getDay(); + var firstSundayInMonth = (1 + 7 - firstDayOfWeek) % 7; + for (var i = 0; i < 7; i++) { + var day = (i + startOfWeek) % 7; + + var dayLabel = this._weekdayLabelArr[i]; + + helpDate.setDate(firstSundayInMonth + day); + dayLabel.setHtml(DateChooser.WEEKDAY_FORMAT.format(helpDate)); + + if (this._isWeekend(day)) { + dayLabel.addState("weekend"); + } else { + dayLabel.removeState("weekend"); + } + } + + // Show the days + helpDate = new Date(shownYear, shownMonth, 1); + var nrDaysOfLastMonth = (7 + firstDayOfWeek - startOfWeek) % 7; + helpDate.setDate(helpDate.getDate() - nrDaysOfLastMonth); + for (var week = 0; week < 6; week++) { + this._weekLabelArr[week].setHtml(DateChooser.WEEK_FORMAT.format(helpDate)); + + for (var i = 0; i < 7; i++) { + var dayLabel = this._dayLabelArr[week * 7 + i]; + + var year = helpDate.getFullYear(); + var month = helpDate.getMonth(); + var dayOfMonth = helpDate.getDate(); + + var isSelectedDate = (selYear == year && selMonth == month && selDayOfMonth == dayOfMonth); + if (isSelectedDate) { + dayLabel.addState("selected"); + } else { + dayLabel.removeState("selected"); + } + + if (month != shownMonth) { + dayLabel.addState("otherMonth"); + } else { + dayLabel.removeState("otherMonth"); + } + + var isToday = (year == todayYear && month == todayMonth && dayOfMonth == todayDayOfMonth); + if (isToday) { + dayLabel.addState("today"); + } else { + dayLabel.removeState("today"); + } + + dayLabel.setHtml("" + dayOfMonth); + dayLabel.dateTime = helpDate.getTime(); + + // Go to the next day + helpDate.setDate(helpDate.getDate() + 1); + } + } +} + + +/** + * {qx.util.format.DateFormat} The format for the date year + * label at the top center. + */ +qx.Class.MONTH_YEAR_FORMAT = new qx.util.format.DateFormat("MMMM yyyy"); + +/** + * {qx.util.format.DateFormat} The format for the weekday + * labels (the headers of the date table). + */ +qx.Class.WEEKDAY_FORMAT = new qx.util.format.DateFormat("EE"); + +/** + * {qx.util.format.DateFormat} The format for the week labels. + */ +qx.Class.WEEK_FORMAT = new qx.util.format.DateFormat("ww"); + + +// overridden +qx.Proto.dispose = function() { + if (this.getDisposed()) { + return true; + } + + this._lastYearBt.removeEventListener("click", this._onNavButtonClicked, this); + this._lastMonthBt.removeEventListener("click", this._onNavButtonClicked, this); + this._nextMonthBt.removeEventListener("click", this._onNavButtonClicked, this); + this._nextYearBt.removeEventListener("click", this._onNavButtonClicked, this); + + this._lastYearBt.dispose(); + this._lastMonthBt.dispose(); + this._nextMonthBt.dispose(); + this._nextYearBt.dispose(); + + this._lastYearBt = null; + this._lastMonthBt = null; + this._nextMonthBt = null; + this._nextYearBt = null; + + this._monthYearLabel.dispose(); + this._monthYearLabel = null; + + for (var i = 0; i < this._weekdayLabelArr.length; i++) { + this._weekdayLabelArr[i].dispose(); + } + this._weekdayLabelArr = null; + + for (var i = 0; i < this._dayLabelArr.length; i++) { + this._dayLabelArr[i].dispose(); + this._dayLabelArr[i].removeEventListener("mousedown", this._onDayClicked, this); + this._dayLabelArr[i].removeEventListener("dblclick", this._onDayDblClicked, this); + } + this._dayLabelArr = null; + + for (var i = 0; i < this._weekLabelArr.length; i++) { + this._weekLabelArr[i].dispose(); + } + this._weekLabelArr = null; + + this.removeEventListener("keypress", this._onkeypress); + + return qx.ui.layout.BoxLayout.prototype.dispose.call(this); +} |