confirmly-popup.js
Version:
A lightweight javascript confirmation popup with support for Bootstrap, Tailwind, and Material Design.
3 lines (2 loc) • 3.99 kB
JavaScript
import{createPopper as t}from"@popperjs/core";var e=function(){function e(t){var e=t.template,n=t.buttonClasses,o=void 0===n?{confirm:"confirmly__button confirmly__button--confirm",cancel:"confirmly__button confirmly__button--cancel"}:n,i=t.buttonContents,s=void 0===i?{confirm:"Yes",cancel:"No"}:i,r=t.defaultPlacement,p=void 0===r?"top":r,a=t.targetElement,c=t.onConfirm,l=t.onCancel,d=t.showError,h=void 0===d||d;this.popperInstance=null,this.template=e||this.defaultTemplate(),this.buttonClasses=o,this.buttonContents=s,this.defaultPlacement=p,this.showError=h,this.popperElement=this.createPopperElement(),document.body.appendChild(this.popperElement),a?this.attach(a,c,l):this.showError&&console.error("Target Element is not defined")}return e.prototype.defaultTemplate=function(){return'\n <div class="confirmly__popup">\n <div class="confirmly__content">\n <p class="confirmly__message">Are you sure?</p>\n <div class="confirmly__buttons">\n <button class="{{cancelClass}}" data-button="cancel">{{cancelContent}}</button>\n <button class="{{confirmClass}}" data-button="confirm">{{confirmContent}}</button>\n </div>\n </div>\n <div class="confirmly__arrow" data-popper-arrow></div>\n </div>\n '},e.prototype.createPopperElement=function(){var t=document.createElement("div");t.className="confirmly",t.style.display="none";var e=this.template.replace("{{confirmClass}}",this.buttonClasses.confirm).replace("{{cancelClass}}",this.buttonClasses.cancel).replace("{{confirmContent}}",this.buttonContents.confirm).replace("{{cancelContent}}",this.buttonContents.cancel);return t.innerHTML=e,this.attachButtonListeners(t),t},e.prototype.attachButtonListeners=function(t){var e=t.querySelector('[data-button="confirm"]'),n=t.querySelector('[data-button="cancel"]');e&&e.addEventListener("click",this.handleConfirm.bind(this)),n&&n.addEventListener("click",this.handleCancel.bind(this))},e.prototype.attach=function(t,e,n){var o=this;t||!this.showError?(this.onConfirmCallback=e,this.onCancelCallback=n,null==t||t.addEventListener("click",(function(e){e.preventDefault(),e.stopPropagation(),o.showPopper(t)})),document.addEventListener("click",this.handleOutsideClick.bind(this)),document.addEventListener("keydown",this.handleEscapeKey.bind(this))):console.error("Target Element is not defined")},e.prototype.destroy=function(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null),this.popperElement.remove(),document.removeEventListener("click",this.handleOutsideClick.bind(this)),document.removeEventListener("keydown",this.handleEscapeKey.bind(this))},e.prototype.handleOutsideClick=function(t){this.popperElement.contains(t.target)||this.hidePopper()},e.prototype.handleEscapeKey=function(t){"Escape"===t.key&&this.hidePopper()},e.prototype.showPopper=function(e){this.popperElement.style.display="block";var n=this.popperElement.querySelector(".confirmly__popup");n&&requestAnimationFrame((function(){n.classList.add("confirmly__popup--visible")})),this.popperInstance&&this.popperInstance.destroy(),this.popperInstance=t(e,this.popperElement,{placement:this.defaultPlacement,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:"[data-popper-arrow]",padding:8}},{name:"preventOverflow",options:{padding:8,boundary:"viewport"}}]})},e.prototype.hidePopper=function(){var t=this,e=this.popperElement.querySelector(".confirmly__popup");e&&(e.classList.remove("confirmly__popup--visible"),setTimeout((function(){t.popperInstance&&(t.popperInstance.destroy(),t.popperInstance=null),t.popperElement.style.display="none"}),200))},e.prototype.handleConfirm=function(){var t;null===(t=this.onConfirmCallback)||void 0===t||t.call(this),this.hidePopper()},e.prototype.handleCancel=function(){var t;null===(t=this.onCancelCallback)||void 0===t||t.call(this),this.hidePopper()},e}();export{e as ConfirmPopup};
//# sourceMappingURL=confirmly-popup.esm.min.js.map