aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-05-25 15:34:44 -0700
committerNivesh Rajbhandari2012-05-25 15:34:44 -0700
commitfa50874d9ca03540dc5741fb51261ef2b56f89ea (patch)
tree08b667289d7fb00b4e59a609609bd2f93a010a2c /js
parent2154ace6bdc2abe55fae353849d3beb64b8ada25 (diff)
downloadninja-fa50874d9ca03540dc5741fb51261ef2b56f89ea.tar.gz
IKNinja-1491 - Adding slice value to border gradients.
Note that using "circle cover" comes close to matching our canvas 2d/WebGL shape's stroke gradients, but still a little off. Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/element-controller.js23
1 files changed, 21 insertions, 2 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..7bb07976 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -159,8 +159,6 @@ exports.ElementController = Montage.create(Component, {
159 el.elementModel.stroke = null; 159 el.elementModel.stroke = null;
160 return; 160 return;
161 case 'gradient': 161 case 'gradient':
162 this.setProperty(el, "border-image", color.color.css);
163 this.setProperty(el, "border-color", "none");
164 if(color.borderInfo) { 162 if(color.borderInfo) {
165 if(color.borderInfo.borderWidth) { 163 if(color.borderInfo.borderWidth) {
166 this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); 164 this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
@@ -169,9 +167,11 @@ exports.ElementController = Montage.create(Component, {
169 this.setProperty(el, "border-style", color.borderInfo.borderStyle); 167 this.setProperty(el, "border-style", color.borderInfo.borderStyle);
170 } 168 }
171 } 169 }
170 this.setGradientBorder(el, color.color.gradientMode, color.color.css);
172 break; 171 break;
173 default: 172 default:
174 this.setProperty(el, "border-image", "none"); 173 this.setProperty(el, "border-image", "none");
174 this.setProperty(el, "border-image-slice", "");
175 this.setProperty(el, "border-color", color.color.css); 175 this.setProperty(el, "border-color", color.color.css);
176 if(color.borderInfo) { 176 if(color.borderInfo) {
177 if(color.borderInfo.borderWidth) { 177 if(color.borderInfo.borderWidth) {
@@ -188,6 +188,25 @@ exports.ElementController = Montage.create(Component, {
188 } 188 }
189 }, 189 },
190 190
191 setGradientBorder: {
192 value: function(el, gradientMode, css) {
193 if(gradientMode === "radial") {
194 this.setProperty(el, "border-image", css.replace("ellipse", "circle"));
195 } else {
196 this.setProperty(el, "border-image", css);
197 }
198 this.setProperty(el, "border-color", "none");
199 // gradient slice = borderWidth/totalWidth
200 var b = parseInt(this.getProperty(el, "border-left-width", true)),
201 w = parseInt(this.getProperty(el, "width", true)),
202 h = parseInt(this.getProperty(el, "height", true));
203 if(h > w) {
204 w = h;
205 }
206 this.setProperty(el, "border-image-slice", Math.floor(b/(w+b+b) * 100) + "%");
207 }
208 },
209
191 getStroke: { 210 getStroke: {
192 value: function(el) { 211 value: function(el) {
193 // TODO - Need to figure out which border side user wants 212 // TODO - Need to figure out which border side user wants