From a7d4aaf55b110067cb1d44c57181314e120e71f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Fri, 24 Mar 2017 11:50:48 +0100 Subject: [PATCH 1/6] Improved: center dialog always on window resize, "keepVisible" prop. Now, responsive dialogs recenter always upon window resize (not only when the dialog is resized). Besides, added "keepVisible" property to recenter dialogs also upon scrolling (regardless of them being "responsive" or not). --- jquery.dialogOptions.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index d726c28..83e7100 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -23,6 +23,9 @@ * scaleW: 0.8 // responsive scale width percentage, 0.8 = 80% of viewport * showTitleBar: true // false: hide titlebar * showCloseButton: true // false: hide close button + * keepVisible: "modal" // true: keep visible on scroll + * // false: do not keep visible on scroll + * // "modal": only keep modal dialogs visible on scroll * * Added functionality: * add & remove dialogClass to .ui-widget-overlay for scoping styles @@ -37,6 +40,7 @@ $.ui.dialog.prototype.options.scaleH = 0.8; $.ui.dialog.prototype.options.scaleW = 0.8; $.ui.dialog.prototype.options.showTitleBar = true; $.ui.dialog.prototype.options.showCloseButton = true; +$.ui.dialog.prototype.options.keepVisible = "modal"; // extend _init @@ -69,6 +73,10 @@ $.ui.dialog.prototype.open = function () { var oHeight = self.element.parent().outerHeight(), oWidth = self.element.parent().outerWidth(), isTouch = $("html").hasClass("touch"); + + var center = function () { + self.element.dialog("option", "position", "center"); + }; // responsive width & height var resize = function () { @@ -95,10 +103,12 @@ $.ui.dialog.prototype.open = function () { elem.dialog("option", "width", setWidth).parent().css("max-width", setWidth); elem.addClass("resizedW"); } + + // recenter + center(); - // only recenter & add overflow if dialog has been resized + // only add overflow if dialog has been resized if (elem.hasClass("resizedH") || elem.hasClass("resizedW")) { - elem.dialog("option", "position", "center"); elem.css("overflow", "auto"); } } @@ -116,7 +126,14 @@ $.ui.dialog.prototype.open = function () { $(window).on("resize", function () { resize(); }); - + + // center on window scroll according to keepVisible + $(window).on("scroll", function () { + if (self.options.keepVisible === true || (self.options.keepVisible === "modal" && self.options.modal) { + center(); + } + }; + // resize on orientation change if (window.addEventListener) { // Add extra condition because IE8 doesn't support addEventListener (or orientationchange) window.addEventListener("orientationchange", function () { From 55b6944a7bf191a9f16a013dbe576626469ef0ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Fri, 24 Mar 2017 11:57:10 +0100 Subject: [PATCH 2/6] Fixed 2 syntax errors. Sorry! --- jquery.dialogOptions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index 83e7100..ec5aa3b 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -129,10 +129,10 @@ $.ui.dialog.prototype.open = function () { // center on window scroll according to keepVisible $(window).on("scroll", function () { - if (self.options.keepVisible === true || (self.options.keepVisible === "modal" && self.options.modal) { + if (self.options.keepVisible === true || (self.options.keepVisible === "modal" && self.options.modal)) { center(); } - }; + }); // resize on orientation change if (window.addEventListener) { // Add extra condition because IE8 doesn't support addEventListener (or orientationchange) From 48618522b954ca346d144505ea3f17bb5d9bbee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Mon, 27 Mar 2017 15:10:50 +0200 Subject: [PATCH 3/6] Fixed: do not recenter upon initial display. --- jquery.dialogOptions.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index ec5aa3b..caccc19 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -79,7 +79,10 @@ $.ui.dialog.prototype.open = function () { }; // responsive width & height - var resize = function () { + var resize = function (force) { + + if (typeof force == "undefined") + force = false; // check if responsive // dependent on modernizr for device detection / html.touch @@ -104,14 +107,16 @@ $.ui.dialog.prototype.open = function () { elem.addClass("resizedW"); } - // recenter - center(); - - // only add overflow if dialog has been resized - if (elem.hasClass("resizedH") || elem.hasClass("resizedW")) { + // only recenter and add overflow if dialog has been resized or centering is forced + if (force || elem.hasClass("resizedH") || elem.hasClass("resizedW")) { + center(); elem.css("overflow", "auto"); } } + // although not responsive, recenter if forced and not draggable + else if (force && !self.options.draggable) { + center(); + } // add webkit scrolling to all dialogs for touch devices if (isTouch) { @@ -122,9 +127,9 @@ $.ui.dialog.prototype.open = function () { // call resize() resize(); - // resize on window resize + // resize on window resize (force centering) $(window).on("resize", function () { - resize(); + resize(true); }); // center on window scroll according to keepVisible @@ -134,10 +139,10 @@ $.ui.dialog.prototype.open = function () { } }); - // resize on orientation change + // resize on orientation change (force centering) if (window.addEventListener) { // Add extra condition because IE8 doesn't support addEventListener (or orientationchange) window.addEventListener("orientationchange", function () { - resize(); + resize(true); }); } From 72477cf1a528814c5a818d225e5e74ad6bf5731b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Fri, 26 Nov 2021 14:52:36 +0100 Subject: [PATCH 4/6] Make sure centering is done only if suitable If the dialog does not fit in the viewport it will not be centered. --- jquery.dialogOptions.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index caccc19..2d31c29 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -75,7 +75,16 @@ $.ui.dialog.prototype.open = function () { isTouch = $("html").hasClass("touch"); var center = function () { - self.element.dialog("option", "position", "center"); + var elem = self.element; + + // center only it fits in viewport + if ($(elem).width() <= $(window).width() + && $(elem).height() <= $(window).height()) + { + if ($(elem).hasClass('ui-dialog-content')) { + elem.dialog("option", "position", "center"); + } + } }; // responsive width & height From f91ba9a483854a44b37642421597adb5be0a99dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Fri, 26 Nov 2021 15:04:28 +0100 Subject: [PATCH 5/6] Fixed indent. --- jquery.dialogOptions.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index 2d31c29..084bb39 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -75,16 +75,16 @@ $.ui.dialog.prototype.open = function () { isTouch = $("html").hasClass("touch"); var center = function () { - var elem = self.element; - - // center only it fits in viewport - if ($(elem).width() <= $(window).width() - && $(elem).height() <= $(window).height()) - { - if ($(elem).hasClass('ui-dialog-content')) { - elem.dialog("option", "position", "center"); - } + var elem = self.element; + + // center only it fits in viewport + if ($(elem).width() <= $(window).width() + && $(elem).height() <= $(window).height()) + { + if ($(elem).hasClass('ui-dialog-content')) { + elem.dialog("option", "position", "center"); } + } }; // responsive width & height From 4512f189bf9a6a5f2373aa494ad5210de4d4f979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Oliva=20Reglero?= Date: Thu, 2 Dec 2021 10:16:52 +0100 Subject: [PATCH 6/6] Fixed tolerance when detecting whether dialog should be centered or no. --- jquery.dialogOptions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.dialogOptions.js b/jquery.dialogOptions.js index 084bb39..2e9e139 100644 --- a/jquery.dialogOptions.js +++ b/jquery.dialogOptions.js @@ -78,8 +78,8 @@ $.ui.dialog.prototype.open = function () { var elem = self.element; // center only it fits in viewport - if ($(elem).width() <= $(window).width() - && $(elem).height() <= $(window).height()) + if ($(elem).parent().outerWidth() <= $(window).width() + && $(elem).parent().outerHeight() <= $(window).height()) { if ($(elem).hasClass('ui-dialog-content')) { elem.dialog("option", "position", "center");