aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list-container.reel
diff options
context:
space:
mode:
authorEric Guzman2012-03-12 15:29:37 -0700
committerEric Guzman2012-03-12 15:29:37 -0700
commit7a28932ba8a7517bbaaabe1f5edf678416aafc9c (patch)
treefa1cb39de4a3bf9bc3a5a7c5db043e55cee64975 /js/panels/css-panel/rule-list-container.reel
parentec862af55e5c3d564b37eac2744a1a6815f81f4d (diff)
downloadninja-7a28932ba8a7517bbaaabe1f5edf678416aafc9c.tar.gz
CSS Panel - Adding declaration, style (tree leaf), and style shorthand (tree branch) components
Diffstat (limited to 'js/panels/css-panel/rule-list-container.reel')
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.html44
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js123
2 files changed, 167 insertions, 0 deletions
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
new file mode 100644
index 00000000..6c6ecfed
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
@@ -0,0 +1,44 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6</copyright> -->
7<html lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <script type="text/montage-serialization">
11 {
12 "owner": {
13 "module" : "js/panels/css-panel/rule-list-container.reel",
14 "name" : "RuleListContainer",
15 "properties" : {
16 "element" : {"#" : "container"},
17 "ruleListComponent": {"@": "ruleList"}
18 }
19 },
20 "ruleList": {
21 "module" : "js/panels/css-panel/rule-list.reel",
22 "name": "RuleList",
23 "properties": {
24 "supportedRules" : {
25 "1" : {"@": "cssStyleRule"},
26 "3" : {"@": "cssImportRule"},
27 "4" : {"@": "cssMediaRule"},
28 "5" : {"@": "cssFontFaceRule"},
29 "6" : {"@": "cssPageRule"},
30 "10" : {"@": "namespaceRule"}
31 }
32 }
33 },
34 "cssStyleRule": {
35 "module": "js/panels/css-panel/rule-components/css-style-rule.reel",
36 "name": "CssStyleRule"
37 }
38 }
39 </script>
40</head>
41<body>
42<div id="container" class="rule-list-container"></div>
43</body>
44</html> \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
new file mode 100644
index 00000000..03c609d7
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -0,0 +1,123 @@
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.RuleListContainer = Montage.create(Component, {
11 ruleListComponent : {
12 value: null
13 },
14 templateDidLoad: {
15 value: function() {
16 console.log('rule list container - tempalte did load');
17 }
18 },
19 _getRuleList : {
20 value: function(s) {
21 var ruleListsOfType, i, list, matchesAll;
22
23 ruleListsOfType = this.ruleLists.filter(function(list) {
24 return list.selectionType = s.selectionType;
25 });
26
27 for(i = 0; i<ruleListsOfType.length; i++) {
28 list = ruleListsOfType[i];
29
30 if(s.selectionType === 'elements') {
31 matchesAll = list.selection.every(function(element, index, array) {
32 return array.indexOf(element) !== 0;
33 });
34
35 if(matchesAll) {
36 break;
37 }
38 } else {
39 ///// Selection (single element or stylesheet) is the same,
40 ///// Use the existing rule list
41 if(list.selection === s.selection) {
42 break;
43 }
44 }
45 }
46
47 return list;
48
49 }
50 },
51 ruleLists : {
52 value: []
53 },
54 add : {
55 value: function(type, selection) {
56 console.log("Rule List Container : add()");
57
58 var stylesController = this.application.ninja.stylesController,
59 listInstance = Montage.create(this.ruleListComponent),
60 container = document.createElement('div'),
61 rules;
62//debugger;
63 if(type === 'ELEMENT') {
64 rules = stylesController.getMatchingRules(selection);
65 }
66
67 //listInstance.element = container;
68 this._instanceToAdd = listInstance;
69 listInstance.rules = rules;
70
71 this.appendElement = container;
72 }
73 },
74 _instanceToAdd : {
75 value: null
76 },
77 _appendElement : {
78 value: null
79 },
80 appendElement : {
81 get: function() {
82 return this._appendElement;
83 },
84 set: function(el) {
85 this._appendElement = el;
86 this.needsDraw = true;
87 }
88 },
89 _lastDisplayedList : {
90 value: null
91 },
92 _displayedList : {
93 value: null
94 },
95 displayedList : {
96 get: function() {
97 return this._displayedList;
98 },
99 set: function(list) {
100 this._lastDisplayedList = this._displayedList;
101 this._displayedList = list;
102 this.needsDraw = true;
103 }
104 },
105 draw : {
106 value: function() {
107 if(this._lastDisplayedList) {
108 this._lastDisplayedList.style.display = 'none';
109
110 if(this._displayedList.element) {
111 this._displayedList.style.display = null;
112 }
113 }
114
115 if(this._appendElement) {
116 this.element.appendChild(this._appendElement);
117 this._instanceToAdd.element = this._appendElement;
118 this._appendElement = null;
119 }
120
121 }
122 }
123}); \ No newline at end of file