imagekit-media-library-widget/dist/imagekit-media-library-widget.esm.js

Javascript plugin for using Imagekit Media Library Widget

var i,t;!function(i){i.SEARCH_QUERY="searchQuery",i.FOLDER_PATH="folderPath",i.FILE_ID="fileId",i.COLLECTION="collection",i.FILE_TYPE="fileType"}(i||(i={})),function(i){i.IMAGE="images",i.VIDEO="videos",i.CSSJS="cssJs",i.OTHERS="others"}(t||(t={}));var e=function(){function t(i,t){var e=this;this.IK_HOST="https://eml.imagekit.io",this.IK_FRAME_TITLE="ImageKit Embedded Media Library",this.widgetHost=window.location.href,this.options=this.getDefaultOptions(),i&&"object"==typeof i&&Object.assign(this.options,i),this.callbackFunction=t&&"function"==typeof t?t:function(){},this.view=this.options.view,this.windowClickHandler=function(i){e.modal&&i.target===e.modal&&e.close()},this.messageHandler=function(i){var t;i.origin===e.IK_HOST&&i.source===(null===(t=e.iframe)||void 0===t?void 0:t.contentWindow)&&("CLOSE_MEDIA_LIBRARY_WIDGET"!==i.data.eventType&&"INSERT"!==i.data.eventType||(e.callbackFunction(i.data),e.close()))},this.registerStyles(),this.buildOut(),this.setListeners()}return t.prototype.getDefaultOptions=function(){return{className:"",container:"",containerDimensions:{height:"100%",width:"100%"},dimensions:{height:"100%",width:"100%"},style:{border:"none"},view:"modal",renderOpenButton:!0}},t.prototype.registerStyles=function(){this.styleEl=document.createElement("style"),this.styleEl.innerHTML="\n            /* The Modal (background) */\n            .ik-media-library-widget-modal {\n                display: none; /* Hidden by default */\n                position: fixed; /* Stay in place */\n                z-index: 1; /* Sit on top */\n                padding-top: 2%; /* Location of the box */\n                left: 0;\n                top: 0;\n                width: 100%; /* Full width */\n                height: 100%; /* Full height */\n                overflow: auto; /* Enable scroll if needed */\n                background-color: rgb(0,0,0); /* Fallback color */\n                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n            }\n            \n            /* Modal Content */\n            .ik-media-library-widget-modal-content {\n                background-color: #fefefe;\n                margin: auto;\n                border: 1px solid #888;\n                width: 96%;\n                height: 94%;\n                position: relative;\n            }\n\n            /* Loading overlay */\n            .ik-media-library-widget-loading-overlay {\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgba(255, 255, 255, 0.9);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 10;\n            }\n\n            .ik-media-library-widget-loading-spinner {\n                border: 4px solid #f3f3f3;\n                border-top: 4px solid #3498db;\n                border-radius: 50%;\n                width: 40px;\n                height: 40px;\n                animation: ik-media-library-widget-spin 1s linear infinite;\n            }\n\n            @keyframes ik-media-library-widget-spin {\n                0% { transform: rotate(0deg); }\n                100% { transform: rotate(360deg); }\n            }\n\n            .ik-media-library-widget-loading-overlay.hidden {\n                display: none;\n            }\n        ",document.head.appendChild(this.styleEl)},t.prototype.buildOut=function(){var i,t,e,n,o,a,d,s,l,r,h,m,c,p=this;if(r="string"==typeof this.options.container?document.querySelector(this.options.container):this.options.container,h=document.createDocumentFragment(),this.ikFrame=document.createElement("div"),this.ikFrame.className=this.options.className||"",this.ikFrame.style.height=(null===(t=null===(i=this.options)||void 0===i?void 0:i.containerDimensions)||void 0===t?void 0:t.height)||"100%",this.ikFrame.style.width=(null===(n=null===(e=this.options)||void 0===e?void 0:e.containerDimensions)||void 0===n?void 0:n.width)||"100%",(m=document.createElement("iframe")).title=this.IK_FRAME_TITLE,m.src=this.generateInitialUrl(),m.setAttribute("sandbox","allow-top-navigation allow-same-origin allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads"),m.setAttribute("allow","clipboard-write"),m.height=(null===(a=null===(o=this.options)||void 0===o?void 0:o.dimensions)||void 0===a?void 0:a.height)||"100%",m.width=(null===(s=null===(d=this.options)||void 0===d?void 0:d.dimensions)||void 0===s?void 0:s.width)||"100%",m.style.border=this.options.style.border,this.iframe=m,this.ikFrame.appendChild(m),"modal"!==(null===(l=this.view)||void 0===l?void 0:l.toLowerCase())){this.ikFrame.style.position="relative",(g=document.createElement("div")).classList.add("ik-media-library-widget-loading-overlay","hidden"),(u=document.createElement("div")).classList.add("ik-media-library-widget-loading-spinner"),g.appendChild(u),this.loadingOverlay=g,this.ikFrame.appendChild(g),h.appendChild(this.ikFrame),r&&r.appendChild(h)}else{this.options.renderOpenButton&&((c=document.createElement("button")).innerHTML="Open Media Library",c.onclick=function(){p.modal&&(p.modal.style.display="block")});var g,u,v=document.createElement("div"),y=document.createElement("div");v.classList.add("ik-media-library-widget-modal"),y.classList.add("ik-media-library-widget-modal-content"),(g=document.createElement("div")).classList.add("ik-media-library-widget-loading-overlay","hidden"),(u=document.createElement("div")).classList.add("ik-media-library-widget-loading-spinner"),g.appendChild(u),this.loadingOverlay=g,y.appendChild(g),y.appendChild(this.ikFrame),v.appendChild(y),this.modal=v,c&&this.options.renderOpenButton&&h.appendChild(c),h.appendChild(v),r&&r.appendChild(h)}this.iframe&&(this.setLoading(!0),this.setupIframeLoadHandler())},t.prototype.generateInitialUrl=function(){var t,e,n,o,a,d,s,l,r="".concat(this.IK_HOST,"/media-library-widget"),h=new URLSearchParams({redirectTo:"media-library-widget",isMediaLibraryWidget:"true",widgetHost:this.widgetHost});if(null===(e=null===(t=this.options)||void 0===t?void 0:t.mlSettings)||void 0===e?void 0:e.initialView){var m=Object.keys(this.options.mlSettings.initialView)[0];Object.values(i).includes(m)&&h.append("mlWidgetInitialView",btoa(JSON.stringify(this.options.mlSettings.initialView)))}return(null===(o=null===(n=this.options)||void 0===n?void 0:n.mlSettings)||void 0===o?void 0:o.queryParams)&&Object.entries(this.options.mlSettings.queryParams).forEach((function(i){var t=i[0],e=i[1];h.append(t,String(e))})),(null===(d=null===(a=this.options)||void 0===a?void 0:a.mlSettings)||void 0===d?void 0:d.loginViaSSO)&&h.append("loginViaSSO","true"),(null===(l=null===(s=this.options)||void 0===s?void 0:s.mlSettings)||void 0===l?void 0:l.widgetImagekitId)&&h.append("widgetImagekitId",this.options.mlSettings.widgetImagekitId),"".concat(r,"?").concat(h.toString())},t.prototype.setLoading=function(i){this.loadingOverlay&&(i?(this.loadingOverlay.classList.remove("hidden"),this.iframe&&(this.iframe.style.visibility="hidden")):(this.loadingOverlay.classList.add("hidden"),this.iframe&&(this.iframe.style.visibility="visible")))},t.prototype.setupIframeLoadHandler=function(){var i=this;this.iframe&&(this.iframe.onload=function(){i.iframe&&i.iframe.contentWindow&&i.iframe.contentWindow.postMessage(JSON.stringify({mlSettings:i.options.mlSettings}),i.IK_HOST),i.setLoading(!1)})},t.prototype.open=function(i,t){var e;t&&"function"==typeof t&&(this.callbackFunction=t),i&&(this.options.mlSettings=structuredClone(i.mlSettings||{}),this.iframe&&(this.setLoading(!0),this.iframe.src=this.generateInitialUrl(),this.setupIframeLoadHandler())),"modal"===(null===(e=this.view)||void 0===e?void 0:e.toLowerCase())&&this.modal&&(this.modal.style.display="block")},t.prototype.close=function(){var i;"modal"===(null===(i=this.view)||void 0===i?void 0:i.toLowerCase())&&this.closeModal()},t.prototype.closeModal=function(){this.modal&&(this.modal.style.display="none")},t.prototype.destroy=function(){window.removeEventListener("click",this.windowClickHandler),window.removeEventListener("message",this.messageHandler),this.modal?(this.modal.remove(),this.modal=void 0):this.ikFrame&&this.ikFrame.parentNode&&this.ikFrame.parentNode.removeChild(this.ikFrame),this.styleEl&&(this.styleEl.remove(),this.styleEl=void 0),this.iframe=void 0,this.loadingOverlay=void 0},t.prototype.setListeners=function(){window.addEventListener("click",this.windowClickHandler),window.addEventListener("message",this.messageHandler)},t}();window.IKMediaLibraryWidget=e;export{t as FileTypeValue,e as ImagekitMediaLibraryWidget,i as InitialViewParameterEnum};
//# sourceMappingURL=imagekit-media-library-widget.esm.js.map