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: Lightbox captions using data-title

Browse Source
This commit is contained in:
Tony Air 2021-07-19 18:39:21 +02:00
parent 848e3568cc
commit ec898173bf
2 changed files with 144 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/js/_window.jsx
View File

@ -3,11 +3,15 @@
*/ */
import Events from './_events'; import Events from './_events';
import { Component } from 'react'; import {
Component
} from 'react';
import Swipe from 'react-easy-swipe'; import Swipe from 'react-easy-swipe';
import KeyboardJS from 'keyboardjs'; import KeyboardJS from 'keyboardjs';
import Embed, { defaultProviders } from 'react-tiny-oembed'; import Embed, {
defaultProviders
} from 'react-tiny-oembed';
const W = window; const W = window;
@ -15,58 +19,57 @@ const InstagramProvider = {
provider_name: 'Instagram', provider_name: 'Instagram',
provider_url: 'https://instagram.com', provider_url: 'https://instagram.com',
endpoints: [{ endpoints: [{
schemes: [ schemes: [
'http://instagram.com/*/p/*,', 'http://instagram.com/*/p/*,',
'http://www.instagram.com/*/p/*,', 'http://www.instagram.com/*/p/*,',
'https://instagram.com/*/p/*,', 'https://instagram.com/*/p/*,',
'https://www.instagram.com/*/p/*,', 'https://www.instagram.com/*/p/*,',
'http://instagram.com/p/*', 'http://instagram.com/p/*',
'http://instagr.am/p/*', 'http://instagr.am/p/*',
'http://www.instagram.com/p/*', 'http://www.instagram.com/p/*',
'http://www.instagr.am/p/*', 'http://www.instagr.am/p/*',
'https://instagram.com/p/*', 'https://instagram.com/p/*',
'https://instagr.am/p/*', 'https://instagr.am/p/*',
'https://www.instagram.com/p/*', 'https://www.instagram.com/p/*',
'https://www.instagr.am/p/*', 'https://www.instagr.am/p/*',
'http://instagram.com/tv/*', 'http://instagram.com/tv/*',
'http://instagr.am/tv/*', 'http://instagr.am/tv/*',
'http://www.instagram.com/tv/*', 'http://www.instagram.com/tv/*',
'http://www.instagr.am/tv/*', 'http://www.instagr.am/tv/*',
'https://instagram.com/tv/*', 'https://instagram.com/tv/*',
'https://instagr.am/tv/*', 'https://instagr.am/tv/*',
'https://www.instagram.com/tv/*', 'https://www.instagram.com/tv/*',
'https://www.instagr.am/tv/*', 'https://www.instagr.am/tv/*',
], ],
url: 'https://graph.facebook.com/v9.0/instagram_oembed', url: 'https://graph.facebook.com/v9.0/instagram_oembed',
formats: ['json'], formats: ['json'],
}, },
{ {
schemes: [ schemes: [
'http://instagram.com/*/p/*,', 'http://instagram.com/*/p/*,',
'http://www.instagram.com/*/p/*,', 'http://www.instagram.com/*/p/*,',
'https://instagram.com/*/p/*,', 'https://instagram.com/*/p/*,',
'https://www.instagram.com/*/p/*,', 'https://www.instagram.com/*/p/*,',
'http://instagram.com/p/*', 'http://instagram.com/p/*',
'http://instagr.am/p/*', 'http://instagr.am/p/*',
'http://www.instagram.com/p/*', 'http://www.instagram.com/p/*',
'http://www.instagr.am/p/*', 'http://www.instagr.am/p/*',
'https://instagram.com/p/*', 'https://instagram.com/p/*',
'https://instagr.am/p/*', 'https://instagr.am/p/*',
'https://www.instagram.com/p/*', 'https://www.instagram.com/p/*',
'https://www.instagr.am/p/*', 'https://www.instagr.am/p/*',
'http://instagram.com/tv/*', 'http://instagram.com/tv/*',
'http://instagr.am/tv/*', 'http://instagr.am/tv/*',
'http://www.instagram.com/tv/*', 'http://www.instagram.com/tv/*',
'http://www.instagr.am/tv/*', 'http://www.instagr.am/tv/*',
'https://instagram.com/tv/*', 'https://instagram.com/tv/*',
'https://instagr.am/tv/*', 'https://instagr.am/tv/*',
'https://www.instagram.com/tv/*', 'https://www.instagram.com/tv/*',
'https://www.instagr.am/tv/*', 'https://www.instagr.am/tv/*',
], ],
url: 'https://api.instagram.com/oembed', url: 'https://api.instagram.com/oembed',
formats: ['json'], formats: ['json'],
}, }, ],
],
}; };
const axios = require('axios'); const axios = require('axios');
@ -164,12 +167,28 @@ class MetaWindow extends Component {
ui.show(); 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) => { load = (link) => {
const ui = this; const ui = this;
const axios = ui.axios; const axios = ui.axios;
ui.reset(); ui.reset();
ui.setState({ loading: true }); ui.setState({
loading: true
});
ui.show(); ui.show();
axios axios
@ -252,12 +271,16 @@ class MetaWindow extends Component {
console.warn('Error', error.message); console.warn('Error', error.message);
} }
ui.setState({ error: msg }); ui.setState({
error: msg
});
W.dispatchEvent(new Event(`{ui.name}.error`)); W.dispatchEvent(new Event(`{ui.name}.error`));
}) })
.then(() => { .then(() => {
ui.setState({ loading: false }); ui.setState({
loading: false
});
}); });
}; };
@ -289,14 +312,19 @@ class MetaWindow extends Component {
typeArr = type.split(' '); typeArr = type.split(' ');
} }
ui.setState({ content: html, type: typeArr }); ui.setState({
content: html,
type: typeArr
});
}; };
show = () => { show = () => {
const ui = this; const ui = this;
console.log(`${ui.name}: show`); console.log(`${ui.name}: show`);
ui.setState({ shown: true }); ui.setState({
shown: true
});
W.dispatchEvent(new Event(`{ui.name}.show`)); W.dispatchEvent(new Event(`{ui.name}.show`));
}; };
@ -312,13 +340,17 @@ class MetaWindow extends Component {
KeyboardJS.setContext('index'); KeyboardJS.setContext('index');
ui.setState({ shown: false }); ui.setState({
shown: false
});
W.dispatchEvent(new Event(`{ui.name}.hide`)); W.dispatchEvent(new Event(`{ui.name}.hide`));
}; };
getHtml = () => { getHtml = () => {
const ui = this; 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` : '' ui.state.error ? ` meta-${name}-overlay__error` : ''
}`; }`;
const caption = ui.state.caption ?
<div className="meta-caption" dangerouslySetInnerHTML={ui.getCaption()}></div> :
'';
return ( return (
<Swipe className={className} ui={ui} onSwipeMove={ui.onSwipeMove}> <Swipe className={className} ui={ui} onSwipeMove={ui.onSwipeMove}>
<div className={overlayClassName}> <div className={overlayClassName}>
@ -432,6 +468,8 @@ class MetaWindow extends Component {
</div> </div>
{content} {content}
{caption}
</article> </article>
</div> </div>
</Swipe> </Swipe>

85
src/js/app.js
View File

@ -11,54 +11,59 @@ import ReactDOM from 'react-dom';
import MetaWindow from './_window.jsx'; import MetaWindow from './_window.jsx';
const AppUI = ((W) => { const AppUI = ((W) => {
const MetaLightbox = ReactDOM.render( const MetaLightbox = ReactDOM.render(
<MetaWindow />, <MetaWindow />,
document.getElementById('MetaLightboxApp'), document.getElementById('MetaLightboxApp'),
); );
const initMetaWindowLinks = () => { const initMetaWindowLinks = () => {
const ui = MetaLightbox; const ui = MetaLightbox;
console.log(`MetaWindow: [links] init`); console.log(`MetaWindow: [links] init`);
document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => { document.querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]').forEach((el) => {
// collections // collections
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
.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);
}); });
} }
// 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 = const link =
el.getAttribute('href') || el.getAttribute('data-href'); 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) {
ui.embed(link); ui.embed(link);
} else { } else {
ui.load(link); ui.load(link);
} }
});
});
};
W.addEventListener(`${Events.LOADED}`, initMetaWindowLinks); const title = el.getAttribute('data-title');
W.addEventListener(`${Events.AJAX}`, initMetaWindowLinks); if (title) {
W.addEventListener(`MetaWindow.initLinks`, initMetaWindowLinks); ui.setCaption(title);
}
});
});
};
return MetaLightbox; W.addEventListener(`${Events.LOADED}`, initMetaWindowLinks);
W.addEventListener(`${Events.AJAX}`, initMetaWindowLinks);
W.addEventListener(`MetaWindow.initLinks`, initMetaWindowLinks);
return MetaLightbox;
})(window); })(window);
export default AppUI; export default AppUI;