[jira] [Created] (ISIS-2568) Make sidebar resizable

[Daniel Keir Haywood (Jira)]

Daniel Keir Haywood created ISIS-2568:
-----------------------------------------

             Summary: Make sidebar resizable
                 Key: ISIS-2568
                 URL: https://issues.apache.org/jira/browse/ISIS-2568
             Project: Isis
          Issue Type: Improvement
          Components: Isis Viewer Wicket
            Reporter: Daniel Keir Haywood


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.3.4#803005)