resize test

by fxi

HTML

<div id="resizable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis bibendum nulla ac volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus a magna at maximus. Donec in euismod diam. Vivamus mattis feugiat nisi, non sagittis odio dignissim at. Nam feugiat pulvinar enim, non lobortis risus porttitor non. Morbi sit amet elementum nibh. Maecenas non ex nec justo interdum gravida quis ac libero. Aenean egestas malesuada libero. Sed in lacus in lorem consequat fermentum. Nunc convallis, turpis eget dignissim vulputate, enim nulla ultricies turpis, nec accumsan urna ipsum et purus. Aliquam id mattis elit. Curabitur nunc ipsum, molestie sed tortor sed, iaculis cursus libero. Etiam sed magna accumsan, fermentum turpis sit amet, pulvinar purus.</div>

JavaScript

class Resizable {
  constructor(el) {
    let re = this;
    re.el = el;
    re.init();
  }

  init() {
    let re = this;
    re.styleOrig = re.el.style;
    re.el.style.position = "relative";
    re.el.style.overflow = "auto";
    re.elHandle = cHandle();
    re.el.appendChild(re.elHandle);
    re.destroy = re.destroy.bind(re);
    re.onMouseDown = re._onMouseDown.bind(re);
    re.onMouseUp = re._onMouseUp.bind(re);
    re.onMouseMove = re._onMouseMove.bind(re);
    re.elHandle.addEventListener('mousedown', re.onMouseDown);
    re.x = 0;
    re.y = 0;
  }

  destroy() {
    let re = this;
    re.el.style = re.styleOrig;
    re.elHandle.remove();
    re.elHandle.removeEventListener('mousedown', re.onMouseDown);
    window.removeEventListener('mouseup', re.onMouseUp);
    window.removeEventListener('mousemove', re.onMouseMove);
  }
  _onMouseDown(e) {
    let re = this;
    e.stopImmediatePropagation();
    e.stopPropagation();
    console.log('add after down');
    window.addEventListener('mouseup', re.onMouseUp);
    window.addEventListener('mousemove', re.onMouseMove);
    re.x = e.clientX;
    re.y = e.clientY;
    re.r = re.el.getBoundingClientRect();
    re.w = re.r.width;
    re.h = re.r.height;
  }
  _onMouseUp(e) {
    let re = this;
    e.stopImmediatePropagation();
    e.stopPropagation();
    console.log('remove after up');
    window.removeEventListener('mouseup', re.onMouseUp);
    window.removeEventListener('mousemove', re.onMouseMove);
  }
  _onMouseMove(e) {
    let re = this;
    e.stopImmediatePropagation();
    e.stopPropagation();
    re.dX = e.clientX - re.x;
    re.dY = e.clientY - re.y;
    console.log({
      dX: re.dX,
      dY: re.dY
    });
    
    re.el.style.width = re.w + re.dX + 'px';
    re.el.style.height = re.h + re.dY + 'px';
  }

}

function cHandle() {
  let elHandle = document.createElement('div');
  elHandle.style = `
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 5px;
   height: 5px;
   margin: 2px;
  ...