diff options
-rwxr-xr-x | js/components/ui/color-chip.reel/color-chip.js | 64 | ||||
-rwxr-xr-x | js/controllers/document-controller.js | 2 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 4 | ||||
-rwxr-xr-x | js/controllers/styles-controller.js | 78 | ||||
-rwxr-xr-x | js/data/pi/pi-data.js | 16 | ||||
-rwxr-xr-x | js/io/document/html-document.js | 3 | ||||
-rwxr-xr-x | js/panels/properties/content.reel/content.js | 29 | ||||
-rwxr-xr-x | js/panels/properties/sections/custom.reel/custom.js | 51 |
8 files changed, 227 insertions, 20 deletions
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 5bef7020..e51bdd8a 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js | |||
@@ -9,32 +9,80 @@ var Montage = require("montage/core/core").Montage, | |||
9 | 9 | ||
10 | var ColorChip = exports.ColorChip = Montage.create(Component, { | 10 | var ColorChip = exports.ColorChip = Montage.create(Component, { |
11 | 11 | ||
12 | chip: { | ||
13 | value: false | ||
14 | }, | ||
15 | |||
12 | hasIcon: { | 16 | hasIcon: { |
13 | value: true | 17 | value: true |
14 | }, | 18 | }, |
15 | 19 | ||
20 | iconType: { | ||
21 | value: null | ||
22 | }, | ||
23 | |||
16 | mode: { | 24 | mode: { |
17 | value: "stroke" | 25 | value: "stroke" |
18 | }, | 26 | }, |
19 | 27 | ||
20 | prepareForDraw: { | 28 | offset: { |
21 | value: function() { | 29 | value: 20 |
22 | // this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20}; | 30 | }, |
23 | // this.application.ninja.colorController.addButton('chip', this.colorButton); | ||
24 | 31 | ||
32 | initialColor: { | ||
33 | value: false | ||
34 | }, | ||
25 | 35 | ||
36 | changeDelegate: { | ||
37 | value: null | ||
38 | }, | ||
39 | |||
40 | prepareForDraw: { | ||
41 | value: function() { | ||
26 | this.addEventListener("firstDraw", this, false); | 42 | this.addEventListener("firstDraw", this, false); |
27 | } | 43 | } |
28 | }, | 44 | }, |
29 | 45 | ||
30 | draw: { | 46 | draw: { |
31 | value: function() { | 47 | value: function() { |
48 | if(this.hasIcon) { | ||
49 | var icon = this.iconType || this.mode + "Icon"; | ||
50 | this.application.ninja.colorController.addButton(icon, this.icon); | ||
51 | } | ||
32 | 52 | ||
33 | if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); | 53 | this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset}; |
34 | |||
35 | // this.application.ninja.colorController.addButton(this.mode, this.chipBtn); | ||
36 | this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20}; | ||
37 | this.application.ninja.colorController.addButton(this.mode, this.chipBtn); | 54 | this.application.ninja.colorController.addButton(this.mode, this.chipBtn); |
55 | |||
56 | } | ||
57 | }, | ||
58 | |||
59 | handleFirstDraw: { | ||
60 | value: function(evt) { | ||
61 | if(this.chip) { | ||
62 | // This is a single chip - Not related to the color panel -- Set the initial color if found | ||
63 | var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)"; | ||
64 | |||
65 | if(this.initialColor) { | ||
66 | var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor); | ||
67 | mode = colorObj.mode; | ||
68 | r = colorObj.value.r; | ||
69 | g = colorObj.value.g; | ||
70 | b = colorObj.value.b; | ||
71 | a = colorObj.value.a; | ||
72 | css = colorObj.css; | ||
73 | } | ||
74 | |||
75 | this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); | ||
76 | this.chipBtn.addEventListener("change", this, false); | ||
77 | } | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | handleChange: { | ||
82 | value: function(evt) { | ||
83 | if(this.changeDelegate && typeof(this.changeDelegate === "function")) { | ||
84 | this.changeDelegate(evt); | ||
85 | } | ||
38 | } | 86 | } |
39 | } | 87 | } |
40 | 88 | ||
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index b80dfe56..b066a9c2 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js | |||
@@ -187,7 +187,7 @@ DocumentController = exports.DocumentController = Montage.create(Component, { | |||
187 | var code = Montage.create(TextDocument, {"source": {value: doc.content}}), docuuid = Uuid.generate(), textArea; | 187 | var code = Montage.create(TextDocument, {"source": {value: doc.content}}), docuuid = Uuid.generate(), textArea; |
188 | textArea = this.application.ninja.stage.stageView.createTextAreaElement(docuuid); | 188 | textArea = this.application.ninja.stage.stageView.createTextAreaElement(docuuid); |
189 | code.initialize(doc, docuuid, textArea, textArea.parentNode); | 189 | code.initialize(doc, docuuid, textArea, textArea.parentNode); |
190 | code.init(doc.name, doc.uri, doc.extension, null, docuuid); | 190 | //code.init(doc.name, doc.uri, doc.extension, null, docuuid); |
191 | code.textArea.value = doc.content; | 191 | code.textArea.value = doc.content; |
192 | this.application.ninja.stage.stageView.createTextView(code); | 192 | this.application.ninja.stage.stageView.createTextView(code); |
193 | break; | 193 | break; |
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index b8170826..af7c4858 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js | |||
@@ -75,6 +75,8 @@ exports.StageController = Montage.create(ElementController, { | |||
75 | getProperty: { | 75 | getProperty: { |
76 | value: function(el, p) { | 76 | value: function(el, p) { |
77 | switch(p) { | 77 | switch(p) { |
78 | case "background" : | ||
79 | return el.elementModel.stageBackground.style.getProperty(p); | ||
78 | case "border": | 80 | case "border": |
79 | return el.elementModel.stageView.style.getProperty(p); | 81 | return el.elementModel.stageView.style.getProperty(p); |
80 | case "height": | 82 | case "height": |
@@ -92,7 +94,7 @@ exports.StageController = Montage.create(ElementController, { | |||
92 | value: function(el, p, value) { | 94 | value: function(el, p, value) { |
93 | switch(p) { | 95 | switch(p) { |
94 | case "background": | 96 | case "background": |
95 | el.elementModel.body.style.setProperty(p, value); | 97 | el.elementModel.stageBackground.style.setProperty(p, value); |
96 | break; | 98 | break; |
97 | case "overflow": | 99 | case "overflow": |
98 | el.elementModel.viewPort.style.setProperty(p, value); | 100 | el.elementModel.viewPort.style.setProperty(p, value); |
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 44e0e798..44ca50e1 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -128,7 +128,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
128 | } else { | 128 | } else { |
129 | this._defaultStylesheet = sheets[lastIndex]; | 129 | this._defaultStylesheet = sheets[lastIndex]; |
130 | } | 130 | } |
131 | 131 | ||
132 | } | 132 | } |
133 | } | 133 | } |
134 | }, | 134 | }, |
@@ -179,14 +179,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
179 | this.styleSheetModified(stylesheet); | 179 | this.styleSheetModified(stylesheet); |
180 | 180 | ||
181 | rule = stylesheet.rules[index]; | 181 | rule = stylesheet.rules[index]; |
182 | 182 | ||
183 | ///// attach specificity to rule object | 183 | ///// attach specificity to rule object |
184 | // if rule is css keyframes, return rule and don't attach specificity | 184 | ///// if rule is css keyframes, return rule and don't attach specificity |
185 | if (rule instanceof WebKitCSSKeyframesRule) { | 185 | if (rule instanceof WebKitCSSKeyframesRule) { |
186 | return rule; | 186 | return rule; |
187 | } | 187 | } |
188 | rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); | 188 | rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); |
189 | 189 | ||
190 | ///// return the rule we just inserted | 190 | ///// return the rule we just inserted |
191 | return rule; | 191 | return rule; |
192 | } | 192 | } |
@@ -844,6 +844,61 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
844 | } | 844 | } |
845 | }, | 845 | }, |
846 | 846 | ||
847 | ///// Get Animation Rule With Name | ||
848 | ///// Returns the CSSKeyframesRule with given name | ||
849 | |||
850 | getAnimationRuleWithName : { | ||
851 | value: function(name, document) { | ||
852 | var doc = document || this._activeDocument._document, | ||
853 | animRules = this.getDocumentAnimationRules(doc), | ||
854 | rule, i; | ||
855 | |||
856 | for(i = 0; i < animRules.length; i++) { | ||
857 | rule = animRules[i]; | ||
858 | if(rule.name === name) { | ||
859 | return rule; | ||
860 | } | ||
861 | } | ||
862 | |||
863 | return; | ||
864 | } | ||
865 | }, | ||
866 | |||
867 | ///// Get Document Animation Rules | ||
868 | ///// Returns all CSSKeyframesRules in active document, or in | ||
869 | ///// optionally passed-in document | ||
870 | ///// If none are found, returns an empty array | ||
871 | |||
872 | getDocumentAnimationRules : { | ||
873 | value: function(document) { | ||
874 | var sheets = (document) ? document.styleSheets : this._activeDocument._document.styleSheets, | ||
875 | rules = []; | ||
876 | |||
877 | nj.toArray(sheets).forEach(function(sheet) { | ||
878 | rules = rules.concat(this.getStyleSheetAnimationRules(sheet)); | ||
879 | }, this); | ||
880 | |||
881 | return rules; | ||
882 | } | ||
883 | }, | ||
884 | |||
885 | ///// Get Style Sheet Animation Rules | ||