Fix windows resetting position on first drag
parent
26000bb350
commit
8f9a41f26d
|
@ -95,6 +95,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
@ -113,26 +114,31 @@
|
|||
.window-body section {
|
||||
flex 1;
|
||||
}
|
||||
.window-body section div.tab pre {
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.window-body section div.tab pre {
|
||||
height:200px;
|
||||
}
|
||||
#terminal_win.window {
|
||||
width: 802px;
|
||||
height: 593px;
|
||||
transform: translate(5vw, 15vh);
|
||||
left: 5vw;
|
||||
top: 15vh;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#manpages.window {
|
||||
height:300px; width: min-content;
|
||||
height:300px;
|
||||
width: calc(65 * 8px + 59 * var(--gridGap) + 5px);
|
||||
z-index: 1;
|
||||
transform: translate(calc(87vw - 60* 8px + 59 * var(--gridGap) + 5px), 40vh);
|
||||
left: calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px);
|
||||
top: 40vh;
|
||||
}
|
||||
#keyboard.window {
|
||||
z-index: 2;
|
||||
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
|
||||
position: absolute;
|
||||
transform: translate(calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px), 50vh);
|
||||
left: calc(83vw - 60* 8px + 59 * var(--gridGap) + 5px);
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
|
@ -151,7 +157,8 @@ height:300px; width: min-content;
|
|||
width: 28rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
transform: translate(calc(95vw - 30rem), 5vh);
|
||||
left: calc(95vw - 30rem);
|
||||
top: 5vh;
|
||||
}
|
||||
|
||||
.help h1 {
|
||||
|
@ -414,7 +421,8 @@ display: flex;
|
|||
clear: both;
|
||||
}
|
||||
#manpages .window-body section > div> pre {
|
||||
cursor: default;
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
box-shadow: none;
|
||||
background: #c0c0c0;
|
||||
overflow: scroll;
|
||||
|
@ -451,7 +459,7 @@ display: flex;
|
|||
interact('#terminal_win.window, #manpages.window') // target elements with the "draggable" class
|
||||
.draggable({
|
||||
// enable inertial throwing
|
||||
inertia: true,
|
||||
inertia: false,
|
||||
// keep the element within the area of it's parent
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
|
@ -552,22 +560,26 @@ display: flex;
|
|||
}
|
||||
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;
|
||||
}
|
||||
});
|
||||
setWindowOnTop(id);
|
||||
});
|
||||
});
|
||||
|
||||
function setWindowOnTop(id) {
|
||||
//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
|
||||
setWindowOnTop(target.id);
|
||||
// keep the dragged position in the data-x/data-y attributes
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
|
@ -587,6 +599,8 @@ display: flex;
|
|||
function restorePosition(element) {
|
||||
console.log("restorePosition ", element.id);
|
||||
if (prev_window_position[element.id]) {
|
||||
document.getElementById(element.id).style.left = prev_window_position[element.id]["left"];
|
||||
document.getElementById(element.id).style.top = prev_window_position[element.id]["top"];
|
||||
document.getElementById(element.id).style.width = prev_window_position[element.id]["width"];
|
||||
document.getElementById(element.id).style.height = prev_window_position[element.id]["height"];
|
||||
document.getElementById(element.id).style.webkitTransform = element.style.transform = prev_window_position[element.id]["transform"];
|
||||
|
@ -603,6 +617,8 @@ display: flex;
|
|||
prev_window_position[element.id] = {
|
||||
"width": element.style.width,
|
||||
"height": element.style.height,
|
||||
"top": element.style.top,
|
||||
"left": element.style.left,
|
||||
"transform": element.style.transform,
|
||||
"data-x": element["data-x"],
|
||||
"data-y": element["data-y"]
|
||||
|
@ -632,6 +648,8 @@ display: flex;
|
|||
|
||||
target.style.webkitTransform = target.style.transform =
|
||||
'translate(' + x + 'px,' + y + 'px)';
|
||||
target.style.left = x;
|
||||
target.style.top = y;
|
||||
|
||||
target.setAttribute('data-x', x);
|
||||
target.setAttribute('data-y', y);
|
||||
|
|
Loading…
Reference in New Issue