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

Javascript plugin for using Imagekit Media Library Widget

!function(i,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((i="undefined"!=typeof globalThis?globalThis:i||self).ImagekitMediaLibraryWidget={})}(this,(function(i){"use strict";var e,t;i.InitialViewParameterEnum=void 0,(e=i.InitialViewParameterEnum||(i.InitialViewParameterEnum={})).SEARCH_QUERY="searchQuery",e.FOLDER_PATH="folderPath",e.FILE_ID="fileId",e.COLLECTION="collection",e.FILE_TYPE="fileType",i.FileTypeValue=void 0,(t=i.FileTypeValue||(i.FileTypeValue={})).IMAGE="images",t.VIDEO="videos",t.CSSJS="cssJs",t.OTHERS="others";var n=function(){function e(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 e.prototype.getDefaultOptions=function(){return{className:"",container:"",containerDimensions:{height:"100%",width:"100%"},dimensions:{height:"100%",width:"100%"},style:{border:"none"},view:"modal",renderOpenButton:!0}},e.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)},e.prototype.buildOut=function(){var i,e,t,n,o,a,d,s,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===(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&&((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())},e.prototype.generateInitialUrl=function(){var e,t,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===(t=null===(e=this.options)||void 0===e?void 0:e.mlSettings)||void 0===t?void 0:t.initialView){var m=Object.keys(this.options.mlSettings.initialView)[0];Object.values(i.InitialViewParameterEnum).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 e=i[0],t=i[1];h.append(e,String(t))})),(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())},e.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")))},e.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)})},e.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")},e.prototype.close=function(){var i;"modal"===(null===(i=this.view)||void 0===i?void 0:i.toLowerCase())&&this.closeModal()},e.prototype.closeModal=function(){this.modal&&(this.modal.style.display="none")},e.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},e.prototype.setListeners=function(){window.addEventListener("click",this.windowClickHandler),window.addEventListener("message",this.messageHandler)},e}();window.IKMediaLibraryWidget=n,i.ImagekitMediaLibraryWidget=n}));
//# sourceMappingURL=imagekit-media-library-widget.min.js.map