diff --git a/widget/app.js b/widget/app.js index 64e1c18..be859e8 100644 --- 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 index be9c17b..07d5f5b 100644 --- a/widget/index.html +++ b/widget/index.html @@ -20,25 +20,8 @@
-
-

- -
-

Success!

- -

Your calendar has been linked and will show in your app. To view your - calendar now click here

-
-
+
- \ No newline at end of file