Rotating Knob Button

vanilla js

by fxi

HTML

<div id='ctrl'>
</div>
<div id='angle'>
  0
</div>

CSS

body {
  background-color: #474747;

}

JavaScript

var elCtrContainer = document.getElementById('ctrl');
var elAngle = document.getElementById('angle');

var options = {
  lineColor: '#fff',
  radius: 150,
  handleRadius: 15,
  handleOffst: 100,
  angleStart: 0,
  angleMin: -Infinity,
  angleMax: Infinity,
  onRotate: console.log,
}

class RadialController {
  constructor(elTarget, opt) {
    this.opt = Object.assign({}, options, opt);
    this.el = elTarget;
    this._angle = this.opt.angleStart;
    this._width = 0;
    this._i = 0;
    this._height = 0;
    this._toDeg = (2 * Math.PI) / 360;
    this._toRad = Math.PI / 180;
    this._previousPoint = {};
    this._listeners = [];
    this.init();

  }

  destroy() {
    this._removeListener('all');
    this.elCanvas.remove();
  }
  get angle() {
    return this._angle;
  }
  get rect() {
    this._rect = this._rect || this.elCanvas.getBoundingClientRect();
    return this._rect;
  }
  get width() {
    return this._width || this.rect.width;
  }
  get height() {
    return this._height || this.rect.height;

  }
  get absoluteCenter() {
    return {
      x: this.rect.left + (this.rect.width / 2),
      y: this.rect.top + (this.rect.height / 2)
    }
  }
  get center() {
    return {
      x: this.width / 2,
      y: this.height / 2
    }
  }
  updateDim() {
    var o = this.opt;
    var pr = window.devicePixelRatio;
    this._width = o.radius * 2 * pr;
    this._height = o.radius * 2 * pr;
    this.elCanvas.width = this.width;
    this.elCanvas.height = this.height;
    this.elCanvas.style.width = this.width / pr + 'px';
    this.elCanvas.style.height = this.height / pr + 'px';
  }
  init() {
    this.elCanvas = document.createElement('canvas');
    this.el.appendChild(this.elCanvas);
    this.updateDim();
    this.initListeners();
    this.ctx = this.elCanvas.getContext('2d');
    this.draw();
  }
  initListeners() {
    this._addListener('base', 'wheel', this.elCanvas, this._onWheel);
    this._addListener('base', 'mousedown', this.elCanvas,...