aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list.reel
diff options
context:
space:
mode:
authorEric Guzman2012-03-02 10:55:51 -0800
committerEric Guzman2012-03-02 10:55:51 -0800
commit1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d (patch)
tree885ed3352f89e124bca7261d7c0edd4c95d3fff5 /js/panels/css-panel/rule-list.reel
parent53bdb1e7773069c4cca59e88d6da91cd0f58c94a (diff)
downloadninja-1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d.tar.gz
CSS Panel - Updating components, created toolbar components, and small changes to styles controller
Diffstat (limited to 'js/panels/css-panel/rule-list.reel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css29
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.html85
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js100
3 files changed, 214 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..5f9092f3
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,29 @@
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 font-family: monospace;
16 padding: 0;
17 margin: 0;
18 display: -webkit-box;
19 -webkit-box-orient: vertical;
20 -webkit-box-flex: 1;
21}
22.rule-list li {
23 list-style-type: none;
24 margin: 3px 6px;
25 position: relative;
26}
27.rule-list li {
28
29} \ 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..69154d8d
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,85 @@
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" : {"#" : "container"},
18 "listElement": {"#": "rules-list"}
19 }
20 }
21 }
22 </script>
23 <script type="text/json">
24 ,
25 "ruleListController": {
26 "module":"montage/ui/controller/array-controller",
27 "name": "ArrayController",
28 "bindings": {
29 "content" : {
30 "boundObject": {"@": "owner"},
31 "boundObjectPropertyPath": "contentController.ruleList",
32 "oneway": true
33 }
34 }
35 },
36 "ruleList": {
37 "module" : "montage/ui/repetition.reel",
38 "name": "Repetition",
39 "properties": {
40 "element": {"#": "rules-list"}
41 },
42 "bindings": {
43 "objects" : {
44 "boundObject": {"@": "owner"},
45 "boundObjectPropertyPath": "contentController.ruleList",
46 "oneway": true
47 }
48 }
49 },
50 "slot": {
51 "module" : "montage/ui/slot.reel",
52 "name" : "Slot",
53 "properties" : {
54 "element" : {"#" : "rule-item"}
55 },
56 "bindings": {
57 "rule" : {
58 "boundObject": {"@": "ruleList"},
59 "boundObjectPropertyPath": "objectAtCurrentIteration",
60 "oneway": true
61 }
62 }
63 },
64 "ruleContainer": {
65 "module": "js/panels/css-panel/rule-container.reel",
66 "name": "RuleContainer",
67 "properties": {
68 "element": {"#": "rule-item"}
69 },
70 "bindings": {
71 "rule" : {
72 "boundObject": {"@": "ruleList"},
73 "boundObjectPropertyPath": "objectAtCurrentIteration",
74 "oneway": true
75 }
76 }
77 }
78 </script>
79</head>
80<body>
81<div id="container" class="rule-list-container">
82 <ul id="rules-list" class="rule-list"></ul>
83</div>
84</body>
85</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..11cda89c
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,100 @@
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 _rules: {
15 value: null
16 },
17 rules: {
18 get: function() {
19 return this._rules;
20 },
21 set: function(list) {
22 if(!list) {
23 return null;
24 }
25 console.log('list: ', list);
26 this._rules = list;
27 this.needsDraw = this._needsAppend = true;
28 }
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 }
48 },
49 templateDidLoad : {
50 value: function() {
51 console.log("Rule List : template did load");
52 //this.condition = true;
53 }
54 },
55 prepareForDraw : {
56 value: function() {
57 console.log("Rule List : prepare for draw");
58 }
59 },
60 draw : {
61 value: function() {
62 if(this._needsAppend) {
63 this._rules.forEach(function(rule) {
64 var componentBase = this.supportedRules[rule.type],
65 instance, el;
66
67 if(componentBase) {
68 el = document.createElement(this.ruleNodeName);
69 instance = componentBase.create();
70 instance.element = el;
71 instance.rule = rule;
72 this.listElement.appendChild(el);
73 instance.needsDraw = true;
74 }
75
76
77 }, this);
78 }
79 console.log("Rule List : draw");
80 }
81 },
82 _createRuleComponent: {
83 value: function(ruleType) {
84
85 }
86 },
87 ruleNodeName : {
88 value: 'li'
89 },
90 ruleComponents : {
91 value: {
92 "1" : 'css-style-rule',
93 "3" : 'css-import-rule',
94 "4" : 'css-media-rule',
95 "5" : 'css-font-face-rule',
96 "6" : 'css-page-rule',
97 "10" : 'namespace-rule'
98 }
99 }
100});
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-05 03:57:08 +0000