aboutsummaryrefslogtreecommitdiff
path: root/js/panels/CSSPanel/ComputedStyleSubPanel.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/panels/CSSPanel/ComputedStyleSubPanel.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/panels/CSSPanel/ComputedStyleSubPanel.reel')
-rw-r--r--js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html48
-rw-r--r--js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js192
-rw-r--r--js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css62
3 files changed, 302 insertions, 0 deletions
<
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
new file mode 100644
index 00000000..c30d2fb4
--- /dev/null
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
@@ -0,0 +1,48 @@
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>
8<head>
9 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
10 <title>ComputedStyleSubPanel</title>
11 <link href="computed-style-sub-panel.css" type="text/css" rel="stylesheet">
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
16 "name": "ComputedStyleSubPanel",
17 "properties": {
18 "element": {"#": "nj-css-panel-computed"},
19 "groupDropDown": {"#": "nj-css-group-select"},
20 "searchField": {"#": "nj-css-filter"},
21 "computedListEl": {"#": "nj-css-computed-list"}
22 }
23 }
24
25 }
26 </script>
27
28</head>
29<body id="computestylesubpanel" onload="">
30 <div id="nj-css-panel-computed" class="nj-css-panel-hide">
31 <div id="nj-css-filter-panel">
32 <input id="nj-css-filter" class="nj-skinned" type="search">
33 <select id="nj-css-group-select" class="nj-skinned">
34 <option value="all">All</option>
35 <option value="summary" selected>Summary</option>
36 <option value="background">Background</option>
37 <option value="dimensions">Dimensions</option>
38 <option value="border">Border</option>
39 <option value="font">Font</option>
40 <option value="layout">Layout</option>
41 </select>
42 </div>
43 <div class="nj-sub-panel">
44 <dl id="nj-css-computed-list" class="nj-css-style-list"></dl>
45 </div>
46 </div>
47</body>
48</html> \ No newline at end of file
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
new file mode 100644
index 00000000..0e1cf206
--- /dev/null
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
@@ -0,0 +1,192 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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 nj = require("js/lib/NJUtils.js").NJUtils;
10
11
12exports.ComputedStyleSubPanel = Montage.create(Component, {
13 groupDropDown: { value: null },
14 computedListEl: { value: null },
15 searchField: { value: null },
16
17 templateDidLoad : {
18 value : function() {
19 ///// Set current filter group
20 this._group = this.groupDropDown.value;
21 ///// Set up event listeners
22 this.groupDropDown.addEventListener('change', this);
23 this.searchField.addEventListener('input', this);
24 }
25 },
26 // prepareForDraw : {
27 // value: function() {
28 //
29 // }
30 // },
31 willDraw : {
32 value: function() {
33 if(this._declaration) {
34
35 var group = this.staticGroupingMap[this._group],
36 matchedInGroup, elementList;
37
38 if(this._group === 'all' && !group) {
39 group = this.staticGroupingMap['all'] = nj.toArray(this._declaration).sort();
40 }
41
42 ///// Filter group to show only the styles that match search filter
43 matchedInGroup = group.filter(function(item) {
44 return (item.indexOf(this._filter) > -1);
45 }, this);
46
47 this._elementList = matchedInGroup.map(function(propName) {
48 var propEl = nj.make('dt'),
49 valEl = nj.make('dd'),
50 contEl = nj.make('div');
51
52 propEl.appendChild(nj.textNode(propName));
53 propEl.title = propName;
54
55 valEl.appendChild(nj.textNode(this._declaration.getPropertyValue(propName)));
56 valEl.title = this._declaration.getPropertyValue(propName);
57
58 contEl.appendChild(propEl);
59 contEl.appendChild(valEl);
60
61 return contEl;
62 }, this);
63
64 /*if(matchedInGroup.length) {
65
66 } else {
67
68 }*/
69 }
70 }
71 },
72 // The draw function appends the element list to the dom
73 draw: {
74 value: function() {
75 if(this._elementList) {
76 this.clearList();
77 ///// Append style elements to the list container
78 this._elementList.forEach(function(el) {
79 this.computedListEl.appendChild(el);
80 }, this);
81 }
82 }
83 },
84 clearList : {
85 value: function() {
86 nj.empty(this.computedListEl);
87 }
88 },
89 ///// Drop down has changed values
90 handleChange : {
91 value: function(e) {
92 this._group = this.groupDropDown.value;
93 this.needsDraw = true;
94 }
95 },
96 ///// Text input has changed values
97 handleInput : {
98 value : function(e) {
99 this._filter = this.searchField.value.trim();
100 this.needsDraw = true;
101 }
102 },
103 // Publicly accessible list of computed styles
104 declaration : {
105 get: function() {
106 return this._declaration;
107 },
108 ////// Accepts a CSSStyleDeclaration object, or dom element
109 set: function(source) {
110 var declaration, styles;
111 if(source.constructor.name === 'CSSStyleDeclaration') {
112 declaration = this._declaration = source;
113 } else {
114 ///// Get computed style of passed in node
115 declaration = this._declaration = source.ownerDocument.defaultView.getComputedStyle(source);
116 }
117
118 this.needsDraw = true;
119 }
120 },
121 ///// Renders the styles for the current node
122 show : {
123 value : function() {
124 this.element.classList.remove(this._cssClasses.hide);
125 }
126 },
127 hide : {
128 value : function() {
129 this.element.classList.add(this._cssClasses.hide);
130 }
131 },
132 ///// Private
133 //// Stores the current CSSDeclaration object returned by getComputedStyle
134 //// which is needed to get property values
135 _declaration : {
136 enumerable: false,
137 value : null
138 },
139 ///// List of elements to append to style list
140 _elementList : {
141 value: null
142 },
143 ///// Group selected in drop down
144