Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 229 lines (198 sloc) 6.722 kB
bb4d189 @sstephenson prototype: Reorganize the source tree.
authored
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6 <title>Prototype object browser</title>
7 <style type="text/css" media="screen">
8 body {
9 font-family: Lucida Grande, Verdana, sans-serif;
10 font-size: 13px;
11 }
12
13 .inspector {
14 margin: 1%;
15 float: left;
16 width: 31%;
17 border: 1px solid #ccc;
18 background-color: white;
19 }
20
21 .inspector h2 {
22 font-size: 13px;
23 margin: 0;
24 text-align: center;
25 padding: 5px;
26 background-color: #e6e6e6;
27 border-bottom: 1px solid #999;
28 }
29
30 .inspector ul {
31 height: 200px;
32 overflow: auto;
33 margin: 0;
34 padding-left: 0;
35 }
36
37 .inspector li {
38 cursor: pointer;
39 list-style-type: none;
40 padding: 2px 5px 2px 30px;
41 color: #333;
42 }
43
44 .inspector li.selected {
45 background-color: #888;
46 color: #fff;
47 }
48
49 .inspector.active li.selected {
50 background-color: #1a76fd;
51 color: #fff;
52 }
53
54 #path, #value {
55 width: 97%;
56 margin: 1%;
57 }
58
59 #path {
60 margin-bottom: 0;
61 border: 1px solid #ccc;
62 border-bottom: 1px solid #999;
63 background-color: #e6e6e6;
64 }
65
66 #value {
67 margin-top: 0;
68 border: 1px solid #ccc;
69 border-top: none;
70 overflow: auto;
71 }
72
73 #path_content, #value_content {
74 display: block;
75 padding: 15px 30px 15px 30px;
76 }
77
78 </style>
79 <script type="text/javascript" src="../dist/prototype.js"></script>
80 <script type="text/javascript">
81 var Browser = Class.create();
82 Browser.prototype = {
83 initialize: function(element, name, value, options) {
84 this.element = $(element);
85 this.name = name;
86 this.value = value;
87 this.history = [];
88 Object.extend(this, options || {});
89 this.reset();
90 },
91
92 reset: function() {
93 this.go(this.name, this.value);
94 },
95
96 refresh: function() {
97 var children = $A(this.element.childNodes),
98 history = this.history.toArray(),
99 elements = history.slice(-3).pluck('element');
100
101 children.each(function(element) {
102 if (element && !elements.include(element))
103 this.element.removeChild(element);
104 }.bind(this));
105
106 children = $A(this.element.childNodes);
107
108 elements.each(function(element, index) {
109 Element.removeClassName(element, 'active');
110 var child = children[index];
111 if (!child)
112 this.element.appendChild(element);
113 else if (!element.parentNode)
114 this.element.insertBefore(element, child);
115 }.bind(this));
116
117 this.setTitle();
118 this.setValue();
119 },
120
121 setTitle: function() {
122 if (this.titleElement)
123 this.titleElement.innerHTML =
124 this.history.pluck('name').invoke('escapeHTML').join('.');
125 },
126
127 setValue: function() {
128 if (this.valueElement)
129 this.valueElement.innerHTML =
130 this.currentValue().escapeHTML() + '&nbsp;';
131 },
132
133 currentValue: function() {
134 try {
135 return Object.inspect(this.current());
136 } catch (e) {
137 return '(Internal Function)';
138 }
139 },
140
141 current: function() {
142 return this.history.last().value;
143 },
144
145 go: function(name, value) {
146 var from = this.history.last();
147 this.history.push(new Inspector(this, name, value));
148 this.refresh();
149 if (from)
150 Element.addClassName(from.element, 'active');
151 }
152 }
153
154 var Inspector = Class.create();
155 Inspector.prototype = {
156 initialize: function(browser, name, value) {
157 this.browser = browser;
158 this.name = name;
159 this.value = value;
160 this.id = 'inspector_' + new Date().getTime();
161 this.history = this.browser.history.toArray();
162 this.history.push(this);
163 this.createElement();
164 this.populate();
165 },
166
167 properties: function() {
168 var properties = [];
169 for (var property in this.value)
170 properties.push(property);
171 properties.sort();
172 return properties;
173 },
174
175 createElement: function() {
176 var element = document.createElement('div');
177 element.className = 'inspector';
178 element.id = this.id;
179 this.element = element;
180
181 var title = document.createElement('h2');
182 title.innerHTML = this.name.toString().escapeHTML();
183 this.titleElement = title;
184
185 var list = document.createElement('ul');
186 this.listElement = list;
187
188 element.appendChild(title);
189 element.appendChild(list);
190 },
191
192 populate: function() {
193 this.properties().each(function(property) {
194 var li = document.createElement('li');
195 li.innerHTML = property.toString().escapeHTML();
196 li.onclick = this.select.bind(this, li);
197 li._property = property;
198 this.listElement.appendChild(li);
199 }.bind(this));
200 },
201
202 select: function(element) {
203 this.unselect();
204 Element.addClassName(element, 'selected');
205 this.selectedProperty = element;
206 this.browser.history = this.history.toArray();
207 this.browser.go(element._property, this.value[element._property]);
208 },
209
210 unselect: function() {
211 if (this.selectedProperty)
212 Element.removeClassName(this.selectedProperty, 'selected');
213 this.selectedProperty = null;
214 }
215 }
216 </script>
217 </head>
218 <body>
219 <div id="browser_wrapper">
220 <div id="browser"></div>
221 <div style="clear: left"></div>
222 </div>
223 <h1 id="path"><span id="path_content"></span></h1>
224 <pre id="value"><div id="value_content"></div></pre>
225 <script type="text/javascript">
226 new Browser('browser', 'window', window, {titleElement: $('path_content'), valueElement: $('value_content')})
227 </script>
228 </body>
229 </html>
Something went wrong with that request. Please try again.