phcode-dev
diff --git a/‎docs/pageLoader.html‎
Lines changed: 30 additions & 2 deletions b/‎docs/pageLoader.html‎
Lines changed: 30 additions & 2 deletions
@@ -26,6 +26,11 @@
 
 <head>
     <title>Phoenix live preview</title>
+    <style>
+        .hidden {
+            display: none;
+        }
+    </style>
     <script>
         const worker = new Worker('pageLoaderWorker.js');
         worker.onmessage = (event) => {
@@ -35,6 +40,13 @@
                 default: console.error("Live Preview page loader: received unknown message from worker:", event);
             }
         }
+        window.savePageCtrlSDisabledByPhoenix = true;
+        addEventListener("keydown", function(e) {
+            // inside live preview iframe, we disable ctrl-s browser save page dialog
+            if (e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                e.preventDefault();
+            }
+        }, false);
         // https://developer.mozilla.org/en-US/docs/Web/Privacy/Storage_Access_Policy/Errors/CookiePartitionedForeign
         // iframes are sandboxed by default and if we popout the live preview, those previews wont be
         // reachable from this sandboxed iframe server. So we have to request access.
@@ -50,6 +62,16 @@
     </script>
     <script type="module">
         const clientID = "" + Math.round( Math.random()*1000000000);
+        function getExtension(url) {
+            url = url || '';
+            let pathSplit = url.split('.');
+            return pathSplit && pathSplit.length>1 ? pathSplit[pathSplit.length-1] : '';
+        }
+        function isImage(url) {
+            let extension = getExtension(url);
+            return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp", "ico", "avif"]
+                .includes(extension.toLowerCase());
+        }
         window.handleLoad = function () {
             const urlSearchParams = new URLSearchParams(window.location.search);
             const params = Object.fromEntries(urlSearchParams.entries());
@@ -62,7 +84,12 @@
                 broadcastChannel: params.broadcastChannel,
                 clientID});
             if(params.URL){
-                document.getElementById("contentFrame").src = decodeURIComponent(params.URL);
+                let element = document.getElementById("contentFrame");
+                if(isImage(decodeURIComponent(params.URL))){
+                    element = document.getElementById("contentImage");
+                }
+                element.classList.remove('hidden');
+                element.src = decodeURIComponent(params.URL);
                 const path = params.URL.replace(/\/$/, "").split("/");
                 document.title = path[path.length -1];
             }
@@ -84,7 +111,8 @@
 <body onload="handleLoad()">
     <div id="content">
         <iframe id="contentFrame" allowfullscreen width="100%" height="100%" frameborder="0"
-                src="" title="Live Preview"></iframe>
+                src="about:blank" title="Live Preview" class="hidden"></iframe>
+        <img id="contentImage" src="" alt="Image Live Preview" class="hidden"/>
     </div>
 </body>