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