From ec898173bfd15b002ae5acd8b657f3cf8c1b0877 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 19 Jul 2021 18:39:21 +0200 Subject: [PATCH] IMPR: Lightbox captions using data-title --- src/js/_window.jsx | 160 ++++++++++++++++++++++++++++----------------- src/js/app.js | 85 ++++++++++++------------ 2 files changed, 144 insertions(+), 101 deletions(-) diff --git a/src/js/_window.jsx b/src/js/_window.jsx index b55243a..385ecde 100755 --- a/src/js/_window.jsx +++ b/src/js/_window.jsx @@ -3,11 +3,15 @@ */ import Events from './_events'; -import { Component } from 'react'; +import { + Component +} from 'react'; import Swipe from 'react-easy-swipe'; import KeyboardJS from 'keyboardjs'; -import Embed, { defaultProviders } from 'react-tiny-oembed'; +import Embed, { + defaultProviders +} from 'react-tiny-oembed'; const W = window; @@ -15,58 +19,57 @@ const InstagramProvider = { provider_name: 'Instagram', provider_url: 'https://instagram.com', endpoints: [{ - schemes: [ - 'http://instagram.com/*/p/*,', - 'http://www.instagram.com/*/p/*,', - 'https://instagram.com/*/p/*,', - 'https://www.instagram.com/*/p/*,', - 'http://instagram.com/p/*', - 'http://instagr.am/p/*', - 'http://www.instagram.com/p/*', - 'http://www.instagr.am/p/*', - 'https://instagram.com/p/*', - 'https://instagr.am/p/*', - 'https://www.instagram.com/p/*', - 'https://www.instagr.am/p/*', - 'http://instagram.com/tv/*', - 'http://instagr.am/tv/*', - 'http://www.instagram.com/tv/*', - 'http://www.instagr.am/tv/*', - 'https://instagram.com/tv/*', - 'https://instagr.am/tv/*', - 'https://www.instagram.com/tv/*', - 'https://www.instagr.am/tv/*', - ], - url: 'https://graph.facebook.com/v9.0/instagram_oembed', - formats: ['json'], - }, - { - schemes: [ - 'http://instagram.com/*/p/*,', - 'http://www.instagram.com/*/p/*,', - 'https://instagram.com/*/p/*,', - 'https://www.instagram.com/*/p/*,', - 'http://instagram.com/p/*', - 'http://instagr.am/p/*', - 'http://www.instagram.com/p/*', - 'http://www.instagr.am/p/*', - 'https://instagram.com/p/*', - 'https://instagr.am/p/*', - 'https://www.instagram.com/p/*', - 'https://www.instagr.am/p/*', - 'http://instagram.com/tv/*', - 'http://instagr.am/tv/*', - 'http://www.instagram.com/tv/*', - 'http://www.instagr.am/tv/*', - 'https://instagram.com/tv/*', - 'https://instagr.am/tv/*', - 'https://www.instagram.com/tv/*', - 'https://www.instagr.am/tv/*', - ], - url: 'https://api.instagram.com/oembed', - formats: ['json'], - }, - ], + schemes: [ + 'http://instagram.com/*/p/*,', + 'http://www.instagram.com/*/p/*,', + 'https://instagram.com/*/p/*,', + 'https://www.instagram.com/*/p/*,', + 'http://instagram.com/p/*', + 'http://instagr.am/p/*', + 'http://www.instagram.com/p/*', + 'http://www.instagr.am/p/*', + 'https://instagram.com/p/*', + 'https://instagr.am/p/*', + 'https://www.instagram.com/p/*', + 'https://www.instagr.am/p/*', + 'http://instagram.com/tv/*', + 'http://instagr.am/tv/*', + 'http://www.instagram.com/tv/*', + 'http://www.instagr.am/tv/*', + 'https://instagram.com/tv/*', + 'https://instagr.am/tv/*', + 'https://www.instagram.com/tv/*', + 'https://www.instagr.am/tv/*', + ], + url: 'https://graph.facebook.com/v9.0/instagram_oembed', + formats: ['json'], + }, + { + schemes: [ + 'http://instagram.com/*/p/*,', + 'http://www.instagram.com/*/p/*,', + 'https://instagram.com/*/p/*,', + 'https://www.instagram.com/*/p/*,', + 'http://instagram.com/p/*', + 'http://instagr.am/p/*', + 'http://www.instagram.com/p/*', + 'http://www.instagr.am/p/*', + 'https://instagram.com/p/*', + 'https://instagr.am/p/*', + 'https://www.instagram.com/p/*', + 'https://www.instagr.am/p/*', + 'http://instagram.com/tv/*', + 'http://instagr.am/tv/*', + 'http://www.instagram.com/tv/*', + 'http://www.instagr.am/tv/*', + 'https://instagram.com/tv/*', + 'https://instagr.am/tv/*', + 'https://www.instagram.com/tv/*', + 'https://www.instagr.am/tv/*', + ], + url: 'https://api.instagram.com/oembed', + formats: ['json'], + }, ], }; const axios = require('axios'); @@ -164,12 +167,28 @@ class MetaWindow extends Component { ui.show(); }; + setCaption = (title) => { + const ui = this; + console.log(`${ui.name}: setCaption`); + + ui.state.caption = title; + }; + + getCaption = () => { + const ui = this; + return { + __html: ui.state.caption + }; + } + load = (link) => { const ui = this; const axios = ui.axios; ui.reset(); - ui.setState({ loading: true }); + ui.setState({ + loading: true + }); ui.show(); axios @@ -252,12 +271,16 @@ class MetaWindow extends Component { console.warn('Error', error.message); } - ui.setState({ error: msg }); + ui.setState({ + error: msg + }); W.dispatchEvent(new Event(`{ui.name}.error`)); }) .then(() => { - ui.setState({ loading: false }); + ui.setState({ + loading: false + }); }); }; @@ -289,14 +312,19 @@ class MetaWindow extends Component { typeArr = type.split(' '); } - ui.setState({ content: html, type: typeArr }); + ui.setState({ + content: html, + type: typeArr + }); }; show = () => { const ui = this; console.log(`${ui.name}: show`); - ui.setState({ shown: true }); + ui.setState({ + shown: true + }); W.dispatchEvent(new Event(`{ui.name}.show`)); }; @@ -312,13 +340,17 @@ class MetaWindow extends Component { KeyboardJS.setContext('index'); - ui.setState({ shown: false }); + ui.setState({ + shown: false + }); W.dispatchEvent(new Event(`{ui.name}.hide`)); }; getHtml = () => { const ui = this; - return { __html: ui.state.content }; + return { + __html: ui.state.content + }; }; @@ -413,6 +445,10 @@ class MetaWindow extends Component { ui.state.error ? ` meta-${name}-overlay__error` : '' }`; + const caption = ui.state.caption ? +
: + ''; + return (
@@ -432,6 +468,8 @@ class MetaWindow extends Component {
{content} + + {caption} diff --git a/src/js/app.js b/src/js/app.js index 9c0cceb..cbad469 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -11,54 +11,59 @@ import ReactDOM from 'react-dom'; import MetaWindow from './_window.jsx'; const AppUI = ((W) => { - const MetaLightbox = ReactDOM.render( - , - document.getElementById('MetaLightboxApp'), - ); + const MetaLightbox = ReactDOM.render( + , + document.getElementById('MetaLightboxApp'), + ); - const initMetaWindowLinks = () => { - const ui = MetaLightbox; - console.log(`MetaWindow: [links] init`); + const initMetaWindowLinks = () => { + const ui = MetaLightbox; + console.log(`MetaWindow: [links] init`); - document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => { - // collections - const gallery = el.getAttribute('data-gallery'); - if (gallery) { - ui.state.collections[gallery] = []; - document - .querySelectorAll( - `[data-toggle="lightbox"][data-gallery="${gallery}"]`, - ) - .forEach((el) => { - ui.state.collections[gallery].push(el); - }); - } + document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => { + // collections + const gallery = el.getAttribute('data-gallery'); + if (gallery) { + ui.state.collections[gallery] = []; + document + .querySelectorAll( + `[data-toggle="lightbox"][data-gallery="${gallery}"]`, + ) + .forEach((el) => { + ui.state.collections[gallery].push(el); + }); + } - // click handler - el.addEventListener('click', (e) => { - e.preventDefault(); - console.log(`MetaWindow: [link] click`); + // click handler + el.addEventListener('click', (e) => { + e.preventDefault(); + console.log(`MetaWindow: [link] click`); - const el = e.currentTarget; - const link = + const el = e.currentTarget; + const link = el.getAttribute('href') || el.getAttribute('data-href'); - const embed = el.getAttribute('data-embed'); - ui.state.current = el; + const embed = el.getAttribute('data-embed'); + ui.state.current = el; - if (embed) { - ui.embed(link); - } else { - ui.load(link); - } - }); - }); - }; + if (embed) { + ui.embed(link); + } else { + ui.load(link); + } - W.addEventListener(`${Events.LOADED}`, initMetaWindowLinks); - W.addEventListener(`${Events.AJAX}`, initMetaWindowLinks); - W.addEventListener(`MetaWindow.initLinks`, initMetaWindowLinks); + const title = el.getAttribute('data-title'); + if (title) { + ui.setCaption(title); + } + }); + }); + }; - return MetaLightbox; + W.addEventListener(`${Events.LOADED}`, initMetaWindowLinks); + W.addEventListener(`${Events.AJAX}`, initMetaWindowLinks); + W.addEventListener(`MetaWindow.initLinks`, initMetaWindowLinks); + + return MetaLightbox; })(window); export default AppUI;