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