diff options
Diffstat (limited to 'js/panels')
3 files changed, 114 insertions, 52 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js index 44d6d864..ebd7428b 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js | |||
@@ -8,15 +8,10 @@ var Montage = require("montage/core/core").Montage, | |||
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | exports.RuleList = Montage.create(Component, { | 10 | exports.RuleList = Montage.create(Component, { |
11 | hasTemplate: { | 11 | |
12 | value: true | 12 | ruleNodeName : { value: 'li' }, |
13 | }, | 13 | |
14 | listElement : { | 14 | _rules: { value: null }, |
15 | value: null | ||
16 | }, | ||
17 | _rules: { | ||
18 | value: null | ||
19 | }, | ||
20 | rules: { | 15 | rules: { |
21 | get: function() { | 16 | get: function() { |
22 | return this._rules; | 17 | return this._rules; |
@@ -28,62 +23,77 @@ exports.RuleList = Montage.create(Component, { | |||
28 | //debugger; | 23 | //debugger; |
29 | console.log('list: ', list); | 24 | console.log('list: ', list); |
30 | this._rules = list; | 25 | this._rules = list; |
26 | |||
27 | ///// remove previsouly added rules | ||
28 | if(this.childComponents){ | ||
29 | this.childComponents.forEach(function(ruleComponent) { | ||
30 | this.removeRule(ruleComponent); | ||
31 | }, this); | ||
32 | } | ||
33 | |||
34 | this._rules.forEach(function(rule) { | ||
35 | this.addRule(rule); | ||
36 | }, this); | ||
37 | |||
31 | this.needsDraw = true; | 38 | this.needsDraw = true; |
32 | this._needsAppend = true; | 39 | |
33 | } | 40 | } |
34 | }, | 41 | }, |
35 | templateDidLoad : { | 42 | |
36 | value: function() { | 43 | childComponents : { |
37 | console.log("Rule List : template did load"); | 44 | value: [], |
38 | //this.condition = true; | 45 | distinct: true |
39 | this.needsDraw = true; | ||
40 | //debugger; | ||
41 | } | ||
42 | }, | 46 | }, |
43 | prepareForDraw : { | 47 | |
44 | value: function() { | 48 | rulesToDraw : { |
45 | console.log("Rule List : prepare for draw"); | 49 | value: [], |
46 | } | 50 | distinct: true |
47 | }, | 51 | }, |
48 | draw : { | ||
49 | value: function() { | ||
50 | console.log("Rule List - Draw"); | ||
51 | if(this._needsAppend) { | ||
52 | this._rules.forEach(function(rule) { | ||
53 | var componentBase = this.supportedRules[rule.type], | ||
54 | instance, el; | ||
55 | |||
56 | if(componentBase) { | ||
57 | el = document.createElement(this.ruleNodeName); | ||
58 | instance = Montage.create(componentBase); | ||
59 | instance.element = el; | ||
60 | instance.rule = rule; | ||
61 | this.element.appendChild(instance.element); | ||
62 | instance.needsDraw = true; | ||
63 | } | ||
64 | 52 | ||
53 | addRule: { | ||
54 | value: function(rule) { | ||
55 | var componentBase = this.supportedRules[rule.type], | ||
56 | instance, el; | ||
65 | 57 | ||
66 | }, this); | 58 | ///// Draw the rule if we have a template for the rule type |
59 | if(componentBase) { | ||
60 | instance = Montage.create(componentBase); | ||
61 | instance.rule = rule; | ||
62 | this.rulesToDraw.push(instance); | ||
63 | this.needsDraw = true; | ||
67 | } | 64 | } |
68 | console.log("Rule List : draw"); | ||
69 | } | 65 | } |
70 | }, | 66 | }, |
71 | _createRuleComponent: { | ||
72 | value: function(ruleType) { | ||
73 | 67 | ||
68 | update : { | ||
69 | value: function() { | ||
70 | this.childComponents.forEach(function(component) { | ||
71 | component.update(); | ||
72 | }, this); | ||
73 | |||
74 | //// TODO: find new styles based on selection | ||
74 | } | 75 | } |
75 | }, | 76 | }, |
76 | ruleNodeName : { | 77 | |
77 | value: 'li' | 78 | willDraw : { |
79 | value: function() { | ||
80 | this.rulesToDraw.forEach(function(component) { | ||
81 | component.element = document.createElement(this.ruleNodeName); | ||
82 | }, this); | ||
83 | |||
84 | } | ||
78 | }, | 85 | }, |
79 | ruleComponents : { | 86 | |
80 | value: { | 87 | draw : { |
81 | "1" : 'css-style-rule', | 88 | value: function() { |
82 | "3" : 'css-import-rule', | 89 | //// Iterate through all rules that need draw and append them |
83 | "4" : 'css-media-rule', | 90 | this.rulesToDraw.forEach(function(component) { |
84 | "5" : 'css-font-face-rule', | 91 | this.element.appendChild(component.element); |
85 | "6" : 'css-page-rule', | 92 | component.needsDraw = true; |
86 | "10" : 'namespace-rule' | 93 | }, this); |
94 | |||
95 | ///// Null out any rules that were just drawn | ||
96 | this.rulesToDraw.length = 0; | ||
87 | } | 97 | } |
88 | } | 98 | } |
89 | }); | 99 | }); |
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html index e8ddb139..56e965c2 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html | |||
@@ -37,6 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
37 | } | 37 | } |
38 | } | 38 | } |
39 | }, | 39 | }, |
40 | "stylesViewDelegate" : { | ||
41 | "module": "js/panels/css-panel/styles-view-mediator", | ||
42 | "name": "StylesViewMediator", | ||
43 | "properties": { | ||
44 | "ruleListContainer": {"@": "ruleListContainer"} | ||
45 | } | ||
46 | }, | ||
40 | "ruleListContainer": { | 47 | "ruleListContainer": { |
41 | "module": "js/panels/css-panel/rule-list-container.reel", | 48 | "module": "js/panels/css-panel/rule-list-container.reel", |
42 | "name": "RuleListContainer" | 49 | "name": "RuleListContainer" |
@@ -49,7 +56,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
49 | "module": "js/components/toolbar.reel", | 56 | "module": "js/components/toolbar.reel", |
50 | "name": "Toolbar", | 57 | "name": "Toolbar", |
51 | "properties": { | 58 | "properties": { |
52 | "element": {"#": "styles-view-toolbar"} | 59 | "element": {"#": "styles-view-toolbar"}, |
60 | "delegate": {"@": "stylesViewDelegate" }, | ||
61 | "buttons": [ | ||
62 | { | ||
63 | "title": "Add", | ||
64 | "identifier": "add" | ||
65 | } | ||
66 | ] | ||
53 | } | 67 | } |
54 | } | 68 | } |
55 | } | 69 | } |
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js new file mode 100644 index 00000000..38b61220 --- /dev/null +++ b/js/panels/css-panel/styles-view-mediator.js | |||
@@ -0,0 +1,38 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.StylesViewMediator = Montage.create(Component, { | ||
11 | stylesController : { | ||
12 | get: function() { | ||
13 | return this.application.ninja.stylesController; | ||
14 | }, | ||
15 | set: function(){ | ||
16 | return; | ||
17 | } | ||
18 | }, | ||
19 | handleAddAction : { | ||
20 | value: function(e) { | ||
21 | var selector, newRule; | ||
22 | |||
23 | ///// Add rule to the container | ||
24 | |||
25 | ///// Get selection prefix | ||
26 | if(this.ruleListContainer.displayedList.selection.length > 1) { | ||
27 | selector = this.stylesController.generateClassName(null, true); | ||
28 | } else { | ||
29 | selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName); | ||
30 | } | ||
31 | |||
32 | newRule = this.application.ninja.stylesController.addRule("."+selector, ' { }'); | ||
33 | |||
34 | this.ruleListContainer.displayedList.component.addRule(newRule); | ||
35 | |||