Dealing with zooms and mouse dragging selections

by Génesis García Morilla

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="zoom">
  <button>+</button>
  <button>⚀</button>
  <button>-</button>
</div>
<ol id="selectable">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ol>

CSS

* {
    margin: 0;
    padding: 0;
  }
  
  body {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  #zoom {
    margin: 10px;
  }
  
  button {
    font-size: 14px;
    border-radius: 20%;
    border: 3px solid #ccc;
    padding: 10px 15px;
    cursor: pointer;
    color: #50514F;
    user-select: none;
  }
  
  button:focus {
    outline: none;
  }
  
  #selectable {
    list-style-type: none;
    width: 100%;
    background: darkseagreen;
    transform: scale(1.0);
    transform-origin: 0 0;
    display: inline-flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }
  
  #selectable .ui-selecting,
  #selectable .ui-selected {
    background: #FECA40;
  }
  
  #selectable li {
    width: 80px;
    height: 80px;
    margin: 2px;
    font-size: 3rem;
    color: darkslategrey;
    text-align: center;
    line-height: 1.5;
    user-select: none;
  }

JavaScript

const $s = $('#selectable');
$s.selectable();

$('#zoom > button:nth-child(1)').click(e => {
  const scale =
    Number($s.css("transform").match(/-?[\d\.]+/g)[0]) + 0.2;

  if (scale > 5.0) return;

  $s.css("transform", `scale(${scale})`);
  $s.css("width", 1 / scale * 100 + '%');
});

$('#zoom > button:nth-child(2)').click(e => {
  $s.css('transform', 'scale(1.0)');
  $s.css('width', '100%');
});

$('#zoom > button:nth-child(3)').click(e => {
  const scale =
    Number($s.css("transform").match(/-?[\d\.]+/g)[0]) - 0.2;

  if (scale < 0.2) return;

  $s.css('transform', `scale(${scale})`);
  $s.css('width', 1 / scale * 100 + '%');
});