352 |
<style> |
<style> |
353 |
<!-- |
<!-- |
354 |
|
|
355 |
div#fixedBox |
div#fixedBox { |
356 |
{ |
position: absolute; |
357 |
position: absolute; |
bottom: 1em; |
358 |
bottom: 1em; |
left: 0.5em; |
359 |
left: 0.5em; |
padding: 0.5em; |
360 |
padding: 0.5em; |
width: 10em; |
361 |
width: 10em; |
background: #e0f0e0; |
362 |
background: #e0f0e0; |
border: 1px solid #00ff00; |
363 |
border: 1px solid #00ff00; |
} |
364 |
} |
@media screen { |
365 |
@media screen |
div#fixedBox { |
366 |
{ |
position: fixed; |
367 |
div#fixedBox |
} |
368 |
{ |
/* Don't do this at home */ |
369 |
position: fixed; |
* html { |
370 |
} |
overflow-y: hidden; |
371 |
/* Don't do this at home */ |
} |
372 |
* html |
* html body { |
373 |
{ |
overflow-y: auto; |
374 |
overflow-y: hidden; |
height: 100%; |
375 |
} |
padding: 0 1em 0 12em; |
376 |
* html body |
font-size: 100%; |
377 |
{ |
} |
378 |
overflow-y: auto; |
* html div#fixedBox { |
379 |
height: 100%; |
position: absolute; |
380 |
padding: 0 1em 0 12em; |
} |
381 |
font-size: 100%; |
/* All done. */ |
382 |
} |
} |
383 |
* html div#fixedBox |
|
384 |
{ |
#mContainer { |
385 |
position: absolute; |
position: relative; |
386 |
} |
width: 100%; |
387 |
/* All done. */ |
height: 1.1em; |
388 |
} |
padding: 0px; |
389 |
|
border: 1px solid #000000; |
390 |
|
} |
391 |
|
|
392 |
|
#gradient { |
393 |
|
position: absolute; |
394 |
|
top: 0px; |
395 |
|
left: 0px; |
396 |
|
width: 100%; |
397 |
|
height: 100%; |
398 |
|
display: block; |
399 |
|
background-color: #ffff00; |
400 |
|
} |
401 |
|
|
402 |
|
#mask { |
403 |
|
position: absolute; |
404 |
|
top: 0px; |
405 |
|
left: 0px; |
406 |
|
width: 100%; |
407 |
|
height: 100%; |
408 |
|
display: block; |
409 |
|
font-size: 1px; |
410 |
|
background-color: #FFFFFF; |
411 |
|
overflow: hidden; |
412 |
|
} |
413 |
|
|
414 |
|
#progressIndicator { |
415 |
|
position: absolute; |
416 |
|
top: 0px; |
417 |
|
left: 0px; |
418 |
|
width: 100%; |
419 |
|
height: 100%; |
420 |
|
display: block; |
421 |
|
font-weight: bold; |
422 |
|
color: #404040; |
423 |
|
font-size: 10pt; |
424 |
|
text-align: center; |
425 |
|
} |
426 |
|
|
427 |
--> |
--> |
428 |
</style> |
</style> |
430 |
<!-- |
<!-- |
431 |
|
|
432 |
var debug_div = null; |
var debug_div = null; |
433 |
|
var media_size = 4400 * 1024; |
434 |
|
|
435 |
function debug(msg) { |
function debug(msg) { |
436 |
// return; // Disable debugging |
// return; // Disable debugging |
499 |
} |
} |
500 |
} |
} |
501 |
element_id('forma').totalsize.value = suma; |
element_id('forma').totalsize.value = suma; |
502 |
|
pbar_set(suma, media_size); |
503 |
debug('total size: '+suma); |
debug('total size: '+suma); |
504 |
return suma; |
return suma; |
505 |
} |
} |
506 |
|
|
507 |
|
/* progress bar */ |
508 |
|
|
509 |
|
var _pbar_width = 0; |
510 |
|
var _pbar_warn = 10; // change color in last 10% |
511 |
|
|
512 |
|
function pbar_reset() { |
513 |
|
element_id("mask").style.left = "0px"; |
514 |
|
_pbar_width = element_id("mContainer").offsetWidth - 2; |
515 |
|
element_id("mask").style.width = _pbar_width + "px"; |
516 |
|
element_id("progressIndicator").style.zIndex = 10; |
517 |
|
element_id("mask").style.display = "block"; |
518 |
|
element_id("progressIndicator").innerHTML = "0"; |
519 |
|
} |
520 |
|
|
521 |
|
function dec2hex(d) { |
522 |
|
var hch="0123456789ABCDEF"; |
523 |
|
var a=d%16; |
524 |
|
var q=(d-a)/16; |
525 |
|
return hch.charAt(q)+hch.charAt(a); |
526 |
|
} |
527 |
|
|
528 |
|
|
529 |
|
function pbar_set(amount, max) { |
530 |
|
|
531 |
|
debug('pbar_set( '+amount+' , '+max+' )'); |
532 |
|
|
533 |
|
curWidth = parseInt(element_id("mask").offsetWidth); |
534 |
|
curLeft = parseInt(element_id("mask").offsetLeft); |
535 |
|
|
536 |
|
|
537 |
|
var pcnt = Math.floor( amount * 100 / max ); |
538 |
|
var p90 = 100 - _pbar_warn; |
539 |
|
var pcol = pcnt - p90; |
540 |
|
if (pcol < _pbar_warn) { |
541 |
|
if (pcol < 0) pcol = 0; |
542 |
|
var e = element_id("submitBurner"); |
543 |
|
if (e && e.disabled) { |
544 |
|
debug('enable_button'); |
545 |
|
var a = e.getAttributeNode('disabled') || null; |
546 |
|
if (a) e.removeAttributeNode(a); |
547 |
|
} |
548 |
|
} else if (pcol > _pbar_warn) { |
549 |
|
debug('disable button'); |
550 |
|
pcol = _pbar_warn; |
551 |
|
var e = element_id("submitBurner"); |
552 |
|
if (! e.disabled) e.disabled = true; |
553 |
|
} |
554 |
|
var col_g = Math.floor( ( _pbar_warn - pcol ) * 255 / _pbar_warn ); |
555 |
|
var col = '#ff' + dec2hex( col_g ) + '00'; |
556 |
|
|
557 |
|
//debug('pcol: '+pcol+' g:'+col_g+' _pbar_warn:'+ _pbar_warn + ' color: '+col); |
558 |
|
element_id("gradient").style.backgroundColor = col; |
559 |
|
|
560 |
|
var size = parseInt( _pbar_width * amount / max ); |
561 |
|
|
562 |
|
curWidth = _pbar_width - size; |
563 |
|
curLeft = size ; |
564 |
|
|
565 |
|
//debug('size: '+size+' curWidth '+curWidth+' curLeft: '+curLeft); |
566 |
|
|
567 |
|
element_id("progressIndicator").innerHTML = pcnt + '%'; |
568 |
|
//element_id("progressIndicator").innerHTML = amount; |
569 |
|
|
570 |
|
if (curLeft > _pbar_width) { |
571 |
|
element_id("mask").style.display = "none"; |
572 |
|
return; |
573 |
|
} else { |
574 |
|
element_id("mask").style.display = ""; |
575 |
|
} |
576 |
|
|
577 |
|
//if(parseInt(element_id("mask").offsetWidth)>10) |
578 |
|
element_id("mask").style.width = curWidth + "px"; |
579 |
|
element_id("mask").style.left = curLeft + "px"; |
580 |
|
|
581 |
|
} |
582 |
|
|
583 |
if (!self.body) self.body = new Object(); |
if (!self.body) self.body = new Object(); |
584 |
self.onload = self.document.onload = self.body.onload = function() { |
self.onload = self.document.onload = self.body.onload = function() { |
585 |
|
pbar_reset(); |
586 |
sumiraj(); |
sumiraj(); |
587 |
} |
} |
588 |
|
|
592 |
|
|
593 |
Size: |
Size: |
594 |
<input type="text" name="totalsize" size="7" readonly> |
<input type="text" name="totalsize" size="7" readonly> |
595 |
|
|
596 |
|
<div id="mContainer"> |
597 |
|
<div id="gradient"></div> |
598 |
|
<div id="mask"></div> |
599 |
|
<div id="progressIndicator"> </div> |
600 |
|
</div> |
601 |
|
|
602 |
<br/> |
<br/> |
603 |
Note: |
Note: |
604 |
<br/> |
<br/> |
605 |
<textarea name="note" cols="10" rows="5"> |
<textarea name="note" cols="10" rows="5"> |
606 |
</textarea> |
</textarea> |
607 |
<br/> |
<br/> |
608 |
<input type="submit" value="Burn selected" name="submitBurner"> |
<input type="submit" id="submitBurner" value="Burn selected" name="submitBurner"> |
609 |
|
|
610 |
</div> |
</div> |
611 |
<div id="debug" style="float: right; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;"> |
<div id="debug" style="float: right; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;"> |
648 |
'<tr' . $color[$i %2 ] . '> |
'<tr' . $color[$i %2 ] . '> |
649 |
<td class="fview">'; |
<td class="fview">'; |
650 |
# FIXME |
# FIXME |
651 |
#$backup->{'fs_size'} = int($backup->{'size'} * 1024); |
$backup->{'fs_size'} = int($backup->{'size'} * 1024); |
652 |
if (($backup->{'fs_size'} || 0) > 0) { |
if (($backup->{'fs_size'} || 0) > 0) { |
653 |
$retHTML .= ' |
$retHTML .= ' |
654 |
<input type="checkbox" name="fcb' . |
<input type="checkbox" name="fcb' . |