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