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