aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-declaration.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-declaration.reel')
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.css13
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.html75
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js296
3 files changed, 384 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..6be8d33c
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -0,0 +1,13 @@
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
8.declaration-list {
9 margin-top: 4px;
10}
11.drag-over {
12 /*background-color: red;*/
13} \ 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..fced7d7a
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -0,0 +1,75 @@
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 }
30 }
31 },
32 "repetition": {
33 "prototype": "montage/ui/repetition.reel",
34 "properties": {
35 "element": {"#": "declaration-list"},
36 "contentController": {"@": "arrayController"}
37 }
38 },
39 "styleItem": {
40 "prototype": "js/panels/css-panel/css-style.reel",
41 "properties": {
42 "element" : {"#": "style-item"},
43 "declaration": {"@": "owner"}
44 },
45 "bindings": {
46 "propertyText" : {
47 "boundObject": {"@": "repetition"},
48 "boundObjectPropertyPath": "objectAtCurrentIteration.name"
49 },
50 "valueText" : {
51 "boundObject": {"@": "repetition"},
52 "boundObjectPropertyPath": "objectAtCurrentIteration.value"
53 },
54 "empty" : {
55 "boundObject": {"@": "repetition"},
56 "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
57 },
58 "delegate": {
59 "boundObject": {"@": "owner"},
60 "boundObjectPropertyPath": "focusDelegate"
61 }
62 }
63 }
64
65 }
66 </script>
67</head>
68<body>
69<div id="container">
70 <dl data-montage-id="declaration-list" class="declaration-list">
71 <div data-montage-id="style-item"></div>
72 </dl>
73</div>
74</body>
75</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..61a65099
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,296 @@
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 : { value: null },
13 focusDelegate : { value: null },
14 needsSort : { value: null },
15
16 includeEmptyStyle : {
17 value: true,
18 distinct: true
19 },
20 styles : {
21 value: [],
22 distinct: true
23 },
24
25 _styleSortFunction : {
26 value: function(styleA, styleB) {
27 ///// If the style is an empty style (with Add button)
28 ///// push to end of declaration
29 if(styleA.isEmpty) {
30 return 1;
31 } else if (styleB.isEmpty) {
32 return -1;
33 }
34
35 ///// Alphabetic sort based on property name
36 if (styleA.name < styleB.name) {
37 return -1;
38 } else if (styleA.name > styleB.name) {
39 return 1;
40 } else {
41 return 0;
42 }
43 }
44 },
45 _styleFilterFunction: {
46 value: function(style, styleArray) {
47 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[style.name];
48
49 ///// No shorthands, return true to include style
50 if(!shorthands) { return true; }
51
52 var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
53 stylesArray = styleArray,
54 hasAll;
55
56 debugger;
57 hasAll = subProps.every(function(subProp) {
58 debugger;
59 return this.declaration[subProp];
60 }, this);
61
62 if(hasAll) {
63 return false;
64 }
65 }
66 },
67
68 _declaration: {
69 value: null
70 },
71 declaration: {
72 get: function() {
73 return this._declaration;
74 },
75 set: function(dec) {
76 var stylesArray;
77
78 if(this._declaration) {
79 this.styles = null;
80 this.styles = [];
81 }
82
83 ///// Take snapshot of declaration
84 this.cssText = dec.cssText;
85
86 stylesArray = Array.prototype.slice.call(dec);
87
88 if(this.includeEmptyStyle) {
89 this.styles.push({
90 name : "property",
91 value : "value",
92 isEmpty : true
93 });
94 }
95
96 stylesArray.forEach(function(prop, index) {
97 this.styles.push({
98 name: prop,
99 value: dec.getPropertyValue(prop)
100 });
101 }, this);
102
103 this._declaration = dec;
104 this.needsDraw = this.needsSort = true;
105 }
106 },
107
108 styleShorthander : {
109 value: function(styles) {
110 var shorthandsToAdd = [],
111 subProps, hasAll;
112
113 styles.forEach(function(property, index, styleArray) {
114 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];