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.html81
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js321
3 files changed, 415 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..b1381bc6
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -0,0 +1,81 @@
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 "source" : {
48 "boundObject": {"@": "repetition"},
49 "boundObjectPropertyPath": "objectAtCurrentIteration",
50 "oneway": true
51 },
52 "propertyText" : {
53 "boundObject": {"@": "repetition"},
54 "boundObjectPropertyPath": "objectAtCurrentIteration.name"
55 },
56 "valueText" : {
57 "boundObject": {"@": "repetition"},
58 "boundObjectPropertyPath": "objectAtCurrentIteration.value"
59 },
60 "empty" : {
61 "boundObject": {"@": "repetition"},
62 "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
63 },
64 "delegate": {
65 "boundObject": {"@": "owner"},
66 "boundObjectPropertyPath": "focusDelegate"
67 }
68 }
69 }
70
71 }
72 </script>
73</head>
74<body>
75<div id="container">
76 <dl data-montage-id="declaration-list" class="declaration-list">
77 <div data-montage-id="style-item"></div>
78 </dl>
79</div>
80</body>
81</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..8e364d0d
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,321 @@
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 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 },