aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-declaration.reel
diff options
context:
space:
mode:
authorEric Guzman2012-05-08 13:26:36 -0700
committerEric Guzman2012-05-08 13:26:36 -0700
commiteb80f8a610100f908b5cb9ffc65bfa94f8a23c21 (patch)
tree5f9d1f17e532d68019eafc69e82b9228216aac95 /js/panels/css-panel/style-declaration.reel
parentaf4dac82d2e76fe90191d6c085740d855bf961f3 (diff)
downloadninja-eb80f8a610100f908b5cb9ffc65bfa94f8a23c21.tar.gz
CSS Panel - Create non-tree declaration (optimized). And add updating functionality.
Diffstat (limited to 'js/panels/css-panel/style-declaration.reel')
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.css15
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.html68
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js261
3 files changed, 344 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
new file mode 100644
index 00000000..e37d89d2
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-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/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
new file mode 100644
index 00000000..9123e2a0
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -0,0 +1,68 @@
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="style-declaration.css" rel="stylesheet" type="text/css" />
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/style-declaration.reel",
15 "name" : "Declaration",
16 "properties" : {
17 "element" : {"#" : "container"},
18 "arrayController": {"@": "arrayController"},
19 "styleComponent": {"@":"styleItem"},
20 "repetition": {"@": "repetition"}
21 }
22 },
23 "arrayController": {
24 "prototype": "montage/ui/controller/array-controller",
25 "bindings": {
26 "content": {
27 "boundObject": {"@": "owner"},
28 "boundObjectPropertyPath": "styles",
29 "oneway": true
30 }
31 }
32 },
33 "repetition": {
34 "prototype": "montage/ui/repetition.reel",
35 "properties": {
36 "element": {"#": "declaration-list"},
37 "contentController": {"@": "arrayController"}
38 }
39 },
40 "styleItem": {
41 "prototype": "js/panels/css-panel/css-style.reel",
42 "properties": {
43 "element" : {"#": "style-item"},
44 "declaration": {"@": "owner"}
45 },
46 "bindings": {
47 "sourceObject" : {
48 "boundObject": {"@": "repetition"},
49 "boundObjectPropertyPath": "objectAtCurrentIteration"
50 },
51 "delegate": {
52 "boundObject": {"@": "owner"},
53 "boundObjectPropertyPath": "focusDelegate"
54 }
55 }
56 }
57
58 }
59 </script>
60</head>
61<body>
62<div id="container">
63 <dl data-montage-id="declaration-list" class="declaration-list">
64 <div data-montage-id="style-item"></div>
65 </dl>
66</div>
67</body>
68</html> \ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
new file mode 100644
index 00000000..80d8ff7b
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,261 @@
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.StyleDeclaration = Montage.create(Component, {
12 cssText : {
13 value: null
14 },
15 focusDelegate : {
16 value: null
17 },
18 includeEmptyStyle : {
19 value: true
20 },
21 styles : {
22 value: [],
23 distinct: true
24 },
25
26 templateDidLoad : {
27 value: function() {
28 console.log("Style declaration - template did load");
29
30 if(this.focusDelegate) {
31 //this.treeController.delegate = this.focusDelegate;
32 this.styleComponent.delegate = this.focusDelegate;
33 }
34 }
35 },
36 prepareForDraw : {
37 value: function(e) {
38 console.log("Style Declaration :: prepare for draw");
39 this._element.addEventListener('drop', this, false);
40 this.element.addEventListener('dragenter', this, false);
41 this.element.addEventListener('dragleave', this, false);
42 }
43 },
44 _declaration: {
45 value: null
46 },
47 declaration: {
48 get: function() {
49 return this._declaration;
50 },
51 set: function(dec) {
52 if(this._declaration) {
53 this.arrayController.removeObjects(this.styles);
54 }
55console.log("dec being set", this);
56 this._declaration = dec;
57
58 this.cssText = dec.cssText;
59
60 Array.prototype.slice.call(dec).forEach(function(prop, index) {
61 this.styles.push({
62 name: prop,
63 value: dec.getPropertyValue(prop)
64 });
65
66 }, this);
67
68 if(this.includeEmptyStyle) {
69 this.styles.push({
70 "name": "property",
71 "value" : "value",
72 "isEmpty": true
73 });
74 }
75 ///// creates data structure to use with tree component
76 //this.buildStyleTree();
77
78// if(this.includeEmptyStyle) {
79// this.styleTree.properties.push({
80// "name": "property",
81// "value" : "value",
82// "isEmpty": true
83// });
84// }
85
86 this.needsDraw = true;
87 }
88 },
89
90 update : {
91 value: function() {
92 if(this.declaration.cssText !== this.cssText) {
93 ///// Needs update
94//debugger;
95
96 this.styles = null;
97 this.styles = [];
98
99 Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
100 this.styles.push({
101 name: prop,
102 value: this.declaration.getPropertyValue(prop)
103 });
104
105 }, this);
106
107 if(this.includeEmptyStyle) {
108 this.styles.push({
109 "name": "property",
110 "value" : "value",
111 "isEmpty": true
112 });
113 }
114//debugger;
115 this.needsDraw = true;
116 }