Merge pull request #6 from pierrekamel5/master

Added Ability to preview on PWA and Emulator
BuildFire · Oct 4, 2022 · 96e5736 · 96e5736
2 parents f9db84c + afe77df
commit 96e5736
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 18 deletions.
diff --git a/widget/app.js b/widget/app.js
@@ -31,6 +31,7 @@
               if (context) {
                 if (WidgetHome.data.content.link && context.device.platform == "web") {
                   WidgetHome.isWebPlatform = true;
+                  renderiFrame({url: WidgetHome.data.content.link});
                 } else {
                   if (WidgetHome.data.content.link)
                     buildfire.navigation.openWindow(WidgetHome.data.content.link, "_blank", function(){
@@ -53,6 +54,70 @@
           DataStore.get(TAG_NAMES.CALENDLY_INFO).then(WidgetHome.success, WidgetHome.error);
         };
 
+        const removeLoadingText = () => {
+          let loadingText = window.document.getElementById('loadingText');
+          if (loadingText) loadingText.remove();
+        }
+        const renderiFrame = (props) =>{
+          let currentIframe = window.document.getElementById('webviewIframe');
+          if (currentIframe) {
+            currentIframe.remove();
+          }
+          removeLoadingText();
+
+          window.document.body.appendChild((() => {
+            let p = window.document.createElement('p');
+            p.innerHTML = 'Loading...';
+            p.className = 'bodyTextTheme backgroundColorTheme';
+            p.style.padding = '8px 0';
+            p.style.display = 'inline-block';
+            p.style.width = '100%';
+            p.style.left= 0;
+            p.style.background = '#eef0f0';
+            p.style.textAlign = 'center';
+            p.style.color = '#5f5f5f';
+            p.id = 'loadingText';
+            return p;
+          })());
+
+          let container =  window.document.body;
+
+          container.appendChild((() => {
+
+            let modal = (document.querySelectorAll('div[id^="confirm"]') || [])[0];
+            if (modal) {
+              let confirm = (modal.querySelectorAll('.approve-confirmation') || [])[0];
+              if (confirm && confirm.click) confirm.click();
+            }
+
+            const targetProtocol = (/[a-z]{4,5}:/g.exec(props.url) || [])[0] || false;
+            let url = (/(http|https):\/\/\S+\.[a-z]+/g.exec(props.url) || [])[0] || 'this site';
+
+            if (window.location.protocol === 'https:' && targetProtocol === 'http:') {
+              buildfire.messaging.sendMessageToControl({ tag: 'mixedContent', url: url });
+            }
+
+            let iFrame = window.document.createElement('iframe');
+            iFrame.id = 'webviewIframe';
+            iFrame.src = props.url;
+            iFrame.scrolling = 'auto';
+            iFrame.style.height = '100%';
+            iFrame.style.width = '1px';
+            iFrame.style.position = 'absolute';
+            iFrame.style.top = 0;
+            iFrame.style.minWidth = '100%';
+            iFrame.onload = () => {
+              removeLoadingText();
+              buildfire.messaging.sendMessageToControl({ tag: 'displayWarning' });
+            };
+            setTimeout(() => {
+              removeLoadingText();
+            }, 3000);
+
+            return iFrame;
+          })());
+        };
+
         WidgetHome.onUpdateCallback = function (event) {
           if (event && event.tag === TAG_NAMES.CALENDLY_INFO) {
             WidgetHome.data = event.data;

diff --git a/widget/index.html b/widget/index.html
@@ -20,25 +20,8 @@
 <body>
 
 <div class="content" ng-controller="WidgetHomeCtrl as WidgetHome">
-  <div style="text-align: center;vertical-align: middle; height: 100%"
-       ng-if="WidgetHome.data.content && WidgetHome.data.content.link && WidgetHome.isWebPlatform">
-    <h3 style="margin-top: 50%; opacity: .25;"></h3>
-
-    <div>
-      <h2>Success!</h2>
-
-      <p>Your calendar has been linked and will show in your app. To view your
-        calendar now click <a href="{{WidgetHome.data.content.link}}" target="_blank">here</a></p>
-    </div>
-  </div>
+
 </div>
 
-<!--<div class="content"
-     style="-webkit-overflow-scrolling: touch !important;overflow: auto; height: 100%;"
-     ng-controller="WidgetHomeCtrl as WidgetHome">
-  <iframe src="{{WidgetHome.data.content.link | returnUrl}}"
-          ng-if="WidgetHome.data.content.link"
-          style="height: 100%;position: relative"></iframe>
-</div>-->
 </body>
 </html>