tonyair/meta-lightbox
1
0
Fork 0
mirror of https://github.com/a2nt/meta-lightbox.git synced 2024-10-22 17:05:53 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: standard linting

Browse Source
This commit is contained in:
Tony Air 2022-05-03 20:58:33 +02:00
parent 9aca2b359c
commit 745ad254a0
8 changed files with 266 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/app.js vendored
View File

@ -1 +1 @@
!function(){"use strict";var e={826:function(e){e.exports=function makeYoutubeEmbed(e){if("string"===typeof e){var t=function getId(e){var t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);if(t&&11==t[2].length)return t[2]}(e);return t?"//www.youtube.com/embed/"+t:void 0}}}},t={};function __webpack_require__(a){var n=t[a];if(void 0!==n)return n.exports;var r=t[a]={exports:{}};return e[a](r,r.exports,__webpack_require__),r.exports}!function(){var e="ajax-load",t="load-ready";function _toConsumableArray(e){return function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}(e)||function _iterableToArray(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function _unsupportedIterableToArray(e,t){if(!e)return;if("string"===typeof e)return _arrayLikeToArray(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return _arrayLikeToArray(e,t)}(e)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _defineProperty(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var a=window,n=function(){function MetaWindow(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{shown:!1},n=arguments.length>1?arguments[1]:void 0;_classCallCheck(this,MetaWindow),_defineProperty(this,"state",{content:"",type:["empty"],shown:!1,loading:!1,error:!1,embed:!1,collections:[],current:null,target:null,extraClass:null}),_defineProperty(this,"show",(function(){var t=e;console.log("".concat(t.name,": show")),t.setState({shown:!0}),a.dispatchEvent(new Event("{ui.name}.show"))})),_defineProperty(this,"hide",(function(){var t=e;console.log("".concat(t.name,": hide")),t.setState({shown:!1}),a.dispatchEvent(new Event("{ui.name}.hide"))})),_defineProperty(this,"next",(function(){var t=e,n=t.state.current.getAttribute("data-gallery"),r=t._currIndex();r<t.state.collections[n].length-1?r++:r=0,t.state.collections[n][r].click(),console.log("".concat(t.name,": next")),a.dispatchEvent(new Event("{ui.name}.next"))})),_defineProperty(this,"prev",(function(){var t=e,n=t.state.current.getAttribute("data-gallery"),r=t._currIndex();r>0?r--:r=t.state.collections[n].length-1,t.state.collections[n][r].click(),console.log("".concat(t.name,": prev")),a.dispatchEvent(new Event("{ui.name}.prev"))})),_defineProperty(this,"reset",(function(){e.setState({content:"",type:["empty"],shown:!1,loading:!1,error:!1,embed:!1})})),_defineProperty(this,"load",(function(t){var n=e;n.reset(),n.setState({loading:!0}),n.show(),fetch(t).then((function(e){var r=e.headers.get("content-type");console.log(e),console.log("".concat(n.name,": response content-type: ").concat(r));switch(r){case"image/jpeg":case"image/png":case"image/svg+xml":case"image/bmp":case"image/gif":case"image/tiff":case"image/webp":case"image/jpg":case"image/svg":e.arrayBuffer().then((function(e){n.setContent('<img src="data:'.concat(r,";base64,").concat(n._imageEncode(e),'" />'),"meta-".concat(n.name,"--image"))}));break;case"application/json":case"application/ld+json":case"application/json; charset=UTF-8":n.setContent("".concat((!1).Content),["meta-".concat(n.name,"--text"),"meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--json")]);break;case"video/mp4":n.setContent('<video controls autoplay><source src="'.concat(t,'" type="video/mp4">Your browser does not support the video tag.</video>'),["meta-".concat(n.name,"--image"),"meta-".concat(n.name,"--video")]);break;case"text/html":case"application/xhtml+xml":case"text/plain":case"text/html; charset=UTF-8":case"application/xhtml+xml; charset=UTF-8":case"text/plain; charset=UTF-8":n.setContent(e.data,["meta-".concat(n.name,"--text"),"meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--pajax")]);break;default:console.warn("".concat(n.name,": Unknown response content-type!"))}a.dispatchEvent(new Event("{ui.name}.loaded"))})).catch((function(e){console.error(e);var t="";if(e.response)switch(e.response.status){case 404:t="Not Found.";break;case 500:t="Server issue, please try again latter.";break;default:t="Something went wrong."}else e.request?t="No response received":console.warn("Error",e.message);n.setState({error:t}),a.dispatchEvent(new Event("{ui.name}.error"))})).then((function(){n.setState({loading:!1}),setTimeout((function(){n.state.current.classList.remove("loading")}),1e3)}))})),_defineProperty(this,"_currIndex",(function(){var t=e,a=t.state.current,n=a.getAttribute("data-gallery");return t.state.collections[n].indexOf(a)})),_defineProperty(this,"embed",(function(t){var a=e;console.log("".concat(a.name,": embed")),a.reset(),a.setState({embed:t,loading:!1,type:["meta-".concat(a.name,"--embed"),"meta-".concat(a.name,"--video")]}),a.show()})),_defineProperty(this,"setCaption",(function(t){var a=e;console.log("".concat(a.name,": setCaption")),a.state.caption=t})),_defineProperty(this,"addExtraClass",(function(t){var a=e;t&&t.length&&(console.log("".concat(a.name,": addExtraClass(").concat(t,")")),a.state.extraClass=t)})),_defineProperty(this,"getCaption",(function(){return e.state.caption})),_defineProperty(this,"_imageEncode",(function(e){var t="";return[].slice.call(new Uint8Array(e)).forEach((function(e){return t+=String.fromCharCode(e)})),window.btoa(t)})),_defineProperty(this,"setContent",(function(t,a){var n=e;console.log("".concat(n.name,": setContent"));var r=a||["meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--text")];Array.isArray(r)||(r=a.split(" ")),n.setState({content:t,type:r})})),_defineProperty(this,"getHtml",(function(){var t=e;if(t.state.embed){var a=__webpack_require__(826)(t.state.embed);t.state.content='<iframe width="600" height="380" src="'.concat(a,'" frameborder="0"></iframe>')}return t.state.content}));var r=this;switch(r.name=r.constructor.name,console.log("".concat(r.name,": init")),r.setState(t),n){case"show":case"hide":r.hide()}a.dispatchEvent(new Event("{ui.name}.init"))}return function _createClass(e,t,a){return t&&_defineProperties(e.prototype,t),a&&_defineProperties(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}(MetaWindow,[{key:"cleanLinks",value:function cleanLinks(){document.querySelectorAll('[data-toggle="lightbox"]').forEach((function(e){e.classList.remove("loading")}))}},{key:"collectGaleries",value:function collectGaleries(e){var t=this;e&&(t.state.collections[e]=[],document.querySelectorAll('[data-toggle="lightbox"][data-gallery="'.concat(e,'"]')).forEach((function(a){t.state.collections[e].push(a)})))}},{key:"toggle",value:function toggle(e){var t=this;t.cleanLinks();var a=e.getAttribute("href")||e.getAttribute("data-href"),n=e.getAttribute("data-embed");e.classList.add("loading"),t.state.current=e;var r=e.getAttribute("data-title");r&&t.setCaption(r),n?t.embed(a):t.load(a),t.addExtraClass(e.getAttribute("data-lightbox-class"))}},{key:"init",value:function init(){var e=this;console.log("MetaWindow: [links] init"),document.querySelectorAll('[data-toggle="lightbox"],[data-gallery]').forEach((function(t){var a=t.getAttribute("data-gallery");e.collectGaleries(a),t.addEventListener("click",(function(t){t.preventDefault(),console.log("MetaWindow: [link] click");var a=t.currentTarget;e.toggle(a)}))}))}},{key:"setState",value:function setState(e){var t=this;t.state=Object.assign({},t.state,e),t.render()}},{key:"render",value:function render(){var e,t=this,a=t.name,n=t.state.current;t.state.target.innerHTML="";var r=document.createElement("div");r.classList.add("meta-".concat(a)),(e=r.classList).add.apply(e,_toConsumableArray(t.state.type)),t.state.target.append(r);var o=document.createElement("div");o.classList.add("meta-".concat(a,"-overlay")),t.state.shown&&o.classList.add("meta-".concat(a,"-overlay--open")),t.state.loading&&o.classList.add("meta-".concat(a,"-overlay--loading")),t.state.error&&o.classList.add("meta-".concat(a,"-overlay--error")),r.append(o);var i=document.createElement("div");i.classList.add("meta-content"),o.append(i);var c=document.createElement("button");if(c.classList.add("meta-nav","meta-close","a"),c.innerHTML='<i class="icon fa fas fa-times"></i> <span class="visually-hidden">Close</span>',c.addEventListener("click",(function(e){e.preventDefault(),t.hide()})),i.append(c),n){var s=n.getAttribute("data-gallery");if(s&&t.state.collections[s].length>1){var l=document.createElement("nav");l.classList.add("meta-navs");var d=document.createElement("button");d.classList.add("meta-nav","meta-nav-arrow","meta-nav-arrow__prev","a"),d.innerHTML='<i class="icon fa fas fa-chevron-left"></i> <span class="visually-hidden">Previous</span>',d.addEventListener("click",(function(e){e.preventDefault(),t.prev()})),l.append(d);var u=document.createElement("button");u.classList.add("meta-nav","meta-nav-arrow","meta-nav-arrow__next","a"),u.innerHTML='<i class="icon fa fas fa-chevron-right"></i> <span class="visually-hidden">Next</span>',u.addEventListener("click",(function(e){e.preventDefault(),t.next()})),l.append(u),i.append(l)}}var m=document.createElement("section");if(m.classList.add("meta-wrap","typography"),t.state.extraClass&&m.classList.add(t.state.extraClass),m.innerHTML=t.getHtml(),i.append(m),t.state.error){var p=document.createElement("div");p.classList.add("meta-error"),p.innerHTML=t.state.error,i.append(p)}else if(t.state.caption){var f=document.createElement("div");f.classList.add("meta-caption"),f.innerHTML=t.getCaption(),i.append(f)}return"undefined"!==typeof window.FontAwesome&&window.FontAwesome.dom.i2svg(),t}}]),MetaWindow}(),r=n,o=document.getElementById("MetaLightboxApp");o||console.log("MetaWindow: missing container #MetaLightboxApp");var i=function init(){var e=window.MetaWindow;"undefined"===typeof e&&(e=new r({target:o}),window.MetaWindow=e),e.init()};window.addEventListener("".concat(t),i),window.addEventListener("".concat(e),i),window.addEventListener("MetaWindow.initLinks",i)}()}(); !function(){"use strict";var e={826:function(e){e.exports=function makeYoutubeEmbed(e){if("string"===typeof e){var t=function getId(e){var t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);if(t&&11==t[2].length)return t[2]}(e);return t?"//www.youtube.com/embed/"+t:void 0}}}},t={};function __webpack_require__(a){var n=t[a];if(void 0!==n)return n.exports;var r=t[a]={exports:{}};return e[a](r,r.exports,__webpack_require__),r.exports}!function(){var e="ajax-load",t="load-ready";function _toConsumableArray(e){return function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}(e)||function _iterableToArray(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function _unsupportedIterableToArray(e,t){if(!e)return;if("string"===typeof e)return _arrayLikeToArray(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return _arrayLikeToArray(e,t)}(e)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _defineProperty(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var a=window,n=function(){function MetaWindow(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{shown:!1},n=arguments.length>1?arguments[1]:void 0;_classCallCheck(this,MetaWindow),_defineProperty(this,"state",{content:"",type:["empty"],shown:!1,loading:!1,error:!1,embed:!1,collections:[],current:null,target:null,extraClass:null}),_defineProperty(this,"show",(function(){var t=e;console.log("".concat(t.name,": show")),t.setState({shown:!0}),a.dispatchEvent(new Event("{ui.name}.show"))})),_defineProperty(this,"hide",(function(){var t=e;console.log("".concat(t.name,": hide")),t.setState({shown:!1}),a.dispatchEvent(new Event("{ui.name}.hide"))})),_defineProperty(this,"next",(function(){var t=e,n=t.state.current.getAttribute("data-gallery"),r=t._currIndex();r<t.state.collections[n].length-1?r++:r=0,t.state.collections[n][r].click(),console.log("".concat(t.name,": next")),a.dispatchEvent(new Event("{ui.name}.next"))})),_defineProperty(this,"prev",(function(){var t=e,n=t.state.current.getAttribute("data-gallery"),r=t._currIndex();r>0?r--:r=t.state.collections[n].length-1,t.state.collections[n][r].click(),console.log("".concat(t.name,": prev")),a.dispatchEvent(new Event("{ui.name}.prev"))})),_defineProperty(this,"reset",(function(){e.setState({content:"",type:["empty"],shown:!1,loading:!1,error:!1,embed:!1})})),_defineProperty(this,"load",(function(t){var n=e;n.reset(),n.setState({loading:!0}),n.show(),window.fetch(t).then((function(e){var r=e.headers.get("content-type");console.log(e),console.log("".concat(n.name,": response content-type: ").concat(r));switch(r){case"image/jpeg":case"image/png":case"image/svg+xml":case"image/bmp":case"image/gif":case"image/tiff":case"image/webp":case"image/jpg":case"image/svg":e.arrayBuffer().then((function(e){n.setContent('<img src="data:'.concat(r,";base64,").concat(n._imageEncode(e),'" />'),"meta-".concat(n.name,"--image"))}));break;case"application/json":case"application/ld+json":case"application/json; charset=UTF-8":n.setContent("".concat((!1).Content),["meta-".concat(n.name,"--text"),"meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--json")]);break;case"video/mp4":n.setContent('<video controls autoplay><source src="'.concat(t,'" type="video/mp4">Your browser does not support the video tag.</video>'),["meta-".concat(n.name,"--image"),"meta-".concat(n.name,"--video")]);break;case"text/html":case"application/xhtml+xml":case"text/plain":case"text/html; charset=UTF-8":case"application/xhtml+xml; charset=UTF-8":case"text/plain; charset=UTF-8":n.setContent(e.data,["meta-".concat(n.name,"--text"),"meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--pajax")]);break;default:console.warn("".concat(n.name,": Unknown response content-type!"))}a.dispatchEvent(new Event("{ui.name}.loaded"))})).catch((function(e){console.error(e);var t="";if(e.response)switch(e.response.status){case 404:t="Not Found.";break;case 500:t="Server issue, please try again latter.";break;default:t="Something went wrong."}else e.request?t="No response received":console.warn("Error",e.message);n.setState({error:t}),a.dispatchEvent(new Event("{ui.name}.error"))})).then((function(){n.setState({loading:!1}),setTimeout((function(){n.state.current.classList.remove("loading")}),1e3)}))})),_defineProperty(this,"_currIndex",(function(){var t=e,a=t.state.current,n=a.getAttribute("data-gallery");return t.state.collections[n].indexOf(a)})),_defineProperty(this,"embed",(function(t){var a=e;console.log("".concat(a.name,": embed")),a.reset(),a.setState({embed:t,loading:!1,type:["meta-".concat(a.name,"--embed"),"meta-".concat(a.name,"--video")]}),a.show()})),_defineProperty(this,"setCaption",(function(t){var a=e;console.log("".concat(a.name,": setCaption")),a.state.caption=t})),_defineProperty(this,"addExtraClass",(function(t){var a=e;t&&t.length&&(console.log("".concat(a.name,": addExtraClass(").concat(t,")")),a.state.extraClass=t)})),_defineProperty(this,"getCaption",(function(){return e.state.caption})),_defineProperty(this,"_imageEncode",(function(e){var t="";return[].slice.call(new Uint8Array(e)).forEach((function(e){t+=String.fromCharCode(e)})),window.btoa(t)})),_defineProperty(this,"setContent",(function(t,a){var n=e;console.log("".concat(n.name,": setContent"));var r=a||["meta-".concat(n.name,"--html"),"meta-".concat(n.name,"--text")];Array.isArray(r)||(r=a.split(" ")),n.setState({content:t,type:r})})),_defineProperty(this,"getHtml",(function(){var t=e;if(t.state.embed){var a=__webpack_require__(826)(t.state.embed);t.state.content='<iframe width="600" height="380" src="'.concat(a,'" frameborder="0"></iframe>')}return t.state.content}));var r=this;switch(r.name=r.constructor.name,console.log("".concat(r.name,": init")),r.setState(t),n){case"show":case"hide":r.hide()}a.dispatchEvent(new Event("{ui.name}.init"))}return function _createClass(e,t,a){return t&&_defineProperties(e.prototype,t),a&&_defineProperties(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}(MetaWindow,[{key:"cleanLinks",value:function cleanLinks(){document.querySelectorAll('[data-toggle="lightbox"]').forEach((function(e){e.classList.remove("loading")}))}},{key:"collectGaleries",value:function collectGaleries(e){var t=this;e&&(t.state.collections[e]=[],document.querySelectorAll('[data-toggle="lightbox"][data-gallery="'.concat(e,'"]')).forEach((function(a){t.state.collections[e].push(a)})))}},{key:"toggle",value:function toggle(e){var t=this;t.cleanLinks();var a=e.getAttribute("href")||e.getAttribute("data-href"),n=e.getAttribute("data-embed");e.classList.add("loading"),t.state.current=e;var r=e.getAttribute("data-title");r&&t.setCaption(r),n?t.embed(a):t.load(a),t.addExtraClass(e.getAttribute("data-lightbox-class"))}},{key:"init",value:function init(){var e=this;console.log("MetaWindow: [links] init"),document.querySelectorAll('[data-toggle="lightbox"],[data-gallery]').forEach((function(t){var a=t.getAttribute("data-gallery");e.collectGaleries(a),t.addEventListener("click",(function(t){t.preventDefault(),console.log("MetaWindow: [link] click");var a=t.currentTarget;e.toggle(a)}))}))}},{key:"setState",value:function setState(e){var t=this;t.state=Object.assign({},t.state,e),t.render()}},{key:"render",value:function render(){var e,t=this,a=t.name,n=t.state.current;t.state.target.innerHTML="";var r=document.createElement("div");r.classList.add("meta-".concat(a)),(e=r.classList).add.apply(e,_toConsumableArray(t.state.type)),t.state.target.append(r);var o=document.createElement("div");o.classList.add("meta-".concat(a,"-overlay")),t.state.shown&&o.classList.add("meta-".concat(a,"-overlay--open")),t.state.loading&&o.classList.add("meta-".concat(a,"-overlay--loading")),t.state.error&&o.classList.add("meta-".concat(a,"-overlay--error")),r.append(o);var i=document.createElement("div");i.classList.add("meta-content"),o.append(i);var c=document.createElement("button");if(c.classList.add("meta-nav","meta-close","a"),c.innerHTML='<i class="icon fa fas fa-times"></i> <span class="visually-hidden">Close</span>',c.addEventListener("click",(function(e){e.preventDefault(),t.hide()})),i.append(c),n){var s=n.getAttribute("data-gallery");if(s&&t.state.collections[s].length>1){var l=document.createElement("nav");l.classList.add("meta-navs");var d=document.createElement("button");d.classList.add("meta-nav","meta-nav-arrow","meta-nav-arrow__prev","a"),d.innerHTML='<i class="icon fa fas fa-chevron-left"></i> <span class="visually-hidden">Previous</span>',d.addEventListener("click",(function(e){e.preventDefault(),t.prev()})),l.append(d);var u=document.createElement("button");u.classList.add("meta-nav","meta-nav-arrow","meta-nav-arrow__next","a"),u.innerHTML='<i class="icon fa fas fa-chevron-right"></i> <span class="visually-hidden">Next</span>',u.addEventListener("click",(function(e){e.preventDefault(),t.next()})),l.append(u),i.append(l)}}var m=document.createElement("section");if(m.classList.add("meta-wrap","typography"),t.state.extraClass&&m.classList.add(t.state.extraClass),m.innerHTML=t.getHtml(),i.append(m),t.state.error){var p=document.createElement("div");p.classList.add("meta-error"),p.innerHTML=t.state.error,i.append(p)}else if(t.state.caption){var f=document.createElement("div");f.classList.add("meta-caption"),f.innerHTML=t.getCaption(),i.append(f)}return"undefined"!==typeof window.FontAwesome&&window.FontAwesome.dom.i2svg(),t}}]),MetaWindow}(),r=n,o=document.getElementById("MetaLightboxApp");o||console.log("MetaWindow: missing container #MetaLightboxApp");var i=function init(){var e=window.MetaWindow;"undefined"===typeof e&&(e=new r({target:o}),window.MetaWindow=e),e.init()};window.addEventListener("".concat(t),i),window.addEventListener("".concat(e),i),window.addEventListener("MetaWindow.initLinks",i)}()}();

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/meta-lightbox-js [2 May 2022 at 23:31]</title> <title>@a2nt/meta-lightbox-js [3 May 2022 at 20:58]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" /> <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script> <script>
@ -31,7 +31,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":23026,"parsedSize":10608,"gzipSize":3366,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":217}],"parsedSize":265,"gzipSize":217},{"label":"src","path":"./src","statSize":22449,"groups":[{"label":"js","path":"./src/js","statSize":18141,"groups":[{"id":348,"label":"test-build.js + 3 modules (concatenated)","path":"./src/js/test-build.js + 3 modules (concatenated)","statSize":18141,"parsedSize":10343,"gzipSize":3232,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js","statSize":18141,"groups":[{"id":null,"label":"test-build.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/test-build.js","statSize":300,"parsedSize":171,"gzipSize":53,"inaccurateSizes":true},{"id":null,"label":"app.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/app.js","statSize":815,"parsedSize":464,"gzipSize":145,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/_events.js","statSize":1366,"parsedSize":778,"gzipSize":243,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/window.js","statSize":15660,"parsedSize":8928,"gzipSize":2789,"inaccurateSizes":true}],"parsedSize":10343,"gzipSize":3232,"inaccurateSizes":true}]}],"parsedSize":10343,"gzipSize":3232},{"label":"scss","path":"./src/scss","statSize":4308,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":4308}],"parsedSize":0,"gzipSize":0}],"parsedSize":10343,"gzipSize":3232}]}]; window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":22926,"parsedSize":10608,"gzipSize":3367,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":217}],"parsedSize":265,"gzipSize":217},{"label":"src","path":"./src","statSize":22349,"groups":[{"label":"js","path":"./src/js","statSize":18041,"groups":[{"id":348,"label":"test-build.js + 3 modules (concatenated)","path":"./src/js/test-build.js + 3 modules (concatenated)","statSize":18041,"parsedSize":10343,"gzipSize":3233,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js","statSize":18041,"groups":[{"id":null,"label":"test-build.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/test-build.js","statSize":302,"parsedSize":173,"gzipSize":54,"inaccurateSizes":true},{"id":null,"label":"app.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/app.js","statSize":817,"parsedSize":468,"gzipSize":146,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/_events.js","statSize":1366,"parsedSize":783,"gzipSize":244,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/window.js","statSize":15556,"parsedSize":8918,"gzipSize":2787,"inaccurateSizes":true}],"parsedSize":10343,"gzipSize":3233,"inaccurateSizes":true}]}],"parsedSize":10343,"gzipSize":3233},{"label":"scss","path":"./src/scss","statSize":4308,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":4308}],"parsedSize":0,"gzipSize":0}],"parsedSize":10343,"gzipSize":3233}]}];
window.defaultSizes = "parsed"; window.defaultSizes = "parsed";
</script> </script>
</body> </body>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/meta-lightbox-js", "name": "@a2nt/meta-lightbox-js",
"version": "4.2.2", "version": "4.2.3",
"description": "Universal lightbox", "description": "Universal lightbox",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",

2
src/js/_events.js
View File

@ -41,4 +41,4 @@ export default {
FORM_STEPPED_FIRST_STEP: 'form-first-step', FORM_STEPPED_FIRST_STEP: 'form-first-step',
FORM_STEPPED_LAST_STEP: 'form-last-step', FORM_STEPPED_LAST_STEP: 'form-last-step',
FORM_FIELDS: 'input,textarea,select', FORM_FIELDS: 'input,textarea,select',
}; }

30
src/js/app.js
View File

@ -4,38 +4,38 @@
* *
*/ */
import Events from './_events'; import Events from './_events'
import MetaWindow from './window'; import MetaWindow from './window'
const container = document.getElementById('MetaLightboxApp'); const container = document.getElementById('MetaLightboxApp')
if (!container) { if (!container) {
console.log(`MetaWindow: missing container #MetaLightboxApp`); console.log('MetaWindow: missing container #MetaLightboxApp')
} }
const init = () => { const init = () => {
let ui = window.MetaWindow; let ui = window.MetaWindow
if (typeof ui === 'undefined') { if (typeof ui === 'undefined') {
ui = new MetaWindow({ ui = new MetaWindow({
target: container, target: container,
}); })
window.MetaWindow = ui; window.MetaWindow = ui
} }
ui.init(); ui.init()
}; }
window.addEventListener(`${Events.LOADEDANDREADY}`, init); window.addEventListener(`${Events.LOADEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init); window.addEventListener(`${Events.AJAX}`, init)
window.addEventListener(`MetaWindow.initLinks`, init); window.addEventListener('MetaWindow.initLinks', init)
/*function importAll(r) { /* function importAll(r) {
return r.keys().map(r); return r.keys().map(r);
} }
const images = importAll( const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/), require.context('../img/', false, /\.(png|jpe?g|svg)$/),
);*/ ); */
export default MetaWindow; export default MetaWindow

4
src/js/index.js
View File

@ -1,2 +1,2 @@
import styles from "../scss/window.scss"; import '../scss/window.scss'
import "./app.js"; import './app.js'

12
src/js/test-build.js
View File

@ -4,16 +4,16 @@
* *
*/ */
import ui from "./app"; import ui from './app'
import "../scss/app.scss"; import '../scss/app.scss'
import "../scss/test-build.scss"; import '../scss/test-build.scss'
/*function importAll(r) { /* function importAll(r) {
return r.keys().map(r); return r.keys().map(r);
} }
const images = importAll( const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/), require.context('../img/', false, /\.(png|jpe?g|svg)$/),
);*/ ); */
export default ui; export default ui

481
src/js/window.js
View File

@ -1,8 +1,8 @@
/* /*
* Lightbox window * Lightbox window
*/ */
import Events from './_events'; // import Events from './_events'
const W = window; const W = window
class MetaWindow { class MetaWindow {
state = { state = {
@ -16,160 +16,160 @@ class MetaWindow {
current: null, current: null,
target: null, target: null,
extraClass: null, extraClass: null,
};
cleanLinks() {
document.querySelectorAll(`[data-toggle="lightbox"]`)
.forEach((el) => {
el.classList.remove('loading');
});
} }
collectGaleries(gallery) { cleanLinks () {
const ui = this; document.querySelectorAll('[data-toggle="lightbox"]')
.forEach((el) => {
el.classList.remove('loading')
})
}
collectGaleries (gallery) {
const ui = this
if (!gallery) { if (!gallery) {
return; return
} }
ui.state.collections[gallery] = []; ui.state.collections[gallery] = []
document document
.querySelectorAll( .querySelectorAll(
`[data-toggle="lightbox"][data-gallery="${gallery}"]` `[data-toggle="lightbox"][data-gallery="${gallery}"]`
) )
.forEach((el) => { .forEach((el) => {
ui.state.collections[gallery].push(el); ui.state.collections[gallery].push(el)
}); })
} }
toggle(el) { toggle (el) {
const ui = this; const ui = this
ui.cleanLinks(); ui.cleanLinks()
const link = el.getAttribute('href') || el.getAttribute('data-href'); const link = el.getAttribute('href') || el.getAttribute('data-href')
const embed = el.getAttribute('data-embed'); const embed = el.getAttribute('data-embed')
el.classList.add('loading'); el.classList.add('loading')
ui.state.current = el; ui.state.current = el
const title = el.getAttribute('data-title'); const title = el.getAttribute('data-title')
if (title) { if (title) {
ui.setCaption(title); ui.setCaption(title)
} }
if (embed) { if (embed) {
ui.embed(link); ui.embed(link)
} else { } else {
ui.load(link); ui.load(link)
} }
ui.addExtraClass(el.getAttribute('data-lightbox-class')); ui.addExtraClass(el.getAttribute('data-lightbox-class'))
} }
init() { init () {
const ui = this; const ui = this
console.log(`MetaWindow: [links] init`); console.log('MetaWindow: [links] init')
document document
.querySelectorAll(`[data-toggle="lightbox"],[data-gallery]`) .querySelectorAll('[data-toggle="lightbox"],[data-gallery]')
.forEach((el) => { .forEach((el) => {
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery')
ui.collectGaleries(gallery); ui.collectGaleries(gallery)
// click handler // click handler
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
console.log(`MetaWindow: [link] click`); console.log('MetaWindow: [link] click')
const el = e.currentTarget; const el = e.currentTarget
ui.toggle(el); ui.toggle(el)
}); })
}); })
} }
constructor( constructor (
state = { state = {
shown: false, shown: false,
}, },
action action
) { ) {
const ui = this; const ui = this
ui.name = ui.constructor.name; ui.name = ui.constructor.name
console.log(`${ui.name}: init`); console.log(`${ui.name}: init`)
ui.setState(state); ui.setState(state)
switch (action) { switch (action) {
case 'show': case 'show':
ui.hide(); ui.hide()
break; break
case 'hide': case 'hide':
ui.hide(); ui.hide()
break; break
} }
W.dispatchEvent(new Event(`{ui.name}.init`)); W.dispatchEvent(new Event('{ui.name}.init'))
} }
show = () => { show = () => {
const ui = this; const ui = this
console.log(`${ui.name}: show`); console.log(`${ui.name}: show`)
ui.setState({ ui.setState({
shown: true, shown: true,
}); })
W.dispatchEvent(new Event(`{ui.name}.show`)); W.dispatchEvent(new Event('{ui.name}.show'))
}; }
hide = () => { hide = () => {
const ui = this; const ui = this
console.log(`${ui.name}: hide`); console.log(`${ui.name}: hide`)
ui.setState({ ui.setState({
shown: false, shown: false,
}); })
W.dispatchEvent(new Event(`{ui.name}.hide`)); W.dispatchEvent(new Event('{ui.name}.hide'))
}; }
next = () => { next = () => {
const ui = this; const ui = this
const el = ui.state.current; const el = ui.state.current
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery')
let i = ui._currIndex(); let i = ui._currIndex()
if (i < ui.state.collections[gallery].length - 1) { if (i < ui.state.collections[gallery].length - 1) {
i++; i++
} else { } else {
i = 0; i = 0
} }
ui.state.collections[gallery][i].click(); ui.state.collections[gallery][i].click()
console.log(`${ui.name}: next`); console.log(`${ui.name}: next`)
W.dispatchEvent(new Event(`{ui.name}.next`)); W.dispatchEvent(new Event('{ui.name}.next'))
}; }
prev = () => { prev = () => {
const ui = this; const ui = this
const el = ui.state.current; const el = ui.state.current
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery')
let i = ui._currIndex(); let i = ui._currIndex()
if (i > 0) { if (i > 0) {
i--; i--
} else { } else {
i = ui.state.collections[gallery].length - 1; i = ui.state.collections[gallery].length - 1
} }
ui.state.collections[gallery][i].click(); ui.state.collections[gallery][i].click()
console.log(`${ui.name}: prev`); console.log(`${ui.name}: prev`)
W.dispatchEvent(new Event(`{ui.name}.prev`)); W.dispatchEvent(new Event('{ui.name}.prev'))
}; }
reset = () => { reset = () => {
const ui = this; const ui = this
ui.setState({ ui.setState({
content: '', content: '',
@ -178,30 +178,30 @@ class MetaWindow {
loading: false, loading: false,
error: false, error: false,
embed: false, embed: false,
//collections: [], // collections: [],
//current: null, // current: null,
//target: null, // target: null,
}); })
}; }
load = (link) => { load = (link) => {
const ui = this; const ui = this
ui.reset(); ui.reset()
ui.setState({ ui.setState({
loading: true, loading: true,
}); })
ui.show(); ui.show()
fetch(link).then((resp) => { window.fetch(link).then((resp) => {
// handle success // handle success
const type = resp.headers.get("content-type"); const type = resp.headers.get('content-type')
console.log(resp); console.log(resp)
console.log( console.log(
`${ui.name}: response content-type: ${type}` `${ui.name}: response content-type: ${type}`
); )
const json = false; const json = false
switch (type) { switch (type) {
case 'image/jpeg': case 'image/jpeg':
@ -211,38 +211,35 @@ class MetaWindow {
case 'image/gif': case 'image/gif':
case 'image/tiff': case 'image/tiff':
case 'image/webp': case 'image/webp':
// irregular types:
case 'image/jpg': case 'image/jpg':
case 'image/svg': case 'image/svg':
//json = JSON.parse(ui._abToString(resp.data)); // json = JSON.parse(ui._abToString(resp.data));
resp.arrayBuffer().then((buffer) => { resp.arrayBuffer().then((buffer) => {
ui.setContent( ui.setContent(
`<img src="data:${type};base64,${ui._imageEncode(buffer)}" />`, `<img src="data:${type};base64,${ui._imageEncode(buffer)}" />`,
`meta-${ui.name}--image` `meta-${ui.name}--image`
); )
}); })
break; break
case 'application/json': case 'application/json':
case 'application/ld+json': case 'application/ld+json':
// irregular types:
case 'application/json; charset=UTF-8': case 'application/json; charset=UTF-8':
ui.setContent(`${json['Content']}`, [ ui.setContent(`${json.Content}`, [
`meta-${ui.name}--text`, `meta-${ui.name}--text`,
`meta-${ui.name}--html`, `meta-${ui.name}--html`,
`meta-${ui.name}--json`, `meta-${ui.name}--json`,
]); ])
break; break
case 'video/mp4': case 'video/mp4':
ui.setContent(`<video controls autoplay><source src="${link}" type="video/mp4">Your browser does not support the video tag.</video>`, [ ui.setContent(`<video controls autoplay><source src="${link}" type="video/mp4">Your browser does not support the video tag.</video>`, [
`meta-${ui.name}--image`, `meta-${ui.name}--image`,
`meta-${ui.name}--video`, `meta-${ui.name}--video`,
]); ])
break; break
case 'text/html': case 'text/html':
case 'application/xhtml+xml': case 'application/xhtml+xml':
case 'text/plain': case 'text/plain':
// irregular types:
case 'text/html; charset=UTF-8': case 'text/html; charset=UTF-8':
case 'application/xhtml+xml; charset=UTF-8': case 'application/xhtml+xml; charset=UTF-8':
case 'text/plain; charset=UTF-8': case 'text/plain; charset=UTF-8':
@ -250,260 +247,258 @@ class MetaWindow {
`meta-${ui.name}--text`, `meta-${ui.name}--text`,
`meta-${ui.name}--html`, `meta-${ui.name}--html`,
`meta-${ui.name}--pajax`, `meta-${ui.name}--pajax`,
]); ])
break; break
default: default:
console.warn(`${ui.name}: Unknown response content-type!`); console.warn(`${ui.name}: Unknown response content-type!`)
break; break
} }
W.dispatchEvent(new Event(`{ui.name}.loaded`)); W.dispatchEvent(new Event('{ui.name}.loaded'))
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error)
let msg = ''; let msg = ''
if (error.response) { if (error.response) {
switch (error.response.status) { switch (error.response.status) {
case 404: case 404:
msg = 'Not Found.'; msg = 'Not Found.'
break; break
case 500: case 500:
msg = 'Server issue, please try again latter.'; msg = 'Server issue, please try again latter.'
break; break
default: default:
msg = 'Something went wrong.'; msg = 'Something went wrong.'
break; break
} }
} else if (error.request) { } else if (error.request) {
msg = 'No response received'; msg = 'No response received'
} else { } else {
console.warn('Error', error.message); console.warn('Error', error.message)
} }
ui.setState({ ui.setState({
error: msg, error: msg,
}); })
W.dispatchEvent(new Event(`{ui.name}.error`)); W.dispatchEvent(new Event('{ui.name}.error'))
}) })
.then(() => { .then(() => {
ui.setState({ ui.setState({
loading: false, loading: false,
}); })
setTimeout(() => { setTimeout(() => {
ui.state.current.classList.remove('loading'); ui.state.current.classList.remove('loading')
}, 1000); }, 1000)
}); })
}; }
_currIndex = () => { _currIndex = () => {
const ui = this; const ui = this
const el = ui.state.current; const el = ui.state.current
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery')
return ui.state.collections[gallery].indexOf(el); return ui.state.collections[gallery].indexOf(el)
}; }
embed = (link) => { embed = (link) => {
const ui = this; const ui = this
console.log(`${ui.name}: embed`); console.log(`${ui.name}: embed`)
ui.reset(); ui.reset()
ui.setState({ ui.setState({
embed: link, embed: link,
loading: false, loading: false,
type: [`meta-${ui.name}--embed`, `meta-${ui.name}--video`], type: [`meta-${ui.name}--embed`, `meta-${ui.name}--video`],
}); })
ui.show(); ui.show()
}; }
setCaption = (title) => { setCaption = (title) => {
const ui = this; const ui = this
console.log(`${ui.name}: setCaption`); console.log(`${ui.name}: setCaption`)
ui.state.caption = title; ui.state.caption = title
}; }
addExtraClass = (cls) => { addExtraClass = (cls) => {
const ui = this; const ui = this
if (!cls || !cls.length) { if (!cls || !cls.length) {
return; return
} }
console.log(`${ui.name}: addExtraClass(${cls})`); console.log(`${ui.name}: addExtraClass(${cls})`)
ui.state.extraClass = cls; ui.state.extraClass = cls
}; }
getCaption = () => { getCaption = () => {
const ui = this; const ui = this
return ui.state.caption; return ui.state.caption
}; }
/*_abToString = (arrayBuffer) => { /* _abToString = (arrayBuffer) => {
return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)); return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
};*/ }; */
_imageEncode = (buffer) => { _imageEncode = (buffer) => {
let binary = ''; let binary = ''
const bytes = [].slice.call(new Uint8Array(buffer)); const bytes = [].slice.call(new Uint8Array(buffer))
bytes.forEach((b) => binary += String.fromCharCode(b)); bytes.forEach((b) => {
return window.btoa(binary); binary += String.fromCharCode(b)
}; })
return window.btoa(binary)
}
setContent = (html, type) => { setContent = (html, type) => {
const ui = this; const ui = this
console.log(`${ui.name}: setContent`); console.log(`${ui.name}: setContent`)
let typeArr = type let typeArr = type || [`meta-${ui.name}--html`, `meta-${ui.name}--text`]
? type
: [`meta-${ui.name}--html`, `meta-${ui.name}--text`];
if (!Array.isArray(typeArr)) { if (!Array.isArray(typeArr)) {
typeArr = type.split(' '); typeArr = type.split(' ')
} }
ui.setState({ ui.setState({
content: html, content: html,
type: typeArr, type: typeArr,
}); })
};
getHtml = () => {
const ui = this;
if (ui.state.embed) {
const youtubeEmbed = require('youtube-embed');
const embedLink = youtubeEmbed(ui.state.embed);
ui.state.content = `<iframe width="600" height="380" src="${embedLink}" frameborder="0"></iframe>`;
}
return ui.state.content;
};
setState(state) {
const ui = this;
ui.state = Object.assign({}, ui.state, state);
ui.render();
} }
render() { getHtml = () => {
const ui = this; const ui = this
const name = ui.name;
const navs = null; if (ui.state.embed) {
const el = ui.state.current; const youtubeEmbed = require('youtube-embed')
const embedLink = youtubeEmbed(ui.state.embed)
ui.state.content = `<iframe width="600" height="380" src="${embedLink}" frameborder="0"></iframe>`
}
ui.state.target.innerHTML = ''; return ui.state.content
const meta = document.createElement('div'); }
meta.classList.add(`meta-${name}`);
meta.classList.add(...ui.state.type);
ui.state.target.append(meta);
const metaOverlay = document.createElement('div'); setState (state) {
metaOverlay.classList.add(`meta-${name}-overlay`); const ui = this
ui.state = Object.assign({}, ui.state, state)
ui.render()
}
render () {
const ui = this
const name = ui.name
const el = ui.state.current
ui.state.target.innerHTML = ''
const meta = document.createElement('div')
meta.classList.add(`meta-${name}`)
meta.classList.add(...ui.state.type)
ui.state.target.append(meta)
const metaOverlay = document.createElement('div')
metaOverlay.classList.add(`meta-${name}-overlay`)
if (ui.state.shown) { if (ui.state.shown) {
metaOverlay.classList.add(`meta-${name}-overlay--open`); metaOverlay.classList.add(`meta-${name}-overlay--open`)
} }
if (ui.state.loading) { if (ui.state.loading) {
metaOverlay.classList.add(`meta-${name}-overlay--loading`); metaOverlay.classList.add(`meta-${name}-overlay--loading`)
} }
if (ui.state.error) { if (ui.state.error) {
metaOverlay.classList.add(`meta-${name}-overlay--error`); metaOverlay.classList.add(`meta-${name}-overlay--error`)
} }
meta.append(metaOverlay); meta.append(metaOverlay)
const metaContent = document.createElement('div'); const metaContent = document.createElement('div')
metaContent.classList.add('meta-content'); metaContent.classList.add('meta-content')
metaOverlay.append(metaContent); metaOverlay.append(metaContent)
const btnClose = document.createElement('button'); const btnClose = document.createElement('button')
btnClose.classList.add('meta-nav', 'meta-close', 'a'); btnClose.classList.add('meta-nav', 'meta-close', 'a')
btnClose.innerHTML = btnClose.innerHTML =
'<i class="icon fa fas fa-times"></i>' + '<i class="icon fa fas fa-times"></i>' +
' <span class="visually-hidden">Close</span>'; ' <span class="visually-hidden">Close</span>'
btnClose.addEventListener('click', (e) => { btnClose.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.hide(); ui.hide()
}); })
metaContent.append(btnClose); metaContent.append(btnClose)
if (el) { if (el) {
const gallery = el.getAttribute('data-gallery'); const gallery = el.getAttribute('data-gallery')
if (gallery && ui.state.collections[gallery].length > 1) { if (gallery && ui.state.collections[gallery].length > 1) {
const navs = document.createElement('nav'); const navs = document.createElement('nav')
navs.classList.add('meta-navs'); navs.classList.add('meta-navs')
const prevBtn = document.createElement('button'); const prevBtn = document.createElement('button')
prevBtn.classList.add( prevBtn.classList.add(
'meta-nav', 'meta-nav',
'meta-nav-arrow', 'meta-nav-arrow',
'meta-nav-arrow__prev', 'meta-nav-arrow__prev',
'a' 'a'
); )
prevBtn.innerHTML = prevBtn.innerHTML =
'<i class="icon fa fas fa-chevron-left"></i>' + '<i class="icon fa fas fa-chevron-left"></i>' +
' <span class="visually-hidden">Previous</span>'; ' <span class="visually-hidden">Previous</span>'
prevBtn.addEventListener('click', (e) => { prevBtn.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.prev(); ui.prev()
}); })
navs.append(prevBtn); navs.append(prevBtn)
const nextBtn = document.createElement('button'); const nextBtn = document.createElement('button')
nextBtn.classList.add( nextBtn.classList.add(
'meta-nav', 'meta-nav',
'meta-nav-arrow', 'meta-nav-arrow',
'meta-nav-arrow__next', 'meta-nav-arrow__next',
'a' 'a'
); )
nextBtn.innerHTML = nextBtn.innerHTML =
'<i class="icon fa fas fa-chevron-right"></i>' + '<i class="icon fa fas fa-chevron-right"></i>' +
' <span class="visually-hidden">Next</span>'; ' <span class="visually-hidden">Next</span>'
nextBtn.addEventListener('click', (e) => { nextBtn.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.next(); ui.next()
}); })
navs.append(nextBtn); navs.append(nextBtn)
metaContent.append(navs); metaContent.append(navs)
} }
} }
const content = document.createElement('section'); const content = document.createElement('section')
content.classList.add('meta-wrap', 'typography'); content.classList.add('meta-wrap', 'typography')
if (ui.state.extraClass) { if (ui.state.extraClass) {
content.classList.add(ui.state.extraClass); content.classList.add(ui.state.extraClass)
} }
content.innerHTML = ui.getHtml(); content.innerHTML = ui.getHtml()
metaContent.append(content); metaContent.append(content)
if (ui.state.error) { if (ui.state.error) {
const error = document.createElement('div'); const error = document.createElement('div')
error.classList.add('meta-error'); error.classList.add('meta-error')
error.innerHTML = ui.state.error; error.innerHTML = ui.state.error
metaContent.append(error); metaContent.append(error)
} else if (ui.state.caption) { } else if (ui.state.caption) {
const caption = document.createElement('div'); const caption = document.createElement('div')
caption.classList.add('meta-caption'); caption.classList.add('meta-caption')
caption.innerHTML = ui.getCaption(); caption.innerHTML = ui.getCaption()
metaContent.append(caption); metaContent.append(caption)
} }
// update fontawesome dome // update fontawesome dome
if (typeof window.FontAwesome !== 'undefined') { if (typeof window.FontAwesome !== 'undefined') {
window.FontAwesome.dom.i2svg(); window.FontAwesome.dom.i2svg()
} }
return ui; return ui
} }
} }
export default MetaWindow; export default MetaWindow