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

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