Launcher: Separate iFrame for each app, toggle invisibility between clicks
Change-Id: I540c04ea9f67c27624d69664a3b5a3057734268f
diff --git a/core/installer/welcome/static/launcher.js b/core/installer/welcome/static/launcher.js
index 8dd4b81..58ab6af 100644
--- a/core/installer/welcome/static/launcher.js
+++ b/core/installer/welcome/static/launcher.js
@@ -1,114 +1,136 @@
document.addEventListener("DOMContentLoaded", function () {
- document.querySelector('iframe').contentDocument.write("Welcome to the dodo: application launcher, think of it as your desktop environment. You can launch applications from left-hand side dock. You should setup VPN clients on your devices, so you can install applications from Application Manager and access your private network. Instructions on how to do that can be viewed by clicking <b>Help</b> button after hovering over <b>Headscale</b> icon in the dock.");
+ document.getElementById('appFrame-default').contentDocument.write("Welcome to the dodo: application launcher, think of it as your desktop environment. You can launch applications from left-hand side dock. You should setup VPN clients on your devices, so you can install applications from Application Manager and access your private network. Instructions on how to do that can be viewed by clicking <b>Help</b> button after hovering over <b>Headscale</b> icon in the dock.");
- function showTooltip(obj) {
- // obj.style.display = 'flex';
- obj.style.visibility = 'visible';
- obj.style.opacity = '1';
- }
- function hideTooltip(obj) {
- obj.style.visibility = 'hidden';
- obj.style.opacity = '0';
- // obj.style.display = '';
- }
- const circle = document.querySelector(".user-circle");
- const tooltipUser = document.querySelector("#tooltip-user");
+ function showTooltip(obj) {
+ obj.style.visibility = 'visible';
+ obj.style.opacity = '1';
+ }
+ function hideTooltip(obj) {
+ obj.style.visibility = 'hidden';
+ obj.style.opacity = '0';
+ }
+
+ const circle = document.querySelector(".user-circle");
+ const tooltipUser = document.querySelector("#tooltip-user");
+ [
+ ['mouseenter', () => showTooltip(tooltipUser)],
+ ['mouseleave', () => hideTooltip(tooltipUser)],
+ ].forEach(([event, listener]) => {
+ circle.addEventListener(event, listener);
+ });
+
+ const iframes = {};
+ const rightPanel = document.getElementById('right-panel');
+
+ function showIframe(appId) {
+ document.querySelectorAll('.appFrame').forEach(iframe => {
+ iframe.style.display = iframe.id === `appFrame-${appId}` ? 'block' : 'none';
+ });
+ }
+
+ function createIframe(appId, appUrl) {
+ const iframe = document.createElement('iframe');
+ iframe.id = `appFrame-${appId}`;
+ iframe.className = 'appFrame';
+ iframe.src = appUrl;
+ iframe.style.display = 'none';
+ rightPanel.appendChild(iframe);
+ iframes[appId] = iframe;
+ }
+
+ const icons = document.querySelectorAll(".app-icon-tooltip");
+ icons.forEach(function (icon) {
+ icon.addEventListener("click", function (event) {
+ event.stopPropagation();
+ const appUrl = this.getAttribute("data-app-url");
+ const appId = this.getAttribute("data-app-id");
+ if (!appUrl) {
+ const modalId = `modal-${this.querySelector('.help-button').id.replace('help-button-', '')}`;
+ openModal(document.getElementById(modalId));
+ } else {
+ if (!iframes[appId]) createIframe(appId, appUrl);
+ showIframe(appId);
+ }
+ document.querySelectorAll(".app-icon-tooltip .background-glow").forEach((e) => e.remove());
+ const glow = document.createElement('div');
+ glow.classList.add("background-glow");
+ glow.setAttribute("style", "transform: none; transform-origin: 50% 50% 0px;")
+ this.appendChild(glow);
+ });
+ const tooltip = icon.querySelector('.tooltip');
+ tooltip.addEventListener("click", function (event) {
+ event.stopPropagation();
+ });
[
- ['mouseenter', () => showTooltip(tooltipUser)],
- ['mouseleave', () => hideTooltip(tooltipUser)],
+ ['mouseenter', () => showTooltip(tooltip)],
+ ['mouseleave', () => hideTooltip(tooltip)],
+ ['focus', () => showTooltip(tooltip)],
+ ['blur', () => hideTooltip(tooltip)],
].forEach(([event, listener]) => {
- circle.addEventListener(event, listener);
+ icon.addEventListener(event, listener);
});
- const icons = document.querySelectorAll(".app-icon-tooltip");
- icons.forEach(function (icon) {
- icon.addEventListener("click", function (event) {
- event.stopPropagation();
- const appUrl = this.getAttribute("data-app-url");
- if (!appUrl) {
- const button = this.querySelector('.help-button');
- const buttonId = button.getAttribute('id');
- const modalId = 'modal-' + buttonId.substring("help-button-".length);
- const modal = document.getElementById(modalId);
- openModal(modal);
- return;
- }
- document.getElementById('appFrame').src = 'about:blank';
- document.getElementById('appFrame').src = appUrl;
- document.querySelectorAll(".app-icon-tooltip .background-glow").forEach((e) => e.remove());
- const glow = document.createElement('div');
- glow.classList.add("background-glow");
- glow.setAttribute("style", "transform: none; transform-origin: 50% 50% 0px;")
- this.appendChild(glow);
- });
- const tooltip = icon.querySelector('.tooltip');
- tooltip.addEventListener("click", function (event) {
- event.stopPropagation();
- });
- [
- ['mouseenter', () => showTooltip(tooltip)],
- ['mouseleave', () => hideTooltip(tooltip)],
- ['focus', () => showTooltip(tooltip)],
- ['blur', () => hideTooltip(tooltip)],
- ].forEach(([event, listener]) => {
- icon.addEventListener(event, listener);
- });
- });
+ });
+
let visibleModal = undefined;
- const openModal = function(modal) {
+ const openModal = function (modal) {
modal.removeAttribute("close");
modal.setAttribute("open", true);
- visibleModal = modal;
+ visibleModal = modal;
};
- const closeModal = function(modal) {
+ const closeModal = function (modal) {
modal.removeAttribute("open");
modal.setAttribute("close", true);
- visibleModal = undefined;
+ visibleModal = undefined;
};
- const helpButtons = document.querySelectorAll('.help-button');
- helpButtons.forEach(function (button) {
- button.addEventListener('click', function (event) {
- event.stopPropagation();
- const buttonId = button.getAttribute('id');
- const modalId = 'modal-' + buttonId.substring("help-button-".length);
- const closeHelpId = "close-help-" + buttonId.substring("help-button-".length);
- const modal = document.getElementById(modalId);
- openModal(modal);
- const closeHelpButton = document.getElementById(closeHelpId);
- closeHelpButton.addEventListener('click', function (event) {
- event.stopPropagation();
- closeModal(modal);
- });
- });
+
+ const helpButtons = document.querySelectorAll('.help-button');
+ helpButtons.forEach(function (button) {
+ button.addEventListener('click', function (event) {
+ event.stopPropagation();
+ const buttonId = button.getAttribute('id');
+ const modalId = 'modal-' + buttonId.substring("help-button-".length);
+ const closeHelpId = "close-help-" + buttonId.substring("help-button-".length);
+ const modal = document.getElementById(modalId);
+ openModal(modal);
+ const closeHelpButton = document.getElementById(closeHelpId);
+ closeHelpButton.addEventListener('click', function (event) {
+ event.stopPropagation();
+ closeModal(modal);
+ });
});
- const modalHelpButtons = document.querySelectorAll('.title-menu');
- modalHelpButtons.forEach(function (button) {
- button.addEventListener('click', function (event) {
- event.stopPropagation();
- const helpTitle = button.getAttribute('id');
- const helpTitleId = helpTitle.substring('title-'.length);
- const helpContentId = 'help-content-' + helpTitleId;
- const allContentElements = document.querySelectorAll('.help-content');
- allContentElements.forEach(function (contentElement) {
- contentElement.style.display = "none";
- });
- modalHelpButtons.forEach(function (button) {
- button.removeAttribute("aria-current");
- });
- document.getElementById(helpContentId).style.display = 'block';
- button.setAttribute("aria-current", "page");
- });
- });
- document.addEventListener("keydown", (event) => {
- if (event.key === "Escape" && visibleModal) {
- closeModal(visibleModal);
- }
});
+
+ const modalHelpButtons = document.querySelectorAll('.title-menu');
+ modalHelpButtons.forEach(function (button) {
+ button.addEventListener('click', function (event) {
+ event.stopPropagation();
+ const helpTitle = button.getAttribute('id');
+ const helpTitleId = helpTitle.substring('title-'.length);
+ const helpContentId = 'help-content-' + helpTitleId;
+ const allContentElements = document.querySelectorAll('.help-content');
+ allContentElements.forEach(function (contentElement) {
+ contentElement.style.display = "none";
+ });
+ modalHelpButtons.forEach(function (button) {
+ button.removeAttribute("aria-current");
+ });
+ document.getElementById(helpContentId).style.display = 'block';
+ button.setAttribute("aria-current", "page");
+ });
+ });
+
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape" && visibleModal) {
+ closeModal(visibleModal);
+ }
+ });
+
document.addEventListener("click", (event) => {
- if (visibleModal === null) return;
- const modalContent = visibleModal.querySelector("article");
- const closeButton = visibleModal.querySelector(".close-button");
- if (!modalContent.contains(event.target) || closeButton.contains(event.target)) {
- closeModal(visibleModal);
- }
+ if (visibleModal === null) return;
+ const modalContent = visibleModal.querySelector("article");
+ const closeButton = visibleModal.querySelector(".close-button");
+ if (!modalContent.contains(event.target) || closeButton.contains(event.target)) {
+ closeModal(visibleModal);
+ }
});
});