mirror of
https://github.com/a2nt/meta-lightbox.git
synced 2024-10-22 17:05:53 +02:00
IMPR: Lightbox captions using data-title
This commit is contained in:
parent
848e3568cc
commit
ec898173bf
@ -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 ?
|
||||
<div className="meta-caption" dangerouslySetInnerHTML={ui.getCaption()}></div> :
|
||||
'';
|
||||
|
||||
return (
|
||||
<Swipe className={className} ui={ui} onSwipeMove={ui.onSwipeMove}>
|
||||
<div className={overlayClassName}>
|
||||
@ -432,6 +468,8 @@ class MetaWindow extends Component {
|
||||
</div>
|
||||
|
||||
{content}
|
||||
|
||||
{caption}
|
||||
</article>
|
||||
</div>
|
||||
</Swipe>
|
||||
|
||||
@ -11,54 +11,59 @@ import ReactDOM from 'react-dom';
|
||||
import MetaWindow from './_window.jsx';
|
||||
|
||||
const AppUI = ((W) => {
|
||||
const MetaLightbox = ReactDOM.render(
|
||||
<MetaWindow />,
|
||||
document.getElementById('MetaLightboxApp'),
|
||||
);
|
||||
const MetaLightbox = ReactDOM.render(
|
||||
<MetaWindow />,
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user