[jira] [Updated] (ISIS-2568) [Wish] Make sidebar resizable

["Andi Huber (Jira)" <ji...@apache.org>]

     [ 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)