HarryStevens/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Resizing divs in Vanilla JavaScript.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      width: 960px;
      height: 500px;
      outline: 1px solid gray;
    }
    #box-1 {
      width: 300px;
      height: 150px;
      left: 300px;
      top: 125px;
      background: steelblue;
    }
    #box-2 {
      width: 150px;
      height: 300px;
      left: 375px;
      top: 100px;
      background: tomato;
    }
    .box {
      opacity: .8;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="box-1" class="box"></div>
  <div id="box-2" class="box"></div>
  <script src="resize.js"></script>
  <script>
    resize("#box-1");
    resize("#box-2");
  </script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## resize.js
function resize(selector){
  var element = document.querySelector(selector);
  element.style.position = "absolute";
  var d = 8; // distance from cursor to border to active resizing
  var rect = element.getBoundingClientRect();
  var rectLeft = rect.x || rect.left;
  var rectWidth = rect.width;
  var rectRight = rectLeft + rectWidth;
  var rectTop = rect.y || rect.top;
  var rectHeight = rect.height;
  var rectBottom = rectTop + rectHeight;

  var isLeft = false;
  var isRight = false;
  var isTop = false;
  var isBottom = false;

  var isResizable = _ => { isLeft || isRight || isTop || isBottom; };
  var isResizing = false;
  var resizeStarted = false;

  var isMouseDown = false;

  function cursorStyle(){
    if (!isMouseDown){
      element.style.cursor =
        isTop && isLeft ? "nwse-resize" :
        isTop && isRight ? "nesw-resize" :
        isBottom && isRight ? "nwse-resize" :
        isBottom && isLeft ? "nesw-resize" :
        isLeft ? "ew-resize" :
        isRight ? "ew-resize" :
        isTop ? "ns-resize" :
        isBottom ? "ns-resize" :
        "default";
    }
  }

  // just for testing
  function cursorName(){
    return isTop && isLeft ? "TopLeft" :
      isTop && isRight ? "TopRight" :
      Bottom && Right ? "BottomRight" :
      Bottom && Left ? "BottomLeft" :
      Left ? "Left" :
      Right ? "Right" :
      Top ? "Top" :
      Bottom ? "Bottom" :
      "nothing";
  }

  window.addEventListener("mousemove", _ => {
    mouseX = event.clientX;
    mouseY = event.clientY;

    if (!isResizing){
      isLeft = Math.abs(mouseX - rectLeft) < d;
      isRight = Math.abs(mouseX - rectRight) < d;
      isTop = Math.abs(mouseY - rectTop) < d;
      isBottom = Math.abs(mouseY - rectBottom) < d;
    }

    cursorStyle();

    isResizing = isMouseDown && isResizable;
    if (isResizing){

      if (!resizeStarted){
        resizeStarted = true;
      }

      if (isRight){
        resizeRight();
      }

      if (isLeft){
        resizeLeft();
      }

      if (isTop){
        resizeTop();
      }

      if (isBottom){
        resizeBottom();
      }

      function resizeRight(){
        rectRight = mouseX;
        rectWidth = rectRight - rectLeft;
        element.style.width = rectWidth + "px";
      }

      function resizeLeft(){
        rectLeft = mouseX >= rectRight ? rectRight : mouseX;
        rectWidth = rectRight - rectLeft;
        element.style.left = rectLeft + "px";
        element.style.width = rectWidth + "px";
      }

      function resizeTop(){
        rectTop = mouseY >= rectBottom ? rectBottom : mouseY;
        rectHeight = rectBottom - rectTop;
        element.style.top = rectTop + "px";
        element.style.height = rectHeight + "px";
      }

      function resizeBottom(){
        rectBottom = mouseY;
        rectHeight = rectBottom - rectTop;
        element.style.height = rectHeight + "px";
      }

    }
  });

  element.onmousedown = _ => {
    isMouseDown = true;
  }

  element.onmouseup = _ => {
    isMouseDown = false;
  }
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	width: 960px;
	height: 500px;
	outline: 1px solid gray;
	}
	#box-1 {
	width: 300px;
	height: 150px;
	left: 300px;
	top: 125px;
	background: steelblue;
	}
	#box-2 {
	width: 150px;
	height: 300px;
	left: 375px;
	top: 100px;
	background: tomato;
	}
	.box {
	opacity: .8;
	border: 2px solid black;
	}
	</style>
	</head>
	<body>
	<div id="box-1" class="box"></div>
	<div id="box-2" class="box"></div>
	<script src="resize.js"></script>
	<script>
	resize("#box-1");
	resize("#box-2");
	</script>
	</body>
	</html>
	function resize(selector){
	var element = document.querySelector(selector);
	element.style.position = "absolute";
	var d = 8; // distance from cursor to border to active resizing
	var rect = element.getBoundingClientRect();
	var rectLeft = rect.x \|\| rect.left;
	var rectWidth = rect.width;
	var rectRight = rectLeft + rectWidth;
	var rectTop = rect.y \|\| rect.top;
	var rectHeight = rect.height;
	var rectBottom = rectTop + rectHeight;

	var isLeft = false;
	var isRight = false;
	var isTop = false;
	var isBottom = false;

	var isResizable = _ => { isLeft \|\| isRight \|\| isTop \|\| isBottom; };
	var isResizing = false;
	var resizeStarted = false;

	var isMouseDown = false;

	function cursorStyle(){
	if (!isMouseDown){
	element.style.cursor =
	isTop && isLeft ? "nwse-resize" :
	isTop && isRight ? "nesw-resize" :
	isBottom && isRight ? "nwse-resize" :
	isBottom && isLeft ? "nesw-resize" :
	isLeft ? "ew-resize" :
	isRight ? "ew-resize" :
	isTop ? "ns-resize" :
	isBottom ? "ns-resize" :
	"default";
	}
	}

	// just for testing
	function cursorName(){
	return isTop && isLeft ? "TopLeft" :
	isTop && isRight ? "TopRight" :
	Bottom && Right ? "BottomRight" :
	Bottom && Left ? "BottomLeft" :
	Left ? "Left" :
	Right ? "Right" :
	Top ? "Top" :
	Bottom ? "Bottom" :
	"nothing";
	}

	window.addEventListener("mousemove", _ => {
	mouseX = event.clientX;
	mouseY = event.clientY;

	if (!isResizing){
	isLeft = Math.abs(mouseX - rectLeft) < d;
	isRight = Math.abs(mouseX - rectRight) < d;
	isTop = Math.abs(mouseY - rectTop) < d;
	isBottom = Math.abs(mouseY - rectBottom) < d;
	}

	cursorStyle();

	isResizing = isMouseDown && isResizable;
	if (isResizing){

	if (!resizeStarted){
	resizeStarted = true;
	}

	if (isRight){
	resizeRight();
	}

	if (isLeft){
	resizeLeft();
	}

	if (isTop){
	resizeTop();
	}

	if (isBottom){
	resizeBottom();
	}

	function resizeRight(){
	rectRight = mouseX;
	rectWidth = rectRight - rectLeft;
	element.style.width = rectWidth + "px";
	}

	function resizeLeft(){
	rectLeft = mouseX >= rectRight ? rectRight : mouseX;
	rectWidth = rectRight - rectLeft;
	element.style.left = rectLeft + "px";
	element.style.width = rectWidth + "px";
	}

	function resizeTop(){
	rectTop = mouseY >= rectBottom ? rectBottom : mouseY;
	rectHeight = rectBottom - rectTop;
	element.style.top = rectTop + "px";
	element.style.height = rectHeight + "px";
	}

	function resizeBottom(){
	rectBottom = mouseY;
	rectHeight = rectBottom - rectTop;
	element.style.height = rectHeight + "px";
	}

	}
	});

	element.onmousedown = _ => {
	isMouseDown = true;
	}

	element.onmouseup = _ => {
	isMouseDown = false;
	}
	}