JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<p>while holding down shift, left-click to re-size a black box!</p>  
<p>release shift while holding down the left-click button to make the box persist!</p>    
<div id="container">
</div>

CSS

#container {
    height:100%;
    width:100%;
    position:fixed;
}

.container__cursor--crosshair {
    cursor: crosshair;
}

.container__cursor--auto {
    cursor: auto;
}

#box {
    background-color: black;
    position: fixed;
}

JavaScript

/** 
* Inserts div into document.body and listens for click/drag when certain key is held down
* Expands perimeter of inserted div on mouse drag w/ key hold
* 
* //PAYLOAD PROPERTIES
* @toggleOn {string}: css class to toggle (modifies container)
* @toggleOff {string}: css class to toggle back to 
* @container {string}: container div id whose class we are modifying
* @element {string}: id of div box we are manipulating
* @target {dom element}: dom target, usually window
* @key {string}: window event property (e.ctrlKey) that must be satisfied with mousedown
* @which {integer}: keycode that triggers toggleOn
*/

var ExpandPerimeterOnDrag = (function(app){ 

  return function app(payload) { 

    //Insert the box into the dom

    this.domElement = document.createElement("div");
    this.domElement.id = payload.element;
    document.body.appendChild(this.domElement);

    //Extract properties from payload object

    this.container = document.getElementById(payload.container) || window;   
    this.box = document.getElementById(payload.element);
    this.element = payload.element;
    this.toggleOn = payload.toggleOn;
    this.toggleOff = payload.toggleOff;
    this.target = payload.target;
    this.key = payload.key;
    this.which = payload.which;
    this.store = {};
    var self = this;

    //Methods

    this.setDimensions = function(obj) {
      this.box.style.top = obj.top+"px";
      this.box.style.left = obj.left+"px";
      this.box.style.height = obj.height+"px";
      this.box.style.width = obj.width+"px";
    };

    this.keyToggle = function(tog, e) {
      if (e.which === this.which) {
        if (tog === true) {
          this.container.className = this.toggleOn;    
        } else if (tog === false) {
          this.container.className = this.toggleOff;
        }
      } 
    };

    this.mouseDown = function(e) {
      this.setDimensions({ top: 0, left: 0, height: 0, width: 0 });
      this.store.drag = true;
      this.store.xOnClick = e.clientX;...