[CAUSEWAY-2568] [Wish] Make sidebar resizable

• Type: Wish
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Component/s: Viewer Wicket
• Assignee: Unassigned
• Reporter: Daniel Keir Haywood
• Created: 06/Mar/21 12:40
• Updated: 29/Apr/22 07:01

Description

possible implementation:

https://codepen.io/Zodiase/pen/qmjyKL

HTML:

<div class="container">
  <aside>
    Aside
    <hr />
  </aside>
  <div class="resize-handle--x" data-target="aside"></div>
  <main>
    Main
    <hr />
  </main>
</div> 

CSS:

 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;
  }
}

JS:

 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');
  }
});