From d1d75947c5125cab2495260e6ae8595c56a2b508 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Fri, 11 Sep 2020 05:19:09 +0700
Subject: [PATCH] FIX: iframe wasn't loaded at specific timming

---
 package.json            |  2 +-
 src/js/meta-lightbox.js | 55 ++++++++++++++++++++++++++---------------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 0f4d6ba..ba19f04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/meta-lightbox",
-	"version": "2.3.5",
+	"version": "2.3.6",
 	"description": "Universal Lightbox window",
 	"main": "meta-lightbox.js",
 	"author": "Tony Air <tony@twma.pro>",
diff --git a/src/js/meta-lightbox.js b/src/js/meta-lightbox.js
index 4683e92..a3c91fe 100755
--- a/src/js/meta-lightbox.js
+++ b/src/js/meta-lightbox.js
@@ -505,12 +505,6 @@ const MetaLightboxUI = (($) => {
     static loadIframe(href, classTerm) {
       const ui = this;
 
-      // don't load on offline
-      if ($Body.hasClass('is-offline')) {
-        console.warn(`${NAME}: Unable to load iframe offline`);
-        return false;
-      }
-
       const $iframe = $('<iframe>', {
         src: href,
         class: classTerm,
@@ -524,29 +518,41 @@ const MetaLightboxUI = (($) => {
       console.log(`${NAME}: loading iframe`);
 
       $Body.append(
-        '<div id="IFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>',
+        '<div id="MetaIFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>',
       );
-      const $preload = $('#IFramePreload');
+      const $preload = $('#MetaIFramePreload');
       $preload.html($iframe);
 
       $iframe.on('load', () => {
-        console.log(`${NAME}: the iframe was loaded`);
-        $preload.html('');
-        $preload.remove();
+        // don't load on offline
+        if ($Body.hasClass('is-offline')) {
+          console.warn(`${NAME}: Unable to load iframe offline`);
+          return false;
+        }
 
-        ui.$content.addClass('iframe-delay');
-
-        ui.$content.html($iframe);
-        ui.contentLoaded();
-
-        setTimeout(() => {
-          ui.$content.removeClass('iframe-delay');
-        }, 1000);
+        ui.finishIFrameLoading($preload, $iframe);
       });
 
       return $iframe;
     }
 
+    static finishIFrameLoading() {
+      const ui = this;
+
+      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);
+    }
+
     static contentLoaded() {
       const ui = this;
 
@@ -617,8 +623,17 @@ const MetaLightboxUI = (($) => {
   });
 
   $W.on(`${Events.BACKONLINE}`, () => {
-    const $iframe = $('.meta-lightbox-content iframe');
     console.log(`${NAME}: reloading iframe`);
+
+    const $preload = $('#MetaIFramePreload');
+    if ($preload.length) {
+      const $iframe = $preload.find('iframe');
+      if ($iframe.length) {
+        ui.finishIFrameLoading($preload, $iframe);
+      }
+    }
+
+    const $iframe = $('.meta-lightbox-content iframe');
     $iframe.attr('src', $iframe.attr('src'));
   });