New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@odopod/odo-dialog

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@odopod/odo-dialog - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

@@ -329,2 +329,4 @@ (function (global, factory) {

_this.z = Dialog.Z_BASE;
Dialog.Instances.push(_this);

@@ -445,11 +447,14 @@

Dialog.prototype.onKeyPress = function onKeyPress(evt) {
// If 'ESC' is pressed, close the dialog
if (this.options.dismissable && evt.which === Dialog.Keys.ESC) {
this.close();
}
// Only react to keys when this dialog is the top-most one.
if (this.z === Dialog.getTopLayer()) {
// If 'ESC' is pressed, close the dialog
if (this.options.dismissable && evt.which === Dialog.Keys.ESC) {
this.close();
}
// If the TAB key is being pressed, make sure the focus stays trapped within
// the dialog element.
if (evt.which === Dialog.Keys.TAB) {
Dialog._trapTabKey(this.element, evt);
// If the TAB key is being pressed, make sure the focus stays trapped within
// the dialog element.
if (evt.which === Dialog.Keys.TAB) {
Dialog._trapTabKey(this.element, evt);
}
}

@@ -507,2 +512,8 @@ };

// If there is already an open dialog, increase the z-index of this dialog's
// main element and backdrop above the open one.
if (Dialog.getOpenDialogCount() > 0) {
this.handleOtherOpenDialogs();
}
this.isOpen = true;

@@ -653,4 +664,6 @@ this.onResize(viewportHeight);

this.element.classList.remove(Dialog.Classes.LEAVING);
document.body.style.paddingRight = '';
document.body.classList.remove(Dialog.Classes.BODY_OPEN);
if (Dialog.getOpenDialogCount() === 0) {
document.body.style.paddingRight = '';
document.body.classList.remove(Dialog.Classes.BODY_OPEN);
}
document.body.removeChild(this.backdrop);

@@ -661,2 +674,60 @@ this.emit(Dialog.EventType.CLOSED);

/**
* Modify dialog z-indices and more because there are about to be multiple
* dialogs open at the same time.
* @protected
*/
Dialog.prototype.handleOtherOpenDialogs = function handleOtherOpenDialogs() {
var _this4 = this;
this.z = Dialog.getTopLayer() + 20;
this.element.style.zIndex = this.z;
this.backdrop.style.zIndex = this.z - 5;
// When this dialog is closed, revert the z-index back to its original value.
this.once(Dialog.EventType.CLOSED, function () {
_this4.z = Dialog.Z_BASE;
_this4.element.style.zIndex = '';
_this4.backdrop.style.zIndex = '';
// Find new top dialog.
var zTop = Dialog.getTopLayer();
Dialog.Instances.forEach(function (instance) {
if (instance.isOpen && instance.z === zTop) {
instance.didEnterForeground();
}
});
});
// Tell other dialogs they're going into the background.
Dialog.Instances.forEach(function (instance) {
if (instance.isOpen && instance.id !== _this4.id) {
instance.didEnterBackground();
}
});
};
/**
* Dialog went into the background and has another dialog open above it.
* @protected
*/
Dialog.prototype.didEnterBackground = function didEnterBackground() {
ScrollFix$1.remove(this._scrollFixId);
};
/**
* Dialog came back into the foreground after being in the background.
* @protected
*/
Dialog.prototype.didEnterForeground = function didEnterForeground() {
this._applyScrollFix();
};
/**
* Close the dialog, remove event listeners and element references.

@@ -866,2 +937,27 @@ */

/**
* Count how many dialogs are currently open.
* @return {number}
*/
Dialog.getOpenDialogCount = function getOpenDialogCount() {
return Dialog.Instances.filter(function (instance) {
return instance.isOpen;
}).length;
};
/**
* Find the z index of the top-most dialog instance.
* @return {number}
*/
Dialog.getTopLayer = function getTopLayer() {
// eslint-disable-next-line prefer-spread
return Math.max.apply(Math, Dialog.Instances.map(function (instance) {
return instance.z;
}));
};
return Dialog;

@@ -907,5 +1003,7 @@ }(TinyEmitter);

/** @enum {Dialog[]} */
/** @type {Dialog[]} */
Dialog.Instances = [];
Dialog.Z_BASE = 1050;
Dialog.ScrollFix = ScrollFix$1;

@@ -912,0 +1010,0 @@

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tiny-emitter"),require("@odopod/odo-helpers"),require("@odopod/odo-device")):"function"==typeof define&&define.amd?define(["tiny-emitter","@odopod/odo-helpers","@odopod/odo-device"],t):e.OdoDialog=t(e.TinyEmitter,e.OdoHelpers,e.OdoDevice)}(this,function(e,t,i){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,i=i&&i.hasOwnProperty("default")?i.default:i;var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=function(){function e(t,i){o(this,e),this.element=t,this.id=i,this.startY=null,this.scrollY=null,this._createBoundEvents(),this._registerEvents()}return e.prototype._createBoundEvents=function(){this._touchStartBound=this._onTouchStart.bind(this),this._touchMoveBound=this._onTouchMove.bind(this),this._preventDefaultBound=this._preventDefault.bind(this)},e.prototype._registerEvents=function(){document.body.addEventListener("touchstart",this._touchStartBound),document.body.addEventListener("touchmove",this._touchMoveBound),document.addEventListener("touchmove",this._preventDefaultBound)},e.prototype._onTouchStart=function(e){this.startY=e.changedTouches[0].pageY,this.scrollY=this.element.scrollTop},e.prototype._onTouchMove=function(e){var t=this.startY-e.changedTouches[0].pageY,i=this.scrollY+t;i<0||i+this.element.offsetHeight>this.element.scrollHeight?e.preventDefault():e.stopPropagation()},e.prototype._preventDefault=function(e){e.preventDefault()},e.prototype.dispose=function(){document.body.removeEventListener("touchstart",this._touchStartBound),document.body.removeEventListener("touchmove",this._touchMoveBound),document.removeEventListener("touchmove",this._preventDefaultBound),this.element=null,this.id=null},e}(),l={_fixes:new Map,add:function(e){if(i.HAS_TOUCH_EVENTS){var o=t.string.random();return this._fixes.set(o,new s(e,o)),o}return""},remove:function(e){this._fixes.has(e)&&(this._fixes.get(e).dispose(),this._fixes.delete(e))}},r=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'].join(","),d=function(e){function i(t,s){o(this,i);var l=n(this,e.call(this));if(!(t instanceof Element))throw new TypeError('OdoDialog requires an element. Got: "'+t+'"');return l.element=t,l.options=Object.assign({},i.Defaults,s),l.id=t.getAttribute("id"),l.backdrop=document.createElement("div"),l.backdrop.className=i.Classes.BACKDROP,l.content=l.getByClass(i.Classes.CONTENT),l._closers=Array.from(l.element.querySelectorAll("[data-odo-dialog-close]")),l._resizeId=null,l._scrollFixId=null,l.isOpen=!1,l.isAnimating=!1,l._hasBodyScrollbar=null,l._originalBodyPadding=-1,l._isFullscreen=null,i.Instances.push(l),1===i.Instances.length&&document.body.addEventListener("click",i._handleTriggerClick),l.element.classList.toggle(i.Classes.NO_AUTO_MARGIN,!i.SUPPORTS_AUTO_MARGINS),l._bindContexts(),l.onResize(),l._addA11yAttributes(),l._ensureBodyChild(),l}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,e),i.prototype.getByClass=function(e){return this.element.getElementsByClassName(e)[0]},i.prototype._bindContexts=function(){this.onKeyPress=this.onKeyPress.bind(this),this.onClick=this.onClick.bind(this),this.close=this.close.bind(this),this.onWindowResize=this.onResize.bind(this,void 0)},i.prototype._addA11yAttributes=function(){this.element.tabIndex=-1,this.element.setAttribute("aria-hidden",!0),this.element.setAttribute("role","dialog"),this.content.setAttribute("role","document")},i.prototype._ensureBodyChild=function(){this.element.parentNode!==document.body&&document.body.appendChild(this.element)},i.prototype._applyScrollFix=function(){if(this.options.scrollableElement){var e=this.element.matches(this.options.scrollableElement)?this.element:this.element.querySelector(this.options.scrollableElement);this._scrollFixId=l.add(e)}},i.prototype._getScrollbarOffset=function(){var e=this.element.scrollHeight>document.documentElement.clientHeight;return this._hasBodyScrollbar&&!e?i.SCROLLBAR_WIDTH:0},i.prototype.onClick=function(e){this.options.dismissable&&e.target===this.element&&this.close()},i.prototype.onKeyPress=function(e){this.options.dismissable&&e.which===i.Keys.ESC&&this.close(),e.which===i.Keys.TAB&&i._trapTabKey(this.element,e)},i.prototype.onResize=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.innerHeight;this.element.style.height=e+"px"},i.prototype.open=function(){var e=this,o=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isAnimating&&!this.isOpen){var n=window.innerHeight;i.focusedBeforeDialog=document.activeElement,this._hasBodyScrollbar=document.body.clientWidth<window.innerWidth,this._isFullscreen=this.element.classList.contains(i.Classes.FULLSCREEN);var s=i._getSiblings(this.element),l=s.map(function(e){return e.getAttribute("aria-hidden")});s.forEach(function(e,t){l[t]&&e.setAttribute("data-odo-dialog-original",l[t]),e.setAttribute("aria-hidden",!0)}),this.isOpen=!0,this.onResize(n),this.element.removeAttribute("aria-hidden"),this.element.classList.add(i.Classes.OPEN),this.element.classList.add(i.Classes.ENTER),i.SCROLLBAR_WIDTH&&(document.body.style.paddingRight=i.SCROLLBAR_WIDTH+"px"),document.body.classList.add(i.Classes.BODY_OPEN),document.body.insertBefore(this.backdrop,this.element.nextSibling),this.element.scrollTop=0,this._applyScrollFix(),this.element.focus(),document.addEventListener("keydown",this.onKeyPress),window.addEventListener("resize",this.onWindowResize),this.element.addEventListener("click",this.onClick),this._closers.forEach(function(t){t.addEventListener("click",e.close)}),!0===o?(this._openNext(),this._opened()):i._nextFrame(function(){e._openNext(),t.animation.onTransitionEnd(e.element,e._opened,e,null,1e3)})}},i.prototype._openNext=function(){this.isAnimating=!0;var e=this._getScrollbarOffset();!this._isFullscreen&&e>0&&(this.element.style.paddingRight=e+"px"),this.element.classList.remove(i.Classes.ENTER),this.element.classList.add(i.Classes.ENTERING)},i.prototype._opened=function(){this.element.classList.remove(i.Classes.ENTERING),this.element.classList.add(i.Classes.VISIBLE),this.isAnimating=!1,this.emit(i.EventType.OPENED)},i.prototype.close=function(){var e=this,o=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isAnimating&&this.isOpen){var n=i._getSiblings(this.element),s=n.map(function(e){return e.getAttribute("data-odo-dialog-original")});n.forEach(function(e,t){s[t]?(e.setAttribute("aria-hidden",s[t]),e.removeAttribute("data-odo-dialog-original")):e.removeAttribute("aria-hidden")}),this.isOpen=!1,this.element.classList.add(i.Classes.LEAVE),this.element.classList.remove(i.Classes.VISIBLE),l.remove(this._scrollFixId),i.focusedBeforeDialog&&"function"==typeof i.focusedBeforeDialog.focus&&i.focusedBeforeDialog.focus(),document.removeEventListener("keydown",this.onKeyPress),window.removeEventListener("resize",this.onWindowResize),this.element.removeEventListener("click",this.onClick),this._closers.forEach(function(t){t.removeEventListener("click",e.close)}),!0===o?(this._closeNext(),this._closed()):i._nextFrame(function(){e._closeNext(),t.animation.onTransitionEnd(e.element,e._closed,e,null,1e3)})}},i.prototype._closeNext=function(){this.isAnimating=!0,this.element.classList.remove(i.Classes.LEAVE),this.element.classList.add(i.Classes.LEAVING)},i.prototype._closed=function(){this.isAnimating=!1,this.element.style.paddingRight="",this.element.setAttribute("aria-hidden",!0),this.element.classList.remove(i.Classes.OPEN),this.element.classList.remove(i.Classes.LEAVING),document.body.style.paddingRight="",document.body.classList.remove(i.Classes.BODY_OPEN),document.body.removeChild(this.backdrop),this.emit(i.EventType.CLOSED)},i.prototype.dispose=function(){this.isOpen&&this.close(!0),this.element=null,this.content=null,this.backdrop=null,this._closers.length=0,t.array.remove(i.Instances,this),0===i.Instances.length&&document.body.removeEventListener("click",i._handleTriggerClick)},i._nextFrame=function(e){window.requestAnimationFrame(window.requestAnimationFrame.bind(null,e))},i._handleTriggerClick=function(e){var t=e.target.closest("[data-odo-dialog-open]");if(null!==t){e.preventDefault();var o=t.getAttribute("data-odo-dialog-open"),n=i.getDialogById(o);n.emit(i.EventType.TRIGGER_CLICKED,t),n.open()}},i._trapTabKey=function(e,t){var o=i._getFocusableChildren(e),n=o.indexOf(document.activeElement);t.shiftKey&&0===n?(o[o.length-1].focus(),t.preventDefault()):t.shiftKey||n!==o.length-1||(o[0].focus(),t.preventDefault())},i._getFocusableChildren=function(e){return Array.from(e.querySelectorAll(r)).filter(i._isVisibleElement)},i._isVisibleElement=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},i._getSiblings=function(e){var t=["script","link","meta"];return Array.from(e.parentNode.children).filter(function(i){return i!==e&&!t.includes(i.nodeName.toLowerCase())})},i._getScrollbarWidth=function(){var e=document.createElement("div");e.style.cssText="width:50px;height:50px;overflow:scroll;position:absolute;top:-9999px;",document.body.appendChild(e);var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t},i._autoMarginTest=function(){var e=document.createElement("div"),t=document.createElement("div");e.style.cssText="display:flex;height:50px;width:50px;position:absolute;",t.style.cssText="margin:auto;",t.innerHTML="a",e.appendChild(t),document.body.appendChild(e);var i=t.offsetTop>0;return document.body.removeChild(e),i},i.initializeAll=function(e){return i.disposeAll(),Array.from(document.querySelectorAll("."+i.Classes.BASE)).map(function(t){return new i(t,e)})},i.disposeAll=function(){i.Instances.slice().forEach(function(e){e.dispose()})},i.getDialogById=function(e){return i.Instances.find(function(t){return t.id===e})},i}(e);return d.Classes={BODY_OPEN:"odo-dialog-open",BASE:"odo-dialog",OPEN:"odo-dialog--open",ENTER:"odo-dialog--enter",ENTERING:"odo-dialog--enter-active",LEAVE:"odo-dialog--leave",LEAVING:"odo-dialog--leave-active",VISIBLE:"odo-dialog--visible",FULLSCREEN:"odo-dialog--full",NO_AUTO_MARGIN:"odo-dialog--no-auto-margin",BACKDROP:"odo-dialog-backdrop",CONTENT:"odo-dialog__content"},d.EventType={OPENED:"ododialog:open",CLOSED:"ododialog:closed",TRIGGER_CLICKED:"ododialog:triggerclicked"},d.Keys={ESC:27,TAB:9},d.Defaults={dismissable:!0,scrollableElement:".odo-dialog"},d.Instances=[],d.ScrollFix=l,d.focusedBeforeDialog=null,d.SUPPORTS_AUTO_MARGINS=d._autoMarginTest(),d.SCROLLBAR_WIDTH=d._getScrollbarWidth(),d});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tiny-emitter"),require("@odopod/odo-helpers"),require("@odopod/odo-device")):"function"==typeof define&&define.amd?define(["tiny-emitter","@odopod/odo-helpers","@odopod/odo-device"],t):e.OdoDialog=t(e.TinyEmitter,e.OdoHelpers,e.OdoDevice)}(this,function(e,t,n){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=function(){function e(t,n){i(this,e),this.element=t,this.id=n,this.startY=null,this.scrollY=null,this._createBoundEvents(),this._registerEvents()}return e.prototype._createBoundEvents=function(){this._touchStartBound=this._onTouchStart.bind(this),this._touchMoveBound=this._onTouchMove.bind(this),this._preventDefaultBound=this._preventDefault.bind(this)},e.prototype._registerEvents=function(){document.body.addEventListener("touchstart",this._touchStartBound),document.body.addEventListener("touchmove",this._touchMoveBound),document.addEventListener("touchmove",this._preventDefaultBound)},e.prototype._onTouchStart=function(e){this.startY=e.changedTouches[0].pageY,this.scrollY=this.element.scrollTop},e.prototype._onTouchMove=function(e){var t=this.startY-e.changedTouches[0].pageY,n=this.scrollY+t;n<0||n+this.element.offsetHeight>this.element.scrollHeight?e.preventDefault():e.stopPropagation()},e.prototype._preventDefault=function(e){e.preventDefault()},e.prototype.dispose=function(){document.body.removeEventListener("touchstart",this._touchStartBound),document.body.removeEventListener("touchmove",this._touchMoveBound),document.removeEventListener("touchmove",this._preventDefaultBound),this.element=null,this.id=null},e}(),l={_fixes:new Map,add:function(e){if(n.HAS_TOUCH_EVENTS){var i=t.string.random();return this._fixes.set(i,new s(e,i)),i}return""},remove:function(e){this._fixes.has(e)&&(this._fixes.get(e).dispose(),this._fixes.delete(e))}},r=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'].join(","),a=function(e){function n(t,s){i(this,n);var l=o(this,e.call(this));if(!(t instanceof Element))throw new TypeError('OdoDialog requires an element. Got: "'+t+'"');return l.element=t,l.options=Object.assign({},n.Defaults,s),l.id=t.getAttribute("id"),l.backdrop=document.createElement("div"),l.backdrop.className=n.Classes.BACKDROP,l.content=l.getByClass(n.Classes.CONTENT),l._closers=Array.from(l.element.querySelectorAll("[data-odo-dialog-close]")),l._resizeId=null,l._scrollFixId=null,l.isOpen=!1,l.isAnimating=!1,l._hasBodyScrollbar=null,l._originalBodyPadding=-1,l._isFullscreen=null,l.z=n.Z_BASE,n.Instances.push(l),1===n.Instances.length&&document.body.addEventListener("click",n._handleTriggerClick),l.element.classList.toggle(n.Classes.NO_AUTO_MARGIN,!n.SUPPORTS_AUTO_MARGINS),l._bindContexts(),l.onResize(),l._addA11yAttributes(),l._ensureBodyChild(),l}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(n,e),n.prototype.getByClass=function(e){return this.element.getElementsByClassName(e)[0]},n.prototype._bindContexts=function(){this.onKeyPress=this.onKeyPress.bind(this),this.onClick=this.onClick.bind(this),this.close=this.close.bind(this),this.onWindowResize=this.onResize.bind(this,void 0)},n.prototype._addA11yAttributes=function(){this.element.tabIndex=-1,this.element.setAttribute("aria-hidden",!0),this.element.setAttribute("role","dialog"),this.content.setAttribute("role","document")},n.prototype._ensureBodyChild=function(){this.element.parentNode!==document.body&&document.body.appendChild(this.element)},n.prototype._applyScrollFix=function(){if(this.options.scrollableElement){var e=this.element.matches(this.options.scrollableElement)?this.element:this.element.querySelector(this.options.scrollableElement);this._scrollFixId=l.add(e)}},n.prototype._getScrollbarOffset=function(){var e=this.element.scrollHeight>document.documentElement.clientHeight;return this._hasBodyScrollbar&&!e?n.SCROLLBAR_WIDTH:0},n.prototype.onClick=function(e){this.options.dismissable&&e.target===this.element&&this.close()},n.prototype.onKeyPress=function(e){this.z===n.getTopLayer()&&(this.options.dismissable&&e.which===n.Keys.ESC&&this.close(),e.which===n.Keys.TAB&&n._trapTabKey(this.element,e))},n.prototype.onResize=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.innerHeight;this.element.style.height=e+"px"},n.prototype.open=function(){var e=this,i=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isAnimating&&!this.isOpen){var o=window.innerHeight;n.focusedBeforeDialog=document.activeElement,this._hasBodyScrollbar=document.body.clientWidth<window.innerWidth,this._isFullscreen=this.element.classList.contains(n.Classes.FULLSCREEN);var s=n._getSiblings(this.element),l=s.map(function(e){return e.getAttribute("aria-hidden")});s.forEach(function(e,t){l[t]&&e.setAttribute("data-odo-dialog-original",l[t]),e.setAttribute("aria-hidden",!0)}),n.getOpenDialogCount()>0&&this.handleOtherOpenDialogs(),this.isOpen=!0,this.onResize(o),this.element.removeAttribute("aria-hidden"),this.element.classList.add(n.Classes.OPEN),this.element.classList.add(n.Classes.ENTER),n.SCROLLBAR_WIDTH&&(document.body.style.paddingRight=n.SCROLLBAR_WIDTH+"px"),document.body.classList.add(n.Classes.BODY_OPEN),document.body.insertBefore(this.backdrop,this.element.nextSibling),this.element.scrollTop=0,this._applyScrollFix(),this.element.focus(),document.addEventListener("keydown",this.onKeyPress),window.addEventListener("resize",this.onWindowResize),this.element.addEventListener("click",this.onClick),this._closers.forEach(function(t){t.addEventListener("click",e.close)}),!0===i?(this._openNext(),this._opened()):n._nextFrame(function(){e._openNext(),t.animation.onTransitionEnd(e.element,e._opened,e,null,1e3)})}},n.prototype._openNext=function(){this.isAnimating=!0;var e=this._getScrollbarOffset();!this._isFullscreen&&e>0&&(this.element.style.paddingRight=e+"px"),this.element.classList.remove(n.Classes.ENTER),this.element.classList.add(n.Classes.ENTERING)},n.prototype._opened=function(){this.element.classList.remove(n.Classes.ENTERING),this.element.classList.add(n.Classes.VISIBLE),this.isAnimating=!1,this.emit(n.EventType.OPENED)},n.prototype.close=function(){var e=this,i=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isAnimating&&this.isOpen){var o=n._getSiblings(this.element),s=o.map(function(e){return e.getAttribute("data-odo-dialog-original")});o.forEach(function(e,t){s[t]?(e.setAttribute("aria-hidden",s[t]),e.removeAttribute("data-odo-dialog-original")):e.removeAttribute("aria-hidden")}),this.isOpen=!1,this.element.classList.add(n.Classes.LEAVE),this.element.classList.remove(n.Classes.VISIBLE),l.remove(this._scrollFixId),n.focusedBeforeDialog&&"function"==typeof n.focusedBeforeDialog.focus&&n.focusedBeforeDialog.focus(),document.removeEventListener("keydown",this.onKeyPress),window.removeEventListener("resize",this.onWindowResize),this.element.removeEventListener("click",this.onClick),this._closers.forEach(function(t){t.removeEventListener("click",e.close)}),!0===i?(this._closeNext(),this._closed()):n._nextFrame(function(){e._closeNext(),t.animation.onTransitionEnd(e.element,e._closed,e,null,1e3)})}},n.prototype._closeNext=function(){this.isAnimating=!0,this.element.classList.remove(n.Classes.LEAVE),this.element.classList.add(n.Classes.LEAVING)},n.prototype._closed=function(){this.isAnimating=!1,this.element.style.paddingRight="",this.element.setAttribute("aria-hidden",!0),this.element.classList.remove(n.Classes.OPEN),this.element.classList.remove(n.Classes.LEAVING),0===n.getOpenDialogCount()&&(document.body.style.paddingRight="",document.body.classList.remove(n.Classes.BODY_OPEN)),document.body.removeChild(this.backdrop),this.emit(n.EventType.CLOSED)},n.prototype.handleOtherOpenDialogs=function(){var e=this;this.z=n.getTopLayer()+20,this.element.style.zIndex=this.z,this.backdrop.style.zIndex=this.z-5,this.once(n.EventType.CLOSED,function(){e.z=n.Z_BASE,e.element.style.zIndex="",e.backdrop.style.zIndex="";var t=n.getTopLayer();n.Instances.forEach(function(e){e.isOpen&&e.z===t&&e.didEnterForeground()})}),n.Instances.forEach(function(t){t.isOpen&&t.id!==e.id&&t.didEnterBackground()})},n.prototype.didEnterBackground=function(){l.remove(this._scrollFixId)},n.prototype.didEnterForeground=function(){this._applyScrollFix()},n.prototype.dispose=function(){this.isOpen&&this.close(!0),this.element=null,this.content=null,this.backdrop=null,this._closers.length=0,t.array.remove(n.Instances,this),0===n.Instances.length&&document.body.removeEventListener("click",n._handleTriggerClick)},n._nextFrame=function(e){window.requestAnimationFrame(window.requestAnimationFrame.bind(null,e))},n._handleTriggerClick=function(e){var t=e.target.closest("[data-odo-dialog-open]");if(null!==t){e.preventDefault();var i=t.getAttribute("data-odo-dialog-open"),o=n.getDialogById(i);o.emit(n.EventType.TRIGGER_CLICKED,t),o.open()}},n._trapTabKey=function(e,t){var i=n._getFocusableChildren(e),o=i.indexOf(document.activeElement);t.shiftKey&&0===o?(i[i.length-1].focus(),t.preventDefault()):t.shiftKey||o!==i.length-1||(i[0].focus(),t.preventDefault())},n._getFocusableChildren=function(e){return Array.from(e.querySelectorAll(r)).filter(n._isVisibleElement)},n._isVisibleElement=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},n._getSiblings=function(e){var t=["script","link","meta"];return Array.from(e.parentNode.children).filter(function(n){return n!==e&&!t.includes(n.nodeName.toLowerCase())})},n._getScrollbarWidth=function(){var e=document.createElement("div");e.style.cssText="width:50px;height:50px;overflow:scroll;position:absolute;top:-9999px;",document.body.appendChild(e);var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t},n._autoMarginTest=function(){var e=document.createElement("div"),t=document.createElement("div");e.style.cssText="display:flex;height:50px;width:50px;position:absolute;",t.style.cssText="margin:auto;",t.innerHTML="a",e.appendChild(t),document.body.appendChild(e);var n=t.offsetTop>0;return document.body.removeChild(e),n},n.initializeAll=function(e){return n.disposeAll(),Array.from(document.querySelectorAll("."+n.Classes.BASE)).map(function(t){return new n(t,e)})},n.disposeAll=function(){n.Instances.slice().forEach(function(e){e.dispose()})},n.getDialogById=function(e){return n.Instances.find(function(t){return t.id===e})},n.getOpenDialogCount=function(){return n.Instances.filter(function(e){return e.isOpen}).length},n.getTopLayer=function(){return Math.max.apply(Math,n.Instances.map(function(e){return e.z}))},n}(e);return a.Classes={BODY_OPEN:"odo-dialog-open",BASE:"odo-dialog",OPEN:"odo-dialog--open",ENTER:"odo-dialog--enter",ENTERING:"odo-dialog--enter-active",LEAVE:"odo-dialog--leave",LEAVING:"odo-dialog--leave-active",VISIBLE:"odo-dialog--visible",FULLSCREEN:"odo-dialog--full",NO_AUTO_MARGIN:"odo-dialog--no-auto-margin",BACKDROP:"odo-dialog-backdrop",CONTENT:"odo-dialog__content"},a.EventType={OPENED:"ododialog:open",CLOSED:"ododialog:closed",TRIGGER_CLICKED:"ododialog:triggerclicked"},a.Keys={ESC:27,TAB:9},a.Defaults={dismissable:!0,scrollableElement:".odo-dialog"},a.Instances=[],a.Z_BASE=1050,a.ScrollFix=l,a.focusedBeforeDialog=null,a.SUPPORTS_AUTO_MARGINS=a._autoMarginTest(),a.SCROLLBAR_WIDTH=a._getScrollbarWidth(),a});
//# sourceMappingURL=odo-dialog.min.js.map

@@ -50,2 +50,8 @@ // Type definitions for OdoDialog

/**
* z-index of the main dialog element. This only changes when multiple dialogs
* are open at the same time.
*/
z: number;
/**
* Whether the dialog is currently animating.

@@ -112,2 +118,18 @@ * @protected

/**
* Modify dialog z-indices and more because there are about to be multiple
* dialogs open at the same time.
*/
protected handleOtherOpenDialogs(): void;
/**
* Dialog went into the background and has another dialog open above it.
*/
protected didEnterBackground(): void;
/**
* Dialog came back into the foreground after being in the background.
*/
protected didEnterForeground(): void;
/**
* Close the dialog, remove event listeners and element references.

@@ -144,2 +166,14 @@ */

/**
* Count how many dialogs are currently open.
* @return {number}
*/
function getOpenDialogCount(): number;
/**
* Find the z index of the top-most dialog instance.
* @return {number}
*/
function getTopLayer(): number;
/**
* Array of dialog instances.

@@ -146,0 +180,0 @@ * @type {OdoDialog[]}

{
"name": "@odopod/odo-dialog",
"description": "Responsive window dialog component focused on a11y and extendibility",
"version": "1.1.3",
"version": "1.2.0",
"main": "dist/odo-dialog.js",

@@ -6,0 +6,0 @@ "style": "css/odo-dialog.css",

@@ -133,2 +133,4 @@ /**

this.z = Dialog.Z_BASE;
Dialog.Instances.push(this);

@@ -234,11 +236,14 @@

onKeyPress(evt) {
// If 'ESC' is pressed, close the dialog
if (this.options.dismissable && evt.which === Dialog.Keys.ESC) {
this.close();
}
// Only react to keys when this dialog is the top-most one.
if (this.z === Dialog.getTopLayer()) {
// If 'ESC' is pressed, close the dialog
if (this.options.dismissable && evt.which === Dialog.Keys.ESC) {
this.close();
}
// If the TAB key is being pressed, make sure the focus stays trapped within
// the dialog element.
if (evt.which === Dialog.Keys.TAB) {
Dialog._trapTabKey(this.element, evt);
// If the TAB key is being pressed, make sure the focus stays trapped within
// the dialog element.
if (evt.which === Dialog.Keys.TAB) {
Dialog._trapTabKey(this.element, evt);
}
}

@@ -284,2 +289,8 @@ }

// If there is already an open dialog, increase the z-index of this dialog's
// main element and backdrop above the open one.
if (Dialog.getOpenDialogCount() > 0) {
this.handleOtherOpenDialogs();
}
this.isOpen = true;

@@ -414,4 +425,6 @@ this.onResize(viewportHeight);

this.element.classList.remove(Dialog.Classes.LEAVING);
document.body.style.paddingRight = '';
document.body.classList.remove(Dialog.Classes.BODY_OPEN);
if (Dialog.getOpenDialogCount() === 0) {
document.body.style.paddingRight = '';
document.body.classList.remove(Dialog.Classes.BODY_OPEN);
}
document.body.removeChild(this.backdrop);

@@ -422,2 +435,52 @@ this.emit(Dialog.EventType.CLOSED);

/**
* Modify dialog z-indices and more because there are about to be multiple
* dialogs open at the same time.
* @protected
*/
handleOtherOpenDialogs() {
this.z = Dialog.getTopLayer() + 20;
this.element.style.zIndex = this.z;
this.backdrop.style.zIndex = this.z - 5;
// When this dialog is closed, revert the z-index back to its original value.
this.once(Dialog.EventType.CLOSED, () => {
this.z = Dialog.Z_BASE;
this.element.style.zIndex = '';
this.backdrop.style.zIndex = '';
// Find new top dialog.
const zTop = Dialog.getTopLayer();
Dialog.Instances.forEach((instance) => {
if (instance.isOpen && instance.z === zTop) {
instance.didEnterForeground();
}
});
});
// Tell other dialogs they're going into the background.
Dialog.Instances.forEach((instance) => {
if (instance.isOpen && instance.id !== this.id) {
instance.didEnterBackground();
}
});
}
/**
* Dialog went into the background and has another dialog open above it.
* @protected
*/
didEnterBackground() {
ScrollFix.remove(this._scrollFixId);
}
/**
* Dialog came back into the foreground after being in the background.
* @protected
*/
didEnterForeground() {
this._applyScrollFix();
}
/**
* Close the dialog, remove event listeners and element references.

@@ -598,2 +661,19 @@ */

}
/**
* Count how many dialogs are currently open.
* @return {number}
*/
static getOpenDialogCount() {
return Dialog.Instances.filter(instance => instance.isOpen).length;
}
/**
* Find the z index of the top-most dialog instance.
* @return {number}
*/
static getTopLayer() {
// eslint-disable-next-line prefer-spread
return Math.max.apply(Math, Dialog.Instances.map(instance => instance.z));
}
}

@@ -636,5 +716,7 @@

/** @enum {Dialog[]} */
/** @type {Dialog[]} */
Dialog.Instances = [];
Dialog.Z_BASE = 1050;
Dialog.ScrollFix = ScrollFix;

@@ -641,0 +723,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet