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

Javascript plugin for using Imagekit Media Library Widget

"use strict";var i,e;exports.InitialViewParameterEnum=void 0,(i=exports.InitialViewParameterEnum||(exports.InitialViewParameterEnum={})).SEARCH_QUERY="searchQuery",i.FOLDER_PATH="folderPath",i.FILE_ID="fileId",i.COLLECTION="collection",i.FILE_TYPE="fileType",exports.FileTypeValue=void 0,(e=exports.FileTypeValue||(exports.FileTypeValue={})).IMAGE="images",e.VIDEO="videos",e.CSSJS="cssJs",e.OTHERS="others";var t=function(){function i(i,e){var t=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=e&&"function"==typeof e?e:function(){},this.view=this.options.view,this.windowClickHandler=function(i){t.modal&&i.target===t.modal&&t.close()},this.messageHandler=function(i){var e;i.origin===t.IK_HOST&&i.source===(null===(e=t.iframe)||void 0===e?void 0:e.contentWindow)&&("CLOSE_MEDIA_LIBRARY_WIDGET"!==i.data.eventType&&"INSERT"!==i.data.eventType||(t.callbackFunction(i.data),t.close()))},this.registerStyles(),this.buildOut(),this.setListeners()}return i.prototype.getDefaultOptions=function(){return{className:"",container:"",containerDimensions:{height:"100%",width:"100%"},dimensions:{height:"100%",width:"100%"},style:{border:"none"},view:"modal",renderOpenButton:!0}},i.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)},i.prototype.buildOut=function(){var i,e,t,n,o,a,s,d,l,r,h,m,p,c=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===(e=null===(i=this.options)||void 0===i?void 0:i.containerDimensions)||void 0===e?void 0:e.height)||"100%",this.ikFrame.style.width=(null===(n=null===(t=this.options)||void 0===t?void 0:t.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===(d=null===(s=this.options)||void 0===s?void 0:s.dimensions)||void 0===d?void 0:d.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&&((p=document.createElement("button")).innerHTML="Open Media Library",p.onclick=function(){c.modal&&(c.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,p&&this.options.renderOpenButton&&h.appendChild(p),h.appendChild(v),r&&r.appendChild(h)}this.iframe&&(this.setLoading(!0),this.setupIframeLoadHandler())},i.prototype.generateInitialUrl=function(){var i,e,t,n,o,a,s,d,l="".concat(this.IK_HOST,"/media-library-widget"),r=new URLSearchParams({redirectTo:"media-library-widget",isMediaLibraryWidget:"true",widgetHost:this.widgetHost});if(null===(e=null===(i=this.options)||void 0===i?void 0:i.mlSettings)||void 0===e?void 0:e.initialView){var h=Object.keys(this.options.mlSettings.initialView)[0];Object.values(exports.InitialViewParameterEnum).includes(h)&&r.append("mlWidgetInitialView",btoa(JSON.stringify(this.options.mlSettings.initialView)))}return(null===(n=null===(t=this.options)||void 0===t?void 0:t.mlSettings)||void 0===n?void 0:n.queryParams)&&Object.entries(this.options.mlSettings.queryParams).forEach((function(i){var e=i[0],t=i[1];r.append(e,String(t))})),(null===(a=null===(o=this.options)||void 0===o?void 0:o.mlSettings)||void 0===a?void 0:a.loginViaSSO)&&r.append("loginViaSSO","true"),(null===(d=null===(s=this.options)||void 0===s?void 0:s.mlSettings)||void 0===d?void 0:d.widgetImagekitId)&&r.append("widgetImagekitId",this.options.mlSettings.widgetImagekitId),"".concat(l,"?").concat(r.toString())},i.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")))},i.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)})},i.prototype.open=function(i,e){var t;e&&"function"==typeof e&&(this.callbackFunction=e),i&&(this.options.mlSettings=structuredClone(i.mlSettings||{}),this.iframe&&(this.setLoading(!0),this.iframe.src=this.generateInitialUrl(),this.setupIframeLoadHandler())),"modal"===(null===(t=this.view)||void 0===t?void 0:t.toLowerCase())&&this.modal&&(this.modal.style.display="block")},i.prototype.close=function(){var i;"modal"===(null===(i=this.view)||void 0===i?void 0:i.toLowerCase())&&this.closeModal()},i.prototype.closeModal=function(){this.modal&&(this.modal.style.display="none")},i.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},i.prototype.setListeners=function(){window.addEventListener("click",this.windowClickHandler),window.addEventListener("message",this.messageHandler)},i}();window.IKMediaLibraryWidget=t,exports.ImagekitMediaLibraryWidget=t;
//# sourceMappingURL=imagekit-media-library-widget.cjs.js.map