meta-lightbox/src/js/window.js

510 lines
12 KiB
JavaScript
Raw Normal View History

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