/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
////////////////////////////////////////////////////////////////////////
//
var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component,
Popup = require("js/components/popup.reel").Popup,
Slider = require("js/components/slider.reel").Slider,
HotText = require("js/components/hottext.reel").HotText,
ColorBar = require("js/components/colorbar.reel").ColorBar;
////////////////////////////////////////////////////////////////////////
//Exporting as ColorPanelBase
exports.ColorPanelBase = Montage.create(Component, {
////////////////////////////////////////////////////////////////////
//
hasTemplate: {
value: true
},
////////////////////////////////////////////////////////////////////
//Storing ColorPanel sliders mode
_panelMode: {
value: 'rgb'
},
////////////////////////////////////////////////////////////////////
//Storing ColorPanel sliders mode
panelMode: {
get: function () {return this._panelMode;},
set: function (value) {if (value !== this._panelMode)this._panelMode = value;}
},
////////////////////////////////////////////////////////////////////
//
_colorBar: {
value: null
},
////////////////////////////////////////////////////////////////////
//Storing color manager
_colorManager: {
value: null
},
////////////////////////////////////////////////////////////////////
//
colorManager: {
get: function () {return this._colorManager;},
set: function (value) {
if (value !== this._colorManager) {
this._colorManager = value;
//Updating input buttons
this._colorManager.addEventListener('change', this._update.bind(this));
this._colorManager.addEventListener('changing', this._update.bind(this));
//Updating history buttons once color is set
this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
}
}
},
////////////////////////////////////////////////////////////////////
//Color Panel Container
_container: {
value: null
},
////////////////////////////////////////////////////////////////////
//
_combo: {
value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
},
////////////////////////////////////////////////////////////////////
//
_buttons: {
value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
},
////////////////////////////////////////////////////////////////////
//
historyCache: {
value: { current: null, previous: null }
},
////////////////////////////////////////////////////////////////////
//
colorChipProps: {
value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
},
////////////////////////////////////////////////////////////////////
//
currentChip: {
value: null
},
////////////////////////////////////////////////////////////////////
//
previousInput: {
value: null
},
////////////////////////////////////////////////////////////////////
//
handleFirstDraw: {
value: function (e) {
//
this.applyDefaultColors();
this.removeEventListener('firstDraw', this, false);
// Workaround for delaying subtool colorchip creation until the color panel is initialized.
// This can be removed and the subtools must be updated once we create a new view for color buttons
// and they no longer rely on the view of the color panel.
this.application.ninja.colorController.colorPanelDrawn = true;
}
},
////////////////////////////////////////////////////////////////////
//Setting up elements/components
prepareForDraw: {
value: function () {
//TODO: Remove temporary hack, color history should be initilized
this.addEventListener('firstDraw', this, false);
this.application.ninja.colorController.colorView = this;
this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}];
this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}];
}
},
////////////////////////////////////////////////////////////////////
//Assigning values and binding
willDraw: {
value: function () {
////////////////////////////////////////////////////////////
//Creating slider/hottext components
createCombo(this._combo[0], this.slider1, this.hottext1, true);
createCombo(this._combo[1], this.slider2, this.hottext2, true);
createCombo(this._combo[2], this.slider3, this.hottext3, true);
createCombo(this._combo[3], this.slider4, this.hottext4, false);
////////////////////////////////////////////////////////////
//Function to create slider/hottext combination
function createCombo(c, sldr, htxt, color) {
//Only creating, not drawing
c.slider = Slider.create();
c.hottext = HotText.create();
c.slider.element = sldr;
c.hottext.element = htxt;
c.slider.changesColor = c.hottext.changesColor = color;
c.slider.cInputType = 'slider';
c.slider.cInputType = 'hottext';
//Binding Hottext to Slider
Object.defineBinding(c.hottext, "value", {
boundObject: c.slider,
boundObjectPropertyPath: "value", //TODO: Check if needed
|