diff --git a/dist/js/app.js b/dist/js/app.js index 8f5273c..97a73b8 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -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);a0&&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();r0?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(''),"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(''),["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='')}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=' ',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=' ',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=' ',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)}()}(); \ No newline at end of file +!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);a0&&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();r0?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(''),"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(''),["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='')}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=' ',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=' ',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=' ',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)}()}(); \ No newline at end of file diff --git a/dist/report.html b/dist/report.html index 9e95f37..520b169 100644 --- a/dist/report.html +++ b/dist/report.html @@ -3,7 +3,7 @@ - @a2nt/meta-lightbox-js [2 May 2022 at 23:31] + @a2nt/meta-lightbox-js [3 May 2022 at 20:58] diff --git a/package.json b/package.json index 614c1f1..bf42f8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/meta-lightbox-js", - "version": "4.2.2", + "version": "4.2.3", "description": "Universal lightbox", "author": "Tony Air ", "license": "BSD-2-Clause", diff --git a/src/js/_events.js b/src/js/_events.js index 96c5b23..5ae3123 100755 --- a/src/js/_events.js +++ b/src/js/_events.js @@ -41,4 +41,4 @@ export default { FORM_STEPPED_FIRST_STEP: 'form-first-step', FORM_STEPPED_LAST_STEP: 'form-last-step', FORM_FIELDS: 'input,textarea,select', -}; +} diff --git a/src/js/app.js b/src/js/app.js index 2ab5fff..4f9a3a2 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -4,38 +4,38 @@ * */ -import Events from './_events'; -import MetaWindow from './window'; +import Events from './_events' +import MetaWindow from './window' -const container = document.getElementById('MetaLightboxApp'); +const container = document.getElementById('MetaLightboxApp') if (!container) { - console.log(`MetaWindow: missing container #MetaLightboxApp`); + console.log('MetaWindow: missing container #MetaLightboxApp') } const init = () => { - let ui = window.MetaWindow; + let ui = window.MetaWindow if (typeof ui === 'undefined') { ui = new MetaWindow({ target: container, - }); + }) - window.MetaWindow = ui; + window.MetaWindow = ui } - ui.init(); -}; + ui.init() +} -window.addEventListener(`${Events.LOADEDANDREADY}`, init); -window.addEventListener(`${Events.AJAX}`, init); -window.addEventListener(`MetaWindow.initLinks`, init); +window.addEventListener(`${Events.LOADEDANDREADY}`, init) +window.addEventListener(`${Events.AJAX}`, init) +window.addEventListener('MetaWindow.initLinks', init) -/*function importAll(r) { +/* function importAll(r) { return r.keys().map(r); } const images = importAll( require.context('../img/', false, /\.(png|jpe?g|svg)$/), -);*/ +); */ -export default MetaWindow; +export default MetaWindow diff --git a/src/js/index.js b/src/js/index.js index 7132e1e..a6b870d 100755 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,2 +1,2 @@ -import styles from "../scss/window.scss"; -import "./app.js"; +import '../scss/window.scss' +import './app.js' diff --git a/src/js/test-build.js b/src/js/test-build.js index 591717c..a164a2b 100755 --- a/src/js/test-build.js +++ b/src/js/test-build.js @@ -4,16 +4,16 @@ * */ -import ui from "./app"; -import "../scss/app.scss"; -import "../scss/test-build.scss"; +import ui from './app' +import '../scss/app.scss' +import '../scss/test-build.scss' -/*function importAll(r) { +/* function importAll(r) { return r.keys().map(r); } const images = importAll( require.context('../img/', false, /\.(png|jpe?g|svg)$/), -);*/ +); */ -export default ui; +export default ui diff --git a/src/js/window.js b/src/js/window.js index b7b3f58..ab0bb54 100755 --- a/src/js/window.js +++ b/src/js/window.js @@ -1,8 +1,8 @@ /* * Lightbox window */ -import Events from './_events'; -const W = window; +// import Events from './_events' +const W = window class MetaWindow { state = { @@ -16,160 +16,160 @@ class MetaWindow { current: null, target: null, extraClass: null, - }; - - cleanLinks() { - document.querySelectorAll(`[data-toggle="lightbox"]`) - .forEach((el) => { - el.classList.remove('loading'); - }); } - collectGaleries(gallery) { - const ui = this; + cleanLinks () { + document.querySelectorAll('[data-toggle="lightbox"]') + .forEach((el) => { + el.classList.remove('loading') + }) + } + + collectGaleries (gallery) { + const ui = this if (!gallery) { - return; + return } - ui.state.collections[gallery] = []; + ui.state.collections[gallery] = [] document .querySelectorAll( `[data-toggle="lightbox"][data-gallery="${gallery}"]` ) .forEach((el) => { - ui.state.collections[gallery].push(el); - }); + ui.state.collections[gallery].push(el) + }) } - toggle(el) { - const ui = this; + toggle (el) { + const ui = this - ui.cleanLinks(); + ui.cleanLinks() - const link = el.getAttribute('href') || el.getAttribute('data-href'); - const embed = el.getAttribute('data-embed'); - el.classList.add('loading'); - ui.state.current = el; + const link = el.getAttribute('href') || el.getAttribute('data-href') + const embed = el.getAttribute('data-embed') + el.classList.add('loading') + ui.state.current = el - const title = el.getAttribute('data-title'); + const title = el.getAttribute('data-title') if (title) { - ui.setCaption(title); + ui.setCaption(title) } if (embed) { - ui.embed(link); + ui.embed(link) } else { - ui.load(link); + ui.load(link) } - ui.addExtraClass(el.getAttribute('data-lightbox-class')); + ui.addExtraClass(el.getAttribute('data-lightbox-class')) } - init() { - const ui = this; - console.log(`MetaWindow: [links] init`); + init () { + const ui = this + console.log('MetaWindow: [links] init') document - .querySelectorAll(`[data-toggle="lightbox"],[data-gallery]`) + .querySelectorAll('[data-toggle="lightbox"],[data-gallery]') .forEach((el) => { - const gallery = el.getAttribute('data-gallery'); - ui.collectGaleries(gallery); + const gallery = el.getAttribute('data-gallery') + ui.collectGaleries(gallery) // click handler el.addEventListener('click', (e) => { - e.preventDefault(); - console.log(`MetaWindow: [link] click`); + e.preventDefault() + console.log('MetaWindow: [link] click') - const el = e.currentTarget; - ui.toggle(el); - }); - }); + const el = e.currentTarget + ui.toggle(el) + }) + }) } - constructor( + constructor ( state = { shown: false, }, action ) { - const ui = this; + const ui = this - ui.name = ui.constructor.name; - console.log(`${ui.name}: init`); + ui.name = ui.constructor.name + console.log(`${ui.name}: init`) - ui.setState(state); + ui.setState(state) switch (action) { case 'show': - ui.hide(); - break; + ui.hide() + break case 'hide': - ui.hide(); - break; + ui.hide() + break } - W.dispatchEvent(new Event(`{ui.name}.init`)); + W.dispatchEvent(new Event('{ui.name}.init')) } show = () => { - const ui = this; - console.log(`${ui.name}: show`); + const ui = this + console.log(`${ui.name}: show`) ui.setState({ shown: true, - }); + }) - W.dispatchEvent(new Event(`{ui.name}.show`)); - }; + W.dispatchEvent(new Event('{ui.name}.show')) + } hide = () => { - const ui = this; + const ui = this - console.log(`${ui.name}: hide`); + console.log(`${ui.name}: hide`) ui.setState({ shown: false, - }); - W.dispatchEvent(new Event(`{ui.name}.hide`)); - }; + }) + W.dispatchEvent(new Event('{ui.name}.hide')) + } next = () => { - const ui = this; - const el = ui.state.current; - const gallery = el.getAttribute('data-gallery'); + const ui = this + const el = ui.state.current + const gallery = el.getAttribute('data-gallery') - let i = ui._currIndex(); + let i = ui._currIndex() if (i < ui.state.collections[gallery].length - 1) { - i++; + i++ } else { - i = 0; + i = 0 } - ui.state.collections[gallery][i].click(); + ui.state.collections[gallery][i].click() - console.log(`${ui.name}: next`); - W.dispatchEvent(new Event(`{ui.name}.next`)); - }; + console.log(`${ui.name}: next`) + W.dispatchEvent(new Event('{ui.name}.next')) + } prev = () => { - const ui = this; - const el = ui.state.current; - const gallery = el.getAttribute('data-gallery'); + const ui = this + const el = ui.state.current + const gallery = el.getAttribute('data-gallery') - let i = ui._currIndex(); + let i = ui._currIndex() if (i > 0) { - i--; + i-- } 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`); - W.dispatchEvent(new Event(`{ui.name}.prev`)); - }; + console.log(`${ui.name}: prev`) + W.dispatchEvent(new Event('{ui.name}.prev')) + } reset = () => { - const ui = this; + const ui = this ui.setState({ content: '', @@ -178,30 +178,30 @@ class MetaWindow { loading: false, error: false, embed: false, - //collections: [], - //current: null, - //target: null, - }); - }; + // collections: [], + // current: null, + // target: null, + }) + } load = (link) => { - const ui = this; + const ui = this - ui.reset(); + ui.reset() ui.setState({ loading: true, - }); - ui.show(); + }) + ui.show() - fetch(link).then((resp) => { + window.fetch(link).then((resp) => { // handle success - const type = resp.headers.get("content-type"); - console.log(resp); + const type = resp.headers.get('content-type') + console.log(resp) console.log( `${ui.name}: response content-type: ${type}` - ); - const json = false; + ) + const json = false switch (type) { case 'image/jpeg': @@ -211,38 +211,35 @@ class MetaWindow { case 'image/gif': case 'image/tiff': case 'image/webp': - // irregular types: case 'image/jpg': case 'image/svg': - //json = JSON.parse(ui._abToString(resp.data)); + // json = JSON.parse(ui._abToString(resp.data)); resp.arrayBuffer().then((buffer) => { ui.setContent( ``, `meta-${ui.name}--image` - ); - }); - break; + ) + }) + break case 'application/json': case 'application/ld+json': - // irregular types: case 'application/json; charset=UTF-8': - ui.setContent(`${json['Content']}`, [ + ui.setContent(`${json.Content}`, [ `meta-${ui.name}--text`, `meta-${ui.name}--html`, `meta-${ui.name}--json`, - ]); + ]) - break; + break case 'video/mp4': ui.setContent(``, [ `meta-${ui.name}--image`, `meta-${ui.name}--video`, - ]); - break; + ]) + break case 'text/html': case 'application/xhtml+xml': case 'text/plain': - // irregular types: case 'text/html; charset=UTF-8': case 'application/xhtml+xml; charset=UTF-8': case 'text/plain; charset=UTF-8': @@ -250,260 +247,258 @@ class MetaWindow { `meta-${ui.name}--text`, `meta-${ui.name}--html`, `meta-${ui.name}--pajax`, - ]); - break; + ]) + break default: - console.warn(`${ui.name}: Unknown response content-type!`); - break; + console.warn(`${ui.name}: Unknown response content-type!`) + break } - W.dispatchEvent(new Event(`{ui.name}.loaded`)); + W.dispatchEvent(new Event('{ui.name}.loaded')) }) .catch((error) => { - console.error(error); + console.error(error) - let msg = ''; + let msg = '' if (error.response) { switch (error.response.status) { case 404: - msg = 'Not Found.'; - break; + msg = 'Not Found.' + break case 500: - msg = 'Server issue, please try again latter.'; - break; + msg = 'Server issue, please try again latter.' + break default: - msg = 'Something went wrong.'; - break; + msg = 'Something went wrong.' + break } } else if (error.request) { - msg = 'No response received'; + msg = 'No response received' } else { - console.warn('Error', error.message); + console.warn('Error', error.message) } ui.setState({ error: msg, - }); + }) - W.dispatchEvent(new Event(`{ui.name}.error`)); + W.dispatchEvent(new Event('{ui.name}.error')) }) .then(() => { ui.setState({ loading: false, - }); + }) setTimeout(() => { - ui.state.current.classList.remove('loading'); - }, 1000); - }); - }; + ui.state.current.classList.remove('loading') + }, 1000) + }) + } _currIndex = () => { - const ui = this; - const el = ui.state.current; - const gallery = el.getAttribute('data-gallery'); + const ui = this + const el = ui.state.current + const gallery = el.getAttribute('data-gallery') - return ui.state.collections[gallery].indexOf(el); - }; + return ui.state.collections[gallery].indexOf(el) + } embed = (link) => { - const ui = this; - console.log(`${ui.name}: embed`); + const ui = this + console.log(`${ui.name}: embed`) - ui.reset(); + ui.reset() ui.setState({ embed: link, loading: false, type: [`meta-${ui.name}--embed`, `meta-${ui.name}--video`], - }); + }) - ui.show(); - }; + ui.show() + } setCaption = (title) => { - const ui = this; - console.log(`${ui.name}: setCaption`); + const ui = this + console.log(`${ui.name}: setCaption`) - ui.state.caption = title; - }; + ui.state.caption = title + } addExtraClass = (cls) => { - const ui = this; + const ui = this if (!cls || !cls.length) { - return; + return } - console.log(`${ui.name}: addExtraClass(${cls})`); - ui.state.extraClass = cls; - }; + console.log(`${ui.name}: addExtraClass(${cls})`) + ui.state.extraClass = cls + } getCaption = () => { - const ui = this; - return ui.state.caption; - }; + const ui = this + return ui.state.caption + } - /*_abToString = (arrayBuffer) => { + /* _abToString = (arrayBuffer) => { return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)); - };*/ + }; */ _imageEncode = (buffer) => { - let binary = ''; - const bytes = [].slice.call(new Uint8Array(buffer)); - bytes.forEach((b) => binary += String.fromCharCode(b)); - return window.btoa(binary); - }; + let binary = '' + const bytes = [].slice.call(new Uint8Array(buffer)) + bytes.forEach((b) => { + binary += String.fromCharCode(b) + }) + return window.btoa(binary) + } setContent = (html, type) => { - const ui = this; - console.log(`${ui.name}: setContent`); + const ui = this + console.log(`${ui.name}: setContent`) - let typeArr = type - ? type - : [`meta-${ui.name}--html`, `meta-${ui.name}--text`]; + let typeArr = type || [`meta-${ui.name}--html`, `meta-${ui.name}--text`] if (!Array.isArray(typeArr)) { - typeArr = type.split(' '); + typeArr = type.split(' ') } ui.setState({ content: html, type: typeArr, - }); - }; - - getHtml = () => { - const ui = this; - - if (ui.state.embed) { - const youtubeEmbed = require('youtube-embed'); - const embedLink = youtubeEmbed(ui.state.embed); - ui.state.content = ``; - } - - return ui.state.content; - }; - - setState(state) { - const ui = this; - ui.state = Object.assign({}, ui.state, state); - ui.render(); + }) } - render() { - const ui = this; - const name = ui.name; + getHtml = () => { + const ui = this - const navs = null; - const el = ui.state.current; + if (ui.state.embed) { + const youtubeEmbed = require('youtube-embed') + const embedLink = youtubeEmbed(ui.state.embed) + ui.state.content = `` + } - 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); + return ui.state.content + } - const metaOverlay = document.createElement('div'); - metaOverlay.classList.add(`meta-${name}-overlay`); + setState (state) { + 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) { - metaOverlay.classList.add(`meta-${name}-overlay--open`); + metaOverlay.classList.add(`meta-${name}-overlay--open`) } if (ui.state.loading) { - metaOverlay.classList.add(`meta-${name}-overlay--loading`); + metaOverlay.classList.add(`meta-${name}-overlay--loading`) } 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'); - metaContent.classList.add('meta-content'); - metaOverlay.append(metaContent); + const metaContent = document.createElement('div') + metaContent.classList.add('meta-content') + metaOverlay.append(metaContent) - const btnClose = document.createElement('button'); - btnClose.classList.add('meta-nav', 'meta-close', 'a'); + const btnClose = document.createElement('button') + btnClose.classList.add('meta-nav', 'meta-close', 'a') btnClose.innerHTML = '' + - ' '; + ' ' btnClose.addEventListener('click', (e) => { - e.preventDefault(); - ui.hide(); - }); - metaContent.append(btnClose); + e.preventDefault() + ui.hide() + }) + metaContent.append(btnClose) if (el) { - const gallery = el.getAttribute('data-gallery'); + const gallery = el.getAttribute('data-gallery') if (gallery && ui.state.collections[gallery].length > 1) { - const navs = document.createElement('nav'); - navs.classList.add('meta-navs'); + const navs = document.createElement('nav') + navs.classList.add('meta-navs') - const prevBtn = document.createElement('button'); + const prevBtn = document.createElement('button') prevBtn.classList.add( 'meta-nav', 'meta-nav-arrow', 'meta-nav-arrow__prev', 'a' - ); + ) prevBtn.innerHTML = '' + - ' '; + ' ' prevBtn.addEventListener('click', (e) => { - e.preventDefault(); - ui.prev(); - }); - navs.append(prevBtn); + e.preventDefault() + ui.prev() + }) + navs.append(prevBtn) - const nextBtn = document.createElement('button'); + const nextBtn = document.createElement('button') nextBtn.classList.add( 'meta-nav', 'meta-nav-arrow', 'meta-nav-arrow__next', 'a' - ); + ) nextBtn.innerHTML = '' + - ' '; + ' ' nextBtn.addEventListener('click', (e) => { - e.preventDefault(); - ui.next(); - }); - navs.append(nextBtn); + e.preventDefault() + ui.next() + }) + navs.append(nextBtn) - metaContent.append(navs); + metaContent.append(navs) } } - const content = document.createElement('section'); - content.classList.add('meta-wrap', 'typography'); + const content = document.createElement('section') + content.classList.add('meta-wrap', 'typography') if (ui.state.extraClass) { - content.classList.add(ui.state.extraClass); + content.classList.add(ui.state.extraClass) } - content.innerHTML = ui.getHtml(); - metaContent.append(content); + content.innerHTML = ui.getHtml() + metaContent.append(content) if (ui.state.error) { - const error = document.createElement('div'); - error.classList.add('meta-error'); - error.innerHTML = ui.state.error; - metaContent.append(error); + const error = document.createElement('div') + error.classList.add('meta-error') + error.innerHTML = ui.state.error + metaContent.append(error) } else if (ui.state.caption) { - const caption = document.createElement('div'); - caption.classList.add('meta-caption'); - caption.innerHTML = ui.getCaption(); - metaContent.append(caption); + const caption = document.createElement('div') + caption.classList.add('meta-caption') + caption.innerHTML = ui.getCaption() + metaContent.append(caption) } // update fontawesome dome if (typeof window.FontAwesome !== 'undefined') { - window.FontAwesome.dom.i2svg(); + window.FontAwesome.dom.i2svg() } - return ui; + return ui } } -export default MetaWindow; +export default MetaWindow