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.css15
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.html58
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js218
3 files changed, 291 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..e37d89d2
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -0,0 +1,15 @@
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}
13.drag-over {
14 /*background-color: red;*/
15} \ 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..3ff41e0c
--- /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 "treeController": {"@": "treeController"},
19 "treeView" : {"@": "treeView"}
20 }
21 },
22 "styleShorthand": {
23 "module": "js/panels/css-panel/style-shorthand.reel",
24 "name": "StyleShorthand"
25 },
26 "treeController": {
27 "module": "js/components/controllers/tree-controller",
28 "name": "TreeController",
29 "properties" : {
30 "branchKey" : "properties",
31 "labelKey" : "name"
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..8ab19ad6
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -0,0 +1,218 @@
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 cssText : {
13 value: null
14 },
15 focusDelegate : {
16 value: null
17 },
18 includeEmptyStyle : {
19 value: true
20 },
21 templateDidLoad : {
22 value: function() {
23 console.log("declaration - template did load");
24
25 if(this.focusDelegate) {
26 this.treeController.delegate = this.focusDelegate;
27 }
28 }
29 },
30 prepareForDraw : {
31 value: function(e) {
32 console.log("Declaration :: prepare for draw");
33 this._element.addEventListener('drop', this, false);
34 this.element.addEventListener('dragenter', this, false);
35 this.element.addEventListener('dragleave', this, false);
36 }
37 },
38 _declaration: {
39 value: null
40 },
41 declaration: {
42 get: function() {
43 return this._declaration;
44 },
45 set: function(dec) {
46 this._declaration = dec;
47
48 this.cssText = dec.cssText;
49
50 ///// creates data structure to use with tree component
51 this.buildStyleTree();
52
53 if(this.includeEmptyStyle) {
54 this.styleTree.properties.push({
55 "name": "property",
56 "value" : "value",
57 "isEmpty": true
58 });
59 }
60
61 this.needsDraw = true;
62 }
63 },
64
65 update : {
66 value: function() {
67 if(this.declaration.cssText !== this.cssText) {
68 ///// Needs update
69 this.treeController.branchControllers[0].content.forEach(function(obj) {
70 this.treeController.branchControllers[0].removeObjects(obj);
71 }, this );
72
73 this.buildStyleTree();
74
75 if(this.includeEmptyStyle) {
76 this.styleTree.properties.push({
77 "name": "property",
78 "value" : "value",
79 "isEmpty": true
80 });
81 }
82//debugger;
83 this.needsDraw = true;
84 }
85 }
86 },
87
88 buildStyleTree : {
89 value: function() {
90 var styles = Array.prototype.slice.call(this._declaration).sort();
91 this.styleTree = {
92 properties : styles.map(this.styleTreeMapper, this)
93 };
94 }
95 },
96 styleTreeMapper : {
97 value: function arrayToTreeMapper(property, i, styleArray) {
98 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property],
99 subProps, hasAll;
100
101 ///// Is this a sub property of a shorthand property?
102 if(shorthands) {
103 //debugger;
104 ///// Yes.
105 ///// Now, are all sub properties in the declaration?
106 subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
107 hasAll = subProps.every(function(subProp) {
108 return styleArray.indexOf(subProp) !== -1;
109 });
110
111 if(hasAll) {
112 ///// It has all sub properties
113 ///// Let's return a tree branch and remove the
114 ///// sub properties from the flat array
115
116 this._removeItemsFromArray(styleArray, subProps);
117
118 return {
119 name: shorthands[0],
120 value: this._declaration.getPropertyValue(shorthands[0]),
121 properties: subProps.map(function(p, i, array) {
122 return {
123 name: p,
124 value: this._declaration.getPropertyValue(p)
125 };
126 }, this)
127 };
128 }
129 }
130
131
132 return {
133 name: property,
134 value: this._declaration.getPropertyValue(property)
135 };
136 }
137 },