simple-media-manager/dist/media-manager.min.js

an es6 media manager

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.mediaManager=t():e.mediaManager=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e){return i(e)||o(e)||s()}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function o(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function i(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&u(e.prototype,t),n&&u(e,n),e}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return v});var d=n(1),f=n.n(d),p=n(2),m=(n.n(p),n(3)),v=function(){function e(){c(this,e)}return l(e,[{key:"_buildWrapper",value:function(){var e=this.settings,t=document.createElement("section");return t.classList.add(e.classes.wrapper),t}},{key:"_buildHeader",value:function(){var e=this.settings,t=document.createElement("section");t.classList.add(e.classes.header);var n=document.createElement("p");n.classList.add(e.classes.headerTitle);var r=document.createTextNode(e.labels.title);return n.appendChild(r),t.appendChild(n),t}},{key:"_buildActionBar",value:function(){var e=this.settings,t=document.createElement("input");t.setAttribute("type","file"),t=Object(m.a)(t,e.classes.uploadButton),t.appendChild(document.createTextNode("Upload"));var n=document.createElement("section");return n=Object(m.a)(n,e.classes.actionBar),n.appendChild(t),n}},{key:"_buildResourcePreviews",value:function(){var e=this.settings,t=document.createElement("section");return t.classList.add(e.classes.contentWrapper),e.source.resources.map(function(t){var n=t.path,r=document.createElement("section");r.classList.add(e.classes.item),r.dataset.src=n,r.style.position="relative",r.style.backgroundImage="url('".concat(n,"')"),r.style.backgroundSize="cover",r.style.backgroundRepeat="no-repeat";var a=document.createElement("i");return a=Object(m.a)(a,e.classes.deleteItemIcon),a.appendChild(document.createTextNode("delete")),a.dataset.src=t.path,r.appendChild(a),r}).forEach(function(e){return t.appendChild(e)}),t}},{key:"_buildFooter",value:function(){var e=this.settings,t=document.createElement("section");t.classList.add(e.classes.footer);var n=document.createElement("button");n.setAttribute("type","button"),n=Object(m.a)(n,e.classes.confirmButton),n.appendChild(document.createTextNode("Confirm"));var r=document.createElement("button");return r.setAttribute("type","button"),r=Object(m.a)(r,e.classes.cancelButton),r.appendChild(document.createTextNode("Cancel")),t.appendChild(n),t.appendChild(r),t}},{key:"_buildOverlay",value:function(){var e=document.createElement("section");return e=Object(m.a)(e,this.settings.classes.overlay)}},{key:"_appendOverlayIfNotPresent",value:function(){if(null===document.querySelector(Object(m.b)(this.settings.classes.overlay))){var e=this._buildOverlay();document.querySelector("body").appendChild(e)}}},{key:"_toggleOverlay",value:function(e){this._appendOverlayIfNotPresent(),document.querySelector(Object(m.b)(this.settings.classes.overlay)).classList.toggle(this.settings.classes.activeOverlay,e)}},{key:"_toggleMediaManager",value:function(){var e=this.settings,t=e.state.isShown;e.settings.showOverlay&&this._toggleOverlay(!t),this._clearSelectedItems();var n=e.elements.wrapper.querySelector(Object(m.b)(e.classes.wrapper));null!==n?n.style.display=t?"none":"block":this._appendMediaManagerToWrapper(),this.settings.state.selectedResources=[],this.settings.state.isShown=!t}},{key:"_clearSelectedItems",value:function(){var e=this.settings.classes,t=Object(m.b)([e.item,e.activeItem]);document.querySelectorAll(t).forEach(function(t){t.classList.remove(e.activeItem)})}},{key:"_appendMediaManagerToWrapper",value:function(){var e=this._buildWrapper();e.appendChild(this._buildHeader()),e.appendChild(this._buildActionBar()),e.appendChild(this._buildResourcePreviews()),e.appendChild(this._buildFooter()),this.settings.elements.wrapper.appendChild(e),this._registerEventListenersForMediaActions(),this._registerEventListenersForActionBar()}},{key:"_registerEventListenersForActionBar",value:function(){var e=this.settings,t=Object(m.b)(e.classes.uploadButton);document.querySelector(t).addEventListener("change",e.events.onFileSelectionChanged)}},{key:"_registerEventListenersForMediaActions",value:function(){var e=this,t=this.settings;t.elements.wrapper.addEventListener("click",function(n){var r=n.target;if(r.classList.contains(t.classes.item)){var s=e.settings.state.selectedResources,o=s.length===t.settings.maxSelectedItems,i=r.dataset.src;s.filter(function(e){return e.path===i}).length>0?(e.settings.state.selectedResources=s.filter(function(e){return e.path!==i}),r.classList.toggle(t.classes.activeItem,!1)):o||(e.settings.state.selectedResources=[].concat(a(s),[t.source.resources.find(function(e){return e.path===i})]),r.classList.toggle(t.classes.activeItem,!0))}});var n=Object(m.b)(t.classes.confirmButton),r=Object(m.b)(t.classes.cancelButton);document.querySelector(n).addEventListener("click",function(){t.events.onConfirm(e.settings.state.selectedResources),e._toggleMediaManager()}),document.querySelector(r).addEventListener("click",function(n){n.preventDefault(),t.events.onCancel(),e._toggleMediaManager()}),this._registerDeleteItemEventListeners()}},{key:"_registerDeleteItemEventListeners",value:function(){var e=this,t=this.settings,n=t.events,r=t.classes,s=t.source,o=Object(m.b)(r.deleteItemIcon);a(document.querySelectorAll(o)).forEach(function(t){t.addEventListener("click",function(t){t.preventDefault();var r=s.resources.find(function(e){return e.path===t.target.dataset.src});return Promise.resolve(n.onDeleteItem(r)).then(function(t){t&&e._remove(r)})})})}},{key:"_isValidResource",value:function(e){return"object"===r(e)&&e.hasOwnProperty("path")}},{key:"_remove",value:function(e){this.settings.source.resources=a(this.settings.source.resources).filter(function(t){return t.path!==e.path}),this.settings.state.selectedResources=[],this._refreshResourcePreviews()}},{key:"_refreshResourcePreviews",value:function(){var e=this.settings.classes,t=e.wrapper,n=e.contentWrapper,r=Object(m.b)(t),a=Object(m.b)(n);this.settings.state.isShown&&(document.querySelector("".concat(r," ").concat(a)).outerHTML=this._buildResourcePreviews().outerHTML),this._registerDeleteItemEventListeners()}},{key:"on",value:function(e,t){this.settings.events[e]=t}},{key:"toggle",value:function(){this._toggleMediaManager()}},{key:"add",value:function(e){if(!this._isValidResource(e))return console.error("The resource has to be an object with a path key.");this.settings.source.resources=[].concat(a(this.settings.source.resources),[e]),this._refreshResourcePreviews()}},{key:"init",value:function(e){e=f()({elements:{wrapper:""},state:{isShown:!1,selectedResources:[]},settings:{showOverlay:!0,maxSelectedItems:-1},classes:{wrapper:"media-manager",overlay:"media-manager__overlay",activeOverlay:"media-manager__overlay--active",header:"media-manager__header",headerTitle:"media-manager__title",contentWrapper:"media-manager__content",item:"media-manager__item",activeItem:"media-manager__item--active",deleteItemIcon:["material-icons","media-manager__trash-icon"],footer:"media-manager__footer",actionBar:"media-manager__action-bar",confirmButton:["media-manager__button","media-manager__button--confirm"],cancelButton:["media-manager__button","media-manager__button--cancel"],uploadButton:["media-manager__button","media-manager__button--upload"]},labels:{title:"Media Manager"},events:{onCancel:function(){},onConfirm:function(){},onDeleteItem:function(){},onFileSelectionChanged:function(){}},source:{resources:[]}},e),this.settings=e}}]),e}()},function(e,t,n){"use strict";function r(e){return!!e&&"object"==typeof e}function a(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||s(e)}function s(e){return e.$$typeof===p}function o(e){return Array.isArray(e)?[]:{}}function i(e,t){return t&&!0===t.clone&&d(e)?l(o(e),e,t):e}function c(e,t,n){var r=e.slice();return t.forEach(function(t,a){void 0===r[a]?r[a]=i(t,n):d(t)?r[a]=l(e[a],t,n):-1===e.indexOf(t)&&r.push(i(t,n))}),r}function u(e,t,n){var r={};return d(e)&&Object.keys(e).forEach(function(t){r[t]=i(e[t],n)}),Object.keys(t).forEach(function(a){d(t[a])&&e[a]?r[a]=l(e[a],t[a],n):r[a]=i(t[a],n)}),r}function l(e,t,n){var r=Array.isArray(t),a=Array.isArray(e),s=n||{arrayMerge:c};if(r===a)return r?(s.arrayMerge||c)(e,t,n):u(e,t,n);return i(t,n)}var d=function(e){return r(e)&&!a(e)},f="function"==typeof Symbol&&Symbol.for,p=f?Symbol.for("react.element"):60103;l.all=function(e,t){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,n){return l(e,n,t)})};var m=l;e.exports=m},function(e,t){},function(e,t,n){"use strict";function r(e){return o(e)||s(e)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function s(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function o(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}n.d(t,"a",function(){return l}),n.d(t,"b",function(){return m});var i=n(4),c=n(5),u=[".","#"],l=function(e,t){var n;return t=Object(i.a)(t),(n=e.classList).add.apply(n,r(t)),e},d=function(e){return u.filter(function(t){return e.startsWith(t)}).length>0},f=function(e){return e.join("")},p=function(e){return Object(c.a)(e)?d(e)?e:".".concat(e):e.map(function(e){return d(e)?e:".".concat(e)})},m=function(e){return f(p(Object(i.a)(e)))}},function(e,t,n){"use strict";n.d(t,"a",function(){return r});var r=function(e){return"string"==typeof e?[e]:e}},function(e,t,n){"use strict";n.d(t,"a",function(){return r});var r=function(e){return"string"==typeof e}}])});