IMPR: minor loading updates

This commit is contained in:
Tony Air 2020-09-09 22:06:20 +07:00
parent 6df5c9762d
commit 8d6376fc49

View File

@ -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();
}); });