From b435e97ff312eea15086069ce0ab6991acac32ff Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 25 Jun 2012 11:52:28 -0700 Subject: Color Popup Test Candidate Preliminary check in for testing to commence on new color popup functionality. --- .../gradientpicker.reel/gradientpicker.js | 2 +- js/components/ui/color-chip.reel/color-chip.js | 6 ++++- .../color/colorpanelbase.reel/colorpanelbase.js | 26 +++++++++++----------- .../color/colorpanelpopup.reel/colorpanelpopup.js | 2 +- js/panels/color/colorpopup-manager.js | 6 ++++- js/panels/properties.reel/properties.js | 2 +- 6 files changed, 26 insertions(+), 18 deletions(-) (limited to 'js') diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 9acd24ac..853d77f9 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js @@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, { //Initialing button with color data button.color(data.color.mode, data.color.value); //Button popup data - button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false}; + button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: false, gradient: false, image: false, offset: -84, gradientPopup: true, history: false}; //Listening for color events from button button.addEventListener('change', this, false); //Dispatching event depending on type of mode diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index a684d0db..dd786d15 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -82,7 +82,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { // This is a single chip - Not related to the color panel -- Set the initial color if found var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)"; - if(this.color) { + if(this.color && this.color.color) { + var g = this.color.color; + g.wasSetByCode = true; + this.chipBtn.color(this.color.mode, g); + } else if (this.color) { var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css); mode = colorObj.mode; r = colorObj.value.r; diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index bf2ada96..b3045db1 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js @@ -170,7 +170,7 @@ exports.ColorPanelBase = Montage.create(Component, { this.addButton('current', this.btnCurrent); this.addButton('previous', this.btnPrevious); // - this.addButton('hexinput', this.hextext); + this.addButton('hexinput', this.hextext, this.colorManager); this.addButton('reset', this.btnDefault); this.addButton('nocolor', this.btnNoColor); this.addButton('swap', this.btnSwap); @@ -461,7 +461,7 @@ exports.ColorPanelBase = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // addButton: { - value: function (type, button) { + value: function (type, button, manager) { // switch (type.toLocaleLowerCase()) { case 'chip': @@ -487,7 +487,7 @@ exports.ColorPanelBase = Montage.create(Component, { } } else { this.drawNoColor(this, this.cvs); - } + }9 this.colorValue = c; this.colorMode = m; this.otherInput = false; @@ -677,8 +677,8 @@ exports.ColorPanelBase = Montage.create(Component, { case 'hexinput': var hexinp = HotText.create(); hexinp.element = button; - hexinp.labelFunction = this._updateHexValue.bind(this); - hexinp.inputFunction = this._hottextHexInput.bind(this); + hexinp.labelFunction = this._updateHexValue.bind(manager); + hexinp.inputFunction = this._hottextHexInput.bind(manager); hexinp.needsDraw = true; this._buttons.hexinput.push(hexinp); return hexinp; @@ -1248,23 +1248,23 @@ exports.ColorPanelBase = Montage.create(Component, { } //Checking for panel mode and converting the color to the panel mode if (this._panelMode === 'hsl') { - rgb = this.colorManager.hexToRgb(color); + rgb = this.hexToRgb(color); if (rgb) { - update = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b); + update = this.rgbToHsl(rgb.r, rgb.g, rgb.b); update.wasSetByCode = false; update.type = 'change'; - this.colorManager.hsl = update; + this.hsl = update; } else { - this.colorManager.applyNoColor(false); + this.applyNoColor(false); } } else { - update = this.colorManager.hexToRgb(color); + update = this.hexToRgb(color); if (update) { update.wasSetByCode = false; update.type = 'change'; - this.colorManager.rgb = update; + this.rgb = update; } else { - this.colorManager.applyNoColor(false); + this.applyNoColor(false); } } } @@ -1273,7 +1273,7 @@ exports.ColorPanelBase = Montage.create(Component, { // _updateHexValue: { value: function (v) { - return this.colorManager.hex; + return this.hex; } }, //////////////////////////////////////////////////////////////////// diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js index 179dc02c..c0d8118f 100755 --- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js +++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js @@ -153,7 +153,7 @@ exports.ColorPanelPopup = Montage.create(Component, { this.btnGradient.style.display = 'none'; } // - this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex); + this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager); // this._components.combo.slider.needsDraw = true; this._components.combo.hottext.needsDraw = true; diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js index 0ea02192..15d55787 100755 --- a/js/panels/color/colorpopup-manager.js +++ b/js/panels/color/colorpopup-manager.js @@ -216,6 +216,8 @@ exports.ColorPopupManager = Montage.create(Component, { // colorChipChange: { value: function (e) { + // + if (!this._popupChipBtn) return; // var ctx, cvs = this._popupChipBtn.getElementsByTagName('canvas')[0], @@ -253,6 +255,8 @@ exports.ColorPopupManager = Montage.create(Component, { // colorGradientChipChange: { value: function (e) { + // + if (!this._popupGradientChipBtn) return; // var ctx, cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0], @@ -403,7 +407,7 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._event.srcElement.props) { this._popupGradientChipBase.props = e._event.srcElement.props; } else { - this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false}; + this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, history: false}; } // if (this._popupGradientChipBase.props.offset) { diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 5719a63d..c8383307 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -373,7 +373,7 @@ exports.Properties = Montage.create(Component, { } } } - + if (previousInput === 'chip') return; this.application.ninja.colorController.colorModel.input = previousInput; var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1]; color.c.wasSetByCode = true; -- cgit v1.2.3