diff options
author | Eric Guzman | 2012-03-12 15:29:37 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-12 15:29:37 -0700 |
commit | 7a28932ba8a7517bbaaabe1f5edf678416aafc9c (patch) | |
tree | fa1cb39de4a3bf9bc3a5a7c5db043e55cee64975 /js | |
parent | ec862af55e5c3d564b37eac2744a1a6815f81f4d (diff) | |
download | ninja-7a28932ba8a7517bbaaabe1f5edf678416aafc9c.tar.gz |
CSS Panel - Adding declaration, style (tree leaf), and style shorthand (tree branch) components
Diffstat (limited to 'js')
11 files changed, 692 insertions, 0 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css new file mode 100644 index 00000000..7f1b0f7f --- /dev/null +++ b/js/panels/css-panel/declaration.reel/declaration.css | |||
@@ -0,0 +1,6 @@ | |||
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 | |||
diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html new file mode 100644 index 00000000..1f680997 --- /dev/null +++ b/js/panels/css-panel/declaration.reel/declaration.html | |||
@@ -0,0 +1,57 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No 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 | <script type="text/montage-serialization"> | ||
11 | { | ||
12 | "owner": { | ||
13 | "module" : "js/panels/css-panel/declaration.reel", | ||
14 | "name" : "Declaration", | ||
15 | "properties" : { | ||
16 | "element" : {"#" : "container"} | ||
17 | } | ||
18 | }, | ||
19 | "styleShorthand": { | ||
20 | "module": "js/panels/css-panel/style-shorthand.reel", | ||
21 | "name": "StyleShorthand" | ||
22 | }, | ||
23 | "treeController": { | ||
24 | "module": "js/controllers/tree-controller", | ||
25 | "name": "TreeController", | ||
26 | "properties" : { | ||
27 | "branchKey" : "properties", | ||
28 | "labelKey" : "name", | ||
29 | |||
30 | "delegate": {"@": "owner" } | ||
31 | }, | ||
32 | "bindings": { | ||
33 | "content": { | ||
34 | "boundObject": {"@": "owner"}, | ||
35 | "boundObjectPropertyPath": "styleTree" | ||
36 | } | ||
37 | } | ||
38 | }, | ||
39 | "treeView" : { | ||
40 | "module" : "js/components/treeview/treeview.reel", | ||
41 | "name" : "Treeview", | ||
42 | "properties" : { | ||
43 | "element" : {"#": "declaration-list"}, | ||
44 | "branchComponent" : {"@": "styleShorthand" }, | ||
45 | "contentController": {"@": "treeController"}, | ||
46 | "showRoot" : false | ||
47 | } | ||
48 | } | ||
49 | } | ||
50 | </script> | ||
51 | </head> | ||
52 | <body> | ||
53 | <div id="container"> | ||
54 | <dl id="declaration-list" class="declaration-list"></dl> | ||
55 | </div> | ||
56 | </body> | ||
57 | </html> \ No newline at end of file | ||
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js new file mode 100644 index 00000000..34819df5 --- /dev/null +++ b/js/panels/css-panel/declaration.reel/declaration.js | |||
@@ -0,0 +1,105 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); | ||
10 | |||
11 | exports.Declaration = Montage.create(Component, { | ||
12 | templateDidLoad : { | ||
13 | value: function() { | ||
14 | console.log("declaration - template did load"); | ||
15 | } | ||
16 | }, | ||
17 | _declaration: { | ||
18 | value: null | ||
19 | }, | ||
20 | declaration: { | ||
21 | get: function() { | ||
22 | return this._declaration; | ||
23 | }, | ||
24 | set: function(dec) { | ||
25 | this._declaration = dec; | ||
26 | console.log('here'); | ||
27 | ///// creates data structure to use with tree component | ||
28 | this.buildStyleTree(); | ||
29 | console.log('there'); | ||
30 | this.needsDraw = true; | ||
31 | } | ||
32 | }, | ||
33 | |||
34 | buildStyleTree : { | ||
35 | value: function() { | ||
36 | var styles = Array.prototype.slice.call(this._declaration).sort(); | ||
37 | this.styleTree = { | ||
38 | properties : styles.map(this.styleTreeMapper, this) | ||
39 | }; | ||
40 | } | ||
41 | }, | ||
42 | styleTreeMapper : { | ||
43 | value: function arrayToTreeMapper(property, i, styleArray) { | ||
44 | var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property], | ||
45 | subProps, hasAll; | ||
46 | |||
47 | ///// Is this a sub property of a shorthand property? | ||
48 | if(shorthands) { | ||
49 | //debugger; | ||
50 | ///// Yes. | ||
51 | ///// Now, are all sub properties in the declaration? | ||
52 | subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]]; | ||
53 | hasAll = subProps.every(function(subProp) { | ||
54 | return styleArray.indexOf(subProp) !== -1; | ||
55 | }); | ||
56 | |||
57 | if(hasAll) { | ||
58 | ///// It has all sub properties | ||
59 | ///// Let's return a tree branch and remove the | ||
60 | ///// sub properties from the flat array | ||
61 | |||
62 | this._removeItemsFromArray(styleArray, subProps); | ||
63 | |||
64 | return { | ||
65 | name: shorthands[0], | ||
66 | value: this._declaration.getPropertyValue(shorthands[0]), | ||
67 | properties: subProps.map(function(p, i, array) { | ||
68 | return { | ||
69 | name: p, | ||
70 | value: this._declaration.getPropertyValue(p) | ||
71 | }; | ||
72 | }, this) | ||
73 | }; | ||
74 | } | ||
75 | } | ||
76 | |||
77 | |||
78 | return { | ||
79 | name: property, | ||
80 | value: this._declaration.getPropertyValue(property) | ||
81 | }; | ||
82 | } | ||
83 | }, | ||
84 | _removeItemsFromArray : { | ||
85 | value: function(array, items) { | ||
86 | items.forEach(function(item) { | ||
87 | var index = array.indexOf(item); | ||
88 | array.splice(index, 1); | ||
89 | }, this); | ||
90 | } | ||
91 | }, | ||
92 | styleTree : { | ||
93 | value: { | ||
94 | "properties" : [] | ||
95 | }, | ||
96 | distinct: true | ||
97 | }, | ||
98 | draw: { | ||
99 | value: function() { | ||
100 | if(this._declaration) { | ||
101 | |||
102 | } | ||
103 | } | ||
104 | } | ||
105 | }); \ No newline at end of file | ||
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html new file mode 100644 index 00000000..6c6ecfed --- /dev/null +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html | |||
@@ -0,0 +1,44 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No 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 | <script type="text/montage-serialization"> | ||
11 | { | ||
12 | "owner": { | ||
13 | "module" : "js/panels/css-panel/rule-list-container.reel", | ||
14 | "name" : "RuleListContainer", | ||
15 | "properties" : { | ||
16 | "element" : {"#" : "container"}, | ||
17 | "ruleListComponent": {"@": "ruleList"} | ||
18 | } | ||
19 | }, | ||
20 | "ruleList": { | ||
21 | "module" : "js/panels/css-panel/rule-list.reel", | ||
22 | "name": "RuleList", | ||