Change title when inside plugin view

2 files changed, 37 insertions, 15 deletions

diff --git a/plugin_loader/static/plugin_page.js b/plugin_loader/static/plugin_page.js
index b42cd711..0d595ac9 100644
--- a/plugin_loader/static/plugin_page.js
+++ b/plugin_loader/static/plugin_page.js
@@ -1,3 +1,21 @@
+function setPluginName(name) {
+    document.getElementById("plugin_title").innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-back" viewBox="0 0 16 16">
+        <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
+    </svg>
+    ${name}
+    `;
+}
+
+function reloadIframe() {
+    document.getElementById("plugin_iframe").contentWindow.location.href = "http://127.0.0.1:1337/plugins/iframe";
+}
+
+function resolveMethodCall(call_id, result) {
+    let iframe = document.getElementById("plugin_iframe").contentWindow;
+    iframe.postMessage({'call_id': call_id, 'result': result}, "http://127.0.0.1:1337");
+}
+
 (function () {
     const PLUGIN_ICON = `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16">
@@ -31,19 +49,18 @@
         if (document.hasFocus()) {
             inject();
             document.getElementById("plugin_title").onclick = function() {
-                document.getElementById("plugin_iframe").contentWindow.location.href = "http://127.0.0.1:1337/plugins/iframe";
+                reloadIframe();
+                document.getElementById("plugin_title").innerText = "Plugins";
+            }
+            window.onmessage = function(ev) {
+                document.getElementById("plugin_title").innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
+                    <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z"/>
+                </svg>
+                ${ev.data}
+                `;         
             }
             clearInterval(injector);
         }
     }, 100);
-})();
-
-function reloadIframe() {
-    console.log("reloading iframe");
-    document.getElementById("plugin_iframe").contentWindow.location.href = "http://127.0.0.1:1337/plugins/iframe";
-}
-
-function resolveMethodCall(call_id, result) {
-    let iframe = document.getElementById("plugin_iframe").contentWindow;
-    iframe.postMessage({'call_id': call_id, 'result': result}, "http://127.0.0.1:1337");
-}
\ No newline at end of file
+})();
\ No newline at end of file
diff --git a/plugin_loader/templates/plugin_view.html b/plugin_loader/templates/plugin_view.html
index 3c0cbcc5..2187edae 100644
--- a/plugin_loader/templates/plugin_view.html
+++ b/plugin_loader/templates/plugin_view.html
@@ -8,6 +8,11 @@
             iframe.contentWindow.postMessage(evt.data, "http://127.0.0.1:1337");
         });
     }, false);
+
+    function loadPlugin(name) {
+        this.parent.postMessage(name, "https://steamloopback.host");
+        location.href = `/plugins/load_main/${name}`;
+    }
 </script>
 
 {% if not plugins|length %}
@@ -23,7 +28,7 @@
     <div class="quickaccesscontrols_PanelSectionRow_26R5w">
         {% for plugin in plugins %}
         {% if plugin.tile_view_html|length %}
-        <div onclick="location.href = '/plugins/load/{{ plugin.name }}'"
+        <div onclick="loadPlugin('{{ plugin.name }}')"
             class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable"
             style="--indent-level:0;">
             <iframe id="tile_view_iframe_{{ plugin.name }}" style="display:block; padding: 0; border: none;" scrolling="no"
@@ -43,7 +48,7 @@
                             }
                         }, 100);
                         iframe.contentWindow.document.body.onclick = function () {
-                            location.href = '/plugins/load_main/{{ plugin.name }}';
+                            loadPlugin('{{ plugin.name }}');
                         };
                     }
                 })();
@@ -51,7 +56,7 @@
         </div>
         {% else %}
         <div class="quickaccesscontrols_PanelSectionRow_26R5w">
-            <div onclick="location.href = '/plugins/load_main/{{ plugin.name }}'"
+            <div onclick="loadPlugin('{{ plugin.name }}')"
                 class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable"
                 style="--indent-level:0;">
                 <div class="basicdialog_FieldChildren_279n8">