Fix windows resetting position on first drag

master
Manos Pitsidianakis 2020-07-14 00:55:25 +03:00
parent 6d39a20d84
commit 2558307c30
Signed by: Manos Pitsidianakis
GPG Key ID: 73627C2F690DF710
1 changed files with 40 additions and 22 deletions

View File

@ -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);