home *** CD-ROM | disk | FTP | other *** search
/ ftp.swcp.com / ftp.swcp.com.zip / ftp.swcp.com / mac / mozilla-mac-0.9.sea.hqx / mozilla-mac-0.9 / res / samples / downloadProgress.xul < prev    next >
Extensible Markup Language  |  2001-05-05  |  8KB  |  225 lines
  1. <?xml version="1.0"?> 
  2. <?xml-stylesheet href="chrome://navigator/skin/downloadProgress.css" type="text/css"?> 
  3.  
  4. <!DOCTYPE window> 
  5.  
  6. <window xmlns:html="http://www.w3.org/1999/xhtml"
  7.           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  8.         title="Saving file"
  9.         width="425"
  10.         height="225"
  11.         onload="onLoad()">
  12.  
  13.     <data>
  14.         <broadcaster id="data.location" type="url" value="url"/>
  15.         <broadcaster id="data.contentType" type="string" value="content-type"/>
  16.         <broadcaster id="data.fileName" type="string" value=""/>
  17.         <broadcaster id="data.progress" type="progress" value="0" max="0" completed="false"/>
  18.         <broadcaster id="data.status" type="string" value=""/>
  19.         <broadcaster id="data.execute" command=""/>
  20.     </data>
  21.  
  22.     <dialog>
  23.         <observes element="data.progress" attribute="value" onbroadcast="onProgress()"/>
  24.         <observes element="data.progress" attribute="completed" onbroadcast="onCompletion()"/>
  25.         <observes element="data.status"   attribute="value" onbroadcast="onStatus()"/>
  26.     </dialog>
  27.  
  28.     <script>
  29.         var data;
  30.         var dialog;
  31.  
  32.         function loadDialog() {
  33.             dialog.location.setAttribute( "value", data.location.getAttribute( "value" ) );
  34.             dialog.fileName.setAttribute( "value", data.fileName.getAttribute( "value" ) );
  35.         }
  36.  
  37.         function onLoad() {
  38.             // Set global variables.
  39.             data = new Object;
  40.             data.location      = document.getElementById("data.location");
  41.             data.contentType   = document.getElementById("data.contentType");
  42.             data.fileName      = document.getElementById("data.fileName");
  43.             data.progress      = document.getElementById("data.progress");
  44.             data.status        = document.getElementById("data.status");
  45.             data.execute       = document.getElementById("data.execute");
  46.             dialog = new Object;
  47.             dialog.location    = document.getElementById("dialog.location");
  48.             dialog.contentType = document.getElementById("dialog.contentType");
  49.             dialog.fileName    = document.getElementById("dialog.fileName");
  50.             dialog.status      = document.getElementById("dialog.status");
  51.             dialog.progress    = document.getElementById("dialog.progress");
  52.             dialog.progressPercent = document.getElementById("dialog.progressPercent");
  53.             dialog.timeLeft    = document.getElementById("dialog.timeLeft");
  54.             dialog.cancel      = document.getElementById("dialog.cancel");
  55.  
  56.             // Fill dialog.
  57.             loadDialog();
  58.  
  59.             // Commence.
  60.             data.execute.setAttribute("command","start");
  61.         }
  62.  
  63.         var started = false;
  64.         var completed = false;
  65.         var startTime;
  66.         var interval = 1000; // Update every 1000 milliseconds.
  67.         var lastUpdate = -interval; // Update initially.
  68.  
  69.         function stop() {
  70.             if ( started && !completed ) {
  71.                 // Stop the download.
  72.                 data.execute.setAttribute( "command", "stop" );
  73.             } else {
  74.                 // Close the window.
  75.                 data.execute.setAttribute( "command", "close" );
  76.             }
  77.         }
  78.  
  79.         function onProgress() {
  80.             // Check for first time.
  81.             if ( !started ) {
  82.                 // Initialize download start time.
  83.                 started = true;
  84.                 startTime = ( new Date() ).getTime();
  85.                 // Let the user stop, now.
  86.                 dialog.cancel.removeAttribute( "disabled" );
  87.             }
  88.             // Get stats.
  89.             var bytes = data.progress.getAttribute("value");
  90.             var max   = data.progress.getAttribute("max");
  91.  
  92.             // Get current time.
  93.             var now = ( new Date() ).getTime();
  94.             // If interval hasn't elapsed, ignore it.
  95.             if ( now - lastUpdate < interval && eval(bytes) < eval(max) ) {
  96.                 return;
  97.             }
  98.  
  99.             // Update this time.
  100.             lastUpdate = now;
  101.  
  102.             // Update download rate.
  103.             var elapsed = now - startTime;
  104.             var rate; // bytes/sec
  105.             if ( elapsed ) {
  106.                 rate = ( bytes * 1000 ) / elapsed;
  107.             } else {
  108.                 rate = 0;
  109.             }
  110.  
  111.             // Calculate percentage.
  112.             var percent = Math.round( (bytes*100)/max );
  113.  
  114.             // Advance progress meter.
  115.             dialog.progress.setAttribute( "value", percent );
  116.             
  117.             // Update status (nnn of mmm)
  118.             var status = "( ";
  119.             status += Math.round( bytes/1024 );
  120.             status += "K of ";
  121.             status += Math.round( max/1024 );
  122.             status += "K bytes ";
  123.             if ( rate ) {
  124.                 status += "at ";
  125.                 status += Math.round( (rate*10)/1024 ) / 10;
  126.                 status += "K bytes/sec )";
  127.             } else {
  128.                 status += ")";
  129.             }
  130.             status += 
  131.             dialog.status.childNodes[0].nodeValue = status;
  132.  
  133.             // Update percentage label on progress meter.
  134.             dialog.progressPercent.childNodes[0].nodeValue = percent + "%";
  135.             
  136.             // Update time remaining.
  137.             if ( rate ) {
  138.                 var rem = Math.round( ( max - bytes ) / rate ); // In seconds.
  139.                 status = "";
  140.                 if ( rem >= 3600 ) {
  141.                     status += Math.round( rem/3600 ) + " hours, ";
  142.                     rem = rem % 3600;
  143.                 }
  144.                 status += Math.round( rem/60 ) + " minutes and ";
  145.                 rem = rem % 60;
  146.                 status += rem + " seconds";
  147.                 dialog.timeLeft.childNodes[0].nodeValue = status;
  148.             }
  149.         }
  150.  
  151.         function onCompletion() {
  152.             if ( !completed ) {
  153.                 completed = true;
  154.                 data.execute.setAttribute( "command", "close" );
  155.             }
  156.         }
  157.  
  158.         function onStatus() {
  159.             var txt = data.status.getAttribute( "value" );
  160.             dialog.status.childNodes[0].nodeValue = txt;
  161.         }
  162.     </script>
  163.  
  164.     <html:table style="width:100%;">
  165.  
  166.         <html:tr>
  167.             <html:td align="right">
  168.                 Location:
  169.             </html:td>
  170.             <html:td align="left">
  171.                 <html:input id="dialog.location" readonly="" style="background-color:lightgray;width:300px;"/>
  172.             </html:td>
  173.         </html:tr>
  174.     
  175.         <html:tr>
  176.             <html:td align="right">
  177.                 Saving:
  178.             </html:td>
  179.             <html:td align="left">
  180.                 <html:input id="dialog.fileName" readonly="" value="" style="background-color:lightgray;width:300px;"/>
  181.             </html:td>
  182.         </html:tr>
  183.  
  184.         <html:tr>
  185.             <html:td align="right">
  186.                 Status:
  187.             </html:td>
  188.             <html:td align="left">
  189.                 <html:span id="dialog.status">
  190.                     ( nn.nK of mm.mK bytes )
  191.                 </html:span>
  192.             </html:td>
  193.         </html:tr>
  194.  
  195.         <html:tr>
  196.             <html:td align="right">
  197.                 Time Left:
  198.             </html:td>
  199.             <html:td align="left">
  200.                 <html:span id="dialog.timeLeft">
  201.                     ?
  202.                 </html:span>
  203.             </html:td>
  204.         </html:tr>
  205.  
  206.         <html:tr>
  207.             <html:td align="center" height="40px" colspan="2">
  208.                 <progressmeter id="dialog.progress" mode="normal" value="0"
  209.                                style="width:300px;height:16px;"/>
  210.                 <html:span id="dialog.progressPercent" style="border-left:5px solid lightgray;">
  211.                     0%
  212.                 </html:span>
  213.             </html:td>
  214.         </html:tr>
  215.  
  216.         <html:tr>
  217.             <html:td align="center" colspan="2">
  218.                 <html:button id="dialog.cancel" onclick="stop()">Cancel</html:button>
  219.             </html:td>
  220.         </html:tr>
  221.  
  222.     </html:table>
  223.  
  224. </window>
  225.