Merge pull request #3970 from QuantiModo/feature/modals

mikepsinn · web-flow · commit e7a86c4351a3 · 2020-05-30T16:37:09.000-05:00
Modal experiments
diff --git a/src/modals/index.html b/src/modals/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Modal Demos</title>
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-borderless@3/borderless.css">
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9/dist/sweetalert2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
+    <script src="../../lib/quantimodo/quantimodo-web.js"></script>
+    <script src="../js/ionIcons.js"></script>
+    <script src="../js/qmLogger.js"></script>
+    <script src="../js/qmHelpers.js"></script>
+    <script src="../data/qmStaticData.js"></script>
+    <!-- Must come after qmHelpers because we assign to qm.staticData -->
+    <script src="../js/qmChrome.js"></script>
+</head>
+<body>
+    <button id="popup-button">Popup</button>
+    <button id="full-inbox-button">Full Inbox</button>
+    <button id="compact-inbox-button">Compact Inbox</button>
+    <script src="modals.js" defer></script>
+</body>
+</html>
diff --git a/src/modals/modals.js b/src/modals/modals.js
@@ -0,0 +1,21 @@
+$(document).ready(function () {
+    function swalIframeOptions(path){
+        return {
+            showCancelButton: true,
+            showConfirmButton: false,
+            html: '<iframe width="100%" height="300" src="//web.quantimo.do/'+path+'" frameborder="0"></iframe>'
+        }
+    }
+    function fireIframe(path){
+        Swal.fire(swalIframeOptions(path));
+    }
+    $('#popup-button').click(() => {
+        fireIframe('android_popup.html')
+    });
+    $('#full-inbox-button').click(() => {
+        fireIframe('#/app/reminders-inbox')
+    });
+    $('#compact-inbox-button').click(() => {
+        fireIframe('#/app/reminders-inbox-compact')
+    });
+});
