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

FIX: Fontawesome SVG icons

Browse Source
This commit is contained in:
Tony Air 2021-12-17 04:43:17 +02:00
parent cc506b1eae
commit ec55b0c8a7
1 changed files with 86 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/js/window.js
View File

@ -2,15 +2,15 @@
* Lightbox window * Lightbox window
*/ */
import Events from "./_events"; import Events from './_events';
const W = window; const W = window;
const axios = require("axios"); const axios = require('axios');
class MetaWindow { class MetaWindow {
state = { state = {
content: "", content: '',
type: ["empty"], type: ['empty'],
shown: false, shown: false,
loading: false, loading: false,
error: false, error: false,
@ -28,7 +28,7 @@ class MetaWindow {
document document
.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]') .querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]')
.forEach((el) => { .forEach((el) => {
const gallery = el.getAttribute("data-gallery"); const gallery = el.getAttribute('data-gallery');
if (gallery) { if (gallery) {
ui.state.collections[gallery] = []; ui.state.collections[gallery] = [];
document document
@ -41,13 +41,13 @@ class MetaWindow {
} }
// 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;
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');
ui.state.current = el; ui.state.current = el;
if (embed) { if (embed) {
@ -56,7 +56,7 @@ class MetaWindow {
ui.load(link); ui.load(link);
} }
const title = el.getAttribute("data-title"); const title = el.getAttribute('data-title');
if (title) { if (title) {
ui.setCaption(title); ui.setCaption(title);
} }
@ -78,10 +78,10 @@ class MetaWindow {
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;
} }
@ -112,7 +112,7 @@ class MetaWindow {
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) {
@ -130,7 +130,7 @@ class MetaWindow {
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) {
@ -149,8 +149,8 @@ class MetaWindow {
const ui = this; const ui = this;
ui.setState({ ui.setState({
content: "", content: '',
type: ["empty"], type: ['empty'],
shown: false, shown: false,
loading: false, loading: false,
error: false, error: false,
@ -173,52 +173,52 @@ class MetaWindow {
axios axios
.get(link, { .get(link, {
responseType: "arraybuffer", responseType: 'arraybuffer',
}) })
.then((resp) => { .then((resp) => {
// handle success // handle success
console.log( console.log(
`${ui.name}: response content-type: ${resp.headers["content-type"]}` `${ui.name}: response content-type: ${resp.headers['content-type']}`
); );
const json = false; const json = false;
switch (resp.headers["content-type"]) { switch (resp.headers['content-type']) {
case "image/jpeg": case 'image/jpeg':
case "image/png": case 'image/png':
case "image/svg+xml": case 'image/svg+xml':
case "image/bmp": case 'image/bmp':
case "image/gif": case 'image/gif':
case "image/tiff": case 'image/tiff':
case "image/webp": case 'image/webp':
// irregular types: // 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));
ui.setContent( ui.setContent(
`<img src="data:${ `<img src="data:${
resp.headers["content-type"] resp.headers['content-type']
};base64,${ui._imageEncode(resp.data)}" />`, };base64,${ui._imageEncode(resp.data)}" />`,
`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: // 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 "text/html": case 'text/html':
case "application/xhtml+xml": case 'application/xhtml+xml':
case "text/plain": case 'text/plain':
// irregular types: // 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':
ui.setContent(ui._abToString(resp.data), [ ui.setContent(ui._abToString(resp.data), [
`meta-${ui.name}--text`, `meta-${ui.name}--text`,
`meta-${ui.name}--html`, `meta-${ui.name}--html`,
@ -235,24 +235,24 @@ class MetaWindow {
.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({
@ -271,7 +271,7 @@ class MetaWindow {
_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);
}; };
@ -314,7 +314,8 @@ class MetaWindow {
(p, c) => { (p, c) => {
return p + String.fromCharCode(c); return p + String.fromCharCode(c);
}, },
""
''
) )
); );
@ -329,7 +330,7 @@ class MetaWindow {
? type ? type
: [`meta-${ui.name}--html`, `meta-${ui.name}--text`]; : [`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({
@ -342,7 +343,7 @@ class MetaWindow {
const ui = this; const ui = this;
if (ui.state.embed) { if (ui.state.embed) {
const youtubeEmbed = require("youtube-embed"); const youtubeEmbed = require('youtube-embed');
const embedLink = youtubeEmbed(ui.state.embed); const embedLink = youtubeEmbed(ui.state.embed);
ui.state.content = `<iframe width="600" height="380" src="${embedLink}" frameborder="0"></iframe>`; ui.state.content = `<iframe width="600" height="380" src="${embedLink}" frameborder="0"></iframe>`;
} }
@ -363,73 +364,76 @@ class MetaWindow {
const navs = null; const navs = null;
const el = ui.state.current; const el = ui.state.current;
ui.state.target.innerHTML = ""; ui.state.target.innerHTML = '';
const meta = document.createElement("div"); const meta = document.createElement('div');
meta.classList.add(`meta-${name}`); meta.classList.add(`meta-${name}`);
meta.classList.add(...ui.state.type); meta.classList.add(...ui.state.type);
ui.state.target.append(meta); ui.state.target.append(meta);
const metaOverlay = document.createElement("div"); const metaOverlay = document.createElement('div');
metaOverlay.classList.add(`meta-${name}-overlay`); 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();
}); });
@ -439,23 +443,28 @@ class MetaWindow {
} }
} }
const content = document.createElement("section"); const content = document.createElement('section');
content.classList.add("meta-wrap", "typography"); content.classList.add('meta-wrap', 'typography');
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
if (typeof window.FontAwesome !== 'undefined') {
window.FontAwesome.dom.i2svg();
}
return ui; return ui;
} }
} }