Javascript-форум - Повернуть элемент мышкой

У меня есть такой скрипт:

<style>
#rotate {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: linear-gradient(0deg, red, green);
}
.active {
border-radius: 100%;
}
</style>

<div id="rotate"></div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>
(function() {
  var init, rotate, start, stop,
    active = false,
    angle = 0,
    rotation = 0,
    startAngle = 0,
    center = {
      x: 0,
      y: 0
    },
    R2D = 180 / Math.PI,
    rot = document.getElementById('rotate');

  init = function() {
    rot.addEventListener("mousedown", start, false);
    $(document).bind('mousemove', function(event) {
      if (active === true) {
        event.preventDefault();
        rotate(event);
      }
    });
    $(document).bind('mouseup', function(event) {
      event.preventDefault();
      stop(event);
    });
  };

  start = function(e) {
    e.preventDefault();
    var bb = this.getBoundingClientRect(),
      t = bb.top,
      l = bb.left,
      h = bb.height,
      w = bb.width,
      x, y;
    center = {
      x: l + (w / 2),
      y: t + (h / 2)
    };
    x = e.clientX - center.x;
    y = e.clientY - center.y;
    startAngle = R2D * Math.atan2(y, x);
    return active = true;
  };

  rotate = function(e) {
    e.preventDefault();
    var x = e.clientX - center.x,
      y = e.clientY - center.y,
      d = R2D * Math.atan2(y, x);
    rotation = d - startAngle;
    return rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)";
  };

  stop = function() {
    angle += rotation;
    alert(angle);
    return active = false;
  };

  init();

}).call(this);
</script>

С помощью него я мышкой поворачиваю элемент.

Помогите, пожалуйста, сделать следующее. Мне нужно, чтобы я мог повернуть элемент только на 180deg. При этом:

- Если начинаешь поворачивать, и если повернул меньше, чем на 90deg и отпустил элемент, то он возвращается на место;

- Если начинаешь поворачивать, и если повернул больше, чем на 90deg и отпустил элемент, то он поворачивается до конца (до 180deg). В этом случае элементу добавляется дополнительный класс (.active). И сразу после этого ближайшие, скажем 60сек, элемент поворачивать мы не можем. А спустя 60сек этот дополнительный класс удаляется, и мы снова можем поворачивать элемент.

Как можно такое сделать, прошу помощи. Спасибо!

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <style> #rotate { width: 200px; height: 200px; margin: 50px auto; background: linear-gradient(0deg, red, green); } .active { border-radius: 100%; } .animate{ transition: transform 1s; border: 5px solid #0000FF; } </style> <div id="rotate"></div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script> (function() { var init, rotate, start, stop, active = false, angle = 0, rotation = 0, startAngle = 0, center = { x: 0, y: 0 }, R2D = 180 / Math.PI, rot = document.getElementById('rotate'); init = function() { rot.addEventListener("mousedown", start, false); $(document).bind('mousemove', function(event) { if (active === true) { event.preventDefault(); rotate(event); } }); $(document).bind('mouseup', function(event) { event.preventDefault(); stop(event); }); }; start = function(e) { e.preventDefault(); var bb = this.getBoundingClientRect(), t = bb.top, l = bb.left, h = bb.height, w = bb.width, x, y; center = { x: l + (w / 2), y: t + (h / 2) }; x = e.clientX - center.x; y = e.clientY - center.y; startAngle = R2D * Math.atan2(y, x); return active = true; }; rotate = function(e) { if(rot.classList.contains("animate")) return; e.preventDefault(); var x = e.clientX - center.x, y = e.clientY - center.y, d = R2D * Math.atan2(y, x); rotation = d - startAngle; return rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)"; }; stop = function() { if(rot.classList.contains("animate")) return; var max = Math.abs(rotation) > 90; rotation = (max ? 180 : 0) * (rotation > 0 ? 1 : -1); rot.classList.add("animate"); window.setTimeout(_ => { rot.classList.remove("animate"); active = false; }, max ? 10000 : 1000) angle += rotation; rot.style.webkitTransform = "rotate(" + angle + "deg)"; }; init(); }).call(this); </script> </body> </html>