imagekit-media-library-widget
Version:
Javascript plugin for using Imagekit Media Library Widget
3 lines (2 loc) • 6.31 kB
JavaScript
!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 o=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){i.origin===t.IK_HOST&&("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 }\n ",document.head.appendChild(this.styleEl)},e.prototype.buildOut=function(){var i,e,t,o,n,s,a,d,l,r,c,h,p,m=this;if(r="string"==typeof this.options.container?document.querySelector(this.options.container):this.options.container,c=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===(o=null===(t=this.options)||void 0===t?void 0:t.containerDimensions)||void 0===o?void 0:o.width)||"100%",(h=document.createElement("iframe")).title=this.IK_FRAME_TITLE,h.src=this.generateInitialUrl(),h.setAttribute("sandbox","allow-top-navigation allow-same-origin allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads"),h.height=(null===(s=null===(n=this.options)||void 0===n?void 0:n.dimensions)||void 0===s?void 0:s.height)||"100%",h.width=(null===(d=null===(a=this.options)||void 0===a?void 0:a.dimensions)||void 0===d?void 0:d.width)||"100%",h.style.border=this.options.style.border,this.ikFrame.appendChild(h),"modal"!==(null===(l=this.view)||void 0===l?void 0:l.toLowerCase()))c.appendChild(this.ikFrame),r&&r.appendChild(c);else{this.options.renderOpenButton&&((p=document.createElement("button")).innerHTML="Open Media Library",p.onclick=function(){m.modal&&(m.modal.style.display="block")});var u=document.createElement("div"),g=document.createElement("div");u.classList.add("ik-media-library-widget-modal"),g.classList.add("ik-media-library-widget-modal-content"),g.appendChild(this.ikFrame),u.appendChild(g),this.modal=u,p&&this.options.renderOpenButton&&c.appendChild(p),c.appendChild(u),r&&r.appendChild(c)}var w=document.querySelector('[title="'.concat(this.IK_FRAME_TITLE,'"]'));w&&this.postMessageOnLoad(w,this.options,this.IK_HOST)},e.prototype.generateInitialUrl=function(){var e,t;if(null===(t=null===(e=this.options)||void 0===e?void 0:e.mlSettings)||void 0===t?void 0:t.initialView){var o=Object.keys(this.options.mlSettings.initialView)[0];if(Object.values(i.InitialViewParameterEnum).includes(o))return"".concat(this.IK_HOST,"/media-library-widget?redirectTo=media-library-widget&isMediaLibraryWidget=true&widgetHost=").concat(this.widgetHost,"&mlWidgetInitialView=").concat(btoa(JSON.stringify(this.options.mlSettings.initialView)))}return"".concat(this.IK_HOST,"/media-library-widget?redirectTo=media-library-widget&isMediaLibraryWidget=true&widgetHost=").concat(this.widgetHost)},e.prototype.postMessageOnLoad=function(i,e,t){i.onload=function(){i.contentWindow&&i.contentWindow.postMessage(JSON.stringify({mlSettings:e.mlSettings}),t)}},e.prototype.open=function(){var i;"modal"===(null===(i=this.view)||void 0===i?void 0:i.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)},e.prototype.setListeners=function(){window.addEventListener("click",this.windowClickHandler),window.addEventListener("message",this.messageHandler)},e}();window.IKMediaLibraryWidget=o,i.ImagekitMediaLibraryWidget=o}));
//# sourceMappingURL=imagekit-media-library-widget.min.js.map