1 /* |
|
2 * Call this function when window is ready |
|
3 */ |
|
4 window.onload = function() |
|
5 { |
|
6 |
|
7 // Attach events to Resolution Options & Orientation select |
|
8 $('deviceResolution').onchange = function(ele){ |
|
9 if(ele.target != undefined) |
|
10 ele = ele.target; |
|
11 |
|
12 Emulator.cur_device = ele.options[ele.selectedIndex].value; |
|
13 Emulator.setDeviceLabels(SUPPORTED_DEVICES[Emulator.cur_device]); |
|
14 |
|
15 // save the selected device details |
|
16 createCookie('DEVICE_NAME', Emulator.cur_device); |
|
17 } |
|
18 |
|
19 /* |
|
20 * Toggle b/w Portrait / Landscape mode |
|
21 */ |
|
22 $('DisplayOrientation_portrait').onclick = function(ele){ |
|
23 |
|
24 if(ele.target != undefined) |
|
25 ele = ele.target; |
|
26 if(Emulator.orientation_mode != 'portrait') |
|
27 Emulator.changeOrientation(ele); |
|
28 } |
|
29 |
|
30 $('DisplayOrientation_landscape').onclick = function(ele){ |
|
31 |
|
32 if(ele.target != undefined) |
|
33 ele = ele.target; |
|
34 if(Emulator.orientation_mode != 'landscape') |
|
35 Emulator.changeOrientation(ele); |
|
36 } |
|
37 $('Toolbar').style.right = "-320px"; |
|
38 |
|
39 |
|
40 // Toggle ToolBar Show/Hide |
|
41 $('pullDown').onclick = function() |
|
42 { |
|
43 if(is_toolbar_hidden) |
|
44 { |
|
45 showDeviceSettings(); |
|
46 } |
|
47 else |
|
48 { |
|
49 hideDeviceSettings(); |
|
50 } |
|
51 } |
|
52 |
|
53 // Toggle ToolBar Show/Hide |
|
54 $('WrapperDiv').onmouseover = function(){ |
|
55 if(!is_scrolling && !is_toolbar_hidden) |
|
56 window.setTimeout('hideDeviceSettings()', 1); |
|
57 } |
|
58 |
|
59 // Assign Soft-keys trigger to Textual links |
|
60 $("leftSoftKey").onclick = function(){ |
|
61 Emulator.triggerChildLSK(); |
|
62 } |
|
63 $("rightSoftKey").onclick = function(){ |
|
64 Emulator.triggerChildRSK(); |
|
65 } |
|
66 |
|
67 |
|
68 // Assign Soft-keys trigger to Image links |
|
69 $("leftSoftKeyImg").onclick = function(){ |
|
70 Emulator.triggerChildLSK(); |
|
71 } |
|
72 |
|
73 $("rightSoftKeyImg").onclick = function(){ |
|
74 Emulator.triggerChildRSK(); |
|
75 } |
|
76 |
|
77 // Preload Device Information |
|
78 Emulator.loadDeviceSettings(); |
|
79 |
|
80 // set the Default size to device |
|
81 Emulator.setDeviceSize(); |
|
82 |
|
83 // set the Menu Pane position |
|
84 Emulator.setMenuPane(); |
|
85 } |
|
86 |
|
87 |
|
88 /* |
|
89 * Helper function |
|
90 */ |
|
91 function $(str) |
|
92 { |
|
93 return document.getElementById(str); |
|
94 } |
|
95 |
|
96 |
|
97 /* |
|
98 * Emulator, which manages the device interacations |
|
99 */ |
|
100 |
|
101 var Emulator = {}; |
|
102 |
|
103 // Default, device screen resolution |
|
104 Emulator.cur_device = 'n78'; |
|
105 Emulator.cur_resolution = '240x320'; |
|
106 Emulator.device_cover_width = 17; |
|
107 Emulator.device_cover_height = 8; |
|
108 |
|
109 Emulator.orientation_changed = false; |
|
110 Emulator.orientation_mode = 'portrait'; // { portrait | landscape } |
|
111 |
|
112 // Flag, inidcates Menu Object created/exists in the child window |
|
113 Emulator.is_widgetMenuIntiated = false; |
|
114 |
|
115 // Used as a bridge between, Parent window & Child widget |
|
116 Emulator.parentToChild_Reference = null; |
|
117 |
|
118 // Interval ID for X-Resize |
|
119 Emulator.interval_X = null; |
|
120 |
|
121 // Interval ID for Y-Resize |
|
122 Emulator.interval_Y = null; |
|
123 |
|
124 Emulator.path = document.location.pathname; |
|
125 |
|
126 /* |
|
127 * Change the device resolution |
|
128 */ |
|
129 |
|
130 Emulator.changeResolution = function(cur_val, to_val) |
|
131 { |
|
132 |
|
133 if(!SUPPORTED_DEVICES[this.cur_device]['orientation']){ |
|
134 |
|
135 // check the Portrait mode |
|
136 $("DisplayOrientation_portrait").checked = true; |
|
137 |
|
138 $("DisplayOrientation_landscape").checked = false; |
|
139 $("DisplayOrientation_landscape").disabled = true; |
|
140 |
|
141 // update the orientation-mode |
|
142 this.orientation_mode = 'portrait'; |
|
143 |
|
144 |
|
145 // Toggle the Orientation Flag |
|
146 this.orientation_changed = false; |
|
147 |
|
148 } |
|
149 else |
|
150 $("DisplayOrientation_landscape").disabled = false; |
|
151 |
|
152 if(cur_val == to_val) |
|
153 return false; |
|
154 |
|
155 cur_val = cur_val.split('x'); |
|
156 cur_val[0] = parseInt(cur_val[0]); |
|
157 cur_val[1] = parseInt(cur_val[1]); |
|
158 |
|
159 to_val = to_val.split('x'); |
|
160 to_val[0] = parseInt(to_val[0]); |
|
161 to_val[1] = parseInt(to_val[1]); |
|
162 |
|
163 // hide the keys, if the OPTION menu is OPEN |
|
164 this.hideDeviceSoftKeys(); |
|
165 |
|
166 $('widgetIframeWindow').style.height = '100%'; |
|
167 $('menuItemsPane').style.width = to_val[0]+'px'; |
|
168 |
|
169 |
|
170 // for X |
|
171 var adjust_x = 0; |
|
172 if(cur_val[0]%10) |
|
173 { |
|
174 // decrease these many pixels |
|
175 adjust_x = ((cur_val[0]%10) * (-1)); |
|
176 } |
|
177 else if(to_val[0]%10){ |
|
178 // increase these many pixels |
|
179 adjust_x = (to_val[0]%10); |
|
180 } |
|
181 |
|
182 cur_val[0] = cur_val[0] + adjust_x; |
|
183 $('iframePreviewWindow').style.width = parseInt(cur_val[0] + adjust_x) + 'px'; |
|
184 $('device').style.width = parseInt(cur_val[0] + adjust_x) + this.device_cover_width+'px'; |
|
185 |
|
186 |
|
187 if (cur_val[0] < to_val[0]) |
|
188 { |
|
189 this.resizeDivX(cur_val[0], to_val[0], true); |
|
190 } |
|
191 else |
|
192 { |
|
193 this.resizeDivX(cur_val[0], to_val[0], false); |
|
194 } |
|
195 |
|
196 |
|
197 // for Y |
|
198 var adjust_y = 0; |
|
199 if(cur_val[1]%10) |
|
200 { |
|
201 // decrease these many pixels |
|
202 adjust_y = ((cur_val[1]%10) * (-1)); |
|
203 } |
|
204 else if(to_val[1]%10){ |
|
205 // increase these many pixels |
|
206 adjust_y = (to_val[1]%10); |
|
207 } |
|
208 cur_val[1] = cur_val[1] + adjust_y; |
|
209 |
|
210 $('iframePreviewWindow').style.height = parseInt(cur_val[1] + adjust_y) + 'px'; |
|
211 $('device').style.height = parseInt(cur_val[1] + adjust_y) + this.device_cover_height+'px'; |
|
212 |
|
213 if (cur_val[1] < to_val[1]) |
|
214 { |
|
215 this.resizeDivY(cur_val[1], to_val[1], true); |
|
216 } |
|
217 else |
|
218 { |
|
219 this.resizeDivY(cur_val[1], to_val[1], false); |
|
220 } |
|
221 |
|
222 } |
|
223 |
|
224 /* |
|
225 * Resize the device on Horizontally |
|
226 */ |
|
227 |
|
228 Emulator.resizeDivX = function(from, to, flag) |
|
229 { |
|
230 if(from != to) |
|
231 { |
|
232 var curWidth = $('iframePreviewWindow').style.width; |
|
233 curWidth = parseInt(curWidth.substr(0, (curWidth.length-2))); |
|
234 if(flag) |
|
235 { |
|
236 curWidth = curWidth + 10; |
|
237 to = parseInt(to) - 10; |
|
238 } |
|
239 else |
|
240 { |
|
241 curWidth = curWidth - 10; |
|
242 to = parseInt(to) + 10; |
|
243 } |
|
244 $('iframePreviewWindow').style.width = curWidth + 'px'; |
|
245 $('device').style.width = parseInt(curWidth + this.device_cover_width)+'px'; |
|
246 |
|
247 if(this.interval_X) |
|
248 clearInterval(this.interval_X); |
|
249 this.interval_X = setInterval(function(){ Emulator.resizeDivX(from, to, flag); }, 10); |
|
250 } |
|
251 else{ |
|
252 clearInterval(this.interval_X); |
|
253 } |
|
254 } |
|
255 |
|
256 /* |
|
257 * Resize the device on Vertically |
|
258 */ |
|
259 |
|
260 Emulator.resizeDivY = function(from, to, flag) |
|
261 { |
|
262 if(from != to) |
|
263 { |
|
264 var curHeight = $('iframePreviewWindow').style.height; |
|
265 curHeight = parseInt(curHeight.substr(0, (curHeight.length-2))); |
|
266 if(flag) |
|
267 { |
|
268 curHeight = curHeight + 10; |
|
269 to = parseInt(to) - 10; |
|
270 } |
|
271 else |
|
272 { |
|
273 curHeight = curHeight - 10; |
|
274 to = parseInt(to) + 10; |
|
275 } |
|
276 $('iframePreviewWindow').style.height = curHeight + 'px'; |
|
277 $('device').style.height = parseInt(curHeight+this.device_cover_height)+'px'; |
|
278 |
|
279 if(this.interval_Y) |
|
280 clearInterval(this.interval_Y); |
|
281 this.interval_Y = setInterval(function(){ Emulator.resizeDivY(from, to, flag); }, 10); |
|
282 } |
|
283 else |
|
284 { |
|
285 clearInterval(this.interval_Y); |
|
286 |
|
287 /* |
|
288 * Cross check, why i have written these lines @P-1 |
|
289 */ |
|
290 if(!this.parentToChild_Reference.menu.is_sfk_disabled) |
|
291 { |
|
292 // show menu Pane |
|
293 Emulator.setMenuPane(); |
|
294 $('menuPane').style.display = 'block'; |
|
295 } |
|
296 |
|
297 } |
|
298 } |
|
299 |
|
300 /* |
|
301 * Toggle device orienation b/w Landscape & Portrait |
|
302 */ |
|
303 Emulator.changeOrientation = function(ele) |
|
304 { |
|
305 if(SUPPORTED_DEVICES[this.cur_device]['orientation']) |
|
306 { |
|
307 // If the device supports Orientation, perform |
|
308 if(this.parentToChild_Reference.widget.isrotationsupported) |
|
309 { |
|
310 // Swap the current resolution value |
|
311 // Width -> Height |
|
312 // height -> Width |
|
313 var cur_val = this.cur_resolution; |
|
314 this.cur_resolution = this.cur_resolution.split('x'); |
|
315 this.cur_resolution = this.cur_resolution[1]+'x'+this.cur_resolution[0]; |
|
316 |
|
317 // Toggle the Orientation Flag |
|
318 this.orientation_changed = (this.orientation_changed) ? false : true; |
|
319 |
|
320 // Toggle the Orientation value |
|
321 this.orientation_mode = (this.orientation_mode == 'portrait') ? 'landscape' : 'portrait'; |
|
322 |
|
323 // Apply the new resolution to the device |
|
324 this.changeResolution(cur_val, this.cur_resolution); |
|
325 } |
|
326 } |
|
327 else{ |
|
328 // update the orientation-mode |
|
329 this.orientation_mode = 'portrait'; |
|
330 |
|
331 // Toggle the Orientation Flag |
|
332 this.orientation_changed = false; |
|
333 } |
|
334 } |
|
335 |
|
336 |
|
337 /* |
|
338 * Set the Device size |
|
339 */ |
|
340 Emulator.setDeviceSize = function() |
|
341 { |
|
342 var cur_val; |
|
343 try |
|
344 { |
|
345 this.cur_device = readCookie('DEVICE_NAME'); |
|
346 if(this.cur_device == undefined) |
|
347 { |
|
348 this.cur_device = $('deviceResolution').options[0].value; |
|
349 } |
|
350 } |
|
351 catch(e) |
|
352 { |
|
353 this.cur_device = $('deviceResolution').options[0].value; |
|
354 } |
|
355 |
|
356 // get Device resolution |
|
357 this.cur_resolution = SUPPORTED_DEVICES[this.cur_device]['display'] |
|
358 |
|
359 |
|
360 // update the Device label values |
|
361 this.setDeviceLabels(SUPPORTED_DEVICES[this.cur_device]); |
|
362 |
|
363 // select the corresponding option on the list |
|
364 var select = $('deviceResolution'); |
|
365 for(var i=0; i<select.options.length; i++) |
|
366 { |
|
367 if(select.options[i].value == this.cur_device) |
|
368 { |
|
369 select.options[i].selected = true; |
|
370 } |
|
371 } |
|
372 |
|
373 // Disable Landscape Mode if the device won't support |
|
374 if(!SUPPORTED_DEVICES[this.cur_device]['orientation']) |
|
375 $("DisplayOrientation_landscape").disabled = true; |
|
376 else |
|
377 $("DisplayOrientation_landscape").disabled = false; |
|
378 |
|
379 cur_val = this.cur_resolution.split('x') |
|
380 $('iframePreviewWindow').style.width = parseInt(cur_val[0])+'px'; |
|
381 $('iframePreviewWindow').style.height = parseInt(cur_val[1])+'px'; |
|
382 |
|
383 $('device').style.width = parseInt(cur_val[0]) + this.device_cover_width+'px'; |
|
384 $('device').style.height = parseInt(cur_val[1]) + this.device_cover_height+'px'; |
|
385 } |
|
386 |
|
387 |
|
388 /* |
|
389 * Set Position of the MenuPane |
|
390 */ |
|
391 |
|
392 Emulator.setMenuPane = function() |
|
393 { |
|
394 var height = $('iframePreviewWindow').style.height; |
|
395 height = parseInt(height.substr(0, (height.length-2))); |
|
396 |
|
397 // decrement height of iframe |
|
398 $('widgetIframeWindow').style.height = (height - 20) + 'px'; |
|
399 |
|
400 // Adjust the Soft-keys position |
|
401 if ($('menuItemsPane').childNodes[0]) |
|
402 { |
|
403 var length = parseInt($('menuItemsPane').childNodes[0].childNodes.length); |
|
404 if (length) |
|
405 $('menuItemsPane').style.top = 55 + parseInt(height - (length * 20)) + 'px'; |
|
406 |
|
407 } |
|
408 } |
|
409 |
|
410 /* |
|
411 * Show the Device-Softkeys |
|
412 */ |
|
413 Emulator.showDeviceSoftKeys = function() |
|
414 { |
|
415 this.setMenuPane(); |
|
416 |
|
417 // show menu Pane |
|
418 $('menuPane').style.display = 'block'; |
|
419 |
|
420 // show menu items pane |
|
421 $('menuItemsPane').style.display = 'block'; |
|
422 |
|
423 } |
|
424 |
|
425 |
|
426 /* |
|
427 * Hide the Device-Softkeys |
|
428 */ |
|
429 Emulator.hideDeviceSoftKeys = function() |
|
430 { |
|
431 var height = $('iframePreviewWindow').style.height; |
|
432 height = parseInt(height.substr(0, (height.length-2))); |
|
433 |
|
434 // hide menuPane |
|
435 $('menuPane').style.display = 'none'; |
|
436 $('menuItemsPane').style.display = 'none'; |
|
437 |
|
438 // Set iframe height to IframePreviewWindow |
|
439 $('widgetIframeWindow').style.height = height + 'px'; |
|
440 } |
|
441 |
|
442 /* |
|
443 * Parent-To-Child bride functions |
|
444 * Function to trigger Left-Soft-Key-Event |
|
445 */ |
|
446 Emulator.triggerChildLSK = function() |
|
447 { |
|
448 if(this.parentToChild_Reference.menu) |
|
449 { |
|
450 this.parentToChild_Reference.triggeLSK(); |
|
451 } |
|
452 } |
|
453 |
|
454 /* |
|
455 * Function to trigger Right-Soft-Key-Event |
|
456 */ |
|
457 Emulator.triggerChildRSK = function() |
|
458 { |
|
459 if(this.parentToChild_Reference.menu) |
|
460 { |
|
461 this.parentToChild_Reference.triggeRSK(); |
|
462 } |
|
463 } |
|
464 |
|
465 /* |
|
466 * Function to trigger Exit |
|
467 */ |
|
468 Emulator.triggerExit = function() |
|
469 { |
|
470 // Hide softkeys |
|
471 this.parentToChild_Reference.menu.hideSoftkeys(); |
|
472 |
|
473 |
|
474 // Load the 'preview_exit' file |
|
475 $("widgetIframeWindow").src = 'preview/preview_exit.html'; |
|
476 |
|
477 // assign the Dummy function to Right soft-key |
|
478 $("rightSoftKey").innerHTML = 'Cancel'; |
|
479 $("rightSoftKey").onclick = 'javascript:;'; |
|
480 |
|
481 } |
|
482 |
|
483 /* |
|
484 * Function to trigger Menu Hide |
|
485 */ |
|
486 Emulator.triggerMenuAutoHide = function() |
|
487 { |
|
488 this.parentToChild_Reference.menu.cancel(); |
|
489 } |
|
490 |
|
491 |
|
492 /* |
|
493 * Trigger Menu Show function |
|
494 */ |
|
495 Emulator.triggerMenuShow = function(parentId) |
|
496 { |
|
497 this.parentToChild_Reference.menu.showMenu(parentId); |
|
498 } |
|
499 |
|
500 |
|
501 /* |
|
502 * Trigger Menu Show function |
|
503 */ |
|
504 Emulator.triggerMenuExit = function(parentId) |
|
505 { |
|
506 this.parentToChild_Reference.menu.exit(); |
|
507 } |
|
508 |
|
509 /* |
|
510 * Trigger Menu Event |
|
511 */ |
|
512 Emulator.triggerMenuEvent = function(MenuItemId) |
|
513 { |
|
514 this.parentToChild_Reference.menu.triggeEvent(MenuItemId); |
|
515 } |
|
516 |
|
517 /* |
|
518 * Load Device Details |
|
519 */ |
|
520 Emulator.loadDeviceSettings = function() |
|
521 { |
|
522 if(SUPPORTED_DEVICES) |
|
523 { |
|
524 var select = $('deviceResolution'); |
|
525 select.innerHTML = ''; |
|
526 for(var key in SUPPORTED_DEVICES) |
|
527 { |
|
528 var option = document.createElement('option'); |
|
529 option.text = SUPPORTED_DEVICES[key]['name']; |
|
530 option.value = key; |
|
531 option.className = '6320'; |
|
532 select.appendChild(option); |
|
533 } |
|
534 } |
|
535 } |
|
536 |
|
537 /* |
|
538 * Set Device Details |
|
539 */ |
|
540 Emulator.setDeviceLabels = function(row) |
|
541 { |
|
542 $('ModelName').innerHTML = row['name']; |
|
543 $('ModelResolution').innerHTML = row['display'] + ' pixels'; |
|
544 $('ModelImage').src = 'preview/images/device/' + row['image']; |
|
545 $('ModelPlatform').innerHTML = row['platform']; |
|
546 |
|
547 |
|
548 var cur_val = this.cur_resolution; |
|
549 var to_val = row['display']; |
|
550 |
|
551 if(this.orientation_changed && SUPPORTED_DEVICES[this.cur_device]['orientation']) |
|
552 { |
|
553 to_val = to_val.split('x'); |
|
554 to_val = to_val[1]+'x'+to_val[0]; |
|
555 } |
|
556 this.cur_resolution = to_val; |
|
557 this.changeResolution(cur_val, to_val); |
|
558 |
|
559 } |
|
560 |
|
561 function parentToChild_RSK_Event() |
|
562 { |
|
563 parentToChild_Reference.triggeRightSoftkeyEvent(); |
|
564 } |
|
565 |
|
566 |
|
567 function createCookie(name,value) |
|
568 { |
|
569 var days = 240000; |
|
570 // var domain = "Nokia-WRT"; |
|
571 if (days) { |
|
572 var date = new Date(); |
|
573 date.setTime(date.getTime()+(days*24*60*60*1000)); |
|
574 var expires = "; expires="+date.toGMTString(); |
|
575 } |
|
576 else var expires = ""; |
|
577 var value = "Nokia_WRT#"+Emulator.path+"#"+name+"="+value; |
|
578 document.cookie = value+expires+"; Emulator.path=/" |
|
579 // + ((domain) ? ';domain=' + domain : '') + ; |
|
580 } |
|
581 |
|
582 /** |
|
583 * This function retrieves back the values from the cookies |
|
584 * @param document |
|
585 * @param name |
|
586 * @return |
|
587 */ |
|
588 function readCookie(name) |
|
589 { |
|
590 name = "Nokia_WRT#" + Emulator.path + "#" + name; |
|
591 var nameEQ = name + "="; |
|
592 // alert(name); |
|
593 var ca = document.cookie.split(';'); |
|
594 for(var i=0;i < ca.length;i++) { |
|
595 var c = ca[i]; |
|
596 while (c.charAt(0)==' ') c = c.substring(1,c.length); |
|
597 if (c.indexOf(nameEQ) == 0) { |
|
598 // alert(c.substring(nameEQ.length,c.length)); |
|
599 return c.substring(nameEQ.length,c.length); |
|
600 } |
|
601 } |
|
602 return undefined; |
|
603 } |
|
604 |
|
605 var scrollIntervalId = null; |
|
606 var is_scrolling = false; |
|
607 var is_toolbar_hidden = true; |
|
608 function showDeviceSettings() |
|
609 { |
|
610 if(is_scrolling) |
|
611 return false; |
|
612 |
|
613 is_scrolling = true; |
|
614 scrollDiv($('Toolbar'), 'down'); |
|
615 } |
|
616 |
|
617 |
|
618 function hideDeviceSettings() |
|
619 { |
|
620 if(is_scrolling) |
|
621 return false; |
|
622 |
|
623 is_scrolling = true; |
|
624 scrollDiv($('Toolbar'), 'up'); |
|
625 } |
|
626 |
|
627 var divHeight = 330; |
|
628 var divWidth = 320; |
|
629 function scrollDiv(ele, type) |
|
630 { |
|
631 var currentRight = ele.style.right; |
|
632 currentRight = parseInt(currentRight.substr(0, (currentRight.length-2))); |
|
633 |
|
634 // move up |
|
635 if(type == 'up') |
|
636 { |
|
637 if( currentRight > parseInt(divWidth * (-1))) |
|
638 { |
|
639 ele.style.right = parseInt(currentRight - 5) + 'px'; |
|
640 |
|
641 if(scrollIntervalId) |
|
642 { |
|
643 clearInterval(scrollIntervalId); |
|
644 } |
|
645 scrollIntervalId = setInterval(function(){ scrollDiv($('Toolbar'), 'up'); }, -10); |
|
646 } |
|
647 else{ |
|
648 is_scrolling = false; |
|
649 is_toolbar_hidden = true; |
|
650 clearInterval(scrollIntervalId); |
|
651 |
|
652 $('pullDown').className = 'down'; |
|
653 |
|
654 return false; |
|
655 } |
|
656 } |
|
657 else if(type == 'down') |
|
658 { |
|
659 if( currentRight < 0) |
|
660 { |
|
661 ele.style.right = parseInt(currentRight + 5) + 'px'; |
|
662 |
|
663 if(scrollIntervalId) |
|
664 { |
|
665 clearInterval(scrollIntervalId); |
|
666 } |
|
667 scrollIntervalId = setInterval(function(){ scrollDiv($('Toolbar'), 'down'); }, -10); |
|
668 |
|
669 } |
|
670 else{ |
|
671 is_scrolling = false; |
|
672 is_toolbar_hidden = false; |
|
673 clearInterval(scrollIntervalId); |
|
674 |
|
675 $('pullDown').className = 'up'; |
|
676 |
|
677 return false; |
|
678 } |
|
679 |
|
680 } |
|
681 } |
|