From 4520c8a12010d1f9918de99f70b2d70af0977c6f Mon Sep 17 00:00:00 2001 From: David Mosbach Date: Sun, 28 May 2023 13:36:02 +0200 Subject: [PATCH] height of sidebar content is dynamically adjusted --- editor.css | 15 ++++++++++++--- editor.html | 21 ++++++++++----------- editor.js | 10 +++++++++- 3 files changed, 31 insertions(+), 15 deletions(-) diff --git a/editor.css b/editor.css index 3e6b451..cff2e50 100644 --- a/editor.css +++ b/editor.css @@ -66,16 +66,25 @@ body { } #sidecontent { - /* position: absolute; + position: absolute; + top: 20px; bottom: 20px; left: 20px; - right: 20px; */ + right: 20px; overflow-y: auto; overflow-x: hidden; text-align: justify; hyphens: auto; word-wrap: break-word; - height: 80%; + /* height: 80%; */ +} + +#sidebuttons { + position: absolute; + bottom: 20px; + left: 20px; + right: 20px; + padding-top: 20px; } .contextmenu { diff --git a/editor.html b/editor.html index 08de2ce..baacbef 100644 --- a/editor.html +++ b/editor.html @@ -10,12 +10,7 @@
- -
+
@@ -25,7 +20,7 @@
-
+

Hello

@@ -35,8 +30,12 @@
+
+ + +
-
+
@@ -50,7 +49,7 @@  New Edge
-
+
@@ -86,7 +85,7 @@  Delete
-
+
@@ -110,7 +109,7 @@  Delete
-
+
diff --git a/editor.js b/editor.js index 9389441..ddaddfc 100644 --- a/editor.js +++ b/editor.js @@ -185,6 +185,8 @@ var selection = null; // The currently selected node/edge. var rightSelection = null; // The currently right clicked node/edge. const sidePanel = document.getElementById('sidepanel'); const sideContent = document.getElementById('sidecontent'); +const sideHeading = document.getElementById('sideheading'); +const sideButtons = document.getElementById('sidebuttons'); //Context menus const contextMenuBg = document.getElementById('ctmenubg'); //Click on background const contextMenuSt = document.getElementById('ctmenust'); //Click on state @@ -313,11 +315,17 @@ function select(item) { while (sideContent.firstChild) sideContent.removeChild(sideContent.lastChild); sidePanel.style.display = 'block' - document.getElementById('sideheading').innerHTML = item.name; + sideHeading.innerHTML = item.name; var data = document.createElement('div'); var content = generatePanelContent(selection); content.forEach(c => data.appendChild(c)); sideContent.appendChild(data); + var spStyle = window.getComputedStyle(sidePanel); + var shStyle = window.getComputedStyle(sideHeading); + sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom); + var sbStyle = window.getComputedStyle(sideButtons); + sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom); + // console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom); } else { sidePanel.style.display = 'none'; }