launcher: application launcher
Change-Id: I81d49a0651702dc821d683d6a4b3bbff6af3c753
diff --git a/core/installer/welcome/static/launcher.js b/core/installer/welcome/static/launcher.js
new file mode 100644
index 0000000..b8c2ae5
--- /dev/null
+++ b/core/installer/welcome/static/launcher.js
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", function () {
+ 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");
+ [
+ ['mouseenter', () => showTooltip(tooltipUser)],
+ ['mouseleave', () => hideTooltip(tooltipUser)],
+ ].forEach(([event, listener]) => {
+ circle.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");
+ 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);
+ });
+ });
+ 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);
+ modal.removeAttribute("close");
+ modal.setAttribute("open", true);
+ const closeHelpButton = document.getElementById(closeHelpId);
+ closeHelpButton.addEventListener('click', function (event) {
+ event.stopPropagation();
+ modal.removeAttribute("open");
+ modal.setAttribute("close", true);
+ });
+ });
+ });
+ 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';
+ });
+ document.getElementById(helpContentId).style.display = 'block';
+ });
+ });
+});