jquery · uplusware · Jan 24, 2018 · Jan 24, 2018 · Jan 30, 2018 · May 28, 2021
diff --git a/README.md b/README.md
@@ -1,3 +1,9 @@
+# jQuery-UI-x
+
+jQuery UI with minimize/restore button for dialog widget.
+
+The PR: https://github.com/jquery/jquery-ui/pull/1967
+
 # [jQuery UI](http://jqueryui.com/) - Interactions and Widgets for the web
 
 _**Note:** jQuery UI is in maintenance-only mode. Please read [the project status blog post](https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/) for more information._

diff --git a/demos/dialog/index.html b/demos/dialog/index.html
@@ -9,6 +9,7 @@
 
 <ul>
 	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="minimizable.html">Minimizable dialog</a></li>
 	<li><a href="modal-message.html">Modal message</a></li>
 	<li><a href="modal-confirmation.html">Modal confirmation</a></li>
 	<li><a href="modal-form.html">Modal form</a></li>

diff --git a/demos/dialog/minimizable.html b/demos/dialog/minimizable.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Dialog - Minimizable dialog</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js">
+		$( "#dialog" ).dialog({
+			minimizable: true
+			});
+	</script>
+</head>
+<body>
+
+<div id="dialog" title="Minimizable dialog">
+	<p>This is the dialog which can be minimized and restored.</p>
+</div>
+
+<div class="demo-description">
+<p>This is the dialog which can be minimized and restored.</p>
+</div>
+</body>
+</html>
diff --git a/tests/unit/dialog/common-deprecated.js b/tests/unit/dialog/common-deprecated.js
@@ -14,9 +14,12 @@ common.testWidget( "dialog", {
 		},
 		closeOnEscape: true,
 		closeText: "Close",
+		minimizeText: "Minimize",
+		restoreText: "Restore",
 		dialogClass: "",
 		disabled: false,
 		draggable: true,
+		minimizable: false,
 		height: "auto",
 		hide: null,
 		maxHeight: null,

diff --git a/tests/unit/dialog/common.js b/tests/unit/dialog/common.js
@@ -14,8 +14,11 @@ common.testWidget( "dialog", {
 		},
 		closeOnEscape: true,
 		closeText: "Close",
+		minimizeText: "Minimize",
+		restoreText: "Restore",
 		disabled: false,
 		draggable: true,
+		minimizable: false,
 		height: "auto",
 		hide: null,
 		maxHeight: null,

diff --git a/themes/base/dialog.css b/themes/base/dialog.css
@@ -36,6 +36,24 @@
 	padding: 1px;
 	height: 20px;
 }
+.ui-dialog .ui-dialog-titlebar-minimize {
+	position: absolute;
+	right: 2.1em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
+.ui-dialog .ui-dialog-titlebar-restore {
+	position: absolute;
+	right: 3.8em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
 .ui-dialog .ui-dialog-content {
 	position: relative;
 	border: 0;

diff --git a/themes/base/theme.css b/themes/base/theme.css
@@ -338,6 +338,8 @@ a.ui-button:active,
 .ui-icon-minus { background-position: -48px -128px; }
 .ui-icon-minusthick { background-position: -64px -128px; }
 .ui-icon-close { background-position: -80px -128px; }
+.ui-icon-restore { background-position: -176px -128px; }
+.ui-icon-minimize { background-position: -48px -128px; }
 .ui-icon-closethick { background-position: -96px -128px; }
 .ui-icon-key { background-position: -112px -128px; }
 .ui-icon-lightbulb { background-position: -128px -128px; }

diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
@@ -58,7 +58,10 @@ $.widget( "ui.dialog", {
 		},
 		closeOnEscape: true,
 		closeText: "Close",
+		minimizeText: "Minimize",
+		restoreText: "Restore",
 		draggable: true,
+		minimizable: false,
 		hide: null,
 		height: "auto",
 		maxHeight: null,
@@ -446,6 +449,60 @@ $.widget( "ui.dialog", {
 			}
 		} );
 
+		if ( this.options.minimizable ) {
+			this.uiDialogTitlebarMinimize = $( "<button type='button'></button>" )
+				.button( {
+					label: $( "<a>" ).text( this.options.minimizeText ).html(),
+					icon: "ui-icon ui-icon-minimize",
+					showLabel: false
+				} )
+				.appendTo( this.uiDialogTitlebar );
+			this._addClass( this.uiDialogTitlebarMinimize, "ui-dialog-titlebar-minimize" );
+			this._on( this.uiDialogTitlebarMinimize, {
+				click: function( event ) {
+					event.preventDefault();
+					this.options.restoreWidth = this.options.width;
+					this.options.restoreHeight = this.options.height;
+					this.uiDialog.width( this.uiDialogTitlebar.outerWidth() > 300 ?
+                        300 :
+                        this.uiDialogTitlebar.outerWidth() );
+					this.uiDialog.height( this.uiDialogTitlebar.outerHeight() );
+					this.element.hide();
+					this.uiDialogButtonPane.hide();
+					this.uiDialogTitlebarRestore.button( "enable" );
+					this.uiDialogTitlebarMinimize.button( "disable" );
+				}
+			} );
+			this.uiDialogTitlebarRestore = $( "<button type='button'></button>" )
+				.button( {
+					label: $( "<a>" ).text( this.options.restoreText ).html(),
+					icon: "ui-icon ui-icon-restore",
+					showLabel: false
+				} )
+				.appendTo( this.uiDialogTitlebar );
+			this._addClass( this.uiDialogTitlebarRestore, "ui-dialog-titlebar-restore" );
+			this._on( this.uiDialogTitlebarRestore, {
+				click: function( event ) {
+					event.preventDefault();
+					if ( this.options.restoreWidth !== undefined &&
+						this.options.restoreWidth !== null &&
+                        this.options.restoreWidth !== "" ) {
+						this.uiDialog.width( this.options.restoreWidth );
+					}
+					if ( this.options.restoreHeight !== undefined &&
+						this.options.restoreHeight !== null &&
+                        this.options.restoreHeight !== "" ) {
+						this.uiDialog.height( this.options.restoreHeight );
+					}
+					this.element.show();
+					this.uiDialogButtonPane.show();
+					this.uiDialogTitlebarMinimize.button( "enable" );
+					this.uiDialogTitlebarRestore.button( "disable" );
+				}
+			} );
+			this.uiDialogTitlebarRestore.button( "disable" );
+		}
+
 		uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
 		this._addClass( uiDialogTitle, "ui-dialog-title" );
 		this._title( uiDialogTitle );