diff options
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 460 |
1 files changed, 230 insertions, 230 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 3b06f8f4..937b473b 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 | // |
33 | var Montage = require("montage/core/core").Montage, | 33 | var 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 |
37 | exports.GradientPicker = Montage.create(Component, { | 37 | exports.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,285 @@ 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 |