From 637dbb12ed9e555f9d5a63587045644566aaaeb6 Mon Sep 17 00:00:00 2001 From: Manos Pitsidianakis Date: Fri, 10 Jul 2020 15:48:03 +0300 Subject: [PATCH] Make window order zIndex change on click on windows --- pkg/index.html | 38 +++++++++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/pkg/index.html b/pkg/index.html index e20db359..c8202eb9 100644 --- a/pkg/index.html +++ b/pkg/index.html @@ -45,8 +45,7 @@ overflow: scroll; } - .title-bar-controls button[aria-label="Minimize"], - .title-bar-controls button[aria-label="Close"] { + .title-bar-controls button:disabled { background-blend-mode: overlay; } @@ -74,6 +73,7 @@ } .window { + position: absolute; display: flex; flex-direction: column; touch-action: none; @@ -102,14 +102,19 @@ width: 802px; height: 593px; transform: translate(5vw, 15vh); + z-index: 3; } #manpages.window { +height:300px; width: min-content; + z-index: 1; + transform: translate(calc(87vw - 60* 8px + 59 * var(--gridGap) + 5px), 40vh); } #keyboard.window { + z-index: 2; width: calc(60* 8px + 59 * var(--gridGap) + 5px); position: absolute; - transform: translate(calc(75vw - 60* 8px + 59 * var(--gridGap) + 5px), -15vh); + transform: translate(calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px), 50vh); } .title-bar { @@ -523,6 +528,25 @@ display: flex; }) var prev_window_position = {}; + var window_order = ["terminal_win", "help", "keyboard", "manpages"]; + for (let i = 0; i < window_order.length; i++){ + document.getElementById(window_order[i]).style.zIndex = window_order.length - i; + } + window_order.forEach(id => { + document.getElementById(id).addEventListener('click', event => { + console.log("window_order = ", window_order ); + console.log("click id = ", id); + let pos = window_order.indexOf(id); + console.log("pos = ", pos); + let removedItem = window_order.splice(pos, 1)[0]; + console.log("removedItem = ", removedItem); + let newLength = window_order.unshift(removedItem); + console.log("newLength = ", newLength); + for (let i = 0; i < newLength; i++){ + document.getElementById(window_order[i]).style.zIndex = newLength - i; + } + }); + }); function dragMoveListener(event) { var target = event.target @@ -540,7 +564,7 @@ display: flex; target.setAttribute('data-y', y) } - const max_buttons = document.querySelectorAll('button[aria-label="Maximize"]'); + const max_buttons = document.querySelectorAll('button[aria-label="Maximize"]:enabled'); function restorePosition(element) { console.log("restorePosition ", element.id); @@ -820,7 +844,7 @@ display: flex; -
+

meli interactive demo

Click on the terminal for it to gain input focus, when it appears. Press ? for shortcuts. Some shortcuts don't work due to the way the browser intercepts user input. You can also use the on-screen keyboard.

@@ -853,7 +877,7 @@ display: flex;
- +
@@ -953,7 +977,7 @@ display: flex;
-
+
sman