aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/declaration.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/declaration.reel')
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.css12
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.html58
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js105
3 files changed, 175 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..77257fec
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -0,0 +1,12 @@
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
7.treeRoot > .style-shorthand-branch > div {
8 display: none;
9}
10.treeRoot > .style-shorthand-branch > dl {
11 margin-top: 4px;
12} \ No newline at end of file
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..79865fed
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -0,0 +1,58 @@
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="declaration.css" rel="stylesheet" type="text/css" />
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/declaration.reel",
15 "name" : "Declaration",
16 "properties" : {
17 "element" : {"#" : "container"}
18 }
19 },
20 "styleShorthand": {
21 "module": "js/panels/css-panel/style-shorthand.reel",
22 "name": "StyleShorthand"
23 },
24 "treeController": {
25 "module": "js/controllers/tree-controller",
26 "name": "TreeController",
27 "properties" : {
28 "branchKey" : "properties",
29 "labelKey" : "name",
30
31 "delegate": {"@": "owner" }
32 },
33 "bindings": {
34 "content": {
35 "boundObject": {"@": "owner"},
36 "boundObjectPropertyPath": "styleTree"
37 }
38 }
39 },
40 "treeView" : {
41 "module" : "js/components/treeview/treeview.reel",
42 "name" : "Treeview",
43 "properties" : {
44 "element" : {"#": "declaration-list"},
45 "branchComponent" : {"@": "styleShorthand" },
46 "contentController": {"@": "treeController"},
47 "showRoot" : false
48 }
49 }
50 }
51 </script>
52</head>
53<body>
54<div id="container">
55 <dl id="declaration-list" class="declaration-list"></dl>
56</div>
57</body>
58</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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 16:12:37 +0000