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