aboutsummaryrefslogtreecommitdiff
path: root/js/panels/color
diff options
context:
space:
mode:
authorJohn Mayhew2012-05-03 15:11:56 -0700
committerJohn Mayhew2012-05-03 15:11:56 -0700
commit1a759361b82127f9d5c1428dc889fffdf2daaf86 (patch)
tree92e62aa215418d864e5224797a974cb9841d4b90 /js/panels/color
parent6b1a6994d98a18b45016b97ac8d81483109a586c (diff)
downloadninja-1a759361b82127f9d5c1428dc889fffdf2daaf86.tar.gz
First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools.
Diffstat (limited to 'js/panels/color')
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js2835
1 files changed, 1420 insertions, 1415 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index af62dd07..64cdc360 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -15,35 +15,35 @@ var Montage = require("montage/core/core").Montage,
15//////////////////////////////////////////////////////////////////////// 15////////////////////////////////////////////////////////////////////////
16//Exporting as ColorPanelBase 16//Exporting as ColorPanelBase
17exports.ColorPanelBase = Montage.create(Component, { 17exports.ColorPanelBase = Montage.create(Component, {
18 //////////////////////////////////////////////////////////////////// 18 ////////////////////////////////////////////////////////////////////
19 // 19 //
20 hasTemplate: { 20 hasTemplate: {
21 value: true 21 value: true
22 }, 22 },
23 //////////////////////////////////////////////////////////////////// 23 ////////////////////////////////////////////////////////////////////
24 //Storing ColorPanel sliders mode 24 //Storing ColorPanel sliders mode
25 _panelMode: { 25 _panelMode: {
26 enumerable: false, 26 enumerable: false,
27 value: 'rgb' 27 value: 'rgb'
28 }, 28 },
29 //////////////////////////////////////////////////////////////////// 29 ////////////////////////////////////////////////////////////////////
30 //Storing ColorPanel sliders mode 30 //Storing ColorPanel sliders mode
31 panelMode: { 31 panelMode: {
32 enumerable: true, 32 enumerable: true,
33 get: function() { 33 get: function () {
34 return this._panelMode; 34 return this._panelMode;
35 }, 35 },
36 set: function(value) { 36 set: function (value) {
37 if (value !== this._panelMode) { 37 if (value !== this._panelMode) {
38 this._panelMode = value; 38 this._panelMode = value;
39 } 39 }
40 } 40 }
41 }, 41 },
42 //////////////////////////////////////////////////////////////////// 42 ////////////////////////////////////////////////////////////////////
43 // 43 //
44 _colorBar: { 44 _colorBar: {
45 enumerable: false, 45 enumerable: false,
46 value: null 46 value: null
47 }, 47 },
48 //////////////////////////////////////////////////////////////////// 48 ////////////////////////////////////////////////////////////////////
49 //Storing color manager 49 //Storing color manager
@@ -54,19 +54,19 @@ exports.ColorPanelBase = Montage.create(Component, {
54 //////////////////////////////////////////////////////////////////// 54 ////////////////////////////////////////////////////////////////////
55 // 55 //
56 colorManager: { 56 colorManager: {
57 enumerable: true, 57 enumerable: true,
58 get: function() { 58 get: function () {
59 return this._colorManager; 59 return this._colorManager;
60 }, 60 },
61 set: function(value) { 61 set: function (value) {
62 if (value !== this._colorManager) { 62 if (value !== this._colorManager) {
63 this._colorManager = value; 63 this._colorManager = value;
64 //Updating input buttons 64 //Updating input buttons
65 this._colorManager.addEventListener('change', this._update.bind(this)); 65 this._colorManager.addEventListener('change', this._update.bind(this));
66 this._colorManager.addEventListener('changing', this._update.bind(this)); 66 this._colorManager.addEventListener('changing', this._update.bind(this));
67 //Updating history buttons once color is set 67 //Updating history buttons once color is set
68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this)); 68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
69 } 69 }
70 } 70 }
71 }, 71 },
72 //////////////////////////////////////////////////////////////////// 72 ////////////////////////////////////////////////////////////////////
@@ -78,50 +78,50 @@ exports.ColorPanelBase = Montage.create(Component, {
78 //////////////////////////////////////////////////////////////////// 78 ////////////////////////////////////////////////////////////////////
79 // 79 //
80 _combo: { 80 _combo: {
81 enumerable: false, 81 enumerable: false,
82 value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}] 82 value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
83 }, 83 },
84 //////////////////////////////////////////////////////////////////// 84 ////////////////////////////////////////////////////////////////////
85 // 85 //
86 _buttons: { 86 _buttons: {
87 enumerable: false, 87 enumerable: false,
88 value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} 88 value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
89 }, 89 },
90 //////////////////////////////////////////////////////////////////// 90 ////////////////////////////////////////////////////////////////////
91 // 91 //
92 historyCache: { 92 historyCache: {
93 enumerable: false, 93 enumerable: false,
94 value: {current: null, previous: null} 94 value: { current: null, previous: null }
95 }, 95 },
96 //////////////////////////////////////////////////////////////////// 96 ////////////////////////////////////////////////////////////////////
97 // 97 //
98 colorChipProps: { 98 colorChipProps: {
99 enumerable: true, 99 enumerable: true,
100 value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false} 100 value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
101 }, 101 },
102 //////////////////////////////////////////////////////////////////// 102 ////////////////////////////////////////////////////////////////////
103 // 103 //
104 currentChip: { 104 currentChip: {
105 enumerable: true, 105 enumerable: true,
106 value: null 106 value: null
107 }, 107 },
108 //////////////////////////////////////////////////////////////////// 108 ////////////////////////////////////////////////////////////////////
109 // 109 //
110 previousInput: { 110 previousInput: {
111 enumerable: true, 111 enumerable: true,
112 value: null 112 value: null
113 }, 113 },
114 //////////////////////////////////////////////////////////////////// 114 ////////////////////////////////////////////////////////////////////
115 //Setting up elements/components 115 //Setting up elements/components
116 prepareForDraw: { 116 prepareForDraw: {
117 enumerable: false, 117 enumerable: false,
118 value: function() { 118 value: function () {
119 //TODO: Remove temporary hack, color history should be initilized 119 //TODO: Remove temporary hack, color history should be initilized
120 this.addEventListener('firstDraw', this, false); 120 this.addEventListener('firstDraw', this, false);
121 this.application.ninja.colorController.colorView = this; 121 this.application.ninja.colorController.colorView = this;
122 this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}]; 122 this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}];
123 this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}]; 123 this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}];
124 } 124 }
125 }, 125 },
126 126
127 handleFirstDraw: { 127 handleFirstDraw: {
@@ -131,1521 +131,1526 @@ exports.ColorPanelBase = Montage.create(Component, {
131 this.application.ninja.colorController.createToolbar(); 131 this.application.ninja.colorController.createToolbar();
132 this.applyDefaultColors(); 132 this.applyDefaultColors();
133 this.removeEventListener('firstDraw', this, false); 133 this.removeEventListener('firstDraw', this, false);
134
135 // Workaround for delaying subtool colorchip creation until the color panel is initialized.
136 // This can be removed and the subtools must be updated once we create a new view for color buttons
137 // and they no longer rely on the view of the color panel.
138 this.application.ninja.colorController.colorPanelDrawn = true;
134 } 139 }
135 }, 140 },
136 141
137 //////////////////////////////////////////////////////////////////// 142 ////////////////////////////////////////////////////////////////////
138 //Assigning values and binding 143 //Assigning values and binding
139 willDraw: { 144 willDraw: {
140 enumerable: false, 145 enumerable: false,
141 value: function() { 146 value: function () {
142 //////////////////////////////////////////////////////////// 147 ////////////////////////////////////////////////////////////
143 //TODO: remove ID dependencies 148 //TODO: remove ID dependencies
144 createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element); 149 createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
145 createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element); 150 createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
146 createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element); 151 createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
147 createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element); 152 createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
148 //////////////////////////////////////////////////////////// 153 ////////////////////////////////////////////////////////////
149 //Function to create slider/hottext combination 154 //Function to create slider/hottext combination
150 function createCombo (c, slid, htid, color, e) { 155 f