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: merge issue

Browse Source
This commit is contained in:
Tony Air 2020-09-02 05:50:58 +07:00
parent 87e6e7d64a
commit 61ca92cc66
3 changed files with 115 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
src/js/meta-lightbox.js
View File

@ -19,6 +19,8 @@ const MetaLightboxUI = (($) => {
const $Body = $('body'); const $Body = $('body');
const NAME = 'MetaLightboxUI'; const NAME = 'MetaLightboxUI';
const NETWORK_ERROR =
'<div class="meta-lightbox-error"><div class="alert alert-error alert-danger">Connection failure.</div></div>';
class MetaLightboxUI { class MetaLightboxUI {
static init() { static init() {
@ -47,7 +49,7 @@ const MetaLightboxUI = (($) => {
static is_hdpi() { static is_hdpi() {
console.log(`${NAME}: isHidpi`); console.log(`${NAME}: isHidpi`);
const mediaQuery = const mediaQuery =
'(-webkit-min-device-pixel-ratio: 1.5),\ '(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\ (min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\ (-o-min-device-pixel-ratio: 3/2),\
(min-resolution: 1.5dppx)'; (min-resolution: 1.5dppx)';
@ -59,7 +61,7 @@ const MetaLightboxUI = (($) => {
console.log(`${NAME}: show`); console.log(`${NAME}: show`);
const ui = this; const ui = this;
const $lightbox = this.constructLightbox(); const $lightbox = ui.constructLightbox();
if (!$lightbox) return; if (!$lightbox) return;
const $content = ui.$content; const $content = ui.$content;
@ -73,11 +75,14 @@ const MetaLightboxUI = (($) => {
// Nav // Nav
if ($link.data('lightbox-gallery')) { if ($link.data('lightbox-gallery')) {
const $galleryItems = $( const $galleryItems = $(
`[data-lightbox-gallery="${$link.data( `[data-lightbox-gallery="${$link.data('lightbox-gallery')}"]`,
'lightbox-gallery',
)}"]`,
); );
console.log(
`[data-lightbox-gallery="${$link.data('lightbox-gallery')}"]`,
);
console.log($galleryItems);
if ($galleryItems.length === 1) { if ($galleryItems.length === 1) {
$('.meta-lightbox-nav').hide(); $('.meta-lightbox-nav').hide();
} else { } else {
@ -91,9 +96,12 @@ const MetaLightboxUI = (($) => {
e.preventDefault(); e.preventDefault();
const index = $galleryItems.index($link); const index = $galleryItems.index($link);
let $currentLink = $galleryItems.eq(index - 1); let $currentLink = $galleryItems.eq(index - 1);
if (!$currentLink.length) if (!$currentLink.length) $currentLink = $galleryItems.last();
$currentLink = $galleryItems.last();
$this.process($content, $currentLink); //ui.hide();
setTimeout(() => {
ui.show($currentLink);
}, 10);
}); });
// Next // Next
@ -102,10 +110,13 @@ const MetaLightboxUI = (($) => {
.on('click', (e) => { .on('click', (e) => {
e.preventDefault(); e.preventDefault();
const index = $galleryItems.index($link); const index = $galleryItems.index($link);
$currentLink = $galleryItems.eq(index + 1); let $currentLink = $galleryItems.eq(index + 1);
if (!$currentLink.length) if (!$currentLink.length) $currentLink = $galleryItems.first();
$currentLink = $galleryItems.first();
$this.process($content, $currentLink); //ui.hide();
setTimeout(() => {
ui.show($currentLink);
}, 10);
}); });
} }
@ -120,7 +131,7 @@ const MetaLightboxUI = (($) => {
const overlay = $('<div>', { const overlay = $('<div>', {
class: class:
'meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade', 'meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade',
}); });
const wrap = $('<div>', { const wrap = $('<div>', {
class: 'meta-lightbox-wrap', class: 'meta-lightbox-wrap',
@ -184,55 +195,52 @@ const MetaLightboxUI = (($) => {
console.error(`${NAME}: href(attr/data) is missing`); console.error(`${NAME}: href(attr/data) is missing`);
} }
const $pageSpinner = $('#PageLoading'); const $pageSpinner = $('#PageLoading .loading-spinner');
const loadingContent = $pageSpinner.length const loadingContent = $pageSpinner.length ? $pageSpinner.clone() : '';
? $pageSpinner.html() ui.$content.append(loadingContent).addClass('meta-lightbox-loading');
: '';
ui.$content.html(loadingContent).addClass('meta-lightbox-loading');
// Image // Image
if (href.match(/\.(jpeg|jpg|gif|png|svg)$/i)) { if (href.match(/\.(jpeg|jpg|gif|png|svg)$/i)) {
const img = $('<img>', { $.ajax({
src: href, url: href,
}); success: () => {
const img = $('<img>', { src: href });
img.on('load', () => { const wrap = $('<div class="meta-lightbox-image"></div>');
const wrap = $('<div class="meta-lightbox-image"></div>'), const imgwrapper = $(
imgwrapper = $(
'<span class="meta-lightbox-zoom-wrapper"></span>', '<span class="meta-lightbox-zoom-wrapper"></span>',
); );
imgwrapper.append(img); imgwrapper.append(img);
wrap.append(imgwrapper); wrap.append(imgwrapper);
// Vertically center images // Vertically center images
wrap.css({
'line-height': `${$content.height()}px`,
height: `${$content.height()}px`, // For Firefox
});
$(window).resize(() => {
wrap.css({ wrap.css({
'line-height': `${$content.height()}px`, 'line-height': `${$content.height()}px`,
height: `${$content.height()}px`, // For Firefox height: `${$content.height()}px`, // For Firefox
}); });
});
if (typeof imgwrapper['zoom'] !== 'undefined') { $(window).resize(() => {
imgwrapper.zoom(); wrap.css({
} 'line-height': `${$content.height()}px`,
height: `${$content.height()}px`, // For Firefox
});
});
ui.$content.html(wrap); if (typeof imgwrapper['zoom'] !== 'undefined') {
ui.contentLoaded(); imgwrapper.zoom();
}); } else {
imgwrapper.addClass('no-zoom');
}
img.on('error', () => { ui.$content.html(wrap);
const wrap = $( ui.contentLoaded();
`<div class="meta-lightbox-error"><p class="alert alert-error alert-danger">${$this.options.errorMessage}</p></div>`, },
); error: (jqXHR, status) => {
const wrap = $(NETWORK_ERROR);
ui.$content.html(wrap); ui.$content.html(wrap);
ui.contentLoaded(); ui.contentLoaded();
},
}); });
// Set the title // Set the title
@ -319,7 +327,7 @@ const MetaLightboxUI = (($) => {
wrap.append($(href).clone().show()); wrap.append($(href).clone().show());
// Vertically center html // Vertically center html
if (wrap.outerHeight() < content.height()) { if (wrap.outerHeight() < ui.$content.height()) {
wrap.css({ wrap.css({
position: 'relative', position: 'relative',
top: '50%', top: '50%',
@ -327,7 +335,7 @@ const MetaLightboxUI = (($) => {
}); });
} }
$(window).resize(() => { $(window).resize(() => {
if (wrap.outerHeight() < content.height()) { if (wrap.outerHeight() < ui.$content.height()) {
wrap.css({ wrap.css({
position: 'relative', position: 'relative',
top: '50%', top: '50%',
@ -339,9 +347,7 @@ const MetaLightboxUI = (($) => {
ui.$content.html(wrap); ui.$content.html(wrap);
ui.contentLoaded(); ui.contentLoaded();
} else { } else {
wrap = $( wrap = $(NETWORK_ERROR);
`<div class="meta-lightbox-error"><p>${$this.options.errorMessage}</p></div>`,
);
ui.$content.html(wrap); ui.$content.html(wrap);
ui.contentLoaded(); ui.contentLoaded();
} }
@ -355,6 +361,7 @@ const MetaLightboxUI = (($) => {
} }
// AJAX/iFrame (default) // AJAX/iFrame (default)
else { else {
console.log(ui);
$.ajax({ $.ajax({
sync: false, sync: false,
async: true, async: true,
@ -372,24 +379,16 @@ const MetaLightboxUI = (($) => {
window.location.href = url; window.location.href = url;
}, },
}, },
error: function (jqXHR) { error: function (jqXHR, status) {
console.log(`AJAX request failure.${jqXHR.statusText}`); console.log(`AJAX request failure.${jqXHR.statusText}`);
var wrap = $( var wrap = $(NETWORK_ERROR);
`<div class="meta-lightbox-error"><p>${$this.options.errorMessage}</p></div>`,
);
ui.$content.html(wrap); ui.$content.html(wrap);
ui.contentLoaded(); ui.contentLoaded();
// google analytics // google analytics
if (typeof ga === 'function') { if (typeof ga === 'function') {
ga( ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText);
'send',
'event',
'error',
'AJAX ERROR',
jqXHR.statusText,
);
} }
}, },
success: function (data, status, jqXHR) { success: function (data, status, jqXHR) {
@ -399,18 +398,12 @@ const MetaLightboxUI = (($) => {
// Replace regions // Replace regions
if ( if (
typeof dataJson['regions'] === 'object' && typeof dataJson['regions'] === 'object' &&
typeof dataJson['regions']['LayoutAjax'] !== typeof dataJson['regions']['LayoutAjax'] !== 'undefinded'
'undefinded'
) { ) {
var wrap = $( var wrap = $('<div class="meta-lightbox-ajax" />');
'<div class="meta-lightbox-ajax" />', wrap.html(dataJson['regions']['LayoutAjax']);
); ui.$content.html(wrap);
wrap.html( ui.contentLoaded();
dataJson['regions']['LayoutAjax'],
);
content
.html(wrap)
.removeClass('meta-lightbox-loading');
} }
// trigger events // trigger events
@ -425,42 +418,30 @@ const MetaLightboxUI = (($) => {
if ( if (
title && title &&
title.length && title.length &&
link && link &&
link.length && link.length &&
link !== window.location.href && link !== window.location.href &&
link.substring(0, link.indexOf('#')) !== link.substring(0, link.indexOf('#')) !==
window.location.href.replace( window.location.href.replace($('base').attr('href'), '/')
$('base').attr('href'),
'/',
)
) { ) {
$('.meta-lightbox-ajax').data( $('.meta-lightbox-ajax').data('curr-title', document.title);
'curr-title',
document.title,
);
$('.meta-lightbox-ajax').data( $('.meta-lightbox-ajax').data(
'curr-link', 'curr-link',
window.location.href, window.location.href,
); );
if ( if (
typeof window.localStorage !== typeof window.localStorage !== 'undefined' &&
'undefined' && link !== '/'
link !== '/'
) { ) {
window.localStorage.setItem( window.localStorage.setItem('current-page', link);
'current-page',
link,
);
} }
if ( if (
document.URL !== link && document.URL !== link &&
document.URL !== document.URL !== $('base').attr('href') + link &&
$('base').attr('href') + link && document.URL !== `${$('base').attr('href')}/${link}`
document.URL !==
`${$('base').attr('href')}/${link}`
) { ) {
window.history.pushState( window.history.pushState(
{ {
@ -473,22 +454,12 @@ const MetaLightboxUI = (($) => {
); );
} }
// update redirect urls
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
$('a').each(function () {
var $this = $(this);
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
});*/
$('.meta-lightbox-title-wrap').html(''); $('.meta-lightbox-title-wrap').html('');
// google analytics // google analytics
if (typeof ga === 'function') { if (typeof ga === 'function') {
ga('set', { ga('set', {
page: link.replace( page: link.replace($('base').attr('href'), ''),
$('base').attr('href'),
'',
),
title, title,
}); });
ga('send', 'pageview'); ga('send', 'pageview');
@ -498,13 +469,12 @@ const MetaLightboxUI = (($) => {
} catch (e) { } catch (e) {
var wrap = $('<div class="meta-lightbox-ajax" />'); var wrap = $('<div class="meta-lightbox-ajax" />');
wrap.append(data); wrap.append(data);
content ui.$content.html(wrap);
.html(wrap) ui.contentLoaded();
.removeClass('meta-lightbox-loading');
} }
// Vertically center html // Vertically center html
if (wrap.outerHeight() < content.height()) { /*if (wrap.outerHeight() < ui.$content.height()) {
wrap.css({ wrap.css({
position: 'relative', position: 'relative',
top: '50%', top: '50%',
@ -512,18 +482,16 @@ const MetaLightboxUI = (($) => {
}); });
} }
$(window).resize(() => { $(window).resize(() => {
if (wrap.outerHeight() < content.height()) { if (wrap.outerHeight() < ui.$content.height()) {
wrap.css({ wrap.css({
position: 'relative', position: 'relative',
top: '50%', top: '50%',
'margin-top': `${-( 'margin-top': `${-(wrap.outerHeight() / 2)}px`,
wrap.outerHeight() / 2
)}px`,
}); });
} }
}); });*/
setTimeout(() => { /*setTimeout(() => {
$(window).resize(); $(window).resize();
if (typeof window.imagesLoaded === 'function') { if (typeof window.imagesLoaded === 'function') {
@ -531,7 +499,7 @@ const MetaLightboxUI = (($) => {
$(window).resize(); $(window).resize();
}); });
} }
}, 500); }, 500);*/
ui.contentLoaded(); ui.contentLoaded();
}, },
@ -560,17 +528,14 @@ const MetaLightboxUI = (($) => {
var title = $('.meta-lightbox-ajax').data('curr-title'), var title = $('.meta-lightbox-ajax').data('curr-title'),
link = $('.meta-lightbox-ajax').data('curr-link'); link = $('.meta-lightbox-ajax').data('curr-link');
if (title && link) { if (title && link) {
if ( if (typeof window.localStorage !== 'undefined' && link !== '/') {
typeof window.localStorage !== 'undefined' &&
link !== '/'
) {
window.localStorage.setItem('current-page', link); window.localStorage.setItem('current-page', link);
} }
if ( if (
document.URL !== link && document.URL !== link &&
document.URL !== $('base').attr('href') + link && document.URL !== $('base').attr('href') + link &&
document.URL !== `${$('base').attr('href')}/${link}` document.URL !== `${$('base').attr('href')}/${link}`
) { ) {
window.history.replaceState( window.history.replaceState(
{ {
@ -582,17 +547,9 @@ const MetaLightboxUI = (($) => {
link, link,
); );
} }
// update redirect urls
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
$('a').each(function () {
var $this = $(this);
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
});*/
} }
$overlay.removeClass('meta-lightbox-open'); $overlay.removeClass('meta-lightbox-open');
$('.meta-lightbox-nav').hide();
$Body.removeClass('meta-lightbox-body-effect-fade'); $Body.removeClass('meta-lightbox-body-effect-fade');
$('.meta-lightbox-content .meta-lightbox-zoom-wrapper').trigger( $('.meta-lightbox-content .meta-lightbox-zoom-wrapper').trigger(
'zoom.destroy', 'zoom.destroy',

1
src/scss/_variables.scss
View File

@ -2,6 +2,7 @@ $white: #fff !default;
$black: #000 !default; $black: #000 !default;
$lightbox-link-hover-color: #007bff !default; $lightbox-link-hover-color: #007bff !default;
$lightbox-breakpoint: 576px !default; $lightbox-breakpoint: 576px !default;
$body-color: #212529 !default;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,

24
src/scss/meta-lightbox.scss
View File

@ -27,9 +27,19 @@
} }
.meta-lightbox-content { .meta-lightbox-content {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: row;
color: $white;
width: 100%; width: 100%;
height: 100%; height: 100%;
.meta-lightbox-ajax {
color: $body-color;
}
.meta-lightbox-zoom-wrapper { .meta-lightbox-zoom-wrapper {
display: block; display: block;
height: 100%; height: 100%;
@ -45,6 +55,12 @@
right: 1em; right: 1em;
text-shadow: 1px 1px 1px $black; text-shadow: 1px 1px 1px $black;
} }
&.no-zoom {
&:after {
display: none;
}
}
} }
} }
@ -104,12 +120,18 @@
} }
.meta-lightbox-error { .meta-lightbox-error {
display: table; display: flex;
flex-direction: column;
justify-content: center;
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: $white; color: $white;
text-shadow: 0 1px 1px $black; text-shadow: 0 1px 1px $black;
.alert {
margin: 0;
text-shadow: none;
}
} }
.meta-lightbox-error p { .meta-lightbox-error p {