From a74b69e7c2a1e926f393f275d9abac3e58aee01b Mon Sep 17 00:00:00 2001
From: Kris Borchers <kris.borchers@gmail.com>
Date: Sat, 29 Dec 2012 23:17:38 -0600
Subject: [PATCH] Progressbar: Add new download dialog demo

---
 demos/progressbar/download.html | 115 ++++++++++++++++++++++++++++++++
 demos/progressbar/index.html    |   1 +
 2 files changed, 116 insertions(+)
 create mode 100644 demos/progressbar/download.html
diff --git a/demos/progressbar/download.html b/demos/progressbar/download.html
new file mode 100644
index 000000000..8742de3bf
--- /dev/null
+++ b/demos/progressbar/download.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Download Dialog</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.9.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.progressbar.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var progressTimer,
+			progressbar = $( "#progressbar" ),
+			progressLabel = $( ".progress-label" ),
+			dialogButtons = [{
+				text: "Cancel Download",
+				click: closeDownload
+			}],
+			dialog = $( "#dialog" ).dialog({
+				autoOpen: false,
+				closeOnEscape: false,
+				resizable: false,
+				buttons: dialogButtons,
+				open: function() {
+					progressTimer = setTimeout( progress, 2000 );
+				},
+				beforeClose: function() {
+					downloadButton.button( "option", {
+						disabled: false,
+						label: "Start Download"
+					});
+				}
+			}),
+			downloadButton = $( "#downloadButton" )
+				.button()
+				.on( "click", function() {
+					$( this ).button( "option", {
+						disabled: true,
+						label: "Downloading..."
+					});
+					dialog.dialog( "open" );
+				});
+
+		progressbar.progressbar({
+			value: false,
+			change: function() {
+				progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
+			},
+			complete: function() {
+				progressLabel.text( "Complete!" );
+				dialog.dialog( "option", "buttons", [{
+					text: "Close",
+					click: closeDownload
+				}]);
+				$(".ui-dialog button").last().focus();
+			}
+		});
+
+		function progress() {
+			var val = progressbar.progressbar( "value" ) || 0;
+
+			progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
+
+			if ( val <= 99 ) {
+				progressTimer = setTimeout( progress, 100 );
+			}
+		}
+
+		function closeDownload() {
+			clearTimeout( progressTimer );
+			dialog
+				.dialog( "option", "buttons", dialogButtons )
+				.dialog( "close" );
+			progressbar.progressbar( "value", false );
+			progressLabel
+				.text( "Starting download..." );
+			downloadButton.focus();
+		}
+	});
+	</script>
+	<style>
+	#progressbar {
+		margin-top: 20px;
+	}
+
+	.progress-label {
+		font-weight: bold;
+		text-shadow: 1px 1px 0 #fff;
+	}
+
+	.ui-dialog-titlebar-close {
+		display: none;
+	}
+	</style>
+</head>
+<body>
+
+<div id="dialog" title="File Download">
+	<div class="progress-label">Starting download...</div>
+	<div id="progressbar"></div>
+</div>
+<button id="downloadButton">Start Download</button>
+
+<div class="demo-description">
+<p>Download dialog progressbar demo.</p>
+</div>
+</body>
+</html>
diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html
index cfc054aea..85aacc84f 100644
--- a/demos/progressbar/index.html
+++ b/demos/progressbar/index.html
@@ -10,6 +10,7 @@
 	<li><a href="default.html">Default functionality</a></li>
 	<li><a href="indeterminate.html">Indeterminate</a></li>
 	<li><a href="label.html">Custom Labels</a></li>
+	<li><a href="download.html">Download Dialog</a></li>
 </ul>
 
 </body>
