source: trunk/termtv/js/display.js@ 18350

Last change on this file since 18350 was 17409, checked in by tbretz, 11 years ago
Enable strict mode.
File size: 9.7 KB
Line 
1'use strict';
2
3/**
4 * @class TTVDisplay
5 * @constructor
6 * @public
7 *
8 * Creates a div Node which contains a TTVPlayer and returns this.
9 * Options are partially passed through to the TTVPlayer object.
10 * Overwites the options 'onclose', 'onready', 'onupdate',
11 * 'oncompletion', 'onbookmark', 'onpause', 'onplay' and 'callback'.
12 *
13 * @param {Object} options
14 * <ul>
15 * <li> title: if the title is not undefined or an empty string
16 * it is used as the title bar title. Otherwise the filename
17 * of the url is used excluding the extions .rec and .tty
18 * <li> controls: if defined, controls are displayed in a status bar
19 * <li> debug: the debug property is converted to the debugLevel
20 * property and an own debug handler is setup
21 * </ul>
22 *
23 * @returns {Node}
24 * A div-element container all the html nodes is returned.
25 *
26 */
27function TTVDisplay(options)
28{
29 var name;
30 if (options['title'] || options['title']==="")
31 name = options['title'];
32 else
33 {
34 name = options['name'].split('/').reverse()[0];
35 var ext = name.substr(-4, 4);
36 if (ext==".rec" || ext==".tty")
37 name = name.substr(0, name.length-4);
38 }
39
40 var div = document.createElement("div");
41 div.setAttribute("class", "tty");
42 div.setAttribute("style", "display:none;");
43
44 var table = document.createElement("table");
45 table.setAttribute("class", "tty");
46 table.id = "table";
47
48 // ------------- first row ---------------
49
50 var tr1 = document.createElement("tr");
51
52 var td11 = document.createElement("td");
53 var td12 = document.createElement("td");
54 var td13 = document.createElement("td");
55
56 var img11 = document.createElement("img");
57 var img13 = document.createElement("img");
58
59 var txt12 = document.createTextNode(name);
60
61 tr1.setAttribute("class", "tty");
62 tr1.id = "row1";
63
64 td11.setAttribute("class", "tty");
65 td12.setAttribute("class", "tty");
66 td13.setAttribute("class", "tty");
67 td11.id = "cell11";
68 td12.id = "cell12";
69 td13.id = "cell13";
70
71 img11.setAttribute("class", "tty")
72 img11.id = "img11";
73
74 img13.setAttribute("class", "tty");
75 img13.id = "img13";
76
77 if (options['onclose'])
78 img13.onclick = options['onclose'];
79
80 td11.appendChild(img11);
81 td12.appendChild(txt12);
82 td13.appendChild(img13);
83
84 tr1.appendChild(td11);
85 tr1.appendChild(td12);
86 tr1.appendChild(td13);
87
88 table.appendChild(tr1);
89
90 // ------------- second row ---------------
91
92 var tr2 = document.createElement("tr");
93
94 tr2.setAttribute("class", "tty");
95 tr2.id = "row2";
96
97 var td21 = document.createElement("td");
98
99 td21.setAttribute("class", "tty");
100 td21.id = "cell21";
101
102 var canvas = document.createElement("canvas");
103 canvas.setAttribute("class", "tty");
104 canvas.id = "canvas";
105
106 td21.setAttribute("colspan", "3");
107
108 canvas.width = 1;
109 canvas.height = 1;
110
111 td21.appendChild(canvas);
112 tr2.appendChild(td21);
113
114 table.appendChild(tr2);
115
116 // ------------- third row ---------------
117
118 var tr3 = document.createElement("tr");
119
120 tr3.setAttribute("class", "tty");
121 tr3.id = "row3";
122
123 var td31 = document.createElement("td");
124 var td32 = document.createElement("td");
125 var td33 = document.createElement("td");
126
127 td31.setAttribute("class", "tty");
128 td32.setAttribute("class", "tty");
129 td33.setAttribute("class", "tty");
130 td31.id = "cell31";
131 td32.id = "cell32";
132 td33.id = "cell33";
133
134 var txt31 = document.createTextNode("TermTV");
135
136 var input321 = document.createElement("span");
137 var input322a = document.createElement("span");
138 var input322b = document.createElement("span");
139 var input326 = document.createElement("span");
140 var input327a = document.createElement("span");
141 var input327b = document.createElement("span");
142 var input33 = document.createElement("span");
143
144 var span323 = document.createElement("span");
145 var span325 = document.createElement("span");
146
147 var progress324 = document.createElement("progress");
148
149 var txt323 = document.createTextNode("00:00:00");
150 var txt325 = document.createTextNode("00:00:00");
151
152 input322b.setAttribute("style", "display:none;");
153 input327b.setAttribute("style", "display:none;");
154
155 input321.setAttribute("class", "tty")
156 input322a.setAttribute("class", "tty")
157 input322b.setAttribute("class", "tty")
158 input326.setAttribute("class", "tty")
159 input327a.setAttribute("class", "tty")
160 input327b.setAttribute("class", "tty")
161 input33.setAttribute( "class", "tty")
162 input321.id = "input321";
163 input322a.id = "input322a";
164 input322b.id = "input322b";
165 input326.id = "input326";
166 input327a.id = "input327a";
167 input327b.id = "input327b";
168 input33.id = "input33";
169
170 input33.onclick = function() {
171 var img = canvas.toDataURL("image/png");
172 img = img.replace("image/png", "image/octet-stream");
173 document.location.href = img;
174 return false;
175 }
176
177 span323.setAttribute("class", "tty");
178 span325.setAttribute("class", "tty");
179 span323.id = "span323";
180 span325.id = "span325";
181
182 progress324.max = 1;
183 progress324.value = 0;
184
185 span323.appendChild(txt323);
186 span325.appendChild(txt325);
187
188 td31.appendChild(txt31);
189
190 td32.appendChild(input321);
191 td32.appendChild(input322a);
192 td32.appendChild(input322b);
193 td32.appendChild(span323);
194 td32.appendChild(progress324);
195 td32.appendChild(span325);
196 td32.appendChild(input326);
197 td32.appendChild(input327a);
198 td32.appendChild(input327b);
199
200 td33.appendChild(input33);
201
202 tr3.appendChild(td31);
203 tr3.appendChild(td32);
204 tr3.appendChild(td33);
205
206 if (options['controls'])
207 table.appendChild(tr3);
208
209 // ------------- fourth row ---------------
210
211 var tr4 = document.createElement("tr");
212 var td4 = document.createElement("td");
213 var div4 = document.createElement("div");
214
215 td4.setAttribute("style", "max-width:1px;");
216
217 td4.setAttribute("colspan", "3");
218
219 div4.setAttribute("class", "tty");
220 div4.id = "div4";
221 div4.onscroll = function()
222 {
223 div4.userControl = div4.scrollHeight - div4.scrollTop!=div4.clientHeight;
224 }
225
226 td4.appendChild(div4);
227
228 tr4.appendChild(td4);
229
230 if (options['debug'])
231 table.appendChild(tr4);
232
233 // -----------------------------------------
234
235 div.appendChild(table);
236
237 // ============================================
238
239 if (options['debug'])
240 {
241 var lvl = parseInt(options['debug'], 10);
242 options['debugLevel'] = options['debug'];
243 options['debug'] = function(msg) {
244 if (!msg)
245 return;
246
247 if (lvl==1 && msg.substr(9, 3)=="emu") // emulate.js:
248 return;
249
250 if (msg.substr(9, 3)=="par") // parse.js
251 {
252 var sp = document.createElement("div");
253 sp.setAttribute("style", "color:green");
254 sp.appendChild(document.createTextNode(msg));
255 div4.appendChild(sp);
256 }
257 else
258 {
259 div4.appendChild(document.createTextNode(msg));
260 div4.appendChild(document.createElement("br"));
261 }
262
263 if (!div4.userControl)
264 div4.scrollTop = div4.scrollHeight;
265 }
266 }
267 else
268 options['debug'] = function() { }
269
270
271 function pad(v) { return ('0'+v).slice(-2); }
272
273 options['onready'] = function(dat) {
274 txt325.nodeValue = pad(dat.getUTCHours())+":"+pad(dat.getUTCMinutes())+":"+pad(dat.getUTCSeconds());
275 div.style.display = 'inherit';
276 }
277
278 options['callback'] = function(arg)
279 {
280 if (arg.title)
281 {
282 var title = name;
283 if (title.length)
284 title += ": ";
285 if (arg.title)
286 title += arg.title;
287 //if (arg.icon)
288 // title += "["+arg.icon+"]";
289
290 txt12.nodeValue = title;
291 }
292
293 if (arg.border)
294 {
295 var w = (arg.width||0)+"px ";
296 td21.oldStyle = td21.getAttribute("style");
297 td21.setAttribute("style", "padding:"+w+w+w+w+"; background-color:"+arg.border+";");
298 }
299 if (arg.border==null)
300 {
301 if (td21.oldStyle)
302 td21.setAttribute("style", td21.oldStyle);
303 }
304 }
305
306 options['onupdate'] = function(dat, frac) {
307 txt323.nodeValue = pad(dat.getUTCHours())+":"+pad(dat.getUTCMinutes())+":"+pad(dat.getUTCSeconds());
308 progress324.value = frac;
309 }
310
311 options['oncompletion'] = function() {
312 input322b.setAttribute("style", "display:none;");
313 input322a.setAttribute("style", "display:inline;");
314 txt323.nodeValue = "--:--:--";
315 }
316
317 options['onbookmark'] = function() {
318 input327a.setAttribute("style", "display:none;");
319 input327b.setAttribute("style", "display:inline;");
320 }
321
322 options['onpause'] = function() {
323 input322b.setAttribute("style", "display:none;");
324 input322a.setAttribute("style", "display:inline;");
325 }
326 options['onplay'] = function() {
327 input322a.setAttribute("style", "display:none;");
328 input322b.setAttribute("style", "display:inline;");
329 }
330
331 div.player = new TTVPlayer(canvas, options);
332
333 input321.onclick = function() { div.player.rewind(); }
334 input322a.onclick = function() { div.player.playpause(); }
335 input322b.onclick = function() { div.player.playpause(); }
336 input326.onclick = function() { div.player.setBookmark(); }
337 input327a.onclick = function() { div.player.jump(); }
338 input327b.onclick = function() { div.player.jump(); }
339
340 return div;
341}
342
343// This is a hack to avoid that the closure compiler will rename
344// these functions
345window['TTVDisplay'] = TTVDisplay;
Note: See TracBrowser for help on using the repository browser.