meli
/
wasm-demo
4
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make window order zIndex change on click on windows

master
Manos Pitsidianakis 2020-07-10 15:48:03 +03:00
parent 2c3f2ae324
commit 6a379d61d6
Signed by: Manos Pitsidianakis
GPG Key ID: 73627C2F690DF710
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pkg/index.html
View File

@ -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;
</head>
<body>
<div class="help">
<div class="help" id="help">
<h1>meli interactive demo</h1>
<hr />
<p>Click on the terminal for it to gain input focus, when it appears. Press <kbd>?</kbd> for shortcuts. Some shortcuts don't work due to the way the browser intercepts user input. You can also use the on-screen keyboard.</p>
@ -853,7 +877,7 @@ display: flex;
<div class="title-bar-controls">
<button aria-label="Minimize" disabled></button>
<button aria-label="Maximize"></button>
<button aria-label="Maximize" disabled></button>
<button aria-label="Close" disabled></button>
</div>
</div>
@ -953,7 +977,7 @@ display: flex;
<!-- End Row 5 -->
</div>
</div>
<div class="window" id="manpages" style="transform: translate(5vw, 5vh); height:300px; width: min-content;">
<div class="window" id="manpages" style="">
<div class="title-bar">
<div class="title-bar-text">
sman