SAP C4C resize panels

Inspired by: https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup

by katalin_2003

HTML

<body>
  <div id="mainShell-container">
  	<div id="mainShell-container-pane"> left content! </div>
    <div id="mainShell-container-canvas">
      <div id="dragElement"></div> right content!
    </div>
  </div>
</body>

<!-- container -> div -> mainShell-container -->
<!-- left_panel -> aside -> mainShell-container-pane -->
<!-- right_panel -> section -> mainShell-container-canvas -->

CSS

body {
  font-family: Helvetica, Arial;
  font-size: 12px;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#mainShell-container {
  width: 100%;	/* OK */
  height: 100%; /* OK */
}

#mainShell-container-pane {
  position: absolute;	/* OK */
  left: 0;				/* OK */
  top: 0;				/* OK */
  bottom: 0;			/* OK */
  right: 100px;			/* OK */
  background: grey;
  /* Prevent SAP's logic from resizing the <aside> to 15rem */
  width: unset !important;
}

#mainShell-container-canvas {
  position: absolute;	/* OK */
  right: 0;				/* OK */
  top: 0;				/* OK */
  bottom: 0;			/* OK */
  width: 200px;
  color: #fff;
  background: black;
}

#dragElement {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}

JavaScript

var isResizing = false;

(function() {
	var mainShellContainer = document.getElementById("mainShell-container"),
	left = document.getElementById("mainShell-container-pane"),
	right = document.getElementById("mainShell-container-canvas"),
	dragElement = document.getElementById("dragElement");

	dragElement.onmousedown = function(e) {
		isResizing = true;
	};

	document.onmousemove = function(e) {
		// we don't want to do anything if we aren't resizing.
		if (!isResizing) {
			return;
		}

		var offsetRight = mainShellContainer.clientWidth - (e.clientX - mainShellContainer.offsetLeft);

		left.style.right = offsetRight + "px";
		right.style.width = offsetRight + "px";
		
		// Add "return false" to the end of mousemove callback to prevent text selection in the divs.
		return false;
	}

	document.onmouseup = function(e) {
		// stop resizing
		isResizing = false;
	}
})();