aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list.reel
diff options
context:
space:
mode:
authorEric Guzman2012-03-12 15:24:29 -0700
committerEric Guzman2012-03-12 15:24:29 -0700
commit42d9f27afea3066cbccf22c76753f407fd340c30 (patch)
tree004ffab43a012142bbf78137d70a8f78267544db /js/panels/css-panel/rule-list.reel
parent10e4712ea5cf44041668dce9e767cb875ed53784 (diff)
downloadninja-42d9f27afea3066cbccf22c76753f407fd340c30.tar.gz
CSS Panel Update - Rule List component update
Diffstat (limited to 'js/panels/css-panel/rule-list.reel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css6
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.html7
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js33
3 files changed, 15 insertions, 31 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
index 5f9092f3..8bb90331 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.css
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -12,10 +12,11 @@
12 background-color: #FFF; 12 background-color: #FFF;
13 background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); 13 background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
14 color: #333; 14 color: #333;
15 display: -webkit-box;
15 font-family: monospace; 16 font-family: monospace;
16 padding: 0; 17 padding: 0;
17 margin: 0; 18 margin: 0;
18 display: -webkit-box; 19 overflow-y: scroll;
19 -webkit-box-orient: vertical; 20 -webkit-box-orient: vertical;
20 -webkit-box-flex: 1; 21 -webkit-box-flex: 1;
21} 22}
@@ -23,7 +24,4 @@
23 list-style-type: none; 24 list-style-type: none;
24 margin: 3px 6px; 25 margin: 3px 6px;
25 position: relative; 26 position: relative;
26}
27.rule-list li {
28
29} \ No newline at end of file 27} \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html
index 69154d8d..efede847 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.html
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -14,8 +14,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
14 "module" : "js/panels/css-panel/rule-list.reel", 14 "module" : "js/panels/css-panel/rule-list.reel",
15 "name" : "RuleList", 15 "name" : "RuleList",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "container"}, 17 "element" : {"#" : "rule-list"}
18 "listElement": {"#": "rules-list"}
19 } 18 }
20 } 19 }
21 } 20 }
@@ -78,8 +77,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
78 </script> 77 </script>
79</head> 78</head>
80<body> 79<body>
81<div id="container" class="rule-list-container"> 80<ul id="rule-list" class="rule-list"></ul>
82 <ul id="rules-list" class="rule-list"></ul>
83</div>
84</body> 81</body>
85</html> \ No newline at end of file 82</html> \ No newline at end of file
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 11cda89c..44d6d864 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -11,6 +11,9 @@ exports.RuleList = Montage.create(Component, {
11 hasTemplate: { 11 hasTemplate: {
12 value: true 12 value: true
13 }, 13 },
14 listElement : {
15 value: null
16 },
14 _rules: { 17 _rules: {
15 value: null 18 value: null
16 }, 19 },
@@ -22,34 +25,19 @@ exports.RuleList = Montage.create(Component, {
22 if(!list) { 25 if(!list) {
23 return null; 26 return null;
24 } 27 }
28 //debugger;
25 console.log('list: ', list); 29 console.log('list: ', list);
26 this._rules = list; 30 this._rules = list;
27 this.needsDraw = this._needsAppend = true; 31 this.needsDraw = true;
28 } 32 this._needsAppend = true;
29 },
30 _contentController: {
31 value: null
32 },
33 contentController: {
34 get: function() {
35 return this._contentController;
36 },
37 set: function(controller) {
38
39 Object.defineBinding(this, 'rules', {
40 "boundObject": controller,
41 "boundObjectPropertyPath": "ruleList",
42 "oneway": true
43
44 });
45
46 this._contentController = controller;
47 } 33 }
48 }, 34 },
49 templateDidLoad : { 35 templateDidLoad : {
50 value: function() { 36 value: function() {
51 console.log("Rule List : template did load"); 37 console.log("Rule List : template did load");
52 //this.condition = true; 38 //this.condition = true;
39 this.needsDraw = true;
40 //debugger;
53 } 41 }
54 }, 42 },
55 prepareForDraw : { 43 prepareForDraw : {
@@ -59,6 +47,7 @@ exports.RuleList = Montage.create(Component, {
59 }, 47 },
60 draw : { 48 draw : {
61 value: function() { 49 value: function() {
50 console.log("Rule List - Draw");
62 if(this._needsAppend) { 51 if(this._needsAppend) {
63 this._rules.forEach(function(rule) { 52 this._rules.forEach(function(rule) {
64 var componentBase = this.supportedRules[rule.type], 53 var componentBase = this.supportedRules[rule.type],
@@ -66,10 +55,10 @@ exports.RuleList = Montage.create(Component, {
66 55
67 if(componentBase) { 56 if(componentBase) {
68 el = document.createElement(this.ruleNodeName); 57 el = document.createElement(this.ruleNodeName);
69 instance = componentBase.create(); 58 instance = Montage.create(componentBase);
70 instance.element = el; 59 instance.element = el;
71 instance.rule = rule; 60 instance.rule = rule;
72 this.listElement.appendChild(el); 61 this.element.appendChild(instance.element);
73 instance.needsDraw = true; 62 instance.needsDraw = true;
74 } 63 }
75 64