aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/rule-list.reel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css27
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.html82
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js89
3 files changed, 198 insertions, 0 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
new file mode 100644
index 00000000..e4a10657
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,27 @@
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.rule-list-container {
7 display: -webkit-box;
8 -webkit-box-orient: vertical;
9 -webkit-box-flex: 1;
10}
11.rule-list {
12 background-color: #FFF;
13 background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
14 color: #333;
15 display: -webkit-box;
16 font-family: monospace;
17 padding: 0;
18 margin: 0;
19 overflow-y: auto;
20 -webkit-box-orient: vertical;
21 -webkit-box-flex: 1;
22}
23.rule-list li {
24 list-style-type: none;
25 margin: 3px 6px;
26 position: relative;
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
new file mode 100644
index 00000000..efede847
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,82 @@
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 <link href="rule-list.css" type="text/css" rel="stylesheet">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/rule-list.reel",
15 "name" : "RuleList",
16 "properties" : {
17 "element" : {"#" : "rule-list"}
18 }
19 }
20 }
21 </script>
22 <script type="text/json">
23 ,
24 "ruleListController": {
25 "module":"montage/ui/controller/array-controller",
26 "name": "ArrayController",
27 "bindings": {
28 "content" : {
29 "boundObject": {"@": "owner"},
30 "boundObjectPropertyPath": "contentController.ruleList",
31 "oneway": true
32 }
33 }
34 },
35 "ruleList": {
36 "module" : "montage/ui/repetition.reel",
37 "name": "Repetition",
38 "properties": {
39 "element": {"#": "rules-list"}
40 },
41 "bindings": {
42 "objects" : {
43 "boundObject": {"@": "owner"},
44 "boundObjectPropertyPath": "contentController.ruleList",
45 "oneway": true
46 }
47 }
48 },
49 "slot": {
50 "module" : "montage/ui/slot.reel",
51 "name" : "Slot",
52 "properties" : {
53 "element" : {"#" : "rule-item"}
54 },
55 "bindings": {
56 "rule" : {
57 "boundObject": {"@": "ruleList"},
58 "boundObjectPropertyPath": "objectAtCurrentIteration",
59 "oneway": true
60 }
61 }
62 },
63 "ruleContainer": {
64 "module": "js/panels/css-panel/rule-container.reel",
65 "name": "RuleContainer",
66 "properties": {
67 "element": {"#": "rule-item"}
68 },
69 "bindings": {
70 "rule" : {
71 "boundObject": {"@": "ruleList"},
72 "boundObjectPropertyPath": "objectAtCurrentIteration",
73 "oneway": true
74 }
75 }
76 }
77 </script>
78</head>
79<body>
80<ul id="rule-list" class="rule-list"></ul>
81</body>
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
new file mode 100644
index 00000000..44d6d864
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,89 @@
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.RuleList = Montage.create(Component, {
11 hasTemplate: {
12 value: true
13 },
14 listElement : {
15 value: null
16 },
17 _rules: {
18 value: null
19 },
20 rules: {
21 get: function() {
22 return this._rules;
23 },
24 set: function(list) {
25 if(!list) {
26 return null;
27 }
28 //debugger;
29 console.log('list: ', list);
30 this._rules = list;
31 this.needsDraw = true;
32 this._needsAppend = true;
33 }
34 },
35 templateDidLoad : {
36 value: function() {
37 console.log("Rule List : template did load");
38 //this.condition = true;
39 this.needsDraw = true;
40 //debugger;
41 }
42 },
43 prepareForDraw : {
44 value: function() {
45 console.log("Rule List : prepare for draw");
46 }
47 },
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
65
66 }, this);
67 }
68 console.log("Rule List : draw");
69 }
70 },
71 _createRuleComponent: {
72 value: function(ruleType) {
73
74 }
75 },
76 ruleNodeName : {
77 value: 'li'
78 },
79 ruleComponents : {
80 value: {
81 "1" : 'css-style-rule',
82 "3" : 'css-import-rule',
83 "4" : 'css-media-rule',
84 "5" : 'css-font-face-rule',
85 "6" : 'css-page-rule',
86 "10" : 'namespace-rule'
87 }
88 }
89});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 10:15:41 +0000