From 65d3dd733a5bfee33a9cc58c999648d3e466bf5b Mon Sep 17 00:00:00 2001 From: Lars Karlslund Date: Wed, 10 Jan 2024 11:40:48 +0100 Subject: [PATCH] New JS code to handle window behaviour --- modules/analyze/html/adalanche.css | 12 +- modules/analyze/html/custom.js | 143 +++++++++++------- modules/analyze/html/external/interact.min.js | 4 + modules/analyze/html/index.html | 5 +- 4 files changed, 106 insertions(+), 58 deletions(-) create mode 100644 modules/analyze/html/external/interact.min.js diff --git a/modules/analyze/html/adalanche.css b/modules/analyze/html/adalanche.css index bb4e7d6..5cabd86 100644 --- a/modules/analyze/html/adalanche.css +++ b/modules/analyze/html/adalanche.css @@ -112,6 +112,16 @@ body { .window { pointer-events: auto; + box-sizing: border-box; + display: inline-flex; + flex-direction: column; +} + +.window-wrapper { + overflow: auto; +} + +.window-content { } .window-front { @@ -158,8 +168,6 @@ body { z-index: 40; } - - #outerquery { position: absolute; left: 50%; diff --git a/modules/analyze/html/custom.js b/modules/analyze/html/custom.js index d8d6de2..af81dcc 100644 --- a/modules/analyze/html/custom.js +++ b/modules/analyze/html/custom.js @@ -73,75 +73,118 @@ function set_querymode(mode) { } else if (mode == 'sourcetarget') { $('#querymode_sourcetarget').prop('checked', true).change(); } - // $('#querymode_normal').prop('checked', mode == 'normal').change(); - // $('#querymode_reverse').prop('checked', mode == 'reverse').change(); - // $('#querymode_sourcetarget').prop('checked', mode == 'sourcetarget').change(); } +function dragMoveListener(event) { + var target = event.target, + // keep the dragged position in the data-x/data-y attributes + x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, + y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; + + // translate the element + target.style.webkitTransform = + target.style.transform = + 'translate(' + x + 'px, ' + y + 'px)'; + + // update the posiion attributes + target.setAttribute('data-x', x); + target.setAttribute('data-y', y); + + if (!target.classList.contains('window-front')) { + console.log($('.window-front')); + $('.window-front').removeClass('window-front'); + console.log($('.window-front')); + target.classList.add('window-front'); + } +} function newwindow(id, title, content, height, width) { - // Other windows are not in from - $('#windows div').removeClass('window-front'); + // Other windows are not in front + console.log($('.window-front')); + $('.window-front').removeClass('window-front'); + console.log($('.window-front')); var mywindow = $(`#windows #window_${id}`); var itsnew = false; - var maxheight = $(window).height() * 0.9; + var maxheight = $(window).height() * 0.8; var maxwidth = $(window).width() * 0.6; // add the new one if (mywindow.length == 0) { mywindow = $( - `
-
-
-
-