From 33aad10e73c5c2925cdfd24a208f7f9948edc3c8 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Fri, 18 Mar 2016 10:32:22 +1100 Subject: [PATCH] Adding dialogOptions library for adding responsiveness to jquery dialog --- app/assets/javascripts/admin/all.js | 1 + .../shared/jquery.dialogOptions.js | 191 ++++++++++++++++++ 2 files changed, 192 insertions(+) create mode 100644 app/assets/javascripts/shared/jquery.dialogOptions.js diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 9f99dc1dcd..6f592ae152 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -9,6 +9,7 @@ //= require jquery_ujs //= require jquery-ui //= require shared/jquery-ui-timepicker-addon +//= require shared/jquery.dialogOptions //= require angular //= require angular-resource //= require angular-animate diff --git a/app/assets/javascripts/shared/jquery.dialogOptions.js b/app/assets/javascripts/shared/jquery.dialogOptions.js new file mode 100644 index 0000000000..02f3bdc58a --- /dev/null +++ b/app/assets/javascripts/shared/jquery.dialogOptions.js @@ -0,0 +1,191 @@ +/* + * jQuery UI dialogOptions v1.0 + * @desc extending jQuery Ui Dialog - Responsive, click outside, class handling + * @author Jason Day + * + * Dependencies: + * jQuery: http://jquery.com/ + * jQuery UI: http://jqueryui.com/ + * Modernizr: http://modernizr.com/ + * + * MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * (c) Jason Day 2014 + * + * New Options: + * clickOut: true // closes dialog when clicked outside + * responsive: true // fluid width & height based on viewport + * // true: always responsive + * // false: never responsive + * // "touch": only responsive on touch device + * scaleH: 0.8 // responsive scale height percentage, 0.8 = 80% of viewport + * scaleW: 0.8 // responsive scale width percentage, 0.8 = 80% of viewport + * showTitleBar: true // false: hide titlebar + * showCloseButton: true // false: hide close button + * + * Added functionality: + * add & remove dialogClass to .ui-widget-overlay for scoping styles + * patch for: http://bugs.jqueryui.com/ticket/4671 + * recenter dialog - ajax loaded content + */ + +// add new options with default values +$.ui.dialog.prototype.options.clickOut = true; +$.ui.dialog.prototype.options.responsive = true; +$.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; + + +// extend _init +var _init = $.ui.dialog.prototype._init; +$.ui.dialog.prototype._init = function () { + var self = this; + + // apply original arguments + _init.apply(this, arguments); + + //patch + if ($.ui && $.ui.dialog && $.ui.dialog.overlay) { + $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function (event) { + return event + '.dialog-overlay'; + }).join(' '); + } +}; +// end _init + + +// extend open function +var _open = $.ui.dialog.prototype.open; +$.ui.dialog.prototype.open = function () { + var self = this; + + // apply original arguments + _open.apply(this, arguments); + + // get dialog original size on open + var oHeight = self.element.parent().outerHeight(), + oWidth = self.element.parent().outerWidth(), + isTouch = $("html").hasClass("touch"); + + // responsive width & height + var resize = function () { + + // check if responsive + // dependent on modernizr for device detection / html.touch + if (self.options.responsive === true || (self.options.responsive === "touch" && isTouch)) { + var elem = self.element, + wHeight = $(window).height(), + wWidth = $(window).width(), + dHeight = elem.parent().outerHeight(), + dWidth = elem.parent().outerWidth(), + setHeight = Math.min(wHeight * self.options.scaleH, oHeight), + setWidth = Math.min(wWidth * self.options.scaleW, oWidth); + + // check & set height + if ((oHeight + 100) > wHeight || elem.hasClass("resizedH")) { + elem.dialog("option", "height", setHeight).parent().css("max-height", setHeight); + elem.addClass("resizedH"); + } + + // check & set width + if ((oWidth + 100) > wWidth || elem.hasClass("resizedW")) { + elem.dialog("option", "width", setWidth).parent().css("max-width", setWidth); + elem.addClass("resizedW"); + } + + // only recenter & add overflow if dialog has been resized + if (elem.hasClass("resizedH") || elem.hasClass("resizedW")) { + elem.dialog("option", "position", "center"); + elem.css("overflow", "auto"); + } + } + + // add webkit scrolling to all dialogs for touch devices + if (isTouch) { + elem.css("-webkit-overflow-scrolling", "touch"); + } + }; + + // call resize() + resize(); + + // resize on window resize + $(window).on("resize", function () { + resize(); + }); + + // resize on orientation change + if (window.addEventListener) { // Add extra condition because IE8 doesn't support addEventListener (or orientationchange) + window.addEventListener("orientationchange", function () { + resize(); + }); + } + + // hide titlebar + if (!self.options.showTitleBar) { + self.uiDialogTitlebar.css({ + "height": 0, + "padding": 0, + "background": "none", + "border": 0 + }); + self.uiDialogTitlebar.find(".ui-dialog-title").css("display", "none"); + } + + //hide close button + if (!self.options.showCloseButton) { + self.uiDialogTitlebar.find(".ui-dialog-titlebar-close").css("display", "none"); + } + + // close on clickOut + if (self.options.clickOut && !self.options.modal) { + // use transparent div - simplest approach (rework) + $('
').insertBefore(self.element.parent()); + $('#dialog-overlay').css({ + "position": "fixed", + "top": 0, + "right": 0, + "bottom": 0, + "left": 0, + "background-color": "transparent" + }); + $('#dialog-overlay').click(function (e) { + e.preventDefault(); + e.stopPropagation(); + self.close(); + }); + // else close on modal click + } else if (self.options.clickOut && self.options.modal) { + $('.ui-widget-overlay').click(function (e) { + self.close(); + }); + } + + // add dialogClass to overlay + if (self.options.dialogClass) { + $('.ui-widget-overlay').addClass(self.options.dialogClass); + } +}; +//end open + + +// extend close function +var _close = $.ui.dialog.prototype.close; +$.ui.dialog.prototype.close = function () { + var self = this; + // apply original arguments + _close.apply(this, arguments); + + // remove dialogClass to overlay + if (self.options.dialogClass) { + $('.ui-widget-overlay').removeClass(self.options.dialogClass); + } + //remove clickOut overlay + if ($("#dialog-overlay").length) { + $("#dialog-overlay").remove(); + } +}; +//end close