[ https://issues.apache.org/jira/browse/ISIS-2568?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Andi Huber updated ISIS-2568: ----------------------------- Summary: [Wish] Make sidebar resizable (was: Make sidebar resizable) > [Wish] Make sidebar resizable > ----------------------------- > > Key: ISIS-2568 > URL: https://issues.apache.org/jira/browse/ISIS-2568 > Project: Isis > Issue Type: Wish > Components: Isis Viewer Wicket > Reporter: Daniel Keir Haywood > Priority: Minor > > possible implementation: > [https://codepen.io/Zodiase/pen/qmjyKL] > HTML: > {code:java} > <div class="container"> > <aside> > Aside > <hr /> > </aside> > <div class="resize-handle--x" data-target="aside"></div> > <main> > Main > <hr /> > </main> > </div> {code} > CSS: > {code:java} > html { > height: 100%; > } > body { > box-sizing: border-box; > height: 100%; > margin: 0; > padding: 30px; > background-color: black; > }.container { > height: 100%; > overflow: hidden; > background-color: white; > }// Flexbox setup. > .container { > display: -ms-flexbox; > display: -webkit-flex; > display: flex; > -webkit-flex-direction: row; > -ms-flex-direction: row; > flex-direction: row; > -webkit-flex-wrap: nowrap; > -ms-flex-wrap: nowrap; > flex-wrap: nowrap; > -webkit-justify-content: flex-start; > -ms-flex-pack: start; > justify-content: flex-start; > -webkit-align-content: stretch; > -ms-flex-line-pack: stretch; > align-content: stretch; > -webkit-align-items: stretch; > -ms-flex-align: stretch; > align-items: stretch; > > & > aside { > -webkit-order: 0; > -ms-flex-order: 0; > order: 0; > -webkit-flex: 0 0 auto; > -ms-flex: 0 0 auto; > flex: 0 0 auto; > -webkit-align-self: auto; > -ms-flex-item-align: auto; > align-self: auto; > } > > & > main { > -webkit-order: 0; > -ms-flex-order: 0; > order: 0; > -webkit-flex: 1 1 auto; > -ms-flex: 1 1 auto; > flex: 1 1 auto; > -webkit-align-self: auto; > -ms-flex-item-align: auto; > align-self: auto; > } > }.container > aside, > .container > main { > padding: 10px; > overflow: auto; > }.resize-handle--x { > -webkit-flex: 0 0 auto; > -ms-flex: 0 0 auto; > flex: 0 0 auto; > > position: relative; > box-sizing: border-box; > width: 3px; > height: 100%; > border-left-width: 1px; > border-left-style: solid; > border-left-color: black; > border-right-width: 1px; > border-right-style: solid; > border-right-color: black; > cursor: ew-resize; > > -webkit-touch-callout: none; > -webkit-user-select: none; > -khtml-user-select: none; > -moz-user-select: none; > -ms-user-select: none; > user-select: none; > > @handleSize: 18px; > @handleThickness: 1px; > @handleDistance: 2px; > > &:before { > content: ""; > position: absolute; > z-index: 1; > top: 50%; > right: 100%; > height: @handleSize; > width: @handleDistance; > margin-top: -@handleSize/2; > border-left-color: black; > border-left-width: @handleThickness; > border-left-style: solid; > } > &:after { > content: ""; > position: absolute; > z-index: 1; > top: 50%; > left: 100%; > height: @handleSize; > width: @handleDistance; > margin-top: -@handleSize/2; > border-right-color: black; > border-right-width: @handleThickness; > border-right-style: solid; > } > } > {code} > JS: > {code:java} > const selectTarget = (fromElement, selector) => { > if (!(fromElement instanceof HTMLElement)) { > return null; > } return fromElement.querySelector(selector); > };const resizeData = { > tracking: false, > startWidth: null, > startCursorScreenX: null, > handleWidth: 10, > resizeTarget: null, > parentElement: null, > maxWidth: null, > };$(document.body).on('mousedown', '.resize-handle--x', null, (event) => { > if (event.button !== 0) { > return; > } event.preventDefault(); > event.stopPropagation(); const handleElement = event.currentTarget; > > if (!handleElement.parentElement) { > console.error(new Error("Parent element not found.")); > return; > } > > // Use the target selector on the handle to get the resize target. > const targetSelector = handleElement.getAttribute('data-target'); > const targetElement = selectTarget(handleElement.parentElement, > targetSelector); if (!targetElement) { > console.error(new Error("Resize target element not found.")); > return; > } > > resizeData.startWidth = $(targetElement).outerWidth(); > resizeData.startCursorScreenX = event.screenX; > resizeData.resizeTarget = targetElement; > resizeData.parentElement = handleElement.parentElement; > resizeData.maxWidth = $(handleElement.parentElement).innerWidth() - > resizeData.handleWidth; > resizeData.tracking = true; console.log('tracking started'); > });$(window).on('mousemove', null, null, _.debounce((event) => { > if (resizeData.tracking) { > const cursorScreenXDelta = event.screenX - resizeData.startCursorScreenX; > const newWidth = Math.min(resizeData.startWidth + cursorScreenXDelta, > resizeData.maxWidth); > > $(resizeData.resizeTarget).outerWidth(newWidth); > } > }, 1));$(window).on('mouseup', null, null, (event) => { > if (resizeData.tracking) { > resizeData.tracking = false; console.log('tracking stopped'); > } > });{code} > -- This message was sent by Atlassian Jira (v8.20.7#820007)