aboutsummaryrefslogtreecommitdiff
path: root/js/components/gradientpicker.reel/gradientpicker.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-xjs/components/gradientpicker.reel/gradientpicker.js461
1 files changed, 231 insertions, 230 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 3b06f8f4..6e239f7d 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -30,14 +30,14 @@ POSSIBILITY OF SUCH DAMAGE.
30 30
31//////////////////////////////////////////////////////////////////////// 31////////////////////////////////////////////////////////////////////////
32// 32//
33var Montage = require("montage/core/core").Montage, 33var Montage = require("montage/core/core").Montage,
34 Component = require("montage/ui/component").Component; 34 Component = require("montage/ui/component").Component;
35//////////////////////////////////////////////////////////////////////// 35////////////////////////////////////////////////////////////////////////
36//Exporting as ColorWheel 36//Exporting as ColorWheel
37exports.GradientPicker = Montage.create(Component, { 37exports.GradientPicker = Montage.create(Component, {
38 //////////////////////////////////////////////////////////////////// 38 ////////////////////////////////////////////////////////////////////
39 // 39 //
40 hasTemplate: { 40 hasTemplate: {
41 value: true 41 value: true
42 }, 42 },
43 //////////////////////////////////////////////////////////////////// 43 ////////////////////////////////////////////////////////////////////
@@ -50,7 +50,7 @@ exports.GradientPicker = Montage.create(Component, {
50 _value: { 50 _value: {
51 value: null 51 value: null
52 }, 52 },
53 //////////////////////////////////////////////////////////////////// 53 ////////////////////////////////////////////////////////////////////
54 // 54 //
55 value: { 55 value: {
56 get: function() {return this._value;}, 56 get: function() {return this._value;},
@@ -61,14 +61,14 @@ exports.GradientPicker = Montage.create(Component, {
61 _mode: { 61 _mode: {
62 value: 'linear' 62 value: 'linear'
63 }, 63 },
64 //////////////////////////////////////////////////////////////////// 64 ////////////////////////////////////////////////////////////////////
65 // 65 //
66 mode: { 66 mode: {
67 get: function() {return this._mode;}, 67 get: function() {return this._mode;},
68 set: function(value) { 68 set: function(value) {
69 // 69 //
70 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); 70 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
71 // 71 //
72 this._mode = value; 72 this._mode = value;
73 // 73 //
74 this._dispatchEvent('change', false); 74 this._dispatchEvent('change', false);
@@ -77,285 +77,286 @@ exports.GradientPicker = Montage.create(Component, {
77 //////////////////////////////////////////////////////////////////// 77 ////////////////////////////////////////////////////////////////////
78 // 78 //
79 _trackData: { 79 _trackData: {
80 value: {width: 0, x: 0, y: 0} 80 value: {width: 0, x: 0, y: 0}
81 }, 81 },
82 //////////////////////////////////////////////////////////////////// 82 ////////////////////////////////////////////////////////////////////
83 // 83 //
84 prepareForDraw: { 84 prepareForDraw: {
85 value: function() { 85 value: function() {
86 // 86 //
87 } 87 }
88 }, 88 },
89 //////////////////////////////////////////////////////////////////// 89 ////////////////////////////////////////////////////////////////////
90 // 90 //
91 willDraw: { 91 willDraw: {
92 value: function() { 92 value: function() {
93 //Getting component views from layout 93 //Getting component views from layout
94 this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); 94 this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText);
95 //TODO: Fix events and remove this hack 95 //TODO: Fix events and remove this hack
96 this.trackCover.addEventListener('mouseover', function () { 96 this.trackCover.addEventListener('mouseover', function () {
97 if (!this._updating) { 97 if (!this._updating) {
98 this.trackCover.style.display = 'none'; 98 this.trackCover.style.display = 'none';
99 } 99 }
100 }.bind(this), true); 100 }.bind(this), true);
101 // 101 //
102 this.radioLinear.addEventListener('change', function (e){ 102 this.radioLinear.addEventListener('change', function (e){
103 this.mode = 'linear'; 103 this.mode = 'linear';
104 }.bind(this), true); 104 }.bind(this), true);
105 // 105 //
106 this.radioRadial.addEventListener('change', function (e){ 106 this.radioRadial.addEventListener('change', function (e){
107 this.mode = 'radial'; 107 this.mode = 'radial';
108 }.bind(this), true); 108 }.bind(this), true);
109 } 109 }
110 }, 110 },
111 //////////////////////////////////////////////////////////////////// 111 ////////////////////////////////////////////////////////////////////
112 // 112 //
113 draw: { 113 draw: {
114 value: function() { 114 value: function() {
115 //Checking for mode to assign radio value 115 //Checking for mode to assign radio value
116 if (this.mode === 'linear') { 116 if (this.mode === 'linear') {
117 this.radioLinear.checked = 'true'; 117 this.radioLinear.checked = 'true';
118 } else if (this.mode === 'radial') { 118 } else if (this.mode === 'radial') {
119 this.radioRadial.checked = 'true'; 119 this.radioRadial.checked = 'true';
120 } 120 }
121 //Checkign for value to initialize stops 121 //Checkign for value to initialize stops
122 if (!this.value) { 122 if (!this.value) {
123 this.addDefaultStops(); 123 this.addDefaultStops();
124 } else { 124 } else {
125 //Adding stops from preset value 125 //Adding stops from preset value
126 for (var i=0, stops = this.value; stops[i]; i++) { 126 for (var i=0, stops = this.value; stops[i]; i++) {
127 this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true); 127 this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true);
128 } 128 }
129 } 129 }
130 } 130 }
131 }, 131 },
132 //////////////////////////////////////////////////////////////////// 132 ////////////////////////////////////////////////////////////////////
133 // 133 //
134 didDraw: { 134 didDraw: {
135 value: function() { 135 value: function() {
136 //Adding event listener for stops 136 //Adding event listener for stops
137 this.trackMain.addEventListener('click', this, false); 137 this.trackMain.addEventListener('click', this, false);
138 //Getting position of track 138 //Getting position of track
139 var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0)); 139 var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0));
140 //Setting position of track to calculate movement 140 //Setting position of track to calculate movement
141 this._trackData.x = point.x; 141 this._trackData.x = point.x;
142 this._trackData.y = point.y; 142 this._trackData.y = point.y;
143 } 143 }
144 }, 144 },
145 //////////////////////////////////////////////////////////////////// 145 ////////////////////////////////////////////////////////////////////
146 //Default stops funtion (reset) 146 //Default stops funtion (reset)
147 addDefaultStops: { 147 addDefaultStops: {
148 value: function() { 148 value: function() {
149 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true); 149 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true);
150 this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true); 150 this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true);
151 } 151 }
152 }, 152 },
153 //////////////////////////////////////////////////////////////////// 153 ////////////////////////////////////////////////////////////////////
154 // 154 //
155 addStop: { 155 addStop: {
156 value: function(data, silent) { 156 value: function(data, silent) {
157 if (this.application.ninja.colorController.colorPopupManager) { 157 if (this.application.ninja.colorController.colorPopupManager) {
158 //Hiding any open popups (of gradient buttons) 158 //Hiding any open popups (of gradient buttons)
159 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); 159 this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
160 //Creating stop elements 160 //Creating stop elements
161 var stop = document.createElement('div'), 161 var stop = document.createElement('div'),
162 holder = document.createElement('div'), 162 holder = document.createElement('div'),
163 tooltip = document.createElement('span'), 163 tooltip = document.createElement('span'),
164 button = document.createElement('button'); 164 button = document.createElement('button');
165 //Setting up elements 165 //Setting up elements
166 stop.appendChild(tooltip); 166 stop.appendChild(tooltip);
167 stop.appendChild(holder); 167 stop.appendChild(holder);
168 holder.appendChild(button); 168 holder.appendChild(button);
169 //Adding events to the stops 169 //Adding events to the stops
170