diff options
Diffstat (limited to 'js/components/gradientpicker.reel/gradientpicker.js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 484 |
1 files changed, 243 insertions, 241 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 3b06f8f4..d4611468 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -30,14 +31,14 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 31 | ||
31 | //////////////////////////////////////////////////////////////////////// | 32 | //////////////////////////////////////////////////////////////////////// |
32 | // | 33 | // |
33 | var Montage = require("montage/core/core").Montage, | 34 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component; | 35 | Component = require("montage/ui/component").Component; |
35 | //////////////////////////////////////////////////////////////////////// | 36 | //////////////////////////////////////////////////////////////////////// |
36 | //Exporting as ColorWheel | 37 | //Exporting as ColorWheel |
37 | exports.GradientPicker = Montage.create(Component, { | 38 | exports.GradientPicker = Montage.create(Component, { |
38 | //////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////// |
39 | // | 40 | // |
40 | hasTemplate: { | 41 | hasTemplate: { |
41 | value: true | 42 | value: true |
42 | }, | 43 | }, |
43 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
@@ -50,7 +51,7 @@ exports.GradientPicker = Montage.create(Component, { | |||
50 | _value: { | 51 | _value: { |
51 | value: null | 52 | value: null |
52 | }, | 53 | }, |
53 | //////////////////////////////////////////////////////////////////// | 54 | //////////////////////////////////////////////////////////////////// |
54 | // | 55 | // |
55 | value: { | 56 | value: { |
56 | get: function() {return this._value;}, | 57 | get: function() {return this._value;}, |
@@ -61,14 +62,14 @@ exports.GradientPicker = Montage.create(Component, { | |||
61 | _mode: { | 62 | _mode: { |
62 | value: 'linear' | 63 | value: 'linear' |
63 | }, | 64 | }, |
64 | //////////////////////////////////////////////////////////////////// | 65 | //////////////////////////////////////////////////////////////////// |
65 | // | 66 | // |
66 | mode: { | 67 | mode: { |
67 | get: function() {return this._mode;}, | 68 | get: function() {return this._mode;}, |
68 | set: function(value) { | 69 | set: function(value) { |
69 | // | 70 | // |
70 | this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); | 71 | this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup(); |
71 | // | 72 | // |
72 | this._mode = value; | 73 | this._mode = value; |
73 | // | 74 | // |
74 | this._dispatchEvent('change', false); | 75 | this._dispatchEvent('change', false); |
@@ -77,285 +78,286 @@ exports.GradientPicker = Montage.create(Component, { | |||
77 | //////////////////////////////////////////////////////////////////// | 78 | //////////////////////////////////////////////////////////////////// |
78 | // | 79 | // |
79 | _trackData: { | 80 | _trackData: { |
80 | value: {width: 0, x: 0, y: 0} | 81 | value: {width: 0, x: 0, y: 0} |
81 | }, | 82 | }, |
82 | //////////////////////////////////////////////////////////////////// | 83 | //////////////////////////////////////////////////////////////////// |
83 | // | 84 | // |
84 | prepareForDraw: { | 85 | prepareForDraw: { |
85 | value: function() { | 86 | value: function() { |
86 | // | 87 | // |
87 | } | 88 | } |
88 | }, | 89 | }, |
89 | //////////////////////////////////////////////////////////////////// | 90 | //////////////////////////////////////////////////////////////////// |
90 | // | 91 | // |
91 | willDraw: { | 92 | willDraw: { |
92 | value: function() { | 93 | value: function() { |
93 | //Getting component views from layout | 94 | //Getting component views from layout |
94 | this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); | 95 | this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText); |
95 | //TODO: Fix events and remove this hack | 96 | //TODO: Fix events and remove this hack |
96 | this.trackCover.addEventListener('mouseover', function () { | 97 | this.trackCover.addEventListener('mouseover', function () { |
97 | if (!this._updating) { | 98 | if (!this._updating) { |
98 | this.trackCover.style.display = 'none'; | 99 | this.trackCover.style.display = 'none'; |
99 | } | 100 | } |
100 | }.bind(this), true); | 101 | }.bind(this), true); |
101 | // | 102 | // |
102 | this.radioLinear.addEventListener('change', function (e){ | 103 | this.radioLinear.addEventListener('change', function (e){ |
103 | this.mode = 'linear'; | 104 | this.mode = 'linear'; |
104 | }.bind(this), true); | 105 | }.bind(this), true); |
105 | // | 106 | // |
106 | this.radioRadial.addEventListener('change', function (e){ | 107 | this.radioRadial.addEventListener('change', function (e){ |
107 | this.mode = 'radial'; | 108 | this.mode = 'radial'; |
108 | }.bind(this), true); | 109 | }.bind(this), true); |
109 | } | 110 | } |
110 | }, | 111 | }, |
111 | //////////////////////////////////////////////////////////////////// | 112 | //////////////////////////////////////////////////////////////////// |
112 | // | 113 | // |
113 | draw: { | 114 | draw: { |
114 | value: function() { | 115 | value: function() { |
115 | //Checking for mode to assign radio value | 116 | //Checking for mode to assign radio value |
116 | if (this.mode === 'linear') { | 117 | if (this.mode === 'linear') { |
117 | this.radioLinear.checked = 'true'; | 118 | this.radioLinear.checked = 'true'; |
118 | } else if (this.mode === 'radial') { | 119 | } else if (this.mode === 'radial') { |
119 | this.radioRadial.checked = 'true'; | 120 | this.radioRadial.checked = 'true'; |
120 | } | 121 | } |
121 | //Checkign for value to initialize stops | 122 | //Checkign for value to initialize stops |
122 | if (!this.value) { | 123 | if (!this.value) { |
123 | this.addDefaultStops(); | 124 | this.addDefaultStops(); |
124 | } else { | 125 | } else { |
125 | //Adding stops from preset value | 126 | //Adding stops from preset value |
126 | for (var i=0, stops = this.value; stops[i]; i++) { | 127 | 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); | 128 | this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true); |
128 | } | 129 | } |
129 | } | 130 | } |
130 | } | 131 | } |
131 | }, | 132 | }, |
132 | //////////////////////////////////////////////////////////////////// | 133 | //////////////////////////////////////////////////////////////////// |
133 | // | 134 | // |
134 | didDraw: { | 135 | didDraw: { |
135 | value: function() { | 136 | value: function() { |
136 | //Adding event listener for stops | 137 | //Adding event listener for stops |
137 | this.trackMain.addEventListener('click', this, false); | 138 | this.trackMain.addEventListener('click', this, false); |
138 | //Getting position of track | 139 | //Getting position of track |
139 | var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0)); | 140 | var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0)); |
140 | //Setting position of track to calculate movement | 141 | //Setting position of track to calculate movement |
141 | this._trackData.x = point.x; | 142 | this._trackData.x = point.x; |
142 | this._trackData.y = point.y; | 143 | this._trackData.y = point.y; |
143 | } | 144 | } |
144 | }, | 145 | }, |
145 | //////////////////////////////////////////////////////////////////// | 146 | //////////////////////////////////////////////////////////////////// |
146 | //Default stops funtion (reset) |