Make window order zIndex change on click on windows
parent
e128b973b9
commit
637dbb12ed
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue