aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-04-23 11:55:08 -0700
committerEric Guzman2012-04-23 11:55:08 -0700
commitc0fce534c255ef1e25779e2f0e8de95bb4e160cf (patch)
tree61d313ae0dc14f5abf56d084e723bc1a30c64c1b /js/panels/css-panel
parent0e5520008925f480d5d1bb8356220c773d1c5e37 (diff)
downloadninja-c0fce534c255ef1e25779e2f0e8de95bb4e160cf.tar.gz
CSS Panel - Add styles view delegate. Add handling for adding rules to stylesheets
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js112
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.html16
-rw-r--r--js/panels/css-panel/styles-view-mediator.js38
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
10exports.RuleList = Montage.create(Component, { 10exports.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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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);