aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-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