aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
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
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')
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.css6
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.html57
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js105
-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
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.css14
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.html167
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.js56
-rw-r--r--js/panels/css-panel/style.reel/style.css23
-rw-r--r--js/panels/css-panel/style.reel/style.html57
-rw-r--r--js/panels/css-panel/style.reel/style.js40
11 files changed, 692 insertions, 0 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css
new file mode 100644
index 00000000..7f1b0f7f
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -0,0 +1,6 @@
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
diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html
new file mode 100644
index 00000000..1f680997
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -0,0 +1,57 @@
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/declaration.reel",
14 "name" : "Declaration",
15 "properties" : {
16 "element" : {"#" : "container"}
17 }
18 },
19 "styleShorthand": {
20 "module": "js/panels/css-panel/style-shorthand.reel",
21 "name": "StyleShorthand"
22 },
23 "treeController": {
24 "module": "js/controllers/tree-controller",
25 "name": "TreeController",
26 "properties" : {
27 "branchKey" : "properties",
28 "labelKey" : "name",
29
30 "delegate": {"@": "owner" }
31 },
32 "bindings": {
33 "content": {
34 "boundObject": {"@": "owner"},
35 "boundObjectPropertyPath": "styleTree"
36 }
37 }
38 },
39 "treeView" : {
40 "module" : "js/components/treeview/treeview.reel",
41 "name" : "Treeview",
42 "properties" : {
43 "element" : {"#": "declaration-list"},
44 "branchComponent" : {"@": "styleShorthand" },
45 "contentController": {"@": "treeController"},
46 "showRoot" : false
47 }
48 }
49 }
50 </script>
51</head>
52<body>
53<div id="container">
54 <dl id="declaration-list" class="declaration-list"></dl>
55</div>
56</body>
57</html> \ No newline at end of file
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
new file mode 100644
index 00000000..34819df5
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -0,0 +1,105 @@
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 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
10
11exports.Declaration = Montage.create(Component, {
12 templateDidLoad : {
13 value: function() {
14 console.log("declaration - template did load");
15 }
16 },
17 _declaration: {
18 value: null
19 },
20 declaration: {
21 get: function() {
22 return this._declaration;
23 },
24 set: function(dec) {
25 this._declaration = dec;
26 console.log('here');
27 ///// creates data structure to use with tree component
28 this.buildStyleTree();
29 console.log('there');
30 this.needsDraw = true;
31 }
32 },
33
34 buildStyleTree : {
35 value: function() {
36 var styles = Array.prototype.slice.call(this._declaration).sort();
37 this.styleTree = {
38 properties : styles.map(this.styleTreeMapper, this)
39 };
40 }
41 },
42 styleTreeMapper : {
43 value: function arrayToTreeMapper(property, i, styleArray) {
44 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property],
45 subProps, hasAll;
46
47 ///// Is this a sub property of a shorthand property?
48 if(shorthands) {
49 //debugger;
50 ///// Yes.
51 ///// Now, are all sub properties in the declaration?
52 subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
53 hasAll = subProps.every(function(subProp) {
54 return styleArray.indexOf(subProp) !== -1;
55 });
56
57 if(hasAll) {
58 ///// It has all sub properties
59 ///// Let's return a tree branch and remove the
60 ///// sub properties from the flat array
61
62 this._removeItemsFromArray(styleArray, subProps);
63
64 return {
65 name: shorthands[0],
66 value: this._declaration.getPropertyValue(shorthands[0]),
67 properties: subProps.map(function(p, i, array) {
68 return {
69 name: p,
70 value: this._declaration.getPropertyValue(p)
71 };
72 }, this)
73 };
74 }
75 }
76
77
78 return {
79 name: property,
80 value: this._declaration.getPropertyValue(property)
81 };
82 }
83 },
84 _removeItemsFromArray : {
85 value: function(array, items) {
86 items.forEach(function(item) {
87 var index = array.indexOf(item);
88 array.splice(index, 1);
89 }, this);
90 }
91 },
92 styleTree : {
93 value: {
94 "properties" : []
95 },
96 distinct: true
97 },
98 draw: {
99 value: function() {
100 if(this._declaration) {
101
102 }
103 }
104 }
105}); \ No newline at end of file
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",