@fe6/water-pro/es/color-picker/colors/libs/moveable.js

An enterprise-class UI design language and Vue-based implementation

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as _ from '../utils/utils';

var clamp = function clamp(v) {
  return Math.max(Math.min(v, 1), 0);
};

export default function Moveable(opt) {
  var that = {
    // Assign default values
    options: _extends({
      lock: null,
      onchange: function onchange() {
        return 0;
      },
      onstop: function onstop() {
        return 0;
      }
    }, opt),
    _keyboard: function _keyboard(e) {
      var options = that.options;
      var type = e.type,
          key = e.key; // Check to see if the Movable is focused and then move it based on arrow key inputs
      // For improved accessibility

      if (document.activeElement === options.wrapper) {
        var lock = that.options.lock;
        var up = key === 'ArrowUp';
        var right = key === 'ArrowRight';
        var down = key === 'ArrowDown';
        var left = key === 'ArrowLeft';

        if (type === 'keydown' && (up || right || down || left)) {
          var xm = 0;
          var ym = 0;

          if (lock === 'v') {
            xm = up || right ? 1 : -1;
          } else if (lock === 'h') {
            xm = up || right ? -1 : 1;
          } else {
            ym = up ? -1 : down ? 1 : 0;
            xm = left ? -1 : right ? 1 : 0;
          }

          that.update(clamp(that.cache.x + 0.01 * xm), clamp(that.cache.y + 0.01 * ym));
          e.preventDefault();
        } else if (key.startsWith('Arrow')) {
          that.options.onstop();
          e.preventDefault();
        }
      }
    },
    _tapstart: function _tapstart(evt) {
      _.on(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);

      _.on(document, ['mousemove', 'touchmove'], that._tapmove);

      if (evt.cancelable) {
        evt.preventDefault();
      } // Trigger


      that._tapmove(evt);
    },
    _tapmove: function _tapmove(evt) {
      var options = that.options,
          cache = that.cache;
      var lock = options.lock,
          element = options.element,
          wrapper = options.wrapper;
      var b = wrapper.getBoundingClientRect();
      var x = 0;
      var y = 0;

      if (evt) {
        var touch = evt && evt.touches && evt.touches[0];
        x = evt ? (touch || evt).clientX : 0;
        y = evt ? (touch || evt).clientY : 0; // Reset to bounds

        if (x < b.left) {
          x = b.left;
        } else if (x > b.left + b.width) {
          x = b.left + b.width;
        }

        if (y < b.top) {
          y = b.top;
        } else if (y > b.top + b.height) {
          y = b.top + b.height;
        } // Normalize


        x -= b.left;
        y -= b.top;
      } else if (cache) {
        x = cache.x * b.width;
        y = cache.y * b.height;
      }

      if (lock !== 'h') {
        element.style.left = "calc(".concat(x / b.width * 100, "% - ").concat(element.offsetWidth / 2, "px)");
      }

      if (lock !== 'v') {
        element.style.top = "calc(".concat(y / b.height * 100, "% - ").concat(element.offsetHeight / 2, "px)");
      }

      that.cache = {
        x: x / b.width,
        y: y / b.height
      };
      var cx = clamp(x / b.width);
      var cy = clamp(y / b.height);

      switch (lock) {
        case 'v':
          return options.onchange(cx);

        case 'h':
          return options.onchange(cy);

        default:
          return options.onchange(cx, cy);
      }
    },
    _tapstop: function _tapstop() {
      that.options.onstop();

      _.off(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);

      _.off(document, ['mousemove', 'touchmove'], that._tapmove);
    },
    trigger: function trigger() {
      that._tapmove();
    },
    update: function update() {
      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

      var _that$options$wrapper = that.options.wrapper.getBoundingClientRect(),
          left = _that$options$wrapper.left,
          top = _that$options$wrapper.top,
          width = _that$options$wrapper.width,
          height = _that$options$wrapper.height;

      if (that.options.lock === 'h') {
        y = x;
      }

      that._tapmove({
        clientX: left + width * x,
        clientY: top + height * y
      });
    },
    destroy: function destroy() {
      var options = that.options,
          _tapstart = that._tapstart,
          _keyboard = that._keyboard;

      _.off(document, ['keydown', 'keyup'], _keyboard);

      _.off([options.wrapper, options.element], 'mousedown', _tapstart);

      _.off([options.wrapper, options.element], 'touchstart', _tapstart, {
        passive: false
      });
    }
  }; // Initilize

  var options = that.options,
      _tapstart = that._tapstart,
      _keyboard = that._keyboard;

  _.on([options.wrapper, options.element], 'mousedown', _tapstart);

  _.on([options.wrapper, options.element], 'touchstart', _tapstart, {
    passive: false
  });

  _.on(document, ['keydown', 'keyup'], _keyboard);

  return that;
}