mirror of
https://github.com/a2nt/meta-lightbox.git
synced 2024-10-22 17:05:53 +02:00
IMPR: minor loading updates
This commit is contained in:
parent
6df5c9762d
commit
8d6376fc49
@ -24,14 +24,14 @@ const MetaLightboxUI = (($) => {
|
|||||||
|
|
||||||
class MetaLightboxUI {
|
class MetaLightboxUI {
|
||||||
static init() {
|
static init() {
|
||||||
console.log(`Initializing: ${NAME}`);
|
console.log(`${NAME}: init ...`);
|
||||||
|
|
||||||
const ui = this;
|
const ui = this;
|
||||||
ui.isMSIE = /*@cc_on!@*/ 0;
|
ui.isMSIE = /*@cc_on!@*/ 0;
|
||||||
try {
|
try {
|
||||||
ui.isHidpi = ui.is_hdpi();
|
ui.isHidpi = ui.is_hdpi();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(ui);
|
console.log(`${NAME}: catch`);
|
||||||
}
|
}
|
||||||
|
|
||||||
$(`.js${NAME},[data-toggle="lightbox"],[data-lightbox-gallery]`).on(
|
$(`.js${NAME},[data-toggle="lightbox"],[data-lightbox-gallery]`).on(
|
||||||
@ -78,11 +78,6 @@ const MetaLightboxUI = (($) => {
|
|||||||
`[data-lightbox-gallery="${$link.data('lightbox-gallery')}"]`,
|
`[data-lightbox-gallery="${$link.data('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 {
|
||||||
@ -284,29 +279,7 @@ const MetaLightboxUI = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (src) {
|
if (src) {
|
||||||
const $iframe = $('<iframe>', {
|
ui.loadIframe(src, classTerm);
|
||||||
src,
|
|
||||||
class: classTerm,
|
|
||||||
frameborder: 0,
|
|
||||||
vspace: 0,
|
|
||||||
hspace: 0,
|
|
||||||
scrolling: 'auto',
|
|
||||||
});
|
|
||||||
|
|
||||||
$Body.append(
|
|
||||||
'<div id="IFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>',
|
|
||||||
);
|
|
||||||
const $preload = $('#IFramePreload');
|
|
||||||
$preload.html($iframe);
|
|
||||||
|
|
||||||
$iframe.on('load', () => {
|
|
||||||
console.log(`${NAME}: the iframe was loaded`);
|
|
||||||
$preload.html('');
|
|
||||||
$preload.remove();
|
|
||||||
|
|
||||||
ui.$content.html($iframe);
|
|
||||||
ui.contentLoaded();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the title
|
// Set the title
|
||||||
@ -361,7 +334,13 @@ const MetaLightboxUI = (($) => {
|
|||||||
}
|
}
|
||||||
// AJAX/iFrame (default)
|
// AJAX/iFrame (default)
|
||||||
else {
|
else {
|
||||||
console.log(ui);
|
if ($link.data('force-iframe')) {
|
||||||
|
console.log(`${NAME}: IFrame forced`);
|
||||||
|
|
||||||
|
return ui.loadIframe(href, 'meta-lightbox-iframe-content');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`${NAME}: loading AJAX`);
|
||||||
$.ajax({
|
$.ajax({
|
||||||
sync: false,
|
sync: false,
|
||||||
async: true,
|
async: true,
|
||||||
@ -371,16 +350,16 @@ const MetaLightboxUI = (($) => {
|
|||||||
cache: false,
|
cache: false,
|
||||||
statusCode: {
|
statusCode: {
|
||||||
404: function () {
|
404: function () {
|
||||||
console.log('page not found');
|
console.log(`${NAME}: page not found`);
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
},
|
},
|
||||||
302: function () {
|
302: function () {
|
||||||
console.log('redirect 302');
|
console.log(`${NAME}: redirect 302`);
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
error: function (jqXHR, status) {
|
error: function (jqXHR, status) {
|
||||||
console.log(`AJAX request failure.${jqXHR.statusText}`);
|
console.log(`${NAME}: AJAX request failure.${jqXHR.statusText}`);
|
||||||
|
|
||||||
var wrap = $(NETWORK_ERROR);
|
var wrap = $(NETWORK_ERROR);
|
||||||
ui.$content.html(wrap);
|
ui.$content.html(wrap);
|
||||||
@ -467,9 +446,9 @@ const MetaLightboxUI = (($) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
var wrap = $('<div class="meta-lightbox-ajax" />');
|
const $wrap = $('<div class="meta-lightbox-ajax" />');
|
||||||
wrap.append(data);
|
$wrap.append(data);
|
||||||
ui.$content.html(wrap);
|
ui.$content.html($wrap);
|
||||||
ui.contentLoaded();
|
ui.contentLoaded();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -507,6 +486,45 @@ const MetaLightboxUI = (($) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static loadIframe(href, classTerm) {
|
||||||
|
const ui = this;
|
||||||
|
|
||||||
|
const $iframe = $('<iframe>', {
|
||||||
|
src: href,
|
||||||
|
class: classTerm,
|
||||||
|
frameborder: 0,
|
||||||
|
vspace: 0,
|
||||||
|
hspace: 0,
|
||||||
|
scrolling: 'auto',
|
||||||
|
allowtransparency: 'true',
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`${NAME}: loading iframe`);
|
||||||
|
|
||||||
|
$Body.append(
|
||||||
|
'<div id="IFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>',
|
||||||
|
);
|
||||||
|
const $preload = $('#IFramePreload');
|
||||||
|
$preload.html($iframe);
|
||||||
|
|
||||||
|
$iframe.on('load', () => {
|
||||||
|
console.log(`${NAME}: the iframe was loaded`);
|
||||||
|
$preload.html('');
|
||||||
|
$preload.remove();
|
||||||
|
|
||||||
|
ui.$content.addClass('iframe-delay');
|
||||||
|
|
||||||
|
ui.$content.html($iframe);
|
||||||
|
ui.contentLoaded();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
ui.$content.removeClass('iframe-delay');
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
return $iframe;
|
||||||
|
}
|
||||||
|
|
||||||
static contentLoaded() {
|
static contentLoaded() {
|
||||||
const ui = this;
|
const ui = this;
|
||||||
|
|
||||||
@ -572,7 +590,7 @@ const MetaLightboxUI = (($) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`MetaLightboxUI.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
MetaLightboxUI.init();
|
MetaLightboxUI.init();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user