| Current Path : /home/happyrenas/myreco.online/administration/assets/plugins/custom/draggable/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/happyrenas/myreco.online/administration/assets/plugins/custom/draggable/draggable.bundle.js |
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Draggable", [], factory);
else if(typeof exports === 'object')
exports["Draggable"] = factory();
else
root["Draggable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 66);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(64);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(60);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(51);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(49);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(44);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(47);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(14);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(13);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(12);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(6);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(37);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(4);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(46);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(43);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(41);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(39);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(3);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(18);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(23);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(27);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(30);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(33);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(62);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(59);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(57);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(53);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(63);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(65);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onSortableSorted = Symbol('onSortableSorted');
/**
* SwapAnimation default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @property {Boolean} defaultOptions.horizontal
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
duration: 150,
easingFunction: 'ease-in-out',
horizontal: false
};
/**
* SwapAnimation plugin adds swap animations for sortable
* @class SwapAnimation
* @module SwapAnimation
* @extends AbstractPlugin
*/
class SwapAnimation extends _AbstractPlugin2.default {
/**
* SwapAnimation constructor.
* @constructs SwapAnimation
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* SwapAnimation options
* @property {Object} options
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Last animation frame
* @property {Number} lastAnimationFrame
* @type {Number}
*/
this.lastAnimationFrame = null;
this[onSortableSorted] = this[onSortableSorted].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('sortable:sorted', this[onSortableSorted]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('sortable:sorted', this[onSortableSorted]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.swapAnimation || {};
}
/**
* Sortable sorted handler
* @param {SortableSortedEvent} sortableEvent
* @private
*/
[onSortableSorted]({ oldIndex, newIndex, dragEvent }) {
const { source, over } = dragEvent;
cancelAnimationFrame(this.lastAnimationFrame);
// Can be done in a separate frame
this.lastAnimationFrame = requestAnimationFrame(() => {
if (oldIndex >= newIndex) {
animate(source, over, this.options);
} else {
animate(over, source, this.options);
}
});
}
}
exports.default = SwapAnimation; /**
* Animates two elements
* @param {HTMLElement} from
* @param {HTMLElement} to
* @param {Object} options
* @param {Number} options.duration
* @param {String} options.easingFunction
* @param {String} options.horizontal
* @private
*/
function animate(from, to, { duration, easingFunction, horizontal }) {
for (const element of [from, to]) {
element.style.pointerEvents = 'none';
}
if (horizontal) {
const width = from.offsetWidth;
from.style.transform = `translate3d(${width}px, 0, 0)`;
to.style.transform = `translate3d(-${width}px, 0, 0)`;
} else {
const height = from.offsetHeight;
from.style.transform = `translate3d(0, ${height}px, 0)`;
to.style.transform = `translate3d(0, -${height}px, 0)`;
}
requestAnimationFrame(() => {
for (const element of [from, to]) {
element.addEventListener('transitionend', resetElementOnTransitionEnd);
element.style.transition = `transform ${duration}ms ${easingFunction}`;
element.style.transform = '';
}
});
}
/**
* Resets animation style properties after animation has completed
* @param {Event} event
* @private
*/
function resetElementOnTransitionEnd(event) {
event.target.style.transition = '';
event.target.style.pointerEvents = '';
event.target.removeEventListener('transitionend', resetElementOnTransitionEnd);
}
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _SwapAnimation = __webpack_require__(15);
var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _SwapAnimation2.default;
exports.defaultOptions = _SwapAnimation.defaultOptions;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _SnappableEvent = __webpack_require__(7);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragStop = Symbol('onDragStop');
const onDragOver = Symbol('onDragOver');
const onDragOut = Symbol('onDragOut');
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
/**
* Snappable plugin which snaps draggable elements into place
* @class Snappable
* @module Snappable
* @extends AbstractPlugin
*/
class Snappable extends _AbstractPlugin2.default {
/**
* Snappable constructor.
* @constructs Snappable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of the first source element
* @property {HTMLElement|null} firstSource
*/
this.firstSource = null;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragOut] = this[onDragOut].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:stop', this[onDragStop]).on('drag:over', this[onDragOver]).on('drag:out', this[onDragOut]).on('droppable:over', this[onDragOver]).on('droppable:out', this[onDragOut]).on('mirror:created', this[onMirrorCreated]).on('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:stop', this[onDragStop]).off('drag:over', this[onDragOver]).off('drag:out', this[onDragOut]).off('droppable:over', this[onDragOver]).off('droppable:out', this[onDragOut]).off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.firstSource = event.source;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop]() {
this.firstSource = null;
}
/**
* Drag over handler
* @private
* @param {DragOverEvent|DroppableOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
if (source === this.firstSource) {
this.firstSource = null;
return;
}
const snapInEvent = new _SnappableEvent.SnapInEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapInEvent);
if (snapInEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = 'none';
}
source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
source.classList.add(this.draggable.getClassNameFor('source:placed'));
// Need to cancel this in drag out
setTimeout(() => {
source.classList.remove(this.draggable.getClassNameFor('source:placed'));
}, this.draggable.options.placedTimeout);
}
/**
* Drag out handler
* @private
* @param {DragOutEvent|DroppableOutEvent} event - Drag out event
*/
[onDragOut](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
const snapOutEvent = new _SnappableEvent.SnapOutEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapOutEvent);
if (snapOutEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = '';
}
source.classList.add(this.draggable.getClassNameFor('source:dragging'));
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
}
exports.default = Snappable;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SnapOutEvent = exports.SnapInEvent = exports.SnapEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base snap event
* @class SnapEvent
* @module SnapEvent
* @extends AbstractEvent
*/
class SnapEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this snap event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Snappable element
* @property snappable
* @type {HTMLElement}
* @readonly
*/
get snappable() {
return this.data.snappable;
}
}
exports.SnapEvent = SnapEvent; /**
* Snap in event
* @class SnapInEvent
* @module SnapInEvent
* @extends SnapEvent
*/
SnapEvent.type = 'snap';
class SnapInEvent extends SnapEvent {}
exports.SnapInEvent = SnapInEvent; /**
* Snap out event
* @class SnapOutEvent
* @module SnapOutEvent
* @extends SnapEvent
*/
SnapInEvent.type = 'snap:in';
SnapInEvent.cancelable = true;
class SnapOutEvent extends SnapEvent {}
exports.SnapOutEvent = SnapOutEvent;
SnapOutEvent.type = 'snap:out';
SnapOutEvent.cancelable = true;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(7);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
var _Snappable = __webpack_require__(17);
var _Snappable2 = _interopRequireDefault(_Snappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Snappable2.default;
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
const onDragOver = Symbol('onDragOver');
const resize = Symbol('resize');
/**
* ResizeMirror default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {};
/**
* The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
* @class ResizeMirror
* @module ResizeMirror
* @extends AbstractPlugin
*/
class ResizeMirror extends _AbstractPlugin2.default {
/**
* ResizeMirror constructor.
* @constructs ResizeMirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* ResizeMirror options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* ResizeMirror remembers the last width when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastWidth
*/
this.lastWidth = 0;
/**
* ResizeMirror remembers the last height when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastHeight
*/
this.lastHeight = 0;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('mirror:created', this[onMirrorCreated]).on('drag:over', this[onDragOver]).on('drag:over:container', this[onDragOver]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]).off('drag:over', this[onDragOver]).off('drag:over:container', this[onDragOver]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.resizeMirror || {};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
/**
* Drag over handler
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[onDragOver](dragEvent) {
this[resize](dragEvent);
}
/**
* Resize function for
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[resize]({ overContainer, over }) {
requestAnimationFrame(() => {
if (this.mirror.parentNode !== overContainer) {
overContainer.appendChild(this.mirror);
}
const overElement = over || this.draggable.getDraggableElementsForContainer(overContainer)[0];
if (!overElement) {
return;
}
(0, _utils.requestNextAnimationFrame)(() => {
const overRect = overElement.getBoundingClientRect();
if (this.lastHeight === overRect.height && this.lastWidth === overRect.width) {
return;
}
this.mirror.style.width = `${overRect.width}px`;
this.mirror.style.height = `${overRect.height}px`;
this.lastWidth = overRect.width;
this.lastHeight = overRect.height;
});
});
}
}
exports.default = ResizeMirror;
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _ResizeMirror = __webpack_require__(20);
var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ResizeMirror2.default;
exports.defaultOptions = _ResizeMirror.defaultOptions;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
var _CollidableEvent = __webpack_require__(8);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onRequestAnimationFrame = Symbol('onRequestAnimationFrame');
/**
* Collidable plugin which detects colliding elements while dragging
* @class Collidable
* @module Collidable
* @extends AbstractPlugin
*/
class Collidable extends _AbstractPlugin2.default {
/**
* Collidable constructor.
* @constructs Collidable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} currentlyCollidingElement
* @type {HTMLElement|null}
*/
this.currentlyCollidingElement = null;
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} lastCollidingElement
* @type {HTMLElement|null}
*/
this.lastCollidingElement = null;
/**
* Animation frame for finding colliding elements
* @property {Number|null} currentAnimationFrame
* @type {Number|null}
*/
this.currentAnimationFrame = null;
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onRequestAnimationFrame] = this[onRequestAnimationFrame].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns current collidables based on `collidables` option
* @return {HTMLElement[]}
*/
getCollidables() {
const collidables = this.draggable.options.collidables;
if (typeof collidables === 'string') {
return Array.prototype.slice.call(document.querySelectorAll(collidables));
} else if (collidables instanceof NodeList || collidables instanceof Array) {
return Array.prototype.slice.call(collidables);
} else if (collidables instanceof HTMLElement) {
return [collidables];
} else if (typeof collidables === 'function') {
return collidables();
} else {
return [];
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
const target = event.sensorEvent.target;
this.currentAnimationFrame = requestAnimationFrame(this[onRequestAnimationFrame](target));
if (this.currentlyCollidingElement) {
event.cancel();
}
const collidableInEvent = new _CollidableEvent.CollidableInEvent({
dragEvent: event,
collidingElement: this.currentlyCollidingElement
});
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: this.lastCollidingElement
});
const enteringCollidable = Boolean(this.currentlyCollidingElement && this.lastCollidingElement !== this.currentlyCollidingElement);
const leavingCollidable = Boolean(!this.currentlyCollidingElement && this.lastCollidingElement);
if (enteringCollidable) {
if (this.lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.draggable.trigger(collidableInEvent);
} else if (leavingCollidable) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = this.currentlyCollidingElement;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: lastCollidingElement
});
if (lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = null;
this.currentlyCollidingElement = null;
}
/**
* Animation frame function
* @private
* @param {HTMLElement} target - Current move target
* @return {Function}
*/
[onRequestAnimationFrame](target) {
return () => {
const collidables = this.getCollidables();
this.currentlyCollidingElement = (0, _utils.closest)(target, element => collidables.includes(element));
};
}
}
exports.default = Collidable;
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollidableOutEvent = exports.CollidableInEvent = exports.CollidableEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base collidable event
* @class CollidableEvent
* @module CollidableEvent
* @extends AbstractEvent
*/
class CollidableEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this colliable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.CollidableEvent = CollidableEvent; /**
* Collidable in event
* @class CollidableInEvent
* @module CollidableInEvent
* @extends CollidableEvent
*/
CollidableEvent.type = 'collidable';
class CollidableInEvent extends CollidableEvent {
/**
* Element you are currently colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableInEvent = CollidableInEvent; /**
* Collidable out event
* @class CollidableOutEvent
* @module CollidableOutEvent
* @extends CollidableEvent
*/
CollidableInEvent.type = 'collidable:in';
class CollidableOutEvent extends CollidableEvent {
/**
* Element you were previously colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableOutEvent = CollidableOutEvent;
CollidableOutEvent.type = 'collidable:out';
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(8);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
var _Collidable = __webpack_require__(22);
var _Collidable2 = _interopRequireDefault(_Collidable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Collidable2.default;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Collidable = __webpack_require__(24);
Object.defineProperty(exports, 'Collidable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Collidable).default;
}
});
var _ResizeMirror = __webpack_require__(21);
Object.defineProperty(exports, 'ResizeMirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ResizeMirror).default;
}
});
Object.defineProperty(exports, 'defaultResizeMirrorOptions', {
enumerable: true,
get: function () {
return _ResizeMirror.defaultOptions;
}
});
var _Snappable = __webpack_require__(19);
Object.defineProperty(exports, 'Snappable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Snappable).default;
}
});
var _SwapAnimation = __webpack_require__(16);
Object.defineProperty(exports, 'SwapAnimation', {
enumerable: true,
get: function () {
return _interopRequireDefault(_SwapAnimation).default;
}
});
Object.defineProperty(exports, 'defaultSwapAnimationOptions', {
enumerable: true,
get: function () {
return _SwapAnimation.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(5);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SortableEvent = __webpack_require__(9);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOverContainer = Symbol('onDragOverContainer');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns announcement message when a Draggable element has been sorted with another Draggable element
* or moved into a new container
* @param {SortableSortedEvent} sortableEvent
* @return {String}
*/
function onSortableSortedDefaultAnnouncement({ dragEvent }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'sortable element';
if (dragEvent.over) {
const overText = dragEvent.over.textContent.trim() || dragEvent.over.id || 'sortable element';
const isFollowing = dragEvent.source.compareDocumentPosition(dragEvent.over) & Node.DOCUMENT_POSITION_FOLLOWING;
if (isFollowing) {
return `Placed ${sourceText} after ${overText}`;
} else {
return `Placed ${sourceText} before ${overText}`;
}
} else {
// need to figure out how to compute container name
return `Placed ${sourceText} into a different container`;
}
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['sortable:sorted']
*/
const defaultAnnouncements = {
'sortable:sorted': onSortableSortedDefaultAnnouncement
};
/**
* Sortable is built on top of Draggable and allows sorting of draggable elements. Sortable will keep
* track of the original index and emits the new index as you drag over draggable elements.
* @class Sortable
* @module Sortable
* @extends Draggable
*/
class Sortable extends _Draggable2.default {
/**
* Sortable constructor.
* @constructs Sortable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Sortable containers
* @param {Object} options - Options for Sortable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* start index of source on drag start
* @property startIndex
* @type {Number}
*/
this.startIndex = null;
/**
* start container on drag start
* @property startContainer
* @type {HTMLElement}
* @default null
*/
this.startContainer = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOverContainer] = this[onDragOverContainer].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over:container', this[onDragOverContainer]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Sortable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:over:container', this[onDragOverContainer]).off('drag:over', this[onDragOver]).off('drag:stop', this[onDragStop]);
}
/**
* Returns true index of element within its container during drag operation, i.e. excluding mirror and original source
* @param {HTMLElement} element - An element
* @return {Number}
*/
index(element) {
return this.getDraggableElementsForContainer(element.parentNode).indexOf(element);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
this.startContainer = event.source.parentNode;
this.startIndex = this.index(event.source);
const sortableStartEvent = new _SortableEvent.SortableStartEvent({
dragEvent: event,
startIndex: this.startIndex,
startContainer: this.startContainer
});
this.trigger(sortableStartEvent);
if (sortableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over container handler
* @private
* @param {DragOverContainerEvent} event - Drag over container event
*/
[onDragOverContainer](event) {
if (event.canceled()) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(event.source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const sortableStopEvent = new _SortableEvent.SortableStopEvent({
dragEvent: event,
oldIndex: this.startIndex,
newIndex: this.index(event.source),
oldContainer: this.startContainer,
newContainer: event.source.parentNode
});
this.trigger(sortableStopEvent);
this.startIndex = null;
this.startContainer = null;
}
}
exports.default = Sortable;
function index(element) {
return Array.prototype.indexOf.call(element.parentNode.children, element);
}
function move({ source, over, overContainer, children }) {
const emptyOverContainer = !children.length;
const differentContainer = source.parentNode !== overContainer;
const sameContainer = over && !differentContainer;
if (emptyOverContainer) {
return moveInsideEmptyContainer(source, overContainer);
} else if (sameContainer) {
return moveWithinContainer(source, over);
} else if (differentContainer) {
return moveOutsideContainer(source, over, overContainer);
} else {
return null;
}
}
function moveInsideEmptyContainer(source, overContainer) {
const oldContainer = source.parentNode;
overContainer.appendChild(source);
return { oldContainer, newContainer: overContainer };
}
function moveWithinContainer(source, over) {
const oldIndex = index(source);
const newIndex = index(over);
if (oldIndex < newIndex) {
source.parentNode.insertBefore(source, over.nextElementSibling);
} else {
source.parentNode.insertBefore(source, over);
}
return { oldContainer: source.parentNode, newContainer: source.parentNode };
}
function moveOutsideContainer(source, over, overContainer) {
const oldContainer = source.parentNode;
if (over) {
over.parentNode.insertBefore(source, over);
} else {
// need to figure out proper position
overContainer.appendChild(source);
}
return { oldContainer, newContainer: source.parentNode };
}
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SortableStopEvent = exports.SortableSortedEvent = exports.SortableSortEvent = exports.SortableStartEvent = exports.SortableEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sortable event
* @class SortableEvent
* @module SortableEvent
* @extends AbstractEvent
*/
class SortableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this sortable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SortableEvent = SortableEvent; /**
* Sortable start event
* @class SortableStartEvent
* @module SortableStartEvent
* @extends SortableEvent
*/
SortableEvent.type = 'sortable';
class SortableStartEvent extends SortableEvent {
/**
* Start index of source on sortable start
* @property startIndex
* @type {Number}
* @readonly
*/
get startIndex() {
return this.data.startIndex;
}
/**
* Start container on sortable start
* @property startContainer
* @type {HTMLElement}
* @readonly
*/
get startContainer() {
return this.data.startContainer;
}
}
exports.SortableStartEvent = SortableStartEvent; /**
* Sortable sort event
* @class SortableSortEvent
* @module SortableSortEvent
* @extends SortableEvent
*/
SortableStartEvent.type = 'sortable:start';
SortableStartEvent.cancelable = true;
class SortableSortEvent extends SortableEvent {
/**
* Index of current draggable element
* @property currentIndex
* @type {Number}
* @readonly
*/
get currentIndex() {
return this.data.currentIndex;
}
/**
* Draggable element you are hovering over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.oldIndex;
}
/**
* Draggable container element you are hovering over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.newIndex;
}
}
exports.SortableSortEvent = SortableSortEvent; /**
* Sortable sorted event
* @class SortableSortedEvent
* @module SortableSortedEvent
* @extends SortableEvent
*/
SortableSortEvent.type = 'sortable:sort';
SortableSortEvent.cancelable = true;
class SortableSortedEvent extends SortableEvent {
/**
* Index of last sorted event
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of this sorted event
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Old container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableSortedEvent = SortableSortedEvent; /**
* Sortable stop event
* @class SortableStopEvent
* @module SortableStopEvent
* @extends SortableEvent
*/
SortableSortedEvent.type = 'sortable:sorted';
class SortableStopEvent extends SortableEvent {
/**
* Original index on sortable start
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of draggable element
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Original container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableStopEvent = SortableStopEvent;
SortableStopEvent.type = 'sortable:stop';
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(9);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
var _Sortable = __webpack_require__(26);
var _Sortable2 = _interopRequireDefault(_Sortable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sortable2.default;
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(5);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SwappableEvent = __webpack_require__(10);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns an announcement message when the Draggable element is swapped with another draggable element
* @param {SwappableSwappedEvent} swappableEvent
* @return {String}
*/
function onSwappableSwappedDefaultAnnouncement({ dragEvent, swappedElement }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'swappable element';
const overText = swappedElement.textContent.trim() || swappedElement.id || 'swappable element';
return `Swapped ${sourceText} with ${overText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['swappabled:swapped']
*/
const defaultAnnouncements = {
'swappabled:swapped': onSwappableSwappedDefaultAnnouncement
};
/**
* Swappable is built on top of Draggable and allows swapping of draggable elements.
* Order is irrelevant to Swappable.
* @class Swappable
* @module Swappable
* @extends Draggable
*/
class Swappable extends _Draggable2.default {
/**
* Swappable constructor.
* @constructs Swappable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Swappable containers
* @param {Object} options - Options for Swappable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* Last draggable element that was dragged over
* @property lastOver
* @type {HTMLElement}
*/
this.lastOver = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Swappable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this._onDragStart).off('drag:over', this._onDragOver).off('drag:stop', this._onDragStop);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
const swappableStartEvent = new _SwappableEvent.SwappableStartEvent({
dragEvent: event
});
this.trigger(swappableStartEvent);
if (swappableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source || event.canceled()) {
return;
}
const swappableSwapEvent = new _SwappableEvent.SwappableSwapEvent({
dragEvent: event,
over: event.over,
overContainer: event.overContainer
});
this.trigger(swappableSwapEvent);
if (swappableSwapEvent.canceled()) {
return;
}
// swap originally swapped element back
if (this.lastOver && this.lastOver !== event.over) {
swap(this.lastOver, event.source);
}
if (this.lastOver === event.over) {
this.lastOver = null;
} else {
this.lastOver = event.over;
}
swap(event.source, event.over);
const swappableSwappedEvent = new _SwappableEvent.SwappableSwappedEvent({
dragEvent: event,
swappedElement: event.over
});
this.trigger(swappableSwappedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const swappableStopEvent = new _SwappableEvent.SwappableStopEvent({
dragEvent: event
});
this.trigger(swappableStopEvent);
this.lastOver = null;
}
}
exports.default = Swappable;
function withTempElement(callback) {
const tmpElement = document.createElement('div');
callback(tmpElement);
tmpElement.parentNode.removeChild(tmpElement);
}
function swap(source, over) {
const overParent = over.parentNode;
const sourceParent = source.parentNode;
withTempElement(tmpElement => {
sourceParent.insertBefore(tmpElement, source);
overParent.insertBefore(source, over);
sourceParent.insertBefore(over, tmpElement);
});
}
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwappableStopEvent = exports.SwappableSwappedEvent = exports.SwappableSwapEvent = exports.SwappableStartEvent = exports.SwappableEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base swappable event
* @class SwappableEvent
* @module SwappableEvent
* @extends AbstractEvent
*/
class SwappableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this swappable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SwappableEvent = SwappableEvent; /**
* Swappable start event
* @class SwappableStartEvent
* @module SwappableStartEvent
* @extends SwappableEvent
*/
SwappableEvent.type = 'swappable';
class SwappableStartEvent extends SwappableEvent {}
exports.SwappableStartEvent = SwappableStartEvent; /**
* Swappable swap event
* @class SwappableSwapEvent
* @module SwappableSwapEvent
* @extends SwappableEvent
*/
SwappableStartEvent.type = 'swappable:start';
SwappableStartEvent.cancelable = true;
class SwappableSwapEvent extends SwappableEvent {
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.SwappableSwapEvent = SwappableSwapEvent; /**
* Swappable swapped event
* @class SwappableSwappedEvent
* @module SwappableSwappedEvent
* @extends SwappableEvent
*/
SwappableSwapEvent.type = 'swappable:swap';
SwappableSwapEvent.cancelable = true;
class SwappableSwappedEvent extends SwappableEvent {
/**
* The draggable element that you swapped with
* @property swappedElement
* @type {HTMLElement}
* @readonly
*/
get swappedElement() {
return this.data.swappedElement;
}
}
exports.SwappableSwappedEvent = SwappableSwappedEvent; /**
* Swappable stop event
* @class SwappableStopEvent
* @module SwappableStopEvent
* @extends SwappableEvent
*/
SwappableSwappedEvent.type = 'swappable:swapped';
class SwappableStopEvent extends SwappableEvent {}
exports.SwappableStopEvent = SwappableStopEvent;
SwappableStopEvent.type = 'swappable:stop';
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(10);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
var _Swappable = __webpack_require__(29);
var _Swappable2 = _interopRequireDefault(_Swappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Swappable2.default;
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _utils = __webpack_require__(2);
var _Draggable = __webpack_require__(5);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _DroppableEvent = __webpack_require__(11);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const dropInDropzone = Symbol('dropInDropZone');
const returnToOriginalDropzone = Symbol('returnToOriginalDropzone');
const closestDropzone = Symbol('closestDropzone');
const getDropzones = Symbol('getDropzones');
/**
* Returns an announcement message when the Draggable element is dropped into a dropzone element
* @param {DroppableDroppedEvent} droppableEvent
* @return {String}
*/
function onDroppableDroppedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Dropped ${sourceText} into ${dropzoneText}`;
}
/**
* Returns an announcement message when the Draggable element has returned to its original dropzone element
* @param {DroppableReturnedEvent} droppableEvent
* @return {String}
*/
function onDroppableReturnedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Returned ${sourceText} from ${dropzoneText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['droppable:dropped']
* @const {Function} defaultAnnouncements['droppable:returned']
*/
const defaultAnnouncements = {
'droppable:dropped': onDroppableDroppedDefaultAnnouncement,
'droppable:returned': onDroppableReturnedDefaultAnnouncement
};
const defaultClasses = {
'droppable:active': 'draggable-dropzone--active',
'droppable:occupied': 'draggable-dropzone--occupied'
};
const defaultOptions = {
dropzone: '.draggable-droppable'
};
/**
* Droppable is built on top of Draggable and allows dropping draggable elements
* into dropzone element
* @class Droppable
* @module Droppable
* @extends Draggable
*/
class Droppable extends _Draggable2.default {
/**
* Droppable constructor.
* @constructs Droppable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Droppable containers
* @param {Object} options - Options for Droppable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* All dropzone elements on drag start
* @property dropzones
* @type {HTMLElement[]}
*/
this.dropzones = null;
/**
* Last dropzone element that the source was dropped into
* @property lastDropzone
* @type {HTMLElement}
*/
this.lastDropzone = null;
/**
* Initial dropzone element that the source was drag from
* @property initialDropzone
* @type {HTMLElement}
*/
this.initialDropzone = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Droppable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.dropzones = [...this[getDropzones]()];
const dropzone = (0, _utils.closest)(event.sensorEvent.target, this.options.dropzone);
if (!dropzone) {
event.cancel();
return;
}
const droppableStartEvent = new _DroppableEvent.DroppableStartEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableStartEvent);
if (droppableStartEvent.canceled()) {
event.cancel();
return;
}
this.initialDropzone = dropzone;
for (const dropzoneElement of this.dropzones) {
if (dropzoneElement.classList.contains(this.getClassNameFor('droppable:occupied'))) {
continue;
}
dropzoneElement.classList.add(this.getClassNameFor('droppable:active'));
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
if (event.canceled()) {
return;
}
const dropzone = this[closestDropzone](event.sensorEvent.target);
const overEmptyDropzone = dropzone && !dropzone.classList.contains(this.getClassNameFor('droppable:occupied'));
if (overEmptyDropzone && this[dropInDropzone](event, dropzone)) {
this.lastDropzone = dropzone;
} else if ((!dropzone || dropzone === this.initialDropzone) && this.lastDropzone) {
this[returnToOriginalDropzone](event);
this.lastDropzone = null;
}
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const droppableStopEvent = new _DroppableEvent.DroppableStopEvent({
dragEvent: event,
dropzone: this.lastDropzone || this.initialDropzone
});
this.trigger(droppableStopEvent);
const occupiedClass = this.getClassNameFor('droppable:occupied');
for (const dropzone of this.dropzones) {
dropzone.classList.remove(this.getClassNameFor('droppable:active'));
}
if (this.lastDropzone && this.lastDropzone !== this.initialDropzone) {
this.initialDropzone.classList.remove(occupiedClass);
}
this.dropzones = null;
this.lastDropzone = null;
this.initialDropzone = null;
}
/**
* Drops a draggable element into a dropzone element
* @private
* @param {DragMoveEvent} event - Drag move event
* @param {HTMLElement} dropzone - Dropzone element to drop draggable into
*/
[dropInDropzone](event, dropzone) {
const droppableDroppedEvent = new _DroppableEvent.DroppableDroppedEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableDroppedEvent);
if (droppableDroppedEvent.canceled()) {
return false;
}
const occupiedClass = this.getClassNameFor('droppable:occupied');
if (this.lastDropzone) {
this.lastDropzone.classList.remove(occupiedClass);
}
dropzone.appendChild(event.source);
dropzone.classList.add(occupiedClass);
return true;
}
/**
* Moves the previously dropped element back into its original dropzone
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[returnToOriginalDropzone](event) {
const droppableReturnedEvent = new _DroppableEvent.DroppableReturnedEvent({
dragEvent: event,
dropzone: this.lastDropzone
});
this.trigger(droppableReturnedEvent);
if (droppableReturnedEvent.canceled()) {
return;
}
this.initialDropzone.appendChild(event.source);
this.lastDropzone.classList.remove(this.getClassNameFor('droppable:occupied'));
}
/**
* Returns closest dropzone element for even target
* @private
* @param {HTMLElement} target - Event target
* @return {HTMLElement|null}
*/
[closestDropzone](target) {
if (!this.dropzones) {
return null;
}
return (0, _utils.closest)(target, this.dropzones);
}
/**
* Returns all current dropzone elements for this draggable instance
* @private
* @return {NodeList|HTMLElement[]|Array}
*/
[getDropzones]() {
const dropzone = this.options.dropzone;
if (typeof dropzone === 'string') {
return document.querySelectorAll(dropzone);
} else if (dropzone instanceof NodeList || dropzone instanceof Array) {
return dropzone;
} else if (typeof dropzone === 'function') {
return dropzone();
} else {
return [];
}
}
}
exports.default = Droppable;
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DroppableStopEvent = exports.DroppableReturnedEvent = exports.DroppableDroppedEvent = exports.DroppableStartEvent = exports.DroppableEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base droppable event
* @class DroppableEvent
* @module DroppableEvent
* @extends AbstractEvent
*/
class DroppableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this droppable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.DroppableEvent = DroppableEvent; /**
* Droppable start event
* @class DroppableStartEvent
* @module DroppableStartEvent
* @extends DroppableEvent
*/
DroppableEvent.type = 'droppable';
class DroppableStartEvent extends DroppableEvent {
/**
* The initial dropzone element of the currently dragging draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStartEvent = DroppableStartEvent; /**
* Droppable dropped event
* @class DroppableDroppedEvent
* @module DroppableDroppedEvent
* @extends DroppableEvent
*/
DroppableStartEvent.type = 'droppable:start';
DroppableStartEvent.cancelable = true;
class DroppableDroppedEvent extends DroppableEvent {
/**
* The dropzone element you dropped the draggable element into
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableDroppedEvent = DroppableDroppedEvent; /**
* Droppable returned event
* @class DroppableReturnedEvent
* @module DroppableReturnedEvent
* @extends DroppableEvent
*/
DroppableDroppedEvent.type = 'droppable:dropped';
DroppableDroppedEvent.cancelable = true;
class DroppableReturnedEvent extends DroppableEvent {
/**
* The dropzone element you dragged away from
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableReturnedEvent = DroppableReturnedEvent; /**
* Droppable stop event
* @class DroppableStopEvent
* @module DroppableStopEvent
* @extends DroppableEvent
*/
DroppableReturnedEvent.type = 'droppable:returned';
DroppableReturnedEvent.cancelable = true;
class DroppableStopEvent extends DroppableEvent {
/**
* The final dropzone element of the draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStopEvent = DroppableStopEvent;
DroppableStopEvent.type = 'droppable:stop';
DroppableStopEvent.cancelable = true;
/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(11);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
var _Droppable = __webpack_require__(32);
var _Droppable2 = _interopRequireDefault(_Droppable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Droppable2.default;
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(35);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(2);
var _Plugins = __webpack_require__(12);
var _Emitter = __webpack_require__(36);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(6);
var _DraggableEvent = __webpack_require__(13);
var _DragEvent = __webpack_require__(14);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(4);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(38);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(4);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(40);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(4);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(42);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 45 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(4);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 46 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(45);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 47 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 48 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 49 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(48);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 50 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 51 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(50);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 52 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 53 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(52);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 54 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 55 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(54);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(55);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 57 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(56);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 58 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 59 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(58);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 60 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 61 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 62 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(61);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 63 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 64 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 65 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 66 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Plugins = exports.Sensors = exports.Sortable = exports.Swappable = exports.Droppable = exports.Draggable = exports.BasePlugin = exports.BaseEvent = undefined;
var _Draggable = __webpack_require__(5);
Object.defineProperty(exports, 'Draggable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Draggable).default;
}
});
var _Droppable = __webpack_require__(34);
Object.defineProperty(exports, 'Droppable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Droppable).default;
}
});
var _Swappable = __webpack_require__(31);
Object.defineProperty(exports, 'Swappable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Swappable).default;
}
});
var _Sortable = __webpack_require__(28);
Object.defineProperty(exports, 'Sortable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sortable).default;
}
});
var _AbstractEvent = __webpack_require__(0);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _Sensors = __webpack_require__(6);
var Sensors = _interopRequireWildcard(_Sensors);
var _Plugins = __webpack_require__(25);
var Plugins = _interopRequireWildcard(_Plugins);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.BaseEvent = _AbstractEvent2.default;
exports.BasePlugin = _AbstractPlugin2.default;
exports.Sensors = Sensors;
exports.Plugins = Plugins;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Draggable", [], factory);
else if(typeof exports === 'object')
exports["Draggable"] = factory();
else
root["Draggable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 154);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var store = __webpack_require__(36)('wks');
var uid = __webpack_require__(22);
var Symbol = __webpack_require__(1).Symbol;
var USE_SYMBOL = typeof Symbol == 'function';
var $exports = module.exports = function (name) {
return store[name] || (store[name] =
USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name));
};
$exports.store = store;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
var global = module.exports = typeof window != 'undefined' && window.Math == Math
? window : typeof self != 'undefined' && self.Math == Math ? self
// eslint-disable-next-line no-new-func
: Function('return this')();
if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
/***/ }),
/* 2 */
/***/ (function(module, exports) {
var core = module.exports = { version: '2.5.7' };
if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(112);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(111);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(107);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(105);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(8);
module.exports = function (it) {
if (!isObject(it)) throw TypeError(it + ' is not an object!');
return it;
};
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
// to indexed object, toObject with fallback for non-array-like ES3 strings
var IObject = __webpack_require__(58);
var defined = __webpack_require__(35);
module.exports = function (it) {
return IObject(defined(it));
};
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = function (it) {
return typeof it === 'object' ? it !== null : typeof it === 'function';
};
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
var anObject = __webpack_require__(6);
var IE8_DOM_DEFINE = __webpack_require__(61);
var toPrimitive = __webpack_require__(37);
var dP = Object.defineProperty;
exports.f = __webpack_require__(11) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
anObject(O);
P = toPrimitive(P, true);
anObject(Attributes);
if (IE8_DOM_DEFINE) try {
return dP(O, P, Attributes);
} catch (e) { /* empty */ }
if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
if ('value' in Attributes) O[P] = Attributes.value;
return O;
};
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
var dP = __webpack_require__(9);
var createDesc = __webpack_require__(28);
module.exports = __webpack_require__(11) ? function (object, key, value) {
return dP.f(object, key, createDesc(1, value));
} : function (object, key, value) {
object[key] = value;
return object;
};
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
// Thank's IE8 for his funny defineProperty
module.exports = !__webpack_require__(23)(function () {
return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
});
/***/ }),
/* 12 */
/***/ (function(module, exports) {
var hasOwnProperty = {}.hasOwnProperty;
module.exports = function (it, key) {
return hasOwnProperty.call(it, key);
};
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.2.14 / 15.2.3.14 Object.keys(O)
var $keys = __webpack_require__(59);
var enumBugKeys = __webpack_require__(32);
module.exports = Object.keys || function keys(O) {
return $keys(O, enumBugKeys);
};
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var hide = __webpack_require__(10);
var has = __webpack_require__(12);
var SRC = __webpack_require__(22)('src');
var TO_STRING = 'toString';
var $toString = Function[TO_STRING];
var TPL = ('' + $toString).split(TO_STRING);
__webpack_require__(2).inspectSource = function (it) {
return $toString.call(it);
};
(module.exports = function (O, key, val, safe) {
var isFunction = typeof val == 'function';
if (isFunction) has(val, 'name') || hide(val, 'name', key);
if (O[key] === val) return;
if (isFunction) has(val, SRC) || hide(val, SRC, O[key] ? '' + O[key] : TPL.join(String(key)));
if (O === global) {
O[key] = val;
} else if (!safe) {
delete O[key];
hide(O, key, val);
} else if (O[key]) {
O[key] = val;
} else {
hide(O, key, val);
}
// add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative
})(Function.prototype, TO_STRING, function toString() {
return typeof this == 'function' && this[SRC] || $toString.call(this);
});
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var core = __webpack_require__(2);
var hide = __webpack_require__(10);
var redefine = __webpack_require__(14);
var ctx = __webpack_require__(27);
var PROTOTYPE = 'prototype';
var $export = function (type, name, source) {
var IS_FORCED = type & $export.F;
var IS_GLOBAL = type & $export.G;
var IS_STATIC = type & $export.S;
var IS_PROTO = type & $export.P;
var IS_BIND = type & $export.B;
var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE];
var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {});
var key, own, out, exp;
if (IS_GLOBAL) source = name;
for (key in source) {
// contains in native
own = !IS_FORCED && target && target[key] !== undefined;
// export native or passed
out = (own ? target : source)[key];
// bind timers to global for call from export context
exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
// extend global
if (target) redefine(target, key, out, type & $export.U);
// export
if (exports[key] != out) hide(exports, key, exp);
if (IS_PROTO && expProto[key] != out) expProto[key] = out;
}
};
global.core = core;
// type bitmap
$export.F = 1; // forced
$export.G = 2; // global
$export.S = 4; // static
$export.P = 8; // proto
$export.B = 16; // bind
$export.W = 32; // wrap
$export.U = 64; // safe
$export.R = 128; // real proto method for `library`
module.exports = $export;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(103);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(110);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 18 */
/***/ (function(module, exports) {
module.exports = {};
/***/ }),
/* 19 */
/***/ (function(module, exports) {
exports.f = {}.propertyIsEnumerable;
/***/ }),
/* 20 */
/***/ (function(module, exports) {
var toString = {}.toString;
module.exports = function (it) {
return toString.call(it).slice(8, -1);
};
/***/ }),
/* 21 */
/***/ (function(module, exports) {
module.exports = false;
/***/ }),
/* 22 */
/***/ (function(module, exports) {
var id = 0;
var px = Math.random();
module.exports = function (key) {
return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
};
/***/ }),
/* 23 */
/***/ (function(module, exports) {
module.exports = function (exec) {
try {
return !!exec();
} catch (e) {
return true;
}
};
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(44);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(43);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(42);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(29);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(73);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
var def = __webpack_require__(9).f;
var has = __webpack_require__(12);
var TAG = __webpack_require__(0)('toStringTag');
module.exports = function (it, tag, stat) {
if (it && !has(it = stat ? it : it.prototype, TAG)) def(it, TAG, { configurable: true, value: tag });
};
/***/ }),
/* 26 */
/***/ (function(module, exports) {
module.exports = function (it) {
if (typeof it != 'function') throw TypeError(it + ' is not a function!');
return it;
};
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
// optional / simple context binding
var aFunction = __webpack_require__(26);
module.exports = function (fn, that, length) {
aFunction(fn);
if (that === undefined) return fn;
switch (length) {
case 1: return function (a) {
return fn.call(that, a);
};
case 2: return function (a, b) {
return fn.call(that, a, b);
};
case 3: return function (a, b, c) {
return fn.call(that, a, b, c);
};
}
return function (/* ...args */) {
return fn.apply(that, arguments);
};
};
/***/ }),
/* 28 */
/***/ (function(module, exports) {
module.exports = function (bitmap, value) {
return {
enumerable: !(bitmap & 1),
configurable: !(bitmap & 2),
writable: !(bitmap & 4),
value: value
};
};
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(17);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(109);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(102);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(100);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(98);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(16);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
// getting tag from 19.1.3.6 Object.prototype.toString()
var cof = __webpack_require__(20);
var TAG = __webpack_require__(0)('toStringTag');
// ES3 wrong here
var ARG = cof(function () { return arguments; }()) == 'Arguments';
// fallback for IE11 Script Access Denied error
var tryGet = function (it, key) {
try {
return it[key];
} catch (e) { /* empty */ }
};
module.exports = function (it) {
var O, T, B;
return it === undefined ? 'Undefined' : it === null ? 'Null'
// @@toStringTag case
: typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T
// builtinTag case
: ARG ? cof(O)
// ES3 arguments fallback
: (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B;
};
/***/ }),
/* 31 */
/***/ (function(module, exports) {
exports.f = Object.getOwnPropertySymbols;
/***/ }),
/* 32 */
/***/ (function(module, exports) {
// IE 8- don't enum bug keys
module.exports = (
'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
).split(',');
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
var shared = __webpack_require__(36)('keys');
var uid = __webpack_require__(22);
module.exports = function (key) {
return shared[key] || (shared[key] = uid(key));
};
/***/ }),
/* 34 */
/***/ (function(module, exports) {
// 7.1.4 ToInteger
var ceil = Math.ceil;
var floor = Math.floor;
module.exports = function (it) {
return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
};
/***/ }),
/* 35 */
/***/ (function(module, exports) {
// 7.2.1 RequireObjectCoercible(argument)
module.exports = function (it) {
if (it == undefined) throw TypeError("Can't call method on " + it);
return it;
};
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
var core = __webpack_require__(2);
var global = __webpack_require__(1);
var SHARED = '__core-js_shared__';
var store = global[SHARED] || (global[SHARED] = {});
(module.exports = function (key, value) {
return store[key] || (store[key] = value !== undefined ? value : {});
})('versions', []).push({
version: core.version,
mode: __webpack_require__(21) ? 'pure' : 'global',
copyright: '© 2018 Denis Pushkarev (zloirock.ru)'
});
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.1 ToPrimitive(input [, PreferredType])
var isObject = __webpack_require__(8);
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
// and the second argument - flag - preferred type is a string
module.exports = function (it, S) {
if (!isObject(it)) return it;
var fn, val;
if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;
if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
throw TypeError("Can't convert object to primitive value");
};
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(8);
var document = __webpack_require__(1).document;
// typeof document.createElement is 'object' in old IE
var is = isObject(document) && isObject(document.createElement);
module.exports = function (it) {
return is ? document.createElement(it) : {};
};
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(63);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(66);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(69);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(83);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(81);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(79);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(75);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(84);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(85);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 45 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(89);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
/***/ }),
/* 46 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(94);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
/***/ }),
/* 47 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// 25.4.1.5 NewPromiseCapability(C)
var aFunction = __webpack_require__(26);
function PromiseCapability(C) {
var resolve, reject;
this.promise = new C(function ($$resolve, $$reject) {
if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor');
resolve = $$resolve;
reject = $$reject;
});
this.resolve = aFunction(resolve);
this.reject = aFunction(reject);
}
module.exports.f = function (C) {
return new PromiseCapability(C);
};
/***/ }),
/* 48 */
/***/ (function(module, exports, __webpack_require__) {
var ctx = __webpack_require__(27);
var invoke = __webpack_require__(128);
var html = __webpack_require__(54);
var cel = __webpack_require__(38);
var global = __webpack_require__(1);
var process = global.process;
var setTask = global.setImmediate;
var clearTask = global.clearImmediate;
var MessageChannel = global.MessageChannel;
var Dispatch = global.Dispatch;
var counter = 0;
var queue = {};
var ONREADYSTATECHANGE = 'onreadystatechange';
var defer, channel, port;
var run = function () {
var id = +this;
// eslint-disable-next-line no-prototype-builtins
if (queue.hasOwnProperty(id)) {
var fn = queue[id];
delete queue[id];
fn();
}
};
var listener = function (event) {
run.call(event.data);
};
// Node.js 0.9+ & IE10+ has setImmediate, otherwise:
if (!setTask || !clearTask) {
setTask = function setImmediate(fn) {
var args = [];
var i = 1;
while (arguments.length > i) args.push(arguments[i++]);
queue[++counter] = function () {
// eslint-disable-next-line no-new-func
invoke(typeof fn == 'function' ? fn : Function(fn), args);
};
defer(counter);
return counter;
};
clearTask = function clearImmediate(id) {
delete queue[id];
};
// Node.js 0.8-
if (__webpack_require__(20)(process) == 'process') {
defer = function (id) {
process.nextTick(ctx(run, id, 1));
};
// Sphere (JS game engine) Dispatch API
} else if (Dispatch && Dispatch.now) {
defer = function (id) {
Dispatch.now(ctx(run, id, 1));
};
// Browsers with MessageChannel, includes WebWorkers
} else if (MessageChannel) {
channel = new MessageChannel();
port = channel.port2;
channel.port1.onmessage = listener;
defer = ctx(port.postMessage, port, 1);
// Browsers with postMessage, skip WebWorkers
// IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
} else if (global.addEventListener && typeof postMessage == 'function' && !global.importScripts) {
defer = function (id) {
global.postMessage(id + '', '*');
};
global.addEventListener('message', listener, false);
// IE8-
} else if (ONREADYSTATECHANGE in cel('script')) {
defer = function (id) {
html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function () {
html.removeChild(this);
run.call(id);
};
};
// Rest old browsers
} else {
defer = function (id) {
setTimeout(ctx(run, id, 1), 0);
};
}
}
module.exports = {
set: setTask,
clear: clearTask
};
/***/ }),
/* 49 */
/***/ (function(module, exports, __webpack_require__) {
// 22.1.3.31 Array.prototype[@@unscopables]
var UNSCOPABLES = __webpack_require__(0)('unscopables');
var ArrayProto = Array.prototype;
if (ArrayProto[UNSCOPABLES] == undefined) __webpack_require__(10)(ArrayProto, UNSCOPABLES, {});
module.exports = function (key) {
ArrayProto[UNSCOPABLES][key] = true;
};
/***/ }),
/* 50 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.13 ToObject(argument)
var defined = __webpack_require__(35);
module.exports = function (it) {
return Object(defined(it));
};
/***/ }),
/* 51 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var LIBRARY = __webpack_require__(21);
var $export = __webpack_require__(15);
var redefine = __webpack_require__(14);
var hide = __webpack_require__(10);
var Iterators = __webpack_require__(18);
var $iterCreate = __webpack_require__(140);
var setToStringTag = __webpack_require__(25);
var getPrototypeOf = __webpack_require__(139);
var ITERATOR = __webpack_require__(0)('iterator');
var BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`
var FF_ITERATOR = '@@iterator';
var KEYS = 'keys';
var VALUES = 'values';
var returnThis = function () { return this; };
module.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) {
$iterCreate(Constructor, NAME, next);
var getMethod = function (kind) {
if (!BUGGY && kind in proto) return proto[kind];
switch (kind) {
case KEYS: return function keys() { return new Constructor(this, kind); };
case VALUES: return function values() { return new Constructor(this, kind); };
} return function entries() { return new Constructor(this, kind); };
};
var TAG = NAME + ' Iterator';
var DEF_VALUES = DEFAULT == VALUES;
var VALUES_BUG = false;
var proto = Base.prototype;
var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT];
var $default = $native || getMethod(DEFAULT);
var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined;
var $anyNative = NAME == 'Array' ? proto.entries || $native : $native;
var methods, key, IteratorPrototype;
// Fix native
if ($anyNative) {
IteratorPrototype = getPrototypeOf($anyNative.call(new Base()));
if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) {
// Set @@toStringTag to native iterators
setToStringTag(IteratorPrototype, TAG, true);
// fix for some old engines
if (!LIBRARY && typeof IteratorPrototype[ITERATOR] != 'function') hide(IteratorPrototype, ITERATOR, returnThis);
}
}
// fix Array#{values, @@iterator}.name in V8 / FF
if (DEF_VALUES && $native && $native.name !== VALUES) {
VALUES_BUG = true;
$default = function values() { return $native.call(this); };
}
// Define iterator
if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {
hide(proto, ITERATOR, $default);
}
// Plug for library
Iterators[NAME] = $default;
Iterators[TAG] = returnThis;
if (DEFAULT) {
methods = {
values: DEF_VALUES ? $default : getMethod(VALUES),
keys: IS_SET ? $default : getMethod(KEYS),
entries: $entries
};
if (FORCED) for (key in methods) {
if (!(key in proto)) redefine(proto, key, methods[key]);
} else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);
}
return methods;
};
/***/ }),
/* 52 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// 19.1.3.6 Object.prototype.toString()
var classof = __webpack_require__(30);
var test = {};
test[__webpack_require__(0)('toStringTag')] = 'z';
if (test + '' != '[object z]') {
__webpack_require__(14)(Object.prototype, 'toString', function toString() {
return '[object ' + classof(this) + ']';
}, true);
}
/***/ }),
/* 53 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.2.7 / 15.2.3.4 Object.getOwnPropertyNames(O)
var $keys = __webpack_require__(59);
var hiddenKeys = __webpack_require__(32).concat('length', 'prototype');
exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
return $keys(O, hiddenKeys);
};
/***/ }),
/* 54 */
/***/ (function(module, exports, __webpack_require__) {
var document = __webpack_require__(1).document;
module.exports = document && document.documentElement;
/***/ }),
/* 55 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])
var anObject = __webpack_require__(6);
var dPs = __webpack_require__(146);
var enumBugKeys = __webpack_require__(32);
var IE_PROTO = __webpack_require__(33)('IE_PROTO');
var Empty = function () { /* empty */ };
var PROTOTYPE = 'prototype';
// Create object with fake `null` prototype: use iframe Object with cleared prototype
var createDict = function () {
// Thrash, waste and sodomy: IE GC bug
var iframe = __webpack_require__(38)('iframe');
var i = enumBugKeys.length;
var lt = '<';
var gt = '>';
var iframeDocument;
iframe.style.display = 'none';
__webpack_require__(54).appendChild(iframe);
iframe.src = 'javascript:'; // eslint-disable-line no-script-url
// createDict = iframe.contentWindow.Object;
// html.removeChild(iframe);
iframeDocument = iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt);
iframeDocument.close();
createDict = iframeDocument.F;
while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]];
return createDict();
};
module.exports = Object.create || function create(O, Properties) {
var result;
if (O !== null) {
Empty[PROTOTYPE] = anObject(O);
result = new Empty();
Empty[PROTOTYPE] = null;
// add "__proto__" for Object.getPrototypeOf polyfill
result[IE_PROTO] = O;
} else result = createDict();
return Properties === undefined ? result : dPs(result, Properties);
};
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.15 ToLength
var toInteger = __webpack_require__(34);
var min = Math.min;
module.exports = function (it) {
return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991
};
/***/ }),
/* 57 */
/***/ (function(module, exports, __webpack_require__) {
// false -> Array#indexOf
// true -> Array#includes
var toIObject = __webpack_require__(7);
var toLength = __webpack_require__(56);
var toAbsoluteIndex = __webpack_require__(148);
module.exports = function (IS_INCLUDES) {
return function ($this, el, fromIndex) {
var O = toIObject($this);
var length = toLength(O.length);
var index = toAbsoluteIndex(fromIndex, length);
var value;
// Array#includes uses SameValueZero equality algorithm
// eslint-disable-next-line no-self-compare
if (IS_INCLUDES && el != el) while (length > index) {
value = O[index++];
// eslint-disable-next-line no-self-compare
if (value != value) return true;
// Array#indexOf ignores holes, Array#includes - not
} else for (;length > index; index++) if (IS_INCLUDES || index in O) {
if (O[index] === el) return IS_INCLUDES || index || 0;
} return !IS_INCLUDES && -1;
};
};
/***/ }),
/* 58 */
/***/ (function(module, exports, __webpack_require__) {
// fallback for non-array-like ES3 and non-enumerable old V8 strings
var cof = __webpack_require__(20);
// eslint-disable-next-line no-prototype-builtins
module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
return cof(it) == 'String' ? it.split('') : Object(it);
};
/***/ }),
/* 59 */
/***/ (function(module, exports, __webpack_require__) {
var has = __webpack_require__(12);
var toIObject = __webpack_require__(7);
var arrayIndexOf = __webpack_require__(57)(false);
var IE_PROTO = __webpack_require__(33)('IE_PROTO');
module.exports = function (object, names) {
var O = toIObject(object);
var i = 0;
var result = [];
var key;
for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key);
// Don't enum bug & hidden keys
while (names.length > i) if (has(O, key = names[i++])) {
~arrayIndexOf(result, key) || result.push(key);
}
return result;
};
/***/ }),
/* 60 */
/***/ (function(module, exports, __webpack_require__) {
exports.f = __webpack_require__(0);
/***/ }),
/* 61 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = !__webpack_require__(11) && !__webpack_require__(23)(function () {
return Object.defineProperty(__webpack_require__(38)('div'), 'a', { get: function () { return 7; } }).a != 7;
});
/***/ }),
/* 62 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(24);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SortableEvent = __webpack_require__(39);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOverContainer = Symbol('onDragOverContainer');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns announcement message when a Draggable element has been sorted with another Draggable element
* or moved into a new container
* @param {SortableSortedEvent} sortableEvent
* @return {String}
*/
function onSortableSortedDefaultAnnouncement({ dragEvent }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'sortable element';
if (dragEvent.over) {
const overText = dragEvent.over.textContent.trim() || dragEvent.over.id || 'sortable element';
const isFollowing = dragEvent.source.compareDocumentPosition(dragEvent.over) & Node.DOCUMENT_POSITION_FOLLOWING;
if (isFollowing) {
return `Placed ${sourceText} after ${overText}`;
} else {
return `Placed ${sourceText} before ${overText}`;
}
} else {
// need to figure out how to compute container name
return `Placed ${sourceText} into a different container`;
}
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['sortable:sorted']
*/
const defaultAnnouncements = {
'sortable:sorted': onSortableSortedDefaultAnnouncement
};
/**
* Sortable is built on top of Draggable and allows sorting of draggable elements. Sortable will keep
* track of the original index and emits the new index as you drag over draggable elements.
* @class Sortable
* @module Sortable
* @extends Draggable
*/
class Sortable extends _Draggable2.default {
/**
* Sortable constructor.
* @constructs Sortable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Sortable containers
* @param {Object} options - Options for Sortable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* start index of source on drag start
* @property startIndex
* @type {Number}
*/
this.startIndex = null;
/**
* start container on drag start
* @property startContainer
* @type {HTMLElement}
* @default null
*/
this.startContainer = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOverContainer] = this[onDragOverContainer].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over:container', this[onDragOverContainer]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Sortable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:over:container', this[onDragOverContainer]).off('drag:over', this[onDragOver]).off('drag:stop', this[onDragStop]);
}
/**
* Returns true index of element within its container during drag operation, i.e. excluding mirror and original source
* @param {HTMLElement} element - An element
* @return {Number}
*/
index(element) {
return this.getDraggableElementsForContainer(element.parentNode).indexOf(element);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
this.startContainer = event.source.parentNode;
this.startIndex = this.index(event.source);
const sortableStartEvent = new _SortableEvent.SortableStartEvent({
dragEvent: event,
startIndex: this.startIndex,
startContainer: this.startContainer
});
this.trigger(sortableStartEvent);
if (sortableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over container handler
* @private
* @param {DragOverContainerEvent} event - Drag over container event
*/
[onDragOverContainer](event) {
if (event.canceled()) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(event.source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const sortableStopEvent = new _SortableEvent.SortableStopEvent({
dragEvent: event,
oldIndex: this.startIndex,
newIndex: this.index(event.source),
oldContainer: this.startContainer,
newContainer: event.source.parentNode
});
this.trigger(sortableStopEvent);
this.startIndex = null;
this.startContainer = null;
}
}
exports.default = Sortable;
function index(element) {
return Array.prototype.indexOf.call(element.parentNode.children, element);
}
function move({ source, over, overContainer, children }) {
const emptyOverContainer = !children.length;
const differentContainer = source.parentNode !== overContainer;
const sameContainer = over && !differentContainer;
if (emptyOverContainer) {
return moveInsideEmptyContainer(source, overContainer);
} else if (sameContainer) {
return moveWithinContainer(source, over);
} else if (differentContainer) {
return moveOutsideContainer(source, over, overContainer);
} else {
return null;
}
}
function moveInsideEmptyContainer(source, overContainer) {
const oldContainer = source.parentNode;
overContainer.appendChild(source);
return { oldContainer, newContainer: overContainer };
}
function moveWithinContainer(source, over) {
const oldIndex = index(source);
const newIndex = index(over);
if (oldIndex < newIndex) {
source.parentNode.insertBefore(source, over.nextElementSibling);
} else {
source.parentNode.insertBefore(source, over);
}
return { oldContainer: source.parentNode, newContainer: source.parentNode };
}
function moveOutsideContainer(source, over, overContainer) {
const oldContainer = source.parentNode;
if (over) {
over.parentNode.insertBefore(source, over);
} else {
// need to figure out proper position
overContainer.appendChild(source);
}
return { oldContainer, newContainer: source.parentNode };
}
/***/ }),
/* 63 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SortableStopEvent = exports.SortableSortedEvent = exports.SortableSortEvent = exports.SortableStartEvent = exports.SortableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sortable event
* @class SortableEvent
* @module SortableEvent
* @extends AbstractEvent
*/
class SortableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this sortable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SortableEvent = SortableEvent; /**
* Sortable start event
* @class SortableStartEvent
* @module SortableStartEvent
* @extends SortableEvent
*/
SortableEvent.type = 'sortable';
class SortableStartEvent extends SortableEvent {
/**
* Start index of source on sortable start
* @property startIndex
* @type {Number}
* @readonly
*/
get startIndex() {
return this.data.startIndex;
}
/**
* Start container on sortable start
* @property startContainer
* @type {HTMLElement}
* @readonly
*/
get startContainer() {
return this.data.startContainer;
}
}
exports.SortableStartEvent = SortableStartEvent; /**
* Sortable sort event
* @class SortableSortEvent
* @module SortableSortEvent
* @extends SortableEvent
*/
SortableStartEvent.type = 'sortable:start';
SortableStartEvent.cancelable = true;
class SortableSortEvent extends SortableEvent {
/**
* Index of current draggable element
* @property currentIndex
* @type {Number}
* @readonly
*/
get currentIndex() {
return this.data.currentIndex;
}
/**
* Draggable element you are hovering over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.oldIndex;
}
/**
* Draggable container element you are hovering over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.newIndex;
}
}
exports.SortableSortEvent = SortableSortEvent; /**
* Sortable sorted event
* @class SortableSortedEvent
* @module SortableSortedEvent
* @extends SortableEvent
*/
SortableSortEvent.type = 'sortable:sort';
SortableSortEvent.cancelable = true;
class SortableSortedEvent extends SortableEvent {
/**
* Index of last sorted event
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of this sorted event
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Old container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableSortedEvent = SortableSortedEvent; /**
* Sortable stop event
* @class SortableStopEvent
* @module SortableStopEvent
* @extends SortableEvent
*/
SortableSortedEvent.type = 'sortable:sorted';
class SortableStopEvent extends SortableEvent {
/**
* Original index on sortable start
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of draggable element
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Original container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableStopEvent = SortableStopEvent;
SortableStopEvent.type = 'sortable:stop';
/***/ }),
/* 64 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(39);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
var _Sortable = __webpack_require__(62);
var _Sortable2 = _interopRequireDefault(_Sortable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sortable2.default;
/***/ }),
/* 65 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(24);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SwappableEvent = __webpack_require__(40);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns an announcement message when the Draggable element is swapped with another draggable element
* @param {SwappableSwappedEvent} swappableEvent
* @return {String}
*/
function onSwappableSwappedDefaultAnnouncement({ dragEvent, swappedElement }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'swappable element';
const overText = swappedElement.textContent.trim() || swappedElement.id || 'swappable element';
return `Swapped ${sourceText} with ${overText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['swappabled:swapped']
*/
const defaultAnnouncements = {
'swappabled:swapped': onSwappableSwappedDefaultAnnouncement
};
/**
* Swappable is built on top of Draggable and allows swapping of draggable elements.
* Order is irrelevant to Swappable.
* @class Swappable
* @module Swappable
* @extends Draggable
*/
class Swappable extends _Draggable2.default {
/**
* Swappable constructor.
* @constructs Swappable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Swappable containers
* @param {Object} options - Options for Swappable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* Last draggable element that was dragged over
* @property lastOver
* @type {HTMLElement}
*/
this.lastOver = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Swappable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this._onDragStart).off('drag:over', this._onDragOver).off('drag:stop', this._onDragStop);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
const swappableStartEvent = new _SwappableEvent.SwappableStartEvent({
dragEvent: event
});
this.trigger(swappableStartEvent);
if (swappableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source || event.canceled()) {
return;
}
const swappableSwapEvent = new _SwappableEvent.SwappableSwapEvent({
dragEvent: event,
over: event.over,
overContainer: event.overContainer
});
this.trigger(swappableSwapEvent);
if (swappableSwapEvent.canceled()) {
return;
}
// swap originally swapped element back
if (this.lastOver && this.lastOver !== event.over) {
swap(this.lastOver, event.source);
}
if (this.lastOver === event.over) {
this.lastOver = null;
} else {
this.lastOver = event.over;
}
swap(event.source, event.over);
const swappableSwappedEvent = new _SwappableEvent.SwappableSwappedEvent({
dragEvent: event,
swappedElement: event.over
});
this.trigger(swappableSwappedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const swappableStopEvent = new _SwappableEvent.SwappableStopEvent({
dragEvent: event
});
this.trigger(swappableStopEvent);
this.lastOver = null;
}
}
exports.default = Swappable;
function withTempElement(callback) {
const tmpElement = document.createElement('div');
callback(tmpElement);
tmpElement.parentNode.removeChild(tmpElement);
}
function swap(source, over) {
const overParent = over.parentNode;
const sourceParent = source.parentNode;
withTempElement(tmpElement => {
sourceParent.insertBefore(tmpElement, source);
overParent.insertBefore(source, over);
sourceParent.insertBefore(over, tmpElement);
});
}
/***/ }),
/* 66 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwappableStopEvent = exports.SwappableSwappedEvent = exports.SwappableSwapEvent = exports.SwappableStartEvent = exports.SwappableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base swappable event
* @class SwappableEvent
* @module SwappableEvent
* @extends AbstractEvent
*/
class SwappableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this swappable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SwappableEvent = SwappableEvent; /**
* Swappable start event
* @class SwappableStartEvent
* @module SwappableStartEvent
* @extends SwappableEvent
*/
SwappableEvent.type = 'swappable';
class SwappableStartEvent extends SwappableEvent {}
exports.SwappableStartEvent = SwappableStartEvent; /**
* Swappable swap event
* @class SwappableSwapEvent
* @module SwappableSwapEvent
* @extends SwappableEvent
*/
SwappableStartEvent.type = 'swappable:start';
SwappableStartEvent.cancelable = true;
class SwappableSwapEvent extends SwappableEvent {
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.SwappableSwapEvent = SwappableSwapEvent; /**
* Swappable swapped event
* @class SwappableSwappedEvent
* @module SwappableSwappedEvent
* @extends SwappableEvent
*/
SwappableSwapEvent.type = 'swappable:swap';
SwappableSwapEvent.cancelable = true;
class SwappableSwappedEvent extends SwappableEvent {
/**
* The draggable element that you swapped with
* @property swappedElement
* @type {HTMLElement}
* @readonly
*/
get swappedElement() {
return this.data.swappedElement;
}
}
exports.SwappableSwappedEvent = SwappableSwappedEvent; /**
* Swappable stop event
* @class SwappableStopEvent
* @module SwappableStopEvent
* @extends SwappableEvent
*/
SwappableSwappedEvent.type = 'swappable:swapped';
class SwappableStopEvent extends SwappableEvent {}
exports.SwappableStopEvent = SwappableStopEvent;
SwappableStopEvent.type = 'swappable:stop';
/***/ }),
/* 67 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(40);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
var _Swappable = __webpack_require__(65);
var _Swappable2 = _interopRequireDefault(_Swappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Swappable2.default;
/***/ }),
/* 68 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _utils = __webpack_require__(5);
var _Draggable = __webpack_require__(24);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _DroppableEvent = __webpack_require__(41);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const dropInDropzone = Symbol('dropInDropZone');
const returnToOriginalDropzone = Symbol('returnToOriginalDropzone');
const closestDropzone = Symbol('closestDropzone');
const getDropzones = Symbol('getDropzones');
/**
* Returns an announcement message when the Draggable element is dropped into a dropzone element
* @param {DroppableDroppedEvent} droppableEvent
* @return {String}
*/
function onDroppableDroppedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Dropped ${sourceText} into ${dropzoneText}`;
}
/**
* Returns an announcement message when the Draggable element has returned to its original dropzone element
* @param {DroppableReturnedEvent} droppableEvent
* @return {String}
*/
function onDroppableReturnedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Returned ${sourceText} from ${dropzoneText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['droppable:dropped']
* @const {Function} defaultAnnouncements['droppable:returned']
*/
const defaultAnnouncements = {
'droppable:dropped': onDroppableDroppedDefaultAnnouncement,
'droppable:returned': onDroppableReturnedDefaultAnnouncement
};
const defaultClasses = {
'droppable:active': 'draggable-dropzone--active',
'droppable:occupied': 'draggable-dropzone--occupied'
};
const defaultOptions = {
dropzone: '.draggable-droppable'
};
/**
* Droppable is built on top of Draggable and allows dropping draggable elements
* into dropzone element
* @class Droppable
* @module Droppable
* @extends Draggable
*/
class Droppable extends _Draggable2.default {
/**
* Droppable constructor.
* @constructs Droppable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Droppable containers
* @param {Object} options - Options for Droppable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* All dropzone elements on drag start
* @property dropzones
* @type {HTMLElement[]}
*/
this.dropzones = null;
/**
* Last dropzone element that the source was dropped into
* @property lastDropzone
* @type {HTMLElement}
*/
this.lastDropzone = null;
/**
* Initial dropzone element that the source was drag from
* @property initialDropzone
* @type {HTMLElement}
*/
this.initialDropzone = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Droppable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.dropzones = [...this[getDropzones]()];
const dropzone = (0, _utils.closest)(event.sensorEvent.target, this.options.dropzone);
if (!dropzone) {
event.cancel();
return;
}
const droppableStartEvent = new _DroppableEvent.DroppableStartEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableStartEvent);
if (droppableStartEvent.canceled()) {
event.cancel();
return;
}
this.initialDropzone = dropzone;
for (const dropzoneElement of this.dropzones) {
if (dropzoneElement.classList.contains(this.getClassNameFor('droppable:occupied'))) {
continue;
}
dropzoneElement.classList.add(this.getClassNameFor('droppable:active'));
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
if (event.canceled()) {
return;
}
const dropzone = this[closestDropzone](event.sensorEvent.target);
const overEmptyDropzone = dropzone && !dropzone.classList.contains(this.getClassNameFor('droppable:occupied'));
if (overEmptyDropzone && this[dropInDropzone](event, dropzone)) {
this.lastDropzone = dropzone;
} else if ((!dropzone || dropzone === this.initialDropzone) && this.lastDropzone) {
this[returnToOriginalDropzone](event);
this.lastDropzone = null;
}
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const droppableStopEvent = new _DroppableEvent.DroppableStopEvent({
dragEvent: event,
dropzone: this.lastDropzone || this.initialDropzone
});
this.trigger(droppableStopEvent);
const occupiedClass = this.getClassNameFor('droppable:occupied');
for (const dropzone of this.dropzones) {
dropzone.classList.remove(this.getClassNameFor('droppable:active'));
}
if (this.lastDropzone && this.lastDropzone !== this.initialDropzone) {
this.initialDropzone.classList.remove(occupiedClass);
}
this.dropzones = null;
this.lastDropzone = null;
this.initialDropzone = null;
}
/**
* Drops a draggable element into a dropzone element
* @private
* @param {DragMoveEvent} event - Drag move event
* @param {HTMLElement} dropzone - Dropzone element to drop draggable into
*/
[dropInDropzone](event, dropzone) {
const droppableDroppedEvent = new _DroppableEvent.DroppableDroppedEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableDroppedEvent);
if (droppableDroppedEvent.canceled()) {
return false;
}
const occupiedClass = this.getClassNameFor('droppable:occupied');
if (this.lastDropzone) {
this.lastDropzone.classList.remove(occupiedClass);
}
dropzone.appendChild(event.source);
dropzone.classList.add(occupiedClass);
return true;
}
/**
* Moves the previously dropped element back into its original dropzone
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[returnToOriginalDropzone](event) {
const droppableReturnedEvent = new _DroppableEvent.DroppableReturnedEvent({
dragEvent: event,
dropzone: this.lastDropzone
});
this.trigger(droppableReturnedEvent);
if (droppableReturnedEvent.canceled()) {
return;
}
this.initialDropzone.appendChild(event.source);
this.lastDropzone.classList.remove(this.getClassNameFor('droppable:occupied'));
}
/**
* Returns closest dropzone element for even target
* @private
* @param {HTMLElement} target - Event target
* @return {HTMLElement|null}
*/
[closestDropzone](target) {
if (!this.dropzones) {
return null;
}
return (0, _utils.closest)(target, this.dropzones);
}
/**
* Returns all current dropzone elements for this draggable instance
* @private
* @return {NodeList|HTMLElement[]|Array}
*/
[getDropzones]() {
const dropzone = this.options.dropzone;
if (typeof dropzone === 'string') {
return document.querySelectorAll(dropzone);
} else if (dropzone instanceof NodeList || dropzone instanceof Array) {
return dropzone;
} else if (typeof dropzone === 'function') {
return dropzone();
} else {
return [];
}
}
}
exports.default = Droppable;
/***/ }),
/* 69 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DroppableStopEvent = exports.DroppableReturnedEvent = exports.DroppableDroppedEvent = exports.DroppableStartEvent = exports.DroppableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base droppable event
* @class DroppableEvent
* @module DroppableEvent
* @extends AbstractEvent
*/
class DroppableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this droppable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.DroppableEvent = DroppableEvent; /**
* Droppable start event
* @class DroppableStartEvent
* @module DroppableStartEvent
* @extends DroppableEvent
*/
DroppableEvent.type = 'droppable';
class DroppableStartEvent extends DroppableEvent {
/**
* The initial dropzone element of the currently dragging draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStartEvent = DroppableStartEvent; /**
* Droppable dropped event
* @class DroppableDroppedEvent
* @module DroppableDroppedEvent
* @extends DroppableEvent
*/
DroppableStartEvent.type = 'droppable:start';
DroppableStartEvent.cancelable = true;
class DroppableDroppedEvent extends DroppableEvent {
/**
* The dropzone element you dropped the draggable element into
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableDroppedEvent = DroppableDroppedEvent; /**
* Droppable returned event
* @class DroppableReturnedEvent
* @module DroppableReturnedEvent
* @extends DroppableEvent
*/
DroppableDroppedEvent.type = 'droppable:dropped';
DroppableDroppedEvent.cancelable = true;
class DroppableReturnedEvent extends DroppableEvent {
/**
* The dropzone element you dragged away from
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableReturnedEvent = DroppableReturnedEvent; /**
* Droppable stop event
* @class DroppableStopEvent
* @module DroppableStopEvent
* @extends DroppableEvent
*/
DroppableReturnedEvent.type = 'droppable:returned';
DroppableReturnedEvent.cancelable = true;
class DroppableStopEvent extends DroppableEvent {
/**
* The final dropzone element of the draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStopEvent = DroppableStopEvent;
DroppableStopEvent.type = 'droppable:stop';
DroppableStopEvent.cancelable = true;
/***/ }),
/* 70 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(41);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
var _Droppable = __webpack_require__(68);
var _Droppable2 = _interopRequireDefault(_Droppable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Droppable2.default;
/***/ }),
/* 71 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 72 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(71);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 73 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(5);
var _Plugins = __webpack_require__(42);
var _Emitter = __webpack_require__(72);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(29);
var _DraggableEvent = __webpack_require__(43);
var _DragEvent = __webpack_require__(44);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 74 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 75 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(74);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 76 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 77 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(76);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 78 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(77);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 79 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(78);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 80 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 81 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(80);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 82 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 83 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(82);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 84 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 85 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 86 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onSortableSorted = Symbol('onSortableSorted');
/**
* SwapAnimation default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @property {Boolean} defaultOptions.horizontal
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
duration: 150,
easingFunction: 'ease-in-out',
horizontal: false
};
/**
* SwapAnimation plugin adds swap animations for sortable
* @class SwapAnimation
* @module SwapAnimation
* @extends AbstractPlugin
*/
class SwapAnimation extends _AbstractPlugin2.default {
/**
* SwapAnimation constructor.
* @constructs SwapAnimation
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* SwapAnimation options
* @property {Object} options
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Last animation frame
* @property {Number} lastAnimationFrame
* @type {Number}
*/
this.lastAnimationFrame = null;
this[onSortableSorted] = this[onSortableSorted].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('sortable:sorted', this[onSortableSorted]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('sortable:sorted', this[onSortableSorted]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.swapAnimation || {};
}
/**
* Sortable sorted handler
* @param {SortableSortedEvent} sortableEvent
* @private
*/
[onSortableSorted]({ oldIndex, newIndex, dragEvent }) {
const { source, over } = dragEvent;
cancelAnimationFrame(this.lastAnimationFrame);
// Can be done in a separate frame
this.lastAnimationFrame = requestAnimationFrame(() => {
if (oldIndex >= newIndex) {
animate(source, over, this.options);
} else {
animate(over, source, this.options);
}
});
}
}
exports.default = SwapAnimation; /**
* Animates two elements
* @param {HTMLElement} from
* @param {HTMLElement} to
* @param {Object} options
* @param {Number} options.duration
* @param {String} options.easingFunction
* @param {String} options.horizontal
* @private
*/
function animate(from, to, { duration, easingFunction, horizontal }) {
for (const element of [from, to]) {
element.style.pointerEvents = 'none';
}
if (horizontal) {
const width = from.offsetWidth;
from.style.transform = `translate3d(${width}px, 0, 0)`;
to.style.transform = `translate3d(-${width}px, 0, 0)`;
} else {
const height = from.offsetHeight;
from.style.transform = `translate3d(0, ${height}px, 0)`;
to.style.transform = `translate3d(0, -${height}px, 0)`;
}
requestAnimationFrame(() => {
for (const element of [from, to]) {
element.addEventListener('transitionend', resetElementOnTransitionEnd);
element.style.transition = `transform ${duration}ms ${easingFunction}`;
element.style.transform = '';
}
});
}
/**
* Resets animation style properties after animation has completed
* @param {Event} event
* @private
*/
function resetElementOnTransitionEnd(event) {
event.target.style.transition = '';
event.target.style.pointerEvents = '';
event.target.removeEventListener('transitionend', resetElementOnTransitionEnd);
}
/***/ }),
/* 87 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _SwapAnimation = __webpack_require__(86);
var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _SwapAnimation2.default;
exports.defaultOptions = _SwapAnimation.defaultOptions;
/***/ }),
/* 88 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _SnappableEvent = __webpack_require__(45);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragStop = Symbol('onDragStop');
const onDragOver = Symbol('onDragOver');
const onDragOut = Symbol('onDragOut');
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
/**
* Snappable plugin which snaps draggable elements into place
* @class Snappable
* @module Snappable
* @extends AbstractPlugin
*/
class Snappable extends _AbstractPlugin2.default {
/**
* Snappable constructor.
* @constructs Snappable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of the first source element
* @property {HTMLElement|null} firstSource
*/
this.firstSource = null;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragOut] = this[onDragOut].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:stop', this[onDragStop]).on('drag:over', this[onDragOver]).on('drag:out', this[onDragOut]).on('droppable:over', this[onDragOver]).on('droppable:out', this[onDragOut]).on('mirror:created', this[onMirrorCreated]).on('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:stop', this[onDragStop]).off('drag:over', this[onDragOver]).off('drag:out', this[onDragOut]).off('droppable:over', this[onDragOver]).off('droppable:out', this[onDragOut]).off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.firstSource = event.source;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop]() {
this.firstSource = null;
}
/**
* Drag over handler
* @private
* @param {DragOverEvent|DroppableOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
if (source === this.firstSource) {
this.firstSource = null;
return;
}
const snapInEvent = new _SnappableEvent.SnapInEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapInEvent);
if (snapInEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = 'none';
}
source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
source.classList.add(this.draggable.getClassNameFor('source:placed'));
// Need to cancel this in drag out
setTimeout(() => {
source.classList.remove(this.draggable.getClassNameFor('source:placed'));
}, this.draggable.options.placedTimeout);
}
/**
* Drag out handler
* @private
* @param {DragOutEvent|DroppableOutEvent} event - Drag out event
*/
[onDragOut](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
const snapOutEvent = new _SnappableEvent.SnapOutEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapOutEvent);
if (snapOutEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = '';
}
source.classList.add(this.draggable.getClassNameFor('source:dragging'));
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
}
exports.default = Snappable;
/***/ }),
/* 89 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SnapOutEvent = exports.SnapInEvent = exports.SnapEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base snap event
* @class SnapEvent
* @module SnapEvent
* @extends AbstractEvent
*/
class SnapEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this snap event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Snappable element
* @property snappable
* @type {HTMLElement}
* @readonly
*/
get snappable() {
return this.data.snappable;
}
}
exports.SnapEvent = SnapEvent; /**
* Snap in event
* @class SnapInEvent
* @module SnapInEvent
* @extends SnapEvent
*/
SnapEvent.type = 'snap';
class SnapInEvent extends SnapEvent {}
exports.SnapInEvent = SnapInEvent; /**
* Snap out event
* @class SnapOutEvent
* @module SnapOutEvent
* @extends SnapEvent
*/
SnapInEvent.type = 'snap:in';
SnapInEvent.cancelable = true;
class SnapOutEvent extends SnapEvent {}
exports.SnapOutEvent = SnapOutEvent;
SnapOutEvent.type = 'snap:out';
SnapOutEvent.cancelable = true;
/***/ }),
/* 90 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(45);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
var _Snappable = __webpack_require__(88);
var _Snappable2 = _interopRequireDefault(_Snappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Snappable2.default;
/***/ }),
/* 91 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
const onDragOver = Symbol('onDragOver');
const resize = Symbol('resize');
/**
* ResizeMirror default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {};
/**
* The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
* @class ResizeMirror
* @module ResizeMirror
* @extends AbstractPlugin
*/
class ResizeMirror extends _AbstractPlugin2.default {
/**
* ResizeMirror constructor.
* @constructs ResizeMirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* ResizeMirror options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* ResizeMirror remembers the last width when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastWidth
*/
this.lastWidth = 0;
/**
* ResizeMirror remembers the last height when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastHeight
*/
this.lastHeight = 0;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('mirror:created', this[onMirrorCreated]).on('drag:over', this[onDragOver]).on('drag:over:container', this[onDragOver]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]).off('drag:over', this[onDragOver]).off('drag:over:container', this[onDragOver]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.resizeMirror || {};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
/**
* Drag over handler
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[onDragOver](dragEvent) {
this[resize](dragEvent);
}
/**
* Resize function for
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[resize]({ overContainer, over }) {
requestAnimationFrame(() => {
if (this.mirror.parentNode !== overContainer) {
overContainer.appendChild(this.mirror);
}
const overElement = over || this.draggable.getDraggableElementsForContainer(overContainer)[0];
if (!overElement) {
return;
}
(0, _utils.requestNextAnimationFrame)(() => {
const overRect = overElement.getBoundingClientRect();
if (this.lastHeight === overRect.height && this.lastWidth === overRect.width) {
return;
}
this.mirror.style.width = `${overRect.width}px`;
this.mirror.style.height = `${overRect.height}px`;
this.lastWidth = overRect.width;
this.lastHeight = overRect.height;
});
});
}
}
exports.default = ResizeMirror;
/***/ }),
/* 92 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _ResizeMirror = __webpack_require__(91);
var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ResizeMirror2.default;
exports.defaultOptions = _ResizeMirror.defaultOptions;
/***/ }),
/* 93 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(5);
var _CollidableEvent = __webpack_require__(46);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onRequestAnimationFrame = Symbol('onRequestAnimationFrame');
/**
* Collidable plugin which detects colliding elements while dragging
* @class Collidable
* @module Collidable
* @extends AbstractPlugin
*/
class Collidable extends _AbstractPlugin2.default {
/**
* Collidable constructor.
* @constructs Collidable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} currentlyCollidingElement
* @type {HTMLElement|null}
*/
this.currentlyCollidingElement = null;
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} lastCollidingElement
* @type {HTMLElement|null}
*/
this.lastCollidingElement = null;
/**
* Animation frame for finding colliding elements
* @property {Number|null} currentAnimationFrame
* @type {Number|null}
*/
this.currentAnimationFrame = null;
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onRequestAnimationFrame] = this[onRequestAnimationFrame].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns current collidables based on `collidables` option
* @return {HTMLElement[]}
*/
getCollidables() {
const collidables = this.draggable.options.collidables;
if (typeof collidables === 'string') {
return Array.prototype.slice.call(document.querySelectorAll(collidables));
} else if (collidables instanceof NodeList || collidables instanceof Array) {
return Array.prototype.slice.call(collidables);
} else if (collidables instanceof HTMLElement) {
return [collidables];
} else if (typeof collidables === 'function') {
return collidables();
} else {
return [];
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
const target = event.sensorEvent.target;
this.currentAnimationFrame = requestAnimationFrame(this[onRequestAnimationFrame](target));
if (this.currentlyCollidingElement) {
event.cancel();
}
const collidableInEvent = new _CollidableEvent.CollidableInEvent({
dragEvent: event,
collidingElement: this.currentlyCollidingElement
});
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: this.lastCollidingElement
});
const enteringCollidable = Boolean(this.currentlyCollidingElement && this.lastCollidingElement !== this.currentlyCollidingElement);
const leavingCollidable = Boolean(!this.currentlyCollidingElement && this.lastCollidingElement);
if (enteringCollidable) {
if (this.lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.draggable.trigger(collidableInEvent);
} else if (leavingCollidable) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = this.currentlyCollidingElement;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: lastCollidingElement
});
if (lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = null;
this.currentlyCollidingElement = null;
}
/**
* Animation frame function
* @private
* @param {HTMLElement} target - Current move target
* @return {Function}
*/
[onRequestAnimationFrame](target) {
return () => {
const collidables = this.getCollidables();
this.currentlyCollidingElement = (0, _utils.closest)(target, element => collidables.includes(element));
};
}
}
exports.default = Collidable;
/***/ }),
/* 94 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollidableOutEvent = exports.CollidableInEvent = exports.CollidableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base collidable event
* @class CollidableEvent
* @module CollidableEvent
* @extends AbstractEvent
*/
class CollidableEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this colliable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.CollidableEvent = CollidableEvent; /**
* Collidable in event
* @class CollidableInEvent
* @module CollidableInEvent
* @extends CollidableEvent
*/
CollidableEvent.type = 'collidable';
class CollidableInEvent extends CollidableEvent {
/**
* Element you are currently colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableInEvent = CollidableInEvent; /**
* Collidable out event
* @class CollidableOutEvent
* @module CollidableOutEvent
* @extends CollidableEvent
*/
CollidableInEvent.type = 'collidable:in';
class CollidableOutEvent extends CollidableEvent {
/**
* Element you were previously colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableOutEvent = CollidableOutEvent;
CollidableOutEvent.type = 'collidable:out';
/***/ }),
/* 95 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(46);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
var _Collidable = __webpack_require__(93);
var _Collidable2 = _interopRequireDefault(_Collidable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Collidable2.default;
/***/ }),
/* 96 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Collidable = __webpack_require__(95);
Object.defineProperty(exports, 'Collidable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Collidable).default;
}
});
var _ResizeMirror = __webpack_require__(92);
Object.defineProperty(exports, 'ResizeMirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ResizeMirror).default;
}
});
Object.defineProperty(exports, 'defaultResizeMirrorOptions', {
enumerable: true,
get: function () {
return _ResizeMirror.defaultOptions;
}
});
var _Snappable = __webpack_require__(90);
Object.defineProperty(exports, 'Snappable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Snappable).default;
}
});
var _SwapAnimation = __webpack_require__(87);
Object.defineProperty(exports, 'SwapAnimation', {
enumerable: true,
get: function () {
return _interopRequireDefault(_SwapAnimation).default;
}
});
Object.defineProperty(exports, 'defaultSwapAnimationOptions', {
enumerable: true,
get: function () {
return _SwapAnimation.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 97 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(17);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(16);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 98 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(97);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 99 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(5);
var _Sensor = __webpack_require__(17);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(16);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 100 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(99);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 101 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(5);
var _Sensor = __webpack_require__(17);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(16);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 102 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(101);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 103 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 104 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 105 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(104);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 106 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 107 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(106);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 108 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(5);
var _Sensor = __webpack_require__(17);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(16);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 109 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(108);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 110 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 111 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 112 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 113 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// https://github.com/tc39/Array.prototype.includes
var $export = __webpack_require__(15);
var $includes = __webpack_require__(57)(true);
$export($export.P, 'Array', {
includes: function includes(el /* , fromIndex = 0 */) {
return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
}
});
__webpack_require__(49)('includes');
/***/ }),
/* 114 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(113);
module.exports = __webpack_require__(2).Array.includes;
/***/ }),
/* 115 */
/***/ (function(module, exports, __webpack_require__) {
var getKeys = __webpack_require__(13);
var toIObject = __webpack_require__(7);
var isEnum = __webpack_require__(19).f;
module.exports = function (isEntries) {
return function (it) {
var O = toIObject(it);
var keys = getKeys(O);
var length = keys.length;
var i = 0;
var result = [];
var key;
while (length > i) if (isEnum.call(O, key = keys[i++])) {
result.push(isEntries ? [key, O[key]] : O[key]);
} return result;
};
};
/***/ }),
/* 116 */
/***/ (function(module, exports, __webpack_require__) {
// https://github.com/tc39/proposal-object-values-entries
var $export = __webpack_require__(15);
var $values = __webpack_require__(115)(false);
$export($export.S, 'Object', {
values: function values(it) {
return $values(it);
}
});
/***/ }),
/* 117 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(116);
module.exports = __webpack_require__(2).Object.values;
/***/ }),
/* 118 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// 19.1.2.1 Object.assign(target, source, ...)
var getKeys = __webpack_require__(13);
var gOPS = __webpack_require__(31);
var pIE = __webpack_require__(19);
var toObject = __webpack_require__(50);
var IObject = __webpack_require__(58);
var $assign = Object.assign;
// should work with symbols and should have deterministic property order (V8 bug)
module.exports = !$assign || __webpack_require__(23)(function () {
var A = {};
var B = {};
// eslint-disable-next-line no-undef
var S = Symbol();
var K = 'abcdefghijklmnopqrst';
A[S] = 7;
K.split('').forEach(function (k) { B[k] = k; });
return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
var T = toObject(target);
var aLen = arguments.length;
var index = 1;
var getSymbols = gOPS.f;
var isEnum = pIE.f;
while (aLen > index) {
var S = IObject(arguments[index++]);
var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
var length = keys.length;
var j = 0;
var key;
while (length > j) if (isEnum.call(S, key = keys[j++])) T[key] = S[key];
} return T;
} : $assign;
/***/ }),
/* 119 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.3.1 Object.assign(target, source)
var $export = __webpack_require__(15);
$export($export.S + $export.F, 'Object', { assign: __webpack_require__(118) });
/***/ }),
/* 120 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(119);
module.exports = __webpack_require__(2).Object.assign;
/***/ }),
/* 121 */
/***/ (function(module, exports, __webpack_require__) {
var ITERATOR = __webpack_require__(0)('iterator');
var SAFE_CLOSING = false;
try {
var riter = [7][ITERATOR]();
riter['return'] = function () { SAFE_CLOSING = true; };
// eslint-disable-next-line no-throw-literal
Array.from(riter, function () { throw 2; });
} catch (e) { /* empty */ }
module.exports = function (exec, skipClosing) {
if (!skipClosing && !SAFE_CLOSING) return false;
var safe = false;
try {
var arr = [7];
var iter = arr[ITERATOR]();
iter.next = function () { return { done: safe = true }; };
arr[ITERATOR] = function () { return iter; };
exec(arr);
} catch (e) { /* empty */ }
return safe;
};
/***/ }),
/* 122 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var global = __webpack_require__(1);
var dP = __webpack_require__(9);
var DESCRIPTORS = __webpack_require__(11);
var SPECIES = __webpack_require__(0)('species');
module.exports = function (KEY) {
var C = global[KEY];
if (DESCRIPTORS && C && !C[SPECIES]) dP.f(C, SPECIES, {
configurable: true,
get: function () { return this; }
});
};
/***/ }),
/* 123 */
/***/ (function(module, exports, __webpack_require__) {
var redefine = __webpack_require__(14);
module.exports = function (target, src, safe) {
for (var key in src) redefine(target, key, src[key], safe);
return target;
};
/***/ }),
/* 124 */
/***/ (function(module, exports, __webpack_require__) {
var anObject = __webpack_require__(6);
var isObject = __webpack_require__(8);
var newPromiseCapability = __webpack_require__(47);
module.exports = function (C, x) {
anObject(C);
if (isObject(x) && x.constructor === C) return x;
var promiseCapability = newPromiseCapability.f(C);
var resolve = promiseCapability.resolve;
resolve(x);
return promiseCapability.promise;
};
/***/ }),
/* 125 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var navigator = global.navigator;
module.exports = navigator && navigator.userAgent || '';
/***/ }),
/* 126 */
/***/ (function(module, exports) {
module.exports = function (exec) {
try {
return { e: false, v: exec() };
} catch (e) {
return { e: true, v: e };
}
};
/***/ }),
/* 127 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var macrotask = __webpack_require__(48).set;
var Observer = global.MutationObserver || global.WebKitMutationObserver;
var process = global.process;
var Promise = global.Promise;
var isNode = __webpack_require__(20)(process) == 'process';
module.exports = function () {
var head, last, notify;
var flush = function () {
var parent, fn;
if (isNode && (parent = process.domain)) parent.exit();
while (head) {
fn = head.fn;
head = head.next;
try {
fn();
} catch (e) {
if (head) notify();
else last = undefined;
throw e;
}
} last = undefined;
if (parent) parent.enter();
};
// Node.js
if (isNode) {
notify = function () {
process.nextTick(flush);
};
// browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
} else if (Observer && !(global.navigator && global.navigator.standalone)) {
var toggle = true;
var node = document.createTextNode('');
new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
notify = function () {
node.data = toggle = !toggle;
};
// environments with maybe non-completely correct, but existent Promise
} else if (Promise && Promise.resolve) {
// Promise.resolve without an argument throws an error in LG WebOS 2
var promise = Promise.resolve(undefined);
notify = function () {
promise.then(flush);
};
// for other environments - macrotask based on:
// - setImmediate
// - MessageChannel
// - window.postMessag
// - onreadystatechange
// - setTimeout
} else {
notify = function () {
// strange IE + webpack dev server bug - use .call(global)
macrotask.call(global, flush);
};
}
return function (fn) {
var task = { fn: fn, next: undefined };
if (last) last.next = task;
if (!head) {
head = task;
notify();
} last = task;
};
};
/***/ }),
/* 128 */
/***/ (function(module, exports) {
// fast apply, http://jsperf.lnkit.com/fast-apply/5
module.exports = function (fn, args, that) {
var un = that === undefined;
switch (args.length) {
case 0: return un ? fn()
: fn.call(that);
case 1: return un ? fn(args[0])
: fn.call(that, args[0]);
case 2: return un ? fn(args[0], args[1])
: fn.call(that, args[0], args[1]);
case 3: return un ? fn(args[0], args[1], args[2])
: fn.call(that, args[0], args[1], args[2]);
case 4: return un ? fn(args[0], args[1], args[2], args[3])
: fn.call(that, args[0], args[1], args[2], args[3]);
} return fn.apply(that, args);
};
/***/ }),
/* 129 */
/***/ (function(module, exports, __webpack_require__) {
// 7.3.20 SpeciesConstructor(O, defaultConstructor)
var anObject = __webpack_require__(6);
var aFunction = __webpack_require__(26);
var SPECIES = __webpack_require__(0)('species');
module.exports = function (O, D) {
var C = anObject(O).constructor;
var S;
return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? D : aFunction(S);
};
/***/ }),
/* 130 */
/***/ (function(module, exports, __webpack_require__) {
var classof = __webpack_require__(30);
var ITERATOR = __webpack_require__(0)('iterator');
var Iterators = __webpack_require__(18);
module.exports = __webpack_require__(2).getIteratorMethod = function (it) {
if (it != undefined) return it[ITERATOR]
|| it['@@iterator']
|| Iterators[classof(it)];
};
/***/ }),
/* 131 */
/***/ (function(module, exports, __webpack_require__) {
// check on default Array iterator
var Iterators = __webpack_require__(18);
var ITERATOR = __webpack_require__(0)('iterator');
var ArrayProto = Array.prototype;
module.exports = function (it) {
return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it);
};
/***/ }),
/* 132 */
/***/ (function(module, exports, __webpack_require__) {
// call something on iterator step with safe closing on error
var anObject = __webpack_require__(6);
module.exports = function (iterator, fn, value, entries) {
try {
return entries ? fn(anObject(value)[0], value[1]) : fn(value);
// 7.4.6 IteratorClose(iterator, completion)
} catch (e) {
var ret = iterator['return'];
if (ret !== undefined) anObject(ret.call(iterator));
throw e;
}
};
/***/ }),
/* 133 */
/***/ (function(module, exports, __webpack_require__) {
var ctx = __webpack_require__(27);
var call = __webpack_require__(132);
var isArrayIter = __webpack_require__(131);
var anObject = __webpack_require__(6);
var toLength = __webpack_require__(56);
var getIterFn = __webpack_require__(130);
var BREAK = {};
var RETURN = {};
var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {
var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable);
var f = ctx(fn, that, entries ? 2 : 1);
var index = 0;
var length, step, iterator, result;
if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');
// fast case for arrays with default iterator
if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) {
result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]);
if (result === BREAK || result === RETURN) return result;
} else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) {
result = call(iterator, f, step.value, entries);
if (result === BREAK || result === RETURN) return result;
}
};
exports.BREAK = BREAK;
exports.RETURN = RETURN;
/***/ }),
/* 134 */
/***/ (function(module, exports) {
module.exports = function (it, Constructor, name, forbiddenField) {
if (!(it instanceof Constructor) || (forbiddenField !== undefined && forbiddenField in it)) {
throw TypeError(name + ': incorrect invocation!');
} return it;
};
/***/ }),
/* 135 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var LIBRARY = __webpack_require__(21);
var global = __webpack_require__(1);
var ctx = __webpack_require__(27);
var classof = __webpack_require__(30);
var $export = __webpack_require__(15);
var isObject = __webpack_require__(8);
var aFunction = __webpack_require__(26);
var anInstance = __webpack_require__(134);
var forOf = __webpack_require__(133);
var speciesConstructor = __webpack_require__(129);
var task = __webpack_require__(48).set;
var microtask = __webpack_require__(127)();
var newPromiseCapabilityModule = __webpack_require__(47);
var perform = __webpack_require__(126);
var userAgent = __webpack_require__(125);
var promiseResolve = __webpack_require__(124);
var PROMISE = 'Promise';
var TypeError = global.TypeError;
var process = global.process;
var versions = process && process.versions;
var v8 = versions && versions.v8 || '';
var $Promise = global[PROMISE];
var isNode = classof(process) == 'process';
var empty = function () { /* empty */ };
var Internal, newGenericPromiseCapability, OwnPromiseCapability, Wrapper;
var newPromiseCapability = newGenericPromiseCapability = newPromiseCapabilityModule.f;
var USE_NATIVE = !!function () {
try {
// correct subclassing with @@species support
var promise = $Promise.resolve(1);
var FakePromise = (promise.constructor = {})[__webpack_require__(0)('species')] = function (exec) {
exec(empty, empty);
};
// unhandled rejections tracking support, NodeJS Promise without it fails @@species test
return (isNode || typeof PromiseRejectionEvent == 'function')
&& promise.then(empty) instanceof FakePromise
// v8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables
// https://bugs.chromium.org/p/chromium/issues/detail?id=830565
// we can't detect it synchronously, so just check versions
&& v8.indexOf('6.6') !== 0
&& userAgent.indexOf('Chrome/66') === -1;
} catch (e) { /* empty */ }
}();
// helpers
var isThenable = function (it) {
var then;
return isObject(it) && typeof (then = it.then) == 'function' ? then : false;
};
var notify = function (promise, isReject) {
if (promise._n) return;
promise._n = true;
var chain = promise._c;
microtask(function () {
var value = promise._v;
var ok = promise._s == 1;
var i = 0;
var run = function (reaction) {
var handler = ok ? reaction.ok : reaction.fail;
var resolve = reaction.resolve;
var reject = reaction.reject;
var domain = reaction.domain;
var result, then, exited;
try {
if (handler) {
if (!ok) {
if (promise._h == 2) onHandleUnhandled(promise);
promise._h = 1;
}
if (handler === true) result = value;
else {
if (domain) domain.enter();
result = handler(value); // may throw
if (domain) {
domain.exit();
exited = true;
}
}
if (result === reaction.promise) {
reject(TypeError('Promise-chain cycle'));
} else if (then = isThenable(result)) {
then.call(result, resolve, reject);
} else resolve(result);
} else reject(value);
} catch (e) {
if (domain && !exited) domain.exit();
reject(e);
}
};
while (chain.length > i) run(chain[i++]); // variable length - can't use forEach
promise._c = [];
promise._n = false;
if (isReject && !promise._h) onUnhandled(promise);
});
};
var onUnhandled = function (promise) {
task.call(global, function () {
var value = promise._v;
var unhandled = isUnhandled(promise);
var result, handler, console;
if (unhandled) {
result = perform(function () {
if (isNode) {
process.emit('unhandledRejection', value, promise);
} else if (handler = global.onunhandledrejection) {
handler({ promise: promise, reason: value });
} else if ((console = global.console) && console.error) {
console.error('Unhandled promise rejection', value);
}
});
// Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should
promise._h = isNode || isUnhandled(promise) ? 2 : 1;
} promise._a = undefined;
if (unhandled && result.e) throw result.v;
});
};
var isUnhandled = function (promise) {
return promise._h !== 1 && (promise._a || promise._c).length === 0;
};
var onHandleUnhandled = function (promise) {
task.call(global, function () {
var handler;
if (isNode) {
process.emit('rejectionHandled', promise);
} else if (handler = global.onrejectionhandled) {
handler({ promise: promise, reason: promise._v });
}
});
};
var $reject = function (value) {
var promise = this;
if (promise._d) return;
promise._d = true;
promise = promise._w || promise; // unwrap
promise._v = value;
promise._s = 2;
if (!promise._a) promise._a = promise._c.slice();
notify(promise, true);
};
var $resolve = function (value) {
var promise = this;
var then;
if (promise._d) return;
promise._d = true;
promise = promise._w || promise; // unwrap
try {
if (promise === value) throw TypeError("Promise can't be resolved itself");
if (then = isThenable(value)) {
microtask(function () {
var wrapper = { _w: promise, _d: false }; // wrap
try {
then.call(value, ctx($resolve, wrapper, 1), ctx($reject, wrapper, 1));
} catch (e) {
$reject.call(wrapper, e);
}
});
} else {
promise._v = value;
promise._s = 1;
notify(promise, false);
}
} catch (e) {
$reject.call({ _w: promise, _d: false }, e); // wrap
}
};
// constructor polyfill
if (!USE_NATIVE) {
// 25.4.3.1 Promise(executor)
$Promise = function Promise(executor) {
anInstance(this, $Promise, PROMISE, '_h');
aFunction(executor);
Internal.call(this);
try {
executor(ctx($resolve, this, 1), ctx($reject, this, 1));
} catch (err) {
$reject.call(this, err);
}
};
// eslint-disable-next-line no-unused-vars
Internal = function Promise(executor) {
this._c = []; // <- awaiting reactions
this._a = undefined; // <- checked in isUnhandled reactions
this._s = 0; // <- state
this._d = false; // <- done
this._v = undefined; // <- value
this._h = 0; // <- rejection state, 0 - default, 1 - handled, 2 - unhandled
this._n = false; // <- notify
};
Internal.prototype = __webpack_require__(123)($Promise.prototype, {
// 25.4.5.3 Promise.prototype.then(onFulfilled, onRejected)
then: function then(onFulfilled, onRejected) {
var reaction = newPromiseCapability(speciesConstructor(this, $Promise));
reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;
reaction.fail = typeof onRejected == 'function' && onRejected;
reaction.domain = isNode ? process.domain : undefined;
this._c.push(reaction);
if (this._a) this._a.push(reaction);
if (this._s) notify(this, false);
return reaction.promise;
},
// 25.4.5.1 Promise.prototype.catch(onRejected)
'catch': function (onRejected) {
return this.then(undefined, onRejected);
}
});
OwnPromiseCapability = function () {
var promise = new Internal();
this.promise = promise;
this.resolve = ctx($resolve, promise, 1);
this.reject = ctx($reject, promise, 1);
};
newPromiseCapabilityModule.f = newPromiseCapability = function (C) {
return C === $Promise || C === Wrapper
? new OwnPromiseCapability(C)
: newGenericPromiseCapability(C);
};
}
$export($export.G + $export.W + $export.F * !USE_NATIVE, { Promise: $Promise });
__webpack_require__(25)($Promise, PROMISE);
__webpack_require__(122)(PROMISE);
Wrapper = __webpack_require__(2)[PROMISE];
// statics
$export($export.S + $export.F * !USE_NATIVE, PROMISE, {
// 25.4.4.5 Promise.reject(r)
reject: function reject(r) {
var capability = newPromiseCapability(this);
var $$reject = capability.reject;
$$reject(r);
return capability.promise;
}
});
$export($export.S + $export.F * (LIBRARY || !USE_NATIVE), PROMISE, {
// 25.4.4.6 Promise.resolve(x)
resolve: function resolve(x) {
return promiseResolve(LIBRARY && this === Wrapper ? $Promise : this, x);
}
});
$export($export.S + $export.F * !(USE_NATIVE && __webpack_require__(121)(function (iter) {
$Promise.all(iter)['catch'](empty);
})), PROMISE, {
// 25.4.4.1 Promise.all(iterable)
all: function all(iterable) {
var C = this;
var capability = newPromiseCapability(C);
var resolve = capability.resolve;
var reject = capability.reject;
var result = perform(function () {
var values = [];
var index = 0;
var remaining = 1;
forOf(iterable, false, function (promise) {
var $index = index++;
var alreadyCalled = false;
values.push(undefined);
remaining++;
C.resolve(promise).then(function (value) {
if (alreadyCalled) return;
alreadyCalled = true;
values[$index] = value;
--remaining || resolve(values);
}, reject);
});
--remaining || resolve(values);
});
if (result.e) reject(result.v);
return capability.promise;
},
// 25.4.4.4 Promise.race(iterable)
race: function race(iterable) {
var C = this;
var capability = newPromiseCapability(C);
var reject = capability.reject;
var result = perform(function () {
forOf(iterable, false, function (promise) {
C.resolve(promise).then(capability.resolve, reject);
});
});
if (result.e) reject(result.v);
return capability.promise;
}
});
/***/ }),
/* 136 */
/***/ (function(module, exports) {
module.exports = function (done, value) {
return { value: value, done: !!done };
};
/***/ }),
/* 137 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var addToUnscopables = __webpack_require__(49);
var step = __webpack_require__(136);
var Iterators = __webpack_require__(18);
var toIObject = __webpack_require__(7);
// 22.1.3.4 Array.prototype.entries()
// 22.1.3.13 Array.prototype.keys()
// 22.1.3.29 Array.prototype.values()
// 22.1.3.30 Array.prototype[@@iterator]()
module.exports = __webpack_require__(51)(Array, 'Array', function (iterated, kind) {
this._t = toIObject(iterated); // target
this._i = 0; // next index
this._k = kind; // kind
// 22.1.5.2.1 %ArrayIteratorPrototype%.next()
}, function () {
var O = this._t;
var kind = this._k;
var index = this._i++;
if (!O || index >= O.length) {
this._t = undefined;
return step(1);
}
if (kind == 'keys') return step(0, index);
if (kind == 'values') return step(0, O[index]);
return step(0, [index, O[index]]);
}, 'values');
// argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7)
Iterators.Arguments = Iterators.Array;
addToUnscopables('keys');
addToUnscopables('values');
addToUnscopables('entries');
/***/ }),
/* 138 */
/***/ (function(module, exports, __webpack_require__) {
var $iterators = __webpack_require__(137);
var getKeys = __webpack_require__(13);
var redefine = __webpack_require__(14);
var global = __webpack_require__(1);
var hide = __webpack_require__(10);
var Iterators = __webpack_require__(18);
var wks = __webpack_require__(0);
var ITERATOR = wks('iterator');
var TO_STRING_TAG = wks('toStringTag');
var ArrayValues = Iterators.Array;
var DOMIterables = {
CSSRuleList: true, // TODO: Not spec compliant, should be false.
CSSStyleDeclaration: false,
CSSValueList: false,
ClientRectList: false,
DOMRectList: false,
DOMStringList: false,
DOMTokenList: true,
DataTransferItemList: false,
FileList: false,
HTMLAllCollection: false,
HTMLCollection: false,
HTMLFormElement: false,
HTMLSelectElement: false,
MediaList: true, // TODO: Not spec compliant, should be false.
MimeTypeArray: false,
NamedNodeMap: false,
NodeList: true,
PaintRequestList: false,
Plugin: false,
PluginArray: false,
SVGLengthList: false,
SVGNumberList: false,
SVGPathSegList: false,
SVGPointList: false,
SVGStringList: false,
SVGTransformList: false,
SourceBufferList: false,
StyleSheetList: true, // TODO: Not spec compliant, should be false.
TextTrackCueList: false,
TextTrackList: false,
TouchList: false
};
for (var collections = getKeys(DOMIterables), i = 0; i < collections.length; i++) {
var NAME = collections[i];
var explicit = DOMIterables[NAME];
var Collection = global[NAME];
var proto = Collection && Collection.prototype;
var key;
if (proto) {
if (!proto[ITERATOR]) hide(proto, ITERATOR, ArrayValues);
if (!proto[TO_STRING_TAG]) hide(proto, TO_STRING_TAG, NAME);
Iterators[NAME] = ArrayValues;
if (explicit) for (key in $iterators) if (!proto[key]) redefine(proto, key, $iterators[key], true);
}
}
/***/ }),
/* 139 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)
var has = __webpack_require__(12);
var toObject = __webpack_require__(50);
var IE_PROTO = __webpack_require__(33)('IE_PROTO');
var ObjectProto = Object.prototype;
module.exports = Object.getPrototypeOf || function (O) {
O = toObject(O);
if (has(O, IE_PROTO)) return O[IE_PROTO];
if (typeof O.constructor == 'function' && O instanceof O.constructor) {
return O.constructor.prototype;
} return O instanceof Object ? ObjectProto : null;
};
/***/ }),
/* 140 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var create = __webpack_require__(55);
var descriptor = __webpack_require__(28);
var setToStringTag = __webpack_require__(25);
var IteratorPrototype = {};
// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()
__webpack_require__(10)(IteratorPrototype, __webpack_require__(0)('iterator'), function () { return this; });
module.exports = function (Constructor, NAME, next) {
Constructor.prototype = create(IteratorPrototype, { next: descriptor(1, next) });
setToStringTag(Constructor, NAME + ' Iterator');
};
/***/ }),
/* 141 */
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__(34);
var defined = __webpack_require__(35);
// true -> String#at
// false -> String#codePointAt
module.exports = function (TO_STRING) {
return function (that, pos) {
var s = String(defined(that));
var i = toInteger(pos);
var l = s.length;
var a, b;
if (i < 0 || i >= l) return TO_STRING ? '' : undefined;
a = s.charCodeAt(i);
return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff
? TO_STRING ? s.charAt(i) : a
: TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;
};
};
/***/ }),
/* 142 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var $at = __webpack_require__(141)(true);
// 21.1.3.27 String.prototype[@@iterator]()
__webpack_require__(51)(String, 'String', function (iterated) {
this._t = String(iterated); // target
this._i = 0; // next index
// 21.1.5.2.1 %StringIteratorPrototype%.next()
}, function () {
var O = this._t;
var index = this._i;
var point;
if (index >= O.length) return { value: undefined, done: true };
point = $at(O, index);
this._i += point.length;
return { value: point, done: false };
});
/***/ }),
/* 143 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(52);
__webpack_require__(142);
__webpack_require__(138);
__webpack_require__(135);
module.exports = __webpack_require__(2).Promise;
/***/ }),
/* 144 */
/***/ (function(module, exports, __webpack_require__) {
var pIE = __webpack_require__(19);
var createDesc = __webpack_require__(28);
var toIObject = __webpack_require__(7);
var toPrimitive = __webpack_require__(37);
var has = __webpack_require__(12);
var IE8_DOM_DEFINE = __webpack_require__(61);
var gOPD = Object.getOwnPropertyDescriptor;
exports.f = __webpack_require__(11) ? gOPD : function getOwnPropertyDescriptor(O, P) {
O = toIObject(O);
P = toPrimitive(P, true);
if (IE8_DOM_DEFINE) try {
return gOPD(O, P);
} catch (e) { /* empty */ }
if (has(O, P)) return createDesc(!pIE.f.call(O, P), O[P]);
};
/***/ }),
/* 145 */
/***/ (function(module, exports, __webpack_require__) {
// fallback for IE11 buggy Object.getOwnPropertyNames with iframe and window
var toIObject = __webpack_require__(7);
var gOPN = __webpack_require__(53).f;
var toString = {}.toString;
var windowNames = typeof window == 'object' && window && Object.getOwnPropertyNames
? Object.getOwnPropertyNames(window) : [];
var getWindowNames = function (it) {
try {
return gOPN(it);
} catch (e) {
return windowNames.slice();
}
};
module.exports.f = function getOwnPropertyNames(it) {
return windowNames && toString.call(it) == '[object Window]' ? getWindowNames(it) : gOPN(toIObject(it));
};
/***/ }),
/* 146 */
/***/ (function(module, exports, __webpack_require__) {
var dP = __webpack_require__(9);
var anObject = __webpack_require__(6);
var getKeys = __webpack_require__(13);
module.exports = __webpack_require__(11) ? Object.defineProperties : function defineProperties(O, Properties) {
anObject(O);
var keys = getKeys(Properties);
var length = keys.length;
var i = 0;
var P;
while (length > i) dP.f(O, P = keys[i++], Properties[P]);
return O;
};
/***/ }),
/* 147 */
/***/ (function(module, exports, __webpack_require__) {
// 7.2.2 IsArray(argument)
var cof = __webpack_require__(20);
module.exports = Array.isArray || function isArray(arg) {
return cof(arg) == 'Array';
};
/***/ }),
/* 148 */
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__(34);
var max = Math.max;
var min = Math.min;
module.exports = function (index, length) {
index = toInteger(index);
return index < 0 ? max(index + length, 0) : min(index, length);
};
/***/ }),
/* 149 */
/***/ (function(module, exports, __webpack_require__) {
// all enumerable object keys, includes symbols
var getKeys = __webpack_require__(13);
var gOPS = __webpack_require__(31);
var pIE = __webpack_require__(19);
module.exports = function (it) {
var result = getKeys(it);
var getSymbols = gOPS.f;
if (getSymbols) {
var symbols = getSymbols(it);
var isEnum = pIE.f;
var i = 0;
var key;
while (symbols.length > i) if (isEnum.call(it, key = symbols[i++])) result.push(key);
} return result;
};
/***/ }),
/* 150 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var core = __webpack_require__(2);
var LIBRARY = __webpack_require__(21);
var wksExt = __webpack_require__(60);
var defineProperty = __webpack_require__(9).f;
module.exports = function (name) {
var $Symbol = core.Symbol || (core.Symbol = LIBRARY ? {} : global.Symbol || {});
if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty($Symbol, name, { value: wksExt.f(name) });
};
/***/ }),
/* 151 */
/***/ (function(module, exports, __webpack_require__) {
var META = __webpack_require__(22)('meta');
var isObject = __webpack_require__(8);
var has = __webpack_require__(12);
var setDesc = __webpack_require__(9).f;
var id = 0;
var isExtensible = Object.isExtensible || function () {
return true;
};
var FREEZE = !__webpack_require__(23)(function () {
return isExtensible(Object.preventExtensions({}));
});
var setMeta = function (it) {
setDesc(it, META, { value: {
i: 'O' + ++id, // object ID
w: {} // weak collections IDs
} });
};
var fastKey = function (it, create) {
// return primitive with prefix
if (!isObject(it)) return typeof it == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it;
if (!has(it, META)) {
// can't set metadata to uncaught frozen object
if (!isExtensible(it)) return 'F';
// not necessary to add metadata
if (!create) return 'E';
// add missing metadata
setMeta(it);
// return object ID
} return it[META].i;
};
var getWeak = function (it, create) {
if (!has(it, META)) {
// can't set metadata to uncaught frozen object
if (!isExtensible(it)) return true;
// not necessary to add metadata
if (!create) return false;
// add missing metadata
setMeta(it);
// return hash weak collections IDs
} return it[META].w;
};
// add metadata on freeze-family methods calling
var onFreeze = function (it) {
if (FREEZE && meta.NEED && isExtensible(it) && !has(it, META)) setMeta(it);
return it;
};
var meta = module.exports = {
KEY: META,
NEED: false,
fastKey: fastKey,
getWeak: getWeak,
onFreeze: onFreeze
};
/***/ }),
/* 152 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// ECMAScript 6 symbols shim
var global = __webpack_require__(1);
var has = __webpack_require__(12);
var DESCRIPTORS = __webpack_require__(11);
var $export = __webpack_require__(15);
var redefine = __webpack_require__(14);
var META = __webpack_require__(151).KEY;
var $fails = __webpack_require__(23);
var shared = __webpack_require__(36);
var setToStringTag = __webpack_require__(25);
var uid = __webpack_require__(22);
var wks = __webpack_require__(0);
var wksExt = __webpack_require__(60);
var wksDefine = __webpack_require__(150);
var enumKeys = __webpack_require__(149);
var isArray = __webpack_require__(147);
var anObject = __webpack_require__(6);
var isObject = __webpack_require__(8);
var toIObject = __webpack_require__(7);
var toPrimitive = __webpack_require__(37);
var createDesc = __webpack_require__(28);
var _create = __webpack_require__(55);
var gOPNExt = __webpack_require__(145);
var $GOPD = __webpack_require__(144);
var $DP = __webpack_require__(9);
var $keys = __webpack_require__(13);
var gOPD = $GOPD.f;
var dP = $DP.f;
var gOPN = gOPNExt.f;
var $Symbol = global.Symbol;
var $JSON = global.JSON;
var _stringify = $JSON && $JSON.stringify;
var PROTOTYPE = 'prototype';
var HIDDEN = wks('_hidden');
var TO_PRIMITIVE = wks('toPrimitive');
var isEnum = {}.propertyIsEnumerable;
var SymbolRegistry = shared('symbol-registry');
var AllSymbols = shared('symbols');
var OPSymbols = shared('op-symbols');
var ObjectProto = Object[PROTOTYPE];
var USE_NATIVE = typeof $Symbol == 'function';
var QObject = global.QObject;
// Don't use setters in Qt Script, https://github.com/zloirock/core-js/issues/173
var setter = !QObject || !QObject[PROTOTYPE] || !QObject[PROTOTYPE].findChild;
// fallback for old Android, https://code.google.com/p/v8/issues/detail?id=687
var setSymbolDesc = DESCRIPTORS && $fails(function () {
return _create(dP({}, 'a', {
get: function () { return dP(this, 'a', { value: 7 }).a; }
})).a != 7;
}) ? function (it, key, D) {
var protoDesc = gOPD(ObjectProto, key);
if (protoDesc) delete ObjectProto[key];
dP(it, key, D);
if (protoDesc && it !== ObjectProto) dP(ObjectProto, key, protoDesc);
} : dP;
var wrap = function (tag) {
var sym = AllSymbols[tag] = _create($Symbol[PROTOTYPE]);
sym._k = tag;
return sym;
};
var isSymbol = USE_NATIVE && typeof $Symbol.iterator == 'symbol' ? function (it) {
return typeof it == 'symbol';
} : function (it) {
return it instanceof $Symbol;
};
var $defineProperty = function defineProperty(it, key, D) {
if (it === ObjectProto) $defineProperty(OPSymbols, key, D);
anObject(it);
key = toPrimitive(key, true);
anObject(D);
if (has(AllSymbols, key)) {
if (!D.enumerable) {
if (!has(it, HIDDEN)) dP(it, HIDDEN, createDesc(1, {}));
it[HIDDEN][key] = true;
} else {
if (has(it, HIDDEN) && it[HIDDEN][key]) it[HIDDEN][key] = false;
D = _create(D, { enumerable: createDesc(0, false) });
} return setSymbolDesc(it, key, D);
} return dP(it, key, D);
};
var $defineProperties = function defineProperties(it, P) {
anObject(it);
var keys = enumKeys(P = toIObject(P));
var i = 0;
var l = keys.length;
var key;
while (l > i) $defineProperty(it, key = keys[i++], P[key]);
return it;
};
var $create = function create(it, P) {
return P === undefined ? _create(it) : $defineProperties(_create(it), P);
};
var $propertyIsEnumerable = function propertyIsEnumerable(key) {
var E = isEnum.call(this, key = toPrimitive(key, true));
if (this === ObjectProto && has(AllSymbols, key) && !has(OPSymbols, key)) return false;
return E || !has(this, key) || !has(AllSymbols, key) || has(this, HIDDEN) && this[HIDDEN][key] ? E : true;
};
var $getOwnPropertyDescriptor = function getOwnPropertyDescriptor(it, key) {
it = toIObject(it);
key = toPrimitive(key, true);
if (it === ObjectProto && has(AllSymbols, key) && !has(OPSymbols, key)) return;
var D = gOPD(it, key);
if (D && has(AllSymbols, key) && !(has(it, HIDDEN) && it[HIDDEN][key])) D.enumerable = true;
return D;
};
var $getOwnPropertyNames = function getOwnPropertyNames(it) {
var names = gOPN(toIObject(it));
var result = [];
var i = 0;
var key;
while (names.length > i) {
if (!has(AllSymbols, key = names[i++]) && key != HIDDEN && key != META) result.push(key);
} return result;
};
var $getOwnPropertySymbols = function getOwnPropertySymbols(it) {
var IS_OP = it === ObjectProto;
var names = gOPN(IS_OP ? OPSymbols : toIObject(it));
var result = [];
var i = 0;
var key;
while (names.length > i) {
if (has(AllSymbols, key = names[i++]) && (IS_OP ? has(ObjectProto, key) : true)) result.push(AllSymbols[key]);
} return result;
};
// 19.4.1.1 Symbol([description])
if (!USE_NATIVE) {
$Symbol = function Symbol() {
if (this instanceof $Symbol) throw TypeError('Symbol is not a constructor!');
var tag = uid(arguments.length > 0 ? arguments[0] : undefined);
var $set = function (value) {
if (this === ObjectProto) $set.call(OPSymbols, value);
if (has(this, HIDDEN) && has(this[HIDDEN], tag)) this[HIDDEN][tag] = false;
setSymbolDesc(this, tag, createDesc(1, value));
};
if (DESCRIPTORS && setter) setSymbolDesc(ObjectProto, tag, { configurable: true, set: $set });
return wrap(tag);
};
redefine($Symbol[PROTOTYPE], 'toString', function toString() {
return this._k;
});
$GOPD.f = $getOwnPropertyDescriptor;
$DP.f = $defineProperty;
__webpack_require__(53).f = gOPNExt.f = $getOwnPropertyNames;
__webpack_require__(19).f = $propertyIsEnumerable;
__webpack_require__(31).f = $getOwnPropertySymbols;
if (DESCRIPTORS && !__webpack_require__(21)) {
redefine(ObjectProto, 'propertyIsEnumerable', $propertyIsEnumerable, true);
}
wksExt.f = function (name) {
return wrap(wks(name));
};
}
$export($export.G + $export.W + $export.F * !USE_NATIVE, { Symbol: $Symbol });
for (var es6Symbols = (
// 19.4.2.2, 19.4.2.3, 19.4.2.4, 19.4.2.6, 19.4.2.8, 19.4.2.9, 19.4.2.10, 19.4.2.11, 19.4.2.12, 19.4.2.13, 19.4.2.14
'hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables'
).split(','), j = 0; es6Symbols.length > j;)wks(es6Symbols[j++]);
for (var wellKnownSymbols = $keys(wks.store), k = 0; wellKnownSymbols.length > k;) wksDefine(wellKnownSymbols[k++]);
$export($export.S + $export.F * !USE_NATIVE, 'Symbol', {
// 19.4.2.1 Symbol.for(key)
'for': function (key) {
return has(SymbolRegistry, key += '')
? SymbolRegistry[key]
: SymbolRegistry[key] = $Symbol(key);
},
// 19.4.2.5 Symbol.keyFor(sym)
keyFor: function keyFor(sym) {
if (!isSymbol(sym)) throw TypeError(sym + ' is not a symbol!');
for (var key in SymbolRegistry) if (SymbolRegistry[key] === sym) return key;
},
useSetter: function () { setter = true; },
useSimple: function () { setter = false; }
});
$export($export.S + $export.F * !USE_NATIVE, 'Object', {
// 19.1.2.2 Object.create(O [, Properties])
create: $create,
// 19.1.2.4 Object.defineProperty(O, P, Attributes)
defineProperty: $defineProperty,
// 19.1.2.3 Object.defineProperties(O, Properties)
defineProperties: $defineProperties,
// 19.1.2.6 Object.getOwnPropertyDescriptor(O, P)
getOwnPropertyDescriptor: $getOwnPropertyDescriptor,
// 19.1.2.7 Object.getOwnPropertyNames(O)
getOwnPropertyNames: $getOwnPropertyNames,
// 19.1.2.8 Object.getOwnPropertySymbols(O)
getOwnPropertySymbols: $getOwnPropertySymbols
});
// 24.3.2 JSON.stringify(value [, replacer [, space]])
$JSON && $export($export.S + $export.F * (!USE_NATIVE || $fails(function () {
var S = $Symbol();
// MS Edge converts symbol values to JSON as {}
// WebKit converts symbol values to JSON as null
// V8 throws on boxed symbols
return _stringify([S]) != '[null]' || _stringify({ a: S }) != '{}' || _stringify(Object(S)) != '{}';
})), 'JSON', {
stringify: function stringify(it) {
var args = [it];
var i = 1;
var replacer, $replacer;
while (arguments.length > i) args.push(arguments[i++]);
$replacer = replacer = args[1];
if (!isObject(replacer) && it === undefined || isSymbol(it)) return; // IE8 returns string on undefined
if (!isArray(replacer)) replacer = function (key, value) {
if (typeof $replacer == 'function') value = $replacer.call(this, key, value);
if (!isSymbol(value)) return value;
};
args[1] = replacer;
return _stringify.apply($JSON, args);
}
});
// 19.4.3.4 Symbol.prototype[@@toPrimitive](hint)
$Symbol[PROTOTYPE][TO_PRIMITIVE] || __webpack_require__(10)($Symbol[PROTOTYPE], TO_PRIMITIVE, $Symbol[PROTOTYPE].valueOf);
// 19.4.3.5 Symbol.prototype[@@toStringTag]
setToStringTag($Symbol, 'Symbol');
// 20.2.1.9 Math[@@toStringTag]
setToStringTag(Math, 'Math', true);
// 24.3.3 JSON[@@toStringTag]
setToStringTag(global.JSON, 'JSON', true);
/***/ }),
/* 153 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(152);
__webpack_require__(52);
module.exports = __webpack_require__(2).Symbol;
/***/ }),
/* 154 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Plugins = exports.Sensors = exports.Sortable = exports.Swappable = exports.Droppable = exports.Draggable = exports.BasePlugin = exports.BaseEvent = undefined;
__webpack_require__(153);
__webpack_require__(143);
__webpack_require__(120);
__webpack_require__(117);
__webpack_require__(114);
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _Sensors = __webpack_require__(29);
var Sensors = _interopRequireWildcard(_Sensors);
var _Plugins = __webpack_require__(96);
var Plugins = _interopRequireWildcard(_Plugins);
var _Draggable = __webpack_require__(24);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _Droppable = __webpack_require__(70);
var _Droppable2 = _interopRequireDefault(_Droppable);
var _Swappable = __webpack_require__(67);
var _Swappable2 = _interopRequireDefault(_Swappable);
var _Sortable = __webpack_require__(64);
var _Sortable2 = _interopRequireDefault(_Sortable);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.BaseEvent = _AbstractEvent2.default;
exports.BasePlugin = _AbstractPlugin2.default;
exports.Draggable = _Draggable2.default;
exports.Droppable = _Droppable2.default;
exports.Swappable = _Swappable2.default;
exports.Sortable = _Sortable2.default;
exports.Sensors = Sensors;
exports.Plugins = Plugins;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Draggable", [], factory);
else if(typeof exports === 'object')
exports["Draggable"] = factory();
else
root["Draggable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 40);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(18);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(21);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(25);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(23);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(34);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(38);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(20);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(17);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(15);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(13);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(0);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(36);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(33);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(31);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(27);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(37);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(39);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(9);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(2);
var _Plugins = __webpack_require__(6);
var _Emitter = __webpack_require__(10);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(5);
var _DraggableEvent = __webpack_require__(7);
var _DragEvent = __webpack_require__(8);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(12);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(14);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(16);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(4);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(19);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(22);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(24);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(3);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(26);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(4);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(28);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(3);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(29);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(30);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(3);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(32);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(3);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(35);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(4);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(4);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(8);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(7);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(6);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(5);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(11);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Sortable", [], factory);
else if(typeof exports === 'object')
exports["Sortable"] = factory();
else
root["Sortable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 44);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(19);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(22);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(26);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(24);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(42);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(35);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(21);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(18);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(16);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(14);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(0);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(37);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(34);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(32);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(28);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(38);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(39);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(43);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(10);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(2);
var _Plugins = __webpack_require__(6);
var _Emitter = __webpack_require__(11);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(5);
var _DraggableEvent = __webpack_require__(7);
var _DragEvent = __webpack_require__(8);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(13);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(15);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(17);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(20);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(23);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(25);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(27);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(29);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(30);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(31);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(33);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(36);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(8);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(7);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(6);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(5);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(12);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(40);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SortableEvent = __webpack_require__(9);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOverContainer = Symbol('onDragOverContainer');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns announcement message when a Draggable element has been sorted with another Draggable element
* or moved into a new container
* @param {SortableSortedEvent} sortableEvent
* @return {String}
*/
function onSortableSortedDefaultAnnouncement({ dragEvent }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'sortable element';
if (dragEvent.over) {
const overText = dragEvent.over.textContent.trim() || dragEvent.over.id || 'sortable element';
const isFollowing = dragEvent.source.compareDocumentPosition(dragEvent.over) & Node.DOCUMENT_POSITION_FOLLOWING;
if (isFollowing) {
return `Placed ${sourceText} after ${overText}`;
} else {
return `Placed ${sourceText} before ${overText}`;
}
} else {
// need to figure out how to compute container name
return `Placed ${sourceText} into a different container`;
}
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['sortable:sorted']
*/
const defaultAnnouncements = {
'sortable:sorted': onSortableSortedDefaultAnnouncement
};
/**
* Sortable is built on top of Draggable and allows sorting of draggable elements. Sortable will keep
* track of the original index and emits the new index as you drag over draggable elements.
* @class Sortable
* @module Sortable
* @extends Draggable
*/
class Sortable extends _Draggable2.default {
/**
* Sortable constructor.
* @constructs Sortable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Sortable containers
* @param {Object} options - Options for Sortable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* start index of source on drag start
* @property startIndex
* @type {Number}
*/
this.startIndex = null;
/**
* start container on drag start
* @property startContainer
* @type {HTMLElement}
* @default null
*/
this.startContainer = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOverContainer] = this[onDragOverContainer].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over:container', this[onDragOverContainer]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Sortable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:over:container', this[onDragOverContainer]).off('drag:over', this[onDragOver]).off('drag:stop', this[onDragStop]);
}
/**
* Returns true index of element within its container during drag operation, i.e. excluding mirror and original source
* @param {HTMLElement} element - An element
* @return {Number}
*/
index(element) {
return this.getDraggableElementsForContainer(element.parentNode).indexOf(element);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
this.startContainer = event.source.parentNode;
this.startIndex = this.index(event.source);
const sortableStartEvent = new _SortableEvent.SortableStartEvent({
dragEvent: event,
startIndex: this.startIndex,
startContainer: this.startContainer
});
this.trigger(sortableStartEvent);
if (sortableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over container handler
* @private
* @param {DragOverContainerEvent} event - Drag over container event
*/
[onDragOverContainer](event) {
if (event.canceled()) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(event.source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source) {
return;
}
const { source, over, overContainer } = event;
const oldIndex = this.index(source);
const sortableSortEvent = new _SortableEvent.SortableSortEvent({
dragEvent: event,
currentIndex: oldIndex,
source,
over
});
this.trigger(sortableSortEvent);
if (sortableSortEvent.canceled()) {
return;
}
const children = this.getDraggableElementsForContainer(overContainer);
const moves = move({ source, over, overContainer, children });
if (!moves) {
return;
}
const { oldContainer, newContainer } = moves;
const newIndex = this.index(source);
const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
dragEvent: event,
oldIndex,
newIndex,
oldContainer,
newContainer
});
this.trigger(sortableSortedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const sortableStopEvent = new _SortableEvent.SortableStopEvent({
dragEvent: event,
oldIndex: this.startIndex,
newIndex: this.index(event.source),
oldContainer: this.startContainer,
newContainer: event.source.parentNode
});
this.trigger(sortableStopEvent);
this.startIndex = null;
this.startContainer = null;
}
}
exports.default = Sortable;
function index(element) {
return Array.prototype.indexOf.call(element.parentNode.children, element);
}
function move({ source, over, overContainer, children }) {
const emptyOverContainer = !children.length;
const differentContainer = source.parentNode !== overContainer;
const sameContainer = over && !differentContainer;
if (emptyOverContainer) {
return moveInsideEmptyContainer(source, overContainer);
} else if (sameContainer) {
return moveWithinContainer(source, over);
} else if (differentContainer) {
return moveOutsideContainer(source, over, overContainer);
} else {
return null;
}
}
function moveInsideEmptyContainer(source, overContainer) {
const oldContainer = source.parentNode;
overContainer.appendChild(source);
return { oldContainer, newContainer: overContainer };
}
function moveWithinContainer(source, over) {
const oldIndex = index(source);
const newIndex = index(over);
if (oldIndex < newIndex) {
source.parentNode.insertBefore(source, over.nextElementSibling);
} else {
source.parentNode.insertBefore(source, over);
}
return { oldContainer: source.parentNode, newContainer: source.parentNode };
}
function moveOutsideContainer(source, over, overContainer) {
const oldContainer = source.parentNode;
if (over) {
over.parentNode.insertBefore(source, over);
} else {
// need to figure out proper position
overContainer.appendChild(source);
}
return { oldContainer, newContainer: source.parentNode };
}
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SortableStopEvent = exports.SortableSortedEvent = exports.SortableSortEvent = exports.SortableStartEvent = exports.SortableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sortable event
* @class SortableEvent
* @module SortableEvent
* @extends AbstractEvent
*/
class SortableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this sortable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SortableEvent = SortableEvent; /**
* Sortable start event
* @class SortableStartEvent
* @module SortableStartEvent
* @extends SortableEvent
*/
SortableEvent.type = 'sortable';
class SortableStartEvent extends SortableEvent {
/**
* Start index of source on sortable start
* @property startIndex
* @type {Number}
* @readonly
*/
get startIndex() {
return this.data.startIndex;
}
/**
* Start container on sortable start
* @property startContainer
* @type {HTMLElement}
* @readonly
*/
get startContainer() {
return this.data.startContainer;
}
}
exports.SortableStartEvent = SortableStartEvent; /**
* Sortable sort event
* @class SortableSortEvent
* @module SortableSortEvent
* @extends SortableEvent
*/
SortableStartEvent.type = 'sortable:start';
SortableStartEvent.cancelable = true;
class SortableSortEvent extends SortableEvent {
/**
* Index of current draggable element
* @property currentIndex
* @type {Number}
* @readonly
*/
get currentIndex() {
return this.data.currentIndex;
}
/**
* Draggable element you are hovering over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.oldIndex;
}
/**
* Draggable container element you are hovering over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.newIndex;
}
}
exports.SortableSortEvent = SortableSortEvent; /**
* Sortable sorted event
* @class SortableSortedEvent
* @module SortableSortedEvent
* @extends SortableEvent
*/
SortableSortEvent.type = 'sortable:sort';
SortableSortEvent.cancelable = true;
class SortableSortedEvent extends SortableEvent {
/**
* Index of last sorted event
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of this sorted event
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Old container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableSortedEvent = SortableSortedEvent; /**
* Sortable stop event
* @class SortableStopEvent
* @module SortableStopEvent
* @extends SortableEvent
*/
SortableSortedEvent.type = 'sortable:sorted';
class SortableStopEvent extends SortableEvent {
/**
* Original index on sortable start
* @property oldIndex
* @type {Number}
* @readonly
*/
get oldIndex() {
return this.data.oldIndex;
}
/**
* New index of draggable element
* @property newIndex
* @type {Number}
* @readonly
*/
get newIndex() {
return this.data.newIndex;
}
/**
* Original container of draggable element
* @property oldContainer
* @type {HTMLElement}
* @readonly
*/
get oldContainer() {
return this.data.oldContainer;
}
/**
* New container of draggable element
* @property newContainer
* @type {HTMLElement}
* @readonly
*/
get newContainer() {
return this.data.newContainer;
}
}
exports.SortableStopEvent = SortableStopEvent;
SortableStopEvent.type = 'sortable:stop';
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SortableEvent = __webpack_require__(9);
Object.keys(_SortableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SortableEvent[key];
}
});
});
var _Sortable = __webpack_require__(41);
var _Sortable2 = _interopRequireDefault(_Sortable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sortable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Droppable", [], factory);
else if(typeof exports === 'object')
exports["Droppable"] = factory();
else
root["Droppable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 44);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(40);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(38);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(19);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(22);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(42);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(31);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(2);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(21);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(18);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(16);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(14);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(1);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(33);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(30);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(28);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(24);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(34);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(35);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(43);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(10);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(0);
var _Plugins = __webpack_require__(6);
var _Emitter = __webpack_require__(11);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(5);
var _DraggableEvent = __webpack_require__(7);
var _DragEvent = __webpack_require__(8);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(2);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(13);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(0);
var _Sensor = __webpack_require__(2);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(15);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(0);
var _Sensor = __webpack_require__(2);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(17);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(0);
var _Sensor = __webpack_require__(2);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(20);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(23);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(25);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(26);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(27);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(29);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(32);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(8);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(7);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(6);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(5);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(12);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(37);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(39);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _utils = __webpack_require__(0);
var _Draggable = __webpack_require__(36);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _DroppableEvent = __webpack_require__(9);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const dropInDropzone = Symbol('dropInDropZone');
const returnToOriginalDropzone = Symbol('returnToOriginalDropzone');
const closestDropzone = Symbol('closestDropzone');
const getDropzones = Symbol('getDropzones');
/**
* Returns an announcement message when the Draggable element is dropped into a dropzone element
* @param {DroppableDroppedEvent} droppableEvent
* @return {String}
*/
function onDroppableDroppedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Dropped ${sourceText} into ${dropzoneText}`;
}
/**
* Returns an announcement message when the Draggable element has returned to its original dropzone element
* @param {DroppableReturnedEvent} droppableEvent
* @return {String}
*/
function onDroppableReturnedDefaultAnnouncement({ dragEvent, dropzone }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
return `Returned ${sourceText} from ${dropzoneText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['droppable:dropped']
* @const {Function} defaultAnnouncements['droppable:returned']
*/
const defaultAnnouncements = {
'droppable:dropped': onDroppableDroppedDefaultAnnouncement,
'droppable:returned': onDroppableReturnedDefaultAnnouncement
};
const defaultClasses = {
'droppable:active': 'draggable-dropzone--active',
'droppable:occupied': 'draggable-dropzone--occupied'
};
const defaultOptions = {
dropzone: '.draggable-droppable'
};
/**
* Droppable is built on top of Draggable and allows dropping draggable elements
* into dropzone element
* @class Droppable
* @module Droppable
* @extends Draggable
*/
class Droppable extends _Draggable2.default {
/**
* Droppable constructor.
* @constructs Droppable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Droppable containers
* @param {Object} options - Options for Droppable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* All dropzone elements on drag start
* @property dropzones
* @type {HTMLElement[]}
*/
this.dropzones = null;
/**
* Last dropzone element that the source was dropped into
* @property lastDropzone
* @type {HTMLElement}
*/
this.lastDropzone = null;
/**
* Initial dropzone element that the source was drag from
* @property initialDropzone
* @type {HTMLElement}
*/
this.initialDropzone = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Droppable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.dropzones = [...this[getDropzones]()];
const dropzone = (0, _utils.closest)(event.sensorEvent.target, this.options.dropzone);
if (!dropzone) {
event.cancel();
return;
}
const droppableStartEvent = new _DroppableEvent.DroppableStartEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableStartEvent);
if (droppableStartEvent.canceled()) {
event.cancel();
return;
}
this.initialDropzone = dropzone;
for (const dropzoneElement of this.dropzones) {
if (dropzoneElement.classList.contains(this.getClassNameFor('droppable:occupied'))) {
continue;
}
dropzoneElement.classList.add(this.getClassNameFor('droppable:active'));
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
if (event.canceled()) {
return;
}
const dropzone = this[closestDropzone](event.sensorEvent.target);
const overEmptyDropzone = dropzone && !dropzone.classList.contains(this.getClassNameFor('droppable:occupied'));
if (overEmptyDropzone && this[dropInDropzone](event, dropzone)) {
this.lastDropzone = dropzone;
} else if ((!dropzone || dropzone === this.initialDropzone) && this.lastDropzone) {
this[returnToOriginalDropzone](event);
this.lastDropzone = null;
}
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const droppableStopEvent = new _DroppableEvent.DroppableStopEvent({
dragEvent: event,
dropzone: this.lastDropzone || this.initialDropzone
});
this.trigger(droppableStopEvent);
const occupiedClass = this.getClassNameFor('droppable:occupied');
for (const dropzone of this.dropzones) {
dropzone.classList.remove(this.getClassNameFor('droppable:active'));
}
if (this.lastDropzone && this.lastDropzone !== this.initialDropzone) {
this.initialDropzone.classList.remove(occupiedClass);
}
this.dropzones = null;
this.lastDropzone = null;
this.initialDropzone = null;
}
/**
* Drops a draggable element into a dropzone element
* @private
* @param {DragMoveEvent} event - Drag move event
* @param {HTMLElement} dropzone - Dropzone element to drop draggable into
*/
[dropInDropzone](event, dropzone) {
const droppableDroppedEvent = new _DroppableEvent.DroppableDroppedEvent({
dragEvent: event,
dropzone
});
this.trigger(droppableDroppedEvent);
if (droppableDroppedEvent.canceled()) {
return false;
}
const occupiedClass = this.getClassNameFor('droppable:occupied');
if (this.lastDropzone) {
this.lastDropzone.classList.remove(occupiedClass);
}
dropzone.appendChild(event.source);
dropzone.classList.add(occupiedClass);
return true;
}
/**
* Moves the previously dropped element back into its original dropzone
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[returnToOriginalDropzone](event) {
const droppableReturnedEvent = new _DroppableEvent.DroppableReturnedEvent({
dragEvent: event,
dropzone: this.lastDropzone
});
this.trigger(droppableReturnedEvent);
if (droppableReturnedEvent.canceled()) {
return;
}
this.initialDropzone.appendChild(event.source);
this.lastDropzone.classList.remove(this.getClassNameFor('droppable:occupied'));
}
/**
* Returns closest dropzone element for even target
* @private
* @param {HTMLElement} target - Event target
* @return {HTMLElement|null}
*/
[closestDropzone](target) {
if (!this.dropzones) {
return null;
}
return (0, _utils.closest)(target, this.dropzones);
}
/**
* Returns all current dropzone elements for this draggable instance
* @private
* @return {NodeList|HTMLElement[]|Array}
*/
[getDropzones]() {
const dropzone = this.options.dropzone;
if (typeof dropzone === 'string') {
return document.querySelectorAll(dropzone);
} else if (dropzone instanceof NodeList || dropzone instanceof Array) {
return dropzone;
} else if (typeof dropzone === 'function') {
return dropzone();
} else {
return [];
}
}
}
exports.default = Droppable;
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DroppableStopEvent = exports.DroppableReturnedEvent = exports.DroppableDroppedEvent = exports.DroppableStartEvent = exports.DroppableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base droppable event
* @class DroppableEvent
* @module DroppableEvent
* @extends AbstractEvent
*/
class DroppableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this droppable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.DroppableEvent = DroppableEvent; /**
* Droppable start event
* @class DroppableStartEvent
* @module DroppableStartEvent
* @extends DroppableEvent
*/
DroppableEvent.type = 'droppable';
class DroppableStartEvent extends DroppableEvent {
/**
* The initial dropzone element of the currently dragging draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStartEvent = DroppableStartEvent; /**
* Droppable dropped event
* @class DroppableDroppedEvent
* @module DroppableDroppedEvent
* @extends DroppableEvent
*/
DroppableStartEvent.type = 'droppable:start';
DroppableStartEvent.cancelable = true;
class DroppableDroppedEvent extends DroppableEvent {
/**
* The dropzone element you dropped the draggable element into
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableDroppedEvent = DroppableDroppedEvent; /**
* Droppable returned event
* @class DroppableReturnedEvent
* @module DroppableReturnedEvent
* @extends DroppableEvent
*/
DroppableDroppedEvent.type = 'droppable:dropped';
DroppableDroppedEvent.cancelable = true;
class DroppableReturnedEvent extends DroppableEvent {
/**
* The dropzone element you dragged away from
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableReturnedEvent = DroppableReturnedEvent; /**
* Droppable stop event
* @class DroppableStopEvent
* @module DroppableStopEvent
* @extends DroppableEvent
*/
DroppableReturnedEvent.type = 'droppable:returned';
DroppableReturnedEvent.cancelable = true;
class DroppableStopEvent extends DroppableEvent {
/**
* The final dropzone element of the draggable element
* @property dropzone
* @type {HTMLElement}
* @readonly
*/
get dropzone() {
return this.data.dropzone;
}
}
exports.DroppableStopEvent = DroppableStopEvent;
DroppableStopEvent.type = 'droppable:stop';
DroppableStopEvent.cancelable = true;
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DroppableEvent = __webpack_require__(9);
Object.keys(_DroppableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DroppableEvent[key];
}
});
});
var _Droppable = __webpack_require__(41);
var _Droppable2 = _interopRequireDefault(_Droppable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Droppable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Swappable", [], factory);
else if(typeof exports === 'object')
exports["Swappable"] = factory();
else
root["Swappable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 44);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SensorEvent = __webpack_require__(19);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(22);
var _Sensor2 = _interopRequireDefault(_Sensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Sensor2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(26);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(24);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(42);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(35);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
Object.defineProperty(exports, 'Sensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Sensor).default;
}
});
var _MouseSensor = __webpack_require__(21);
Object.defineProperty(exports, 'MouseSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_MouseSensor).default;
}
});
var _TouchSensor = __webpack_require__(18);
Object.defineProperty(exports, 'TouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_TouchSensor).default;
}
});
var _DragSensor = __webpack_require__(16);
Object.defineProperty(exports, 'DragSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_DragSensor).default;
}
});
var _ForceTouchSensor = __webpack_require__(14);
Object.defineProperty(exports, 'ForceTouchSensor', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ForceTouchSensor).default;
}
});
var _SensorEvent = __webpack_require__(0);
Object.keys(_SensorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SensorEvent[key];
}
});
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Announcement = __webpack_require__(37);
Object.defineProperty(exports, 'Announcement', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Announcement).default;
}
});
Object.defineProperty(exports, 'defaultAnnouncementOptions', {
enumerable: true,
get: function () {
return _Announcement.defaultOptions;
}
});
var _Focusable = __webpack_require__(34);
Object.defineProperty(exports, 'Focusable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Focusable).default;
}
});
var _Mirror = __webpack_require__(32);
Object.defineProperty(exports, 'Mirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Mirror).default;
}
});
Object.defineProperty(exports, 'defaultMirrorOptions', {
enumerable: true,
get: function () {
return _Mirror.defaultOptions;
}
});
var _Scrollable = __webpack_require__(28);
Object.defineProperty(exports, 'Scrollable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Scrollable).default;
}
});
Object.defineProperty(exports, 'defaultScrollableOptions', {
enumerable: true,
get: function () {
return _Scrollable.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DraggableEvent = __webpack_require__(38);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(39);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(43);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
* @class Emitter
* @module Emitter
*/
class Emitter {
constructor() {
this.callbacks = {};
}
/**
* Registers callbacks by event name
* @param {String} type
* @param {...Function} callbacks
*/
on(type, ...callbacks) {
if (!this.callbacks[type]) {
this.callbacks[type] = [];
}
this.callbacks[type].push(...callbacks);
return this;
}
/**
* Unregisters callbacks by event name
* @param {String} type
* @param {Function} callback
*/
off(type, callback) {
if (!this.callbacks[type]) {
return null;
}
const copy = this.callbacks[type].slice(0);
for (let i = 0; i < copy.length; i++) {
if (callback === copy[i]) {
this.callbacks[type].splice(i, 1);
}
}
return this;
}
/**
* Triggers event callbacks by event object
* @param {AbstractEvent} event
*/
trigger(event) {
if (!this.callbacks[event.type]) {
return null;
}
const callbacks = [...this.callbacks[event.type]];
const caughtErrors = [];
for (let i = callbacks.length - 1; i >= 0; i--) {
const callback = callbacks[i];
try {
callback(event);
} catch (error) {
caughtErrors.push(error);
}
}
if (caughtErrors.length) {
/* eslint-disable no-console */
console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
/* eslint-disable no-console */
}
return this;
}
}
exports.default = Emitter;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Emitter = __webpack_require__(10);
var _Emitter2 = _interopRequireDefault(_Emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Emitter2.default;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _utils = __webpack_require__(2);
var _Plugins = __webpack_require__(6);
var _Emitter = __webpack_require__(11);
var _Emitter2 = _interopRequireDefault(_Emitter);
var _Sensors = __webpack_require__(5);
var _DraggableEvent = __webpack_require__(7);
var _DragEvent = __webpack_require__(8);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onDragPressure = Symbol('onDragPressure');
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['drag:start']
* @const {Function} defaultAnnouncements['drag:stop']
*/
const defaultAnnouncements = {
'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
};
const defaultClasses = {
'container:dragging': 'draggable-container--is-dragging',
'source:dragging': 'draggable-source--is-dragging',
'source:placed': 'draggable-source--placed',
'container:placed': 'draggable-container--placed',
'body:dragging': 'draggable--is-dragging',
'draggable:over': 'draggable--over',
'container:over': 'draggable-container--over',
'source:original': 'draggable--original',
mirror: 'draggable-mirror'
};
const defaultOptions = exports.defaultOptions = {
draggable: '.draggable-source',
handle: null,
delay: 100,
placedTimeout: 800,
plugins: [],
sensors: []
};
/**
* This is the core draggable library that does the heavy lifting
* @class Draggable
* @module Draggable
*/
class Draggable {
/**
* Draggable constructor.
* @constructs Draggable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
* @param {Object} options - Options for draggable
*/
constructor(containers = [document.body], options = {}) {
/**
* Draggable containers
* @property containers
* @type {HTMLElement[]}
*/
if (containers instanceof NodeList || containers instanceof Array) {
this.containers = [...containers];
} else if (containers instanceof HTMLElement) {
this.containers = [containers];
} else {
throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
}
this.options = _extends({}, defaultOptions, options, {
classes: _extends({}, defaultClasses, options.classes || {}),
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
});
/**
* Draggables event emitter
* @property emitter
* @type {Emitter}
*/
this.emitter = new _Emitter2.default();
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Active plugins
* @property plugins
* @type {Plugin[]}
*/
this.plugins = [];
/**
* Active sensors
* @property sensors
* @type {Sensor[]}
*/
this.sensors = [];
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragPressure] = this[onDragPressure].bind(this);
document.addEventListener('drag:start', this[onDragStart], true);
document.addEventListener('drag:move', this[onDragMove], true);
document.addEventListener('drag:stop', this[onDragStop], true);
document.addEventListener('drag:pressure', this[onDragPressure], true);
const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
this.addSensor(...[...defaultSensors, ...this.options.sensors]);
const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
draggable: this
});
this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
this.on('mirror:destroy', () => this.mirror = null);
this.trigger(draggableInitializedEvent);
}
/**
* Destroys Draggable instance. This removes all internal event listeners and
* deactivates sensors and plugins
*/
/**
* Default plugins draggable uses
* @static
* @property {Object} Plugins
* @property {Announcement} Plugins.Announcement
* @property {Focusable} Plugins.Focusable
* @property {Mirror} Plugins.Mirror
* @property {Scrollable} Plugins.Scrollable
* @type {Object}
*/
destroy() {
document.removeEventListener('drag:start', this[onDragStart], true);
document.removeEventListener('drag:move', this[onDragMove], true);
document.removeEventListener('drag:stop', this[onDragStop], true);
document.removeEventListener('drag:pressure', this[onDragPressure], true);
const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
draggable: this
});
this.trigger(draggableDestroyEvent);
this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
}
/**
* Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
* @return {Draggable}
* @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
*/
addPlugin(...plugins) {
const activePlugins = plugins.map(Plugin => new Plugin(this));
activePlugins.forEach(plugin => plugin.attach());
this.plugins = [...this.plugins, ...activePlugins];
return this;
}
/**
* Removes plugins that are already attached to this draggable instance. This will end up calling
* the detach method of the plugin
* @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
* @return {Draggable}
* @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
*/
removePlugin(...plugins) {
const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
removedPlugins.forEach(plugin => plugin.detach());
this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
return this;
}
/**
* Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.addSensor(ForceTouchSensor, CustomSensor)
*/
addSensor(...sensors) {
const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
activeSensors.forEach(sensor => sensor.attach());
this.sensors = [...this.sensors, ...activeSensors];
return this;
}
/**
* Removes sensors that are already attached to this draggable instance. This will end up calling
* the detach method of the sensor
* @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
* @return {Draggable}
* @example draggable.removeSensor(TouchSensor, DragSensor)
*/
removeSensor(...sensors) {
const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
removedSensors.forEach(sensor => sensor.detach());
this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
return this;
}
/**
* Adds container to this draggable instance
* @param {...HTMLElement} containers - Containers you want to add to draggable
* @return {Draggable}
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
this.sensors.forEach(sensor => sensor.addContainer(...containers));
return this;
}
/**
* Removes container from this draggable instance
* @param {...HTMLElement} containers - Containers you want to remove from draggable
* @return {Draggable}
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
this.sensors.forEach(sensor => sensor.removeContainer(...containers));
return this;
}
/**
* Adds listener for draggable events
* @param {String} type - Event name
* @param {...Function} callbacks - Event callbacks
* @return {Draggable}
* @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
*/
on(type, ...callbacks) {
this.emitter.on(type, ...callbacks);
return this;
}
/**
* Removes listener from draggable
* @param {String} type - Event name
* @param {Function} callback - Event callback
* @return {Draggable}
* @example draggable.off('drag:start', handlerFunction);
*/
off(type, callback) {
this.emitter.off(type, callback);
return this;
}
/**
* Triggers draggable event
* @param {AbstractEvent} event - Event instance
* @return {Draggable}
* @example draggable.trigger(event);
*/
trigger(event) {
this.emitter.trigger(event);
return this;
}
/**
* Returns class name for class identifier
* @param {String} name - Name of class identifier
* @return {String|null}
*/
getClassNameFor(name) {
return this.options.classes[name];
}
/**
* Returns true if this draggable instance is currently dragging
* @return {Boolean}
*/
isDragging() {
return Boolean(this.dragging);
}
/**
* Returns all draggable elements
* @return {HTMLElement[]}
*/
getDraggableElements() {
return this.containers.reduce((current, container) => {
return [...current, ...this.getDraggableElementsForContainer(container)];
}, []);
}
/**
* Returns draggable elements for a given container, excluding the mirror and
* original source element if present
* @param {HTMLElement} container
* @return {HTMLElement[]}
*/
getDraggableElementsForContainer(container) {
const allDraggableElements = container.querySelectorAll(this.options.draggable);
return [...allDraggableElements].filter(childElement => {
return childElement !== this.originalSource && childElement !== this.mirror;
});
}
/**
* Drag start handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStart](event) {
const sensorEvent = getSensorEvent(event);
const { target, container } = sensorEvent;
if (!this.containers.includes(container)) {
return;
}
if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
sensorEvent.cancel();
return;
}
// Find draggable source element
this.originalSource = (0, _utils.closest)(target, this.options.draggable);
this.sourceContainer = container;
if (!this.originalSource) {
sensorEvent.cancel();
return;
}
if (this.lastPlacedSource && this.lastPlacedContainer) {
clearTimeout(this.placedTimeoutID);
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.source = this.originalSource.cloneNode(true);
this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
this.originalSource.style.display = 'none';
const dragEvent = new _DragEvent.DragStartEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragEvent);
this.dragging = !dragEvent.canceled();
if (dragEvent.canceled()) {
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = null;
return;
}
this.originalSource.classList.add(this.getClassNameFor('source:original'));
this.source.classList.add(this.getClassNameFor('source:dragging'));
this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
document.body.classList.add(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, 'none');
requestAnimationFrame(() => {
const oldSensorEvent = getSensorEvent(event);
const newSensorEvent = oldSensorEvent.clone({ target: this.source });
this[onDragMove](_extends({}, event, {
detail: newSensorEvent
}));
});
}
/**
* Drag move handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragMove](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const { container } = sensorEvent;
let target = sensorEvent.target;
const dragMoveEvent = new _DragEvent.DragMoveEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent
});
this.trigger(dragMoveEvent);
if (dragMoveEvent.canceled()) {
sensorEvent.cancel();
}
target = (0, _utils.closest)(target, this.options.draggable);
const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
const overContainer = sensorEvent.overContainer || withinCorrectContainer;
const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
const isLeavingDraggable = this.currentOver && target !== this.currentOver;
const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
if (isLeavingDraggable) {
const dragOutEvent = new _DragEvent.DragOutEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
over: this.currentOver
});
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
this.currentOver = null;
this.trigger(dragOutEvent);
}
if (isLeavingContainer) {
const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer: this.currentOverContainer
});
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
this.currentOverContainer = null;
this.trigger(dragOutContainerEvent);
}
if (isOverContainer) {
overContainer.classList.add(this.getClassNameFor('container:over'));
const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer
});
this.currentOverContainer = overContainer;
this.trigger(dragOverContainerEvent);
}
if (isOverDraggable) {
target.classList.add(this.getClassNameFor('draggable:over'));
const dragOverEvent = new _DragEvent.DragOverEvent({
source: this.source,
originalSource: this.originalSource,
sourceContainer: container,
sensorEvent,
overContainer,
over: target
});
this.currentOver = target;
this.trigger(dragOverEvent);
}
}
/**
* Drag stop handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragStop](event) {
if (!this.dragging) {
return;
}
this.dragging = false;
const dragStopEvent = new _DragEvent.DragStopEvent({
source: this.source,
originalSource: this.originalSource,
sensorEvent: event.sensorEvent,
sourceContainer: this.sourceContainer
});
this.trigger(dragStopEvent);
this.source.parentNode.insertBefore(this.originalSource, this.source);
this.source.parentNode.removeChild(this.source);
this.originalSource.style.display = '';
this.source.classList.remove(this.getClassNameFor('source:dragging'));
this.originalSource.classList.remove(this.getClassNameFor('source:original'));
this.originalSource.classList.add(this.getClassNameFor('source:placed'));
this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
document.body.classList.remove(this.getClassNameFor('body:dragging'));
applyUserSelect(document.body, '');
if (this.currentOver) {
this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
}
if (this.currentOverContainer) {
this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
}
this.lastPlacedSource = this.originalSource;
this.lastPlacedContainer = this.sourceContainer;
this.placedTimeoutID = setTimeout(() => {
if (this.lastPlacedSource) {
this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
}
if (this.lastPlacedContainer) {
this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
}
this.lastPlacedSource = null;
this.lastPlacedContainer = null;
}, this.options.placedTimeout);
this.source = null;
this.originalSource = null;
this.currentOverContainer = null;
this.currentOver = null;
this.sourceContainer = null;
}
/**
* Drag pressure handler
* @private
* @param {Event} event - DOM Drag event
*/
[onDragPressure](event) {
if (!this.dragging) {
return;
}
const sensorEvent = getSensorEvent(event);
const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
const dragPressureEvent = new _DragEvent.DragPressureEvent({
sensorEvent,
source,
pressure: sensorEvent.pressure
});
this.trigger(dragPressureEvent);
}
}
exports.default = Draggable;
Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
function getSensorEvent(event) {
return event.detail;
}
function applyUserSelect(element, value) {
element.style.webkitUserSelect = value;
element.style.mozUserSelect = value;
element.style.msUserSelect = value;
element.style.oUserSelect = value;
element.style.userSelect = value;
}
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
const onMouseForceDown = Symbol('onMouseForceDown');
const onMouseDown = Symbol('onMouseDown');
const onMouseForceChange = Symbol('onMouseForceChange');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
/**
* This sensor picks up native force touch events and dictates drag operations
* @class ForceTouchSensor
* @module ForceTouchSensor
* @extends Sensor
*/
class ForceTouchSensor extends _Sensor2.default {
/**
* ForceTouchSensor constructor.
* @constructs ForceTouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property mightDrag
* @type {Boolean}
*/
this.mightDrag = false;
this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
this[onMouseForceDown] = this[onMouseForceDown].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseForceChange] = this[onMouseForceChange].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
for (const container of this.containers) {
container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.addEventListener('mousedown', this[onMouseDown], true);
container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.addEventListener('mousemove', this[onMouseMove]);
document.addEventListener('mouseup', this[onMouseUp]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
for (const container of this.containers) {
container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
container.removeEventListener('mousedown', this[onMouseDown], true);
container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
}
document.removeEventListener('mousemove', this[onMouseMove]);
document.removeEventListener('mouseup', this[onMouseUp]);
}
/**
* Mouse force will begin handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseForceWillBegin](event) {
event.preventDefault();
this.mightDrag = true;
}
/**
* Mouse force down handler
* @private
* @param {Event} event - Mouse force down event
*/
[onMouseForceDown](event) {
if (this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = event.currentTarget;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
this.mightDrag = false;
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
if (!this.dragging) {
return;
}
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target: null,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
this.mightDrag = false;
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (!this.mightDrag) {
return;
}
// Need workaround for real click
// Cancel potential drag events
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse force will begin event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse force change handler
* @private
* @param {Event} event - Mouse force change event
*/
[onMouseForceChange](event) {
if (this.dragging) {
return;
}
const target = event.target;
const container = event.currentTarget;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragPressureEvent);
}
/**
* Mouse force global change handler
* @private
* @param {Event} event - Mouse force global change event
*/
[onMouseForceGlobalChange](event) {
if (!this.dragging) {
return;
}
const target = event.target;
const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
pressure: event.webkitForce,
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragPressureEvent);
}
}
exports.default = ForceTouchSensor;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ForceTouchSensor = __webpack_require__(13);
var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ForceTouchSensor2.default;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMouseDown = Symbol('onMouseDown');
const onMouseUp = Symbol('onMouseUp');
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragEnd = Symbol('onDragEnd');
const onDrop = Symbol('onDrop');
const reset = Symbol('reset');
/**
* This sensor picks up native browser drag events and dictates drag operations
* @class DragSensor
* @module DragSensor
* @extends Sensor
*/
class DragSensor extends _Sensor2.default {
/**
* DragSensor constructor.
* @constructs DragSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Mouse down timer which will end up setting the draggable attribute, unless canceled
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
* @property draggableElement
* @type {HTMLElement}
*/
this.draggableElement = null;
/**
* Native draggable element could be links or images, their draggable state will be disabled during drag operation
* @property nativeDraggableElement
* @type {HTMLElement}
*/
this.nativeDraggableElement = null;
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragEnd] = this[onDragEnd].bind(this);
this[onDrop] = this[onDrop].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Drag start handler
* @private
* @param {Event} event - Drag start event
*/
[onDragStart](event) {
// Need for firefox. "text" key is needed for IE
event.dataTransfer.setData('text', '');
event.dataTransfer.effectAllowed = this.options.type;
const target = document.elementFromPoint(event.clientX, event.clientY);
this.currentContainer = (0, _utils.closest)(event.target, this.containers);
if (!this.currentContainer) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
// Workaround
setTimeout(() => {
this.trigger(this.currentContainer, dragStartEvent);
if (dragStartEvent.canceled()) {
this.dragging = false;
} else {
this.dragging = true;
}
}, 0);
}
/**
* Drag over handler
* @private
* @param {Event} event - Drag over event
*/
[onDragOver](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragMoveEvent);
if (!dragMoveEvent.canceled()) {
event.preventDefault();
event.dataTransfer.dropEffect = this.options.type;
}
}
/**
* Drag end handler
* @private
* @param {Event} event - Drag end event
*/
[onDragEnd](event) {
if (!this.dragging) {
return;
}
document.removeEventListener('mouseup', this[onMouseUp], true);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = this.currentContainer;
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStopEvent);
this.dragging = false;
this[reset]();
}
/**
* Drop handler
* @private
* @param {Event} event - Drop event
*/
[onDrop](event) {
// eslint-disable-line class-methods-use-this
event.preventDefault();
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
// Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
if (event.target && (event.target.form || event.target.contenteditable)) {
return;
}
const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
if (nativeDraggableElement) {
nativeDraggableElement.draggable = false;
this.nativeDraggableElement = nativeDraggableElement;
}
document.addEventListener('mouseup', this[onMouseUp], true);
document.addEventListener('dragstart', this[onDragStart], false);
document.addEventListener('dragover', this[onDragOver], false);
document.addEventListener('dragend', this[onDragEnd], false);
document.addEventListener('drop', this[onDrop], false);
const target = (0, _utils.closest)(event.target, this.options.draggable);
if (!target) {
return;
}
this.mouseDownTimeout = setTimeout(() => {
target.draggable = true;
this.draggableElement = target;
}, this.options.delay);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp]() {
this[reset]();
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[reset]() {
clearTimeout(this.mouseDownTimeout);
document.removeEventListener('mouseup', this[onMouseUp], true);
document.removeEventListener('dragstart', this[onDragStart], false);
document.removeEventListener('dragover', this[onDragOver], false);
document.removeEventListener('dragend', this[onDragEnd], false);
document.removeEventListener('drop', this[onDrop], false);
if (this.nativeDraggableElement) {
this.nativeDraggableElement.draggable = true;
this.nativeDraggableElement = null;
}
if (this.draggableElement) {
this.draggableElement.draggable = false;
this.draggableElement = null;
}
}
}
exports.default = DragSensor;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragSensor = __webpack_require__(15);
var _DragSensor2 = _interopRequireDefault(_DragSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _DragSensor2.default;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onTouchStart = Symbol('onTouchStart');
const onTouchHold = Symbol('onTouchHold');
const onTouchEnd = Symbol('onTouchEnd');
const onTouchMove = Symbol('onTouchMove');
/**
* Prevents scrolling when set to true
* @var {Boolean} preventScrolling
*/
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener('touchmove', event => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
}, { passive: false });
/**
* This sensor picks up native browser touch events and dictates drag operations
* @class TouchSensor
* @module TouchSensor
* @extends Sensor
*/
class TouchSensor extends _Sensor2.default {
/**
* TouchSensor constructor.
* @constructs TouchSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Closest scrollable container so accidental scroll can cancel long touch
* @property currentScrollableParent
* @type {HTMLElement}
*/
this.currentScrollableParent = null;
/**
* TimeoutID for long touch
* @property tapTimeout
* @type {Number}
*/
this.tapTimeout = null;
/**
* touchMoved indicates if touch has moved during tapTimeout
* @property touchMoved
* @type {Boolean}
*/
this.touchMoved = false;
this[onTouchStart] = this[onTouchStart].bind(this);
this[onTouchHold] = this[onTouchHold].bind(this);
this[onTouchEnd] = this[onTouchEnd].bind(this);
this[onTouchMove] = this[onTouchMove].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('touchstart', this[onTouchStart]);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('touchstart', this[onTouchStart]);
}
/**
* Touch start handler
* @private
* @param {Event} event - Touch start event
*/
[onTouchStart](event) {
const container = (0, _utils.closest)(event.target, this.containers);
if (!container) {
return;
}
document.addEventListener('touchmove', this[onTouchMove]);
document.addEventListener('touchend', this[onTouchEnd]);
document.addEventListener('touchcancel', this[onTouchEnd]);
container.addEventListener('contextmenu', onContextMenu);
this.currentContainer = container;
this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
}
/**
* Touch hold handler
* @private
* @param {Event} event - Touch start event
* @param {HTMLElement} container - Container element
*/
[onTouchHold](event, container) {
return () => {
if (this.touchMoved) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = event.target;
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.dragging = !dragStartEvent.canceled();
preventScrolling = this.dragging;
};
}
/**
* Touch move handler
* @private
* @param {Event} event - Touch move event
*/
[onTouchMove](event) {
this.touchMoved = true;
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Touch end handler
* @private
* @param {Event} event - Touch end event
*/
[onTouchEnd](event) {
this.touchMoved = false;
preventScrolling = false;
document.removeEventListener('touchend', this[onTouchEnd]);
document.removeEventListener('touchcancel', this[onTouchEnd]);
document.removeEventListener('touchmove', this[onTouchMove]);
if (this.currentContainer) {
this.currentContainer.removeEventListener('contextmenu', onContextMenu);
}
clearTimeout(this.tapTimeout);
if (!this.dragging) {
return;
}
const touch = event.touches[0] || event.changedTouches[0];
const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
event.preventDefault();
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: touch.pageX,
clientY: touch.pageY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
this.currentContainer = null;
this.dragging = false;
}
}
exports.default = TouchSensor;
function onContextMenu(event) {
event.preventDefault();
event.stopPropagation();
}
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TouchSensor = __webpack_require__(17);
var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TouchSensor2.default;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base sensor event
* @class SensorEvent
* @module SensorEvent
* @extends AbstractEvent
*/
class SensorEvent extends _AbstractEvent2.default {
/**
* Original browser event that triggered a sensor
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
return this.data.originalEvent;
}
/**
* Normalized clientX for both touch and mouse events
* @property clientX
* @type {Number}
* @readonly
*/
get clientX() {
return this.data.clientX;
}
/**
* Normalized clientY for both touch and mouse events
* @property clientY
* @type {Number}
* @readonly
*/
get clientY() {
return this.data.clientY;
}
/**
* Normalized target for both touch and mouse events
* Returns the element that is behind cursor or touch pointer
* @property target
* @type {HTMLElement}
* @readonly
*/
get target() {
return this.data.target;
}
/**
* Container that initiated the sensor
* @property container
* @type {HTMLElement}
* @readonly
*/
get container() {
return this.data.container;
}
/**
* Trackpad pressure
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.SensorEvent = SensorEvent; /**
* Drag start sensor event
* @class DragStartSensorEvent
* @module DragStartSensorEvent
* @extends SensorEvent
*/
class DragStartSensorEvent extends SensorEvent {}
exports.DragStartSensorEvent = DragStartSensorEvent; /**
* Drag move sensor event
* @class DragMoveSensorEvent
* @module DragMoveSensorEvent
* @extends SensorEvent
*/
DragStartSensorEvent.type = 'drag:start';
class DragMoveSensorEvent extends SensorEvent {}
exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
* Drag stop sensor event
* @class DragStopSensorEvent
* @module DragStopSensorEvent
* @extends SensorEvent
*/
DragMoveSensorEvent.type = 'drag:move';
class DragStopSensorEvent extends SensorEvent {}
exports.DragStopSensorEvent = DragStopSensorEvent; /**
* Drag pressure sensor event
* @class DragPressureSensorEvent
* @module DragPressureSensorEvent
* @extends SensorEvent
*/
DragStopSensorEvent.type = 'drag:stop';
class DragPressureSensorEvent extends SensorEvent {}
exports.DragPressureSensorEvent = DragPressureSensorEvent;
DragPressureSensorEvent.type = 'drag:pressure';
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(2);
var _Sensor = __webpack_require__(1);
var _Sensor2 = _interopRequireDefault(_Sensor);
var _SensorEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
const onMouseDown = Symbol('onMouseDown');
const onMouseMove = Symbol('onMouseMove');
const onMouseUp = Symbol('onMouseUp');
/**
* This sensor picks up native browser mouse events and dictates drag operations
* @class MouseSensor
* @module MouseSensor
* @extends Sensor
*/
class MouseSensor extends _Sensor2.default {
/**
* MouseSensor constructor.
* @constructs MouseSensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
super(containers, options);
/**
* Indicates if mouse button is still down
* @property mouseDown
* @type {Boolean}
*/
this.mouseDown = false;
/**
* Mouse down timer which will end up triggering the drag start operation
* @property mouseDownTimeout
* @type {Number}
*/
this.mouseDownTimeout = null;
/**
* Indicates if context menu has been opened during drag operation
* @property openedContextMenu
* @type {Boolean}
*/
this.openedContextMenu = false;
this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
this[onMouseDown] = this[onMouseDown].bind(this);
this[onMouseMove] = this[onMouseMove].bind(this);
this[onMouseUp] = this[onMouseUp].bind(this);
}
/**
* Attaches sensors event listeners to the DOM
*/
attach() {
document.addEventListener('mousedown', this[onMouseDown], true);
}
/**
* Detaches sensors event listeners to the DOM
*/
detach() {
document.removeEventListener('mousedown', this[onMouseDown], true);
}
/**
* Mouse down handler
* @private
* @param {Event} event - Mouse down event
*/
[onMouseDown](event) {
if (event.button !== 0 || event.ctrlKey || event.metaKey) {
return;
}
document.addEventListener('mouseup', this[onMouseUp]);
const target = document.elementFromPoint(event.clientX, event.clientY);
const container = (0, _utils.closest)(target, this.containers);
if (!container) {
return;
}
document.addEventListener('dragstart', preventNativeDragStart);
this.mouseDown = true;
clearTimeout(this.mouseDownTimeout);
this.mouseDownTimeout = setTimeout(() => {
if (!this.mouseDown) {
return;
}
const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container,
originalEvent: event
});
this.trigger(container, dragStartEvent);
this.currentContainer = container;
this.dragging = !dragStartEvent.canceled();
if (this.dragging) {
document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.addEventListener('mousemove', this[onMouseMove]);
}
}, this.options.delay);
}
/**
* Mouse move handler
* @private
* @param {Event} event - Mouse move event
*/
[onMouseMove](event) {
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragMoveEvent);
}
/**
* Mouse up handler
* @private
* @param {Event} event - Mouse up event
*/
[onMouseUp](event) {
this.mouseDown = Boolean(this.openedContextMenu);
if (this.openedContextMenu) {
this.openedContextMenu = false;
return;
}
document.removeEventListener('mouseup', this[onMouseUp]);
document.removeEventListener('dragstart', preventNativeDragStart);
if (!this.dragging) {
return;
}
const target = document.elementFromPoint(event.clientX, event.clientY);
const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
clientX: event.clientX,
clientY: event.clientY,
target,
container: this.currentContainer,
originalEvent: event
});
this.trigger(this.currentContainer, dragStopEvent);
document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
document.removeEventListener('mousemove', this[onMouseMove]);
this.currentContainer = null;
this.dragging = false;
}
/**
* Context menu handler
* @private
* @param {Event} event - Context menu event
*/
[onContextMenuWhileDragging](event) {
event.preventDefault();
this.openedContextMenu = true;
}
}
exports.default = MouseSensor;
function preventNativeDragStart(event) {
event.preventDefault();
}
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MouseSensor = __webpack_require__(20);
var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _MouseSensor2.default;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
/**
* Base sensor class. Extend from this class to create a new or custom sensor
* @class Sensor
* @module Sensor
*/
class Sensor {
/**
* Sensor constructor.
* @constructs Sensor
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
* @param {Object} options - Options
*/
constructor(containers = [], options = {}) {
/**
* Current containers
* @property containers
* @type {HTMLElement[]}
*/
this.containers = [...containers];
/**
* Current options
* @property options
* @type {Object}
*/
this.options = _extends({}, options);
/**
* Current drag state
* @property dragging
* @type {Boolean}
*/
this.dragging = false;
/**
* Current container
* @property currentContainer
* @type {HTMLElement}
*/
this.currentContainer = null;
}
/**
* Attaches sensors event listeners to the DOM
* @return {Sensor}
*/
attach() {
return this;
}
/**
* Detaches sensors event listeners to the DOM
* @return {Sensor}
*/
detach() {
return this;
}
/**
* Adds container to this sensor instance
* @param {...HTMLElement} containers - Containers you want to add to this sensor
* @example draggable.addContainer(document.body)
*/
addContainer(...containers) {
this.containers = [...this.containers, ...containers];
}
/**
* Removes container from this sensor instance
* @param {...HTMLElement} containers - Containers you want to remove from this sensor
* @example draggable.removeContainer(document.body)
*/
removeContainer(...containers) {
this.containers = this.containers.filter(container => !containers.includes(container));
}
/**
* Triggers event on target element
* @param {HTMLElement} element - Element to trigger event on
* @param {SensorEvent} sensorEvent - Sensor event to trigger
*/
trigger(element, sensorEvent) {
const event = document.createEvent('Event');
event.detail = sensorEvent;
event.initEvent(sensorEvent.type, true, true);
element.dispatchEvent(event);
this.lastEvent = sensorEvent;
return sensorEvent;
}
}
exports.default = Sensor;
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(23);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(25);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const scroll = exports.scroll = Symbol('scroll');
/**
* Scrollable default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.speed
* @property {Number} defaultOptions.sensitivity
* @property {HTMLElement[]} defaultOptions.scrollableElements
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
speed: 6,
sensitivity: 50,
scrollableElements: []
};
/**
* Scrollable plugin which scrolls the closest scrollable parent
* @class Scrollable
* @module Scrollable
* @extends AbstractPlugin
*/
class Scrollable extends _AbstractPlugin2.default {
/**
* Scrollable constructor.
* @constructs Scrollable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Scrollable options
* @property {Object} options
* @property {Number} options.speed
* @property {Number} options.sensitivity
* @property {HTMLElement[]} options.scrollableElements
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Keeps current mouse position
* @property {Object} currentMousePosition
* @property {Number} currentMousePosition.clientX
* @property {Number} currentMousePosition.clientY
* @type {Object|null}
*/
this.currentMousePosition = null;
/**
* Scroll animation frame
* @property scrollAnimationFrame
* @type {Number|null}
*/
this.scrollAnimationFrame = null;
/**
* Closest scrollable element
* @property scrollableElement
* @type {HTMLElement|null}
*/
this.scrollableElement = null;
/**
* Animation frame looking for the closest scrollable element
* @property findScrollableElementFrame
* @type {Number|null}
*/
this.findScrollableElementFrame = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[scroll] = this[scroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.scrollable || {};
}
/**
* Returns closest scrollable elements by element
* @param {HTMLElement} target
* @return {HTMLElement}
*/
getScrollableElement(target) {
if (this.hasDefinedScrollableElements()) {
return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
} else {
return closestScrollableElement(target);
}
}
/**
* Returns true if at least one scrollable element have been defined via options
* @param {HTMLElement} target
* @return {Boolean}
*/
hasDefinedScrollableElements() {
return Boolean(this.options.scrollableElements.length !== 0);
}
/**
* Drag start handler. Finds closest scrollable parent in separate frame
* @param {DragStartEvent} dragEvent
* @private
*/
[onDragStart](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.source);
});
}
/**
* Drag move handler. Remembers mouse position and initiates scrolling
* @param {DragMoveEvent} dragEvent
* @private
*/
[onDragMove](dragEvent) {
this.findScrollableElementFrame = requestAnimationFrame(() => {
this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
});
if (!this.scrollableElement) {
return;
}
const sensorEvent = dragEvent.sensorEvent;
const scrollOffset = { x: 0, y: 0 };
if ('ontouchstart' in window) {
scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
}
this.currentMousePosition = {
clientX: sensorEvent.clientX - scrollOffset.x,
clientY: sensorEvent.clientY - scrollOffset.y
};
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
/**
* Drag stop handler. Cancels scroll animations and resets state
* @private
*/
[onDragStop]() {
cancelAnimationFrame(this.scrollAnimationFrame);
cancelAnimationFrame(this.findScrollableElementFrame);
this.scrollableElement = null;
this.scrollAnimationFrame = null;
this.findScrollableElementFrame = null;
this.currentMousePosition = null;
}
/**
* Scroll function that does the heavylifting
* @private
*/
[scroll]() {
if (!this.scrollableElement || !this.currentMousePosition) {
return;
}
cancelAnimationFrame(this.scrollAnimationFrame);
const { speed, sensitivity } = this.options;
const rect = this.scrollableElement.getBoundingClientRect();
const bottomCutOff = rect.bottom > window.innerHeight;
const topCutOff = rect.top < 0;
const cutOff = topCutOff || bottomCutOff;
const documentScrollingElement = getDocumentScrollingElement();
const scrollableElement = this.scrollableElement;
const clientX = this.currentMousePosition.clientX;
const clientY = this.currentMousePosition.clientY;
if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
const { offsetHeight, offsetWidth } = scrollableElement;
if (rect.top + offsetHeight - clientY < sensitivity) {
scrollableElement.scrollTop += speed;
} else if (clientY - rect.top < sensitivity) {
scrollableElement.scrollTop -= speed;
}
if (rect.left + offsetWidth - clientX < sensitivity) {
scrollableElement.scrollLeft += speed;
} else if (clientX - rect.left < sensitivity) {
scrollableElement.scrollLeft -= speed;
}
} else {
const { innerHeight, innerWidth } = window;
if (clientY < sensitivity) {
documentScrollingElement.scrollTop -= speed;
} else if (innerHeight - clientY < sensitivity) {
documentScrollingElement.scrollTop += speed;
}
if (clientX < sensitivity) {
documentScrollingElement.scrollLeft -= speed;
} else if (innerWidth - clientX < sensitivity) {
documentScrollingElement.scrollLeft += speed;
}
}
this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
}
}
exports.default = Scrollable; /**
* Returns true if the passed element has overflow
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function hasOverflow(element) {
const overflowRegex = /(auto|scroll)/;
const computedStyles = getComputedStyle(element, null);
const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
return overflowRegex.test(overflow);
}
/**
* Returns true if the passed element is statically positioned
* @param {HTMLElement} element
* @return {Boolean}
* @private
*/
function isStaticallyPositioned(element) {
const position = getComputedStyle(element).getPropertyValue('position');
return position === 'static';
}
/**
* Finds closest scrollable element
* @param {HTMLElement} element
* @return {HTMLElement}
* @private
*/
function closestScrollableElement(element) {
if (!element) {
return getDocumentScrollingElement();
}
const position = getComputedStyle(element).getPropertyValue('position');
const excludeStaticParents = position === 'absolute';
const scrollableElement = (0, _utils.closest)(element, parent => {
if (excludeStaticParents && isStaticallyPositioned(parent)) {
return false;
}
return hasOverflow(parent);
});
if (position === 'fixed' || !scrollableElement) {
return getDocumentScrollingElement();
} else {
return scrollableElement;
}
}
/**
* Returns element that scrolls document
* @return {HTMLElement}
* @private
*/
function getDocumentScrollingElement() {
return document.scrollingElement || document.documentElement;
}
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Scrollable = __webpack_require__(27);
var _Scrollable2 = _interopRequireDefault(_Scrollable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Scrollable2.default;
exports.defaultOptions = _Scrollable.defaultOptions;
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base mirror event
* @class MirrorEvent
* @module MirrorEvent
* @extends AbstractEvent
*/
class MirrorEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Drag event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.MirrorEvent = MirrorEvent; /**
* Mirror create event
* @class MirrorCreateEvent
* @module MirrorCreateEvent
* @extends MirrorEvent
*/
class MirrorCreateEvent extends MirrorEvent {}
exports.MirrorCreateEvent = MirrorCreateEvent; /**
* Mirror created event
* @class MirrorCreatedEvent
* @module MirrorCreatedEvent
* @extends MirrorEvent
*/
MirrorCreateEvent.type = 'mirror:create';
class MirrorCreatedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
* Mirror attached event
* @class MirrorAttachedEvent
* @module MirrorAttachedEvent
* @extends MirrorEvent
*/
MirrorCreatedEvent.type = 'mirror:created';
class MirrorAttachedEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
* Mirror move event
* @class MirrorMoveEvent
* @module MirrorMoveEvent
* @extends MirrorEvent
*/
MirrorAttachedEvent.type = 'mirror:attached';
class MirrorMoveEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorMoveEvent = MirrorMoveEvent; /**
* Mirror destroy event
* @class MirrorDestroyEvent
* @module MirrorDestroyEvent
* @extends MirrorEvent
*/
MirrorMoveEvent.type = 'mirror:move';
MirrorMoveEvent.cancelable = true;
class MirrorDestroyEvent extends MirrorEvent {
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
}
exports.MirrorDestroyEvent = MirrorDestroyEvent;
MirrorDestroyEvent.type = 'mirror:destroy';
MirrorDestroyEvent.cancelable = true;
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MirrorEvent = __webpack_require__(29);
Object.keys(_MirrorEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MirrorEvent[key];
}
});
});
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _MirrorEvent = __webpack_require__(30);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const onDragStart = exports.onDragStart = Symbol('onDragStart');
const onDragMove = exports.onDragMove = Symbol('onDragMove');
const onDragStop = exports.onDragStop = Symbol('onDragStop');
const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
const onScroll = exports.onScroll = Symbol('onScroll');
const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
/**
* Mirror default options
* @property {Object} defaultOptions
* @property {Boolean} defaultOptions.constrainDimensions
* @property {Boolean} defaultOptions.xAxis
* @property {Boolean} defaultOptions.yAxis
* @property {null} defaultOptions.cursorOffsetX
* @property {null} defaultOptions.cursorOffsetY
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
constrainDimensions: false,
xAxis: true,
yAxis: true,
cursorOffsetX: null,
cursorOffsetY: null
};
/**
* Mirror plugin which controls the mirror positioning while dragging
* @class Mirror
* @module Mirror
* @extends AbstractPlugin
*/
class Mirror extends _AbstractPlugin2.default {
/**
* Mirror constructor.
* @constructs Mirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Mirror options
* @property {Object} options
* @property {Boolean} options.constrainDimensions
* @property {Boolean} options.xAxis
* @property {Boolean} options.yAxis
* @property {Number|null} options.cursorOffsetX
* @property {Number|null} options.cursorOffsetY
* @property {String|HTMLElement|Function} options.appendTo
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.scrollOffset = { x: 0, y: 0 };
/**
* Initial scroll offset for touch devices because the mirror is positioned fixed
* @property {Object} scrollOffset
* @property {Number} scrollOffset.x
* @property {Number} scrollOffset.y
*/
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
this[onDragStart] = this[onDragStart].bind(this);
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorMove] = this[onMirrorMove].bind(this);
this[onScroll] = this[onScroll].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.mirror || {};
}
[onDragStart](dragEvent) {
if (dragEvent.canceled()) {
return;
}
if ('ontouchstart' in window) {
document.addEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = {
x: window.scrollX,
y: window.scrollY
};
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorCreateEvent);
if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
return;
}
const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
this.mirror = source.cloneNode(true);
const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorCreatedEvent);
appendableContainer.appendChild(this.mirror);
this.draggable.trigger(mirrorAttachedEvent);
}
[onDragMove](dragEvent) {
if (!this.mirror || dragEvent.canceled()) {
return;
}
const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
source,
originalSource,
sourceContainer,
sensorEvent,
dragEvent,
mirror: this.mirror
});
this.draggable.trigger(mirrorMoveEvent);
}
[onDragStop](dragEvent) {
if ('ontouchstart' in window) {
document.removeEventListener('scroll', this[onScroll], true);
}
this.initialScrollOffset = { x: 0, y: 0 };
this.scrollOffset = { x: 0, y: 0 };
if (!this.mirror) {
return;
}
const { source, sourceContainer, sensorEvent } = dragEvent;
const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
source,
mirror: this.mirror,
sourceContainer,
sensorEvent,
dragEvent
});
this.draggable.trigger(mirrorDestroyEvent);
if (!mirrorDestroyEvent.canceled()) {
this.mirror.parentNode.removeChild(this.mirror);
}
}
[onScroll]() {
this.scrollOffset = {
x: window.scrollX - this.initialScrollOffset.x,
y: window.scrollY - this.initialScrollOffset.y
};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @return {Promise}
* @private
*/
[onMirrorCreated]({ mirror, source, sensorEvent }) {
const mirrorClass = this.draggable.getClassNameFor('mirror');
const setState = (_ref) => {
let { mirrorOffset, initialX, initialY } = _ref,
args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
this.mirrorOffset = mirrorOffset;
this.initialX = initialX;
this.initialY = initialY;
return _extends({ mirrorOffset, initialX, initialY }, args);
};
const initialState = {
mirror,
source,
sensorEvent,
mirrorClass,
scrollOffset: this.scrollOffset,
options: this.options
};
return Promise.resolve(initialState)
// Fix reflow here
.then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
}
/**
* Mirror move handler
* @param {MirrorMoveEvent} mirrorEvent
* @return {Promise|null}
* @private
*/
[onMirrorMove](mirrorEvent) {
if (mirrorEvent.canceled()) {
return null;
}
const initialState = {
mirror: mirrorEvent.mirror,
sensorEvent: mirrorEvent.sensorEvent,
mirrorOffset: this.mirrorOffset,
options: this.options,
initialX: this.initialX,
initialY: this.initialY,
scrollOffset: this.scrollOffset
};
return Promise.resolve(initialState).then(positionMirror({ raf: true }));
}
/**
* Returns appendable container for mirror based on the appendTo option
* @private
* @param {Object} options
* @param {HTMLElement} options.source - Current source
* @return {HTMLElement}
*/
[getAppendableContainer](source) {
const appendTo = this.options.appendTo;
if (typeof appendTo === 'string') {
return document.querySelector(appendTo);
} else if (appendTo instanceof HTMLElement) {
return appendTo;
} else if (typeof appendTo === 'function') {
return appendTo(source);
} else {
return source.parentNode;
}
}
}
exports.default = Mirror; /**
* Computes mirror dimensions based on the source element
* Adds sourceRect to state
* @param {Object} state
* @param {HTMLElement} state.source
* @return {Promise}
* @private
*/
function computeMirrorDimensions(_ref2) {
let { source } = _ref2,
args = _objectWithoutProperties(_ref2, ['source']);
return withPromise(resolve => {
const sourceRect = source.getBoundingClientRect();
resolve(_extends({ source, sourceRect }, args));
});
}
/**
* Calculates mirror offset
* Adds mirrorOffset to state
* @param {Object} state
* @param {SensorEvent} state.sensorEvent
* @param {DOMRect} state.sourceRect
* @return {Promise}
* @private
*/
function calculateMirrorOffset(_ref3) {
let { sensorEvent, sourceRect, options } = _ref3,
args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
return withPromise(resolve => {
const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
const mirrorOffset = { top, left };
resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
});
}
/**
* Applys mirror styles
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {HTMLElement} state.source
* @param {Object} state.options
* @return {Promise}
* @private
*/
function resetMirror(_ref4) {
let { mirror, source, options } = _ref4,
args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
return withPromise(resolve => {
let offsetHeight;
let offsetWidth;
if (options.constrainDimensions) {
const computedSourceStyles = getComputedStyle(source);
offsetHeight = computedSourceStyles.getPropertyValue('height');
offsetWidth = computedSourceStyles.getPropertyValue('width');
}
mirror.style.position = 'fixed';
mirror.style.pointerEvents = 'none';
mirror.style.top = 0;
mirror.style.left = 0;
mirror.style.margin = 0;
if (options.constrainDimensions) {
mirror.style.height = offsetHeight;
mirror.style.width = offsetWidth;
}
resolve(_extends({ mirror, source, options }, args));
});
}
/**
* Applys mirror class on mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {String} state.mirrorClass
* @return {Promise}
* @private
*/
function addMirrorClasses(_ref5) {
let { mirror, mirrorClass } = _ref5,
args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
return withPromise(resolve => {
mirror.classList.add(mirrorClass);
resolve(_extends({ mirror, mirrorClass }, args));
});
}
/**
* Removes source ID from cloned mirror element
* @param {Object} state
* @param {HTMLElement} state.mirror
* @return {Promise}
* @private
*/
function removeMirrorID(_ref6) {
let { mirror } = _ref6,
args = _objectWithoutProperties(_ref6, ['mirror']);
return withPromise(resolve => {
mirror.removeAttribute('id');
delete mirror.id;
resolve(_extends({ mirror }, args));
});
}
/**
* Positions mirror with translate3d
* @param {Object} state
* @param {HTMLElement} state.mirror
* @param {SensorEvent} state.sensorEvent
* @param {Object} state.mirrorOffset
* @param {Number} state.initialY
* @param {Number} state.initialX
* @param {Object} state.options
* @return {Promise}
* @private
*/
function positionMirror({ withFrame = false, initial = false } = {}) {
return (_ref7) => {
let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
return withPromise(resolve => {
const result = _extends({
mirror,
sensorEvent,
mirrorOffset,
options
}, args);
if (mirrorOffset) {
const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
if (options.xAxis && options.yAxis || initial) {
mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
} else if (options.xAxis && !options.yAxis) {
mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
} else if (options.yAxis && !options.xAxis) {
mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
}
if (initial) {
result.initialX = x;
result.initialY = y;
}
}
resolve(result);
}, { frame: withFrame });
};
}
/**
* Wraps functions in promise with potential animation frame option
* @param {Function} callback
* @param {Object} options
* @param {Boolean} options.raf
* @return {Promise}
* @private
*/
function withPromise(callback, { raf = false } = {}) {
return new Promise((resolve, reject) => {
if (raf) {
requestAnimationFrame(() => {
callback(resolve, reject);
});
} else {
callback(resolve, reject);
}
});
}
/**
* Returns true if the sensor event was triggered by a native browser drag event
* @param {SensorEvent} sensorEvent
*/
function isNativeDragEvent(sensorEvent) {
return (/^drag/.test(sensorEvent.originalEvent.type)
);
}
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Mirror = __webpack_require__(31);
var _Mirror2 = _interopRequireDefault(_Mirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Mirror2.default;
exports.defaultOptions = _Mirror.defaultOptions;
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
/**
* Focusable default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = {};
/**
* Focusable plugin
* @class Focusable
* @module Focusable
* @extends AbstractPlugin
*/
class Focusable extends _AbstractPlugin2.default {
/**
* Focusable constructor.
* @constructs Focusable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Focusable options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.focusable || {};
}
/**
* Returns draggable containers and elements
* @return {HTMLElement[]}
*/
getElements() {
return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
}
/**
* Intialize handler
* @private
*/
[onInitialize]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => decorateElement(element));
});
}
/**
* Destroy handler
* @private
*/
[onDestroy]() {
// Can wait until the next best frame is available
requestAnimationFrame(() => {
this.getElements().forEach(element => stripElement(element));
});
}
}
exports.default = Focusable; /**
* Keeps track of all the elements that are missing tabindex attributes
* so they can be reset when draggable gets destroyed
* @const {HTMLElement[]} elementsWithMissingTabIndex
*/
const elementsWithMissingTabIndex = [];
/**
* Decorates element with tabindex attributes
* @param {HTMLElement} element
* @return {Object}
* @private
*/
function decorateElement(element) {
const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
if (hasMissingTabIndex) {
elementsWithMissingTabIndex.push(element);
element.tabIndex = 0;
}
}
/**
* Removes elements tabindex attributes
* @param {HTMLElement} element
* @private
*/
function stripElement(element) {
const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
if (tabIndexElementPosition !== -1) {
element.tabIndex = -1;
elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
}
}
/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Focusable = __webpack_require__(33);
var _Focusable2 = _interopRequireDefault(_Focusable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Focusable2.default;
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onInitialize = Symbol('onInitialize');
const onDestroy = Symbol('onDestroy');
const announceEvent = Symbol('announceEvent');
const announceMessage = Symbol('announceMessage');
const ARIA_RELEVANT = 'aria-relevant';
const ARIA_ATOMIC = 'aria-atomic';
const ARIA_LIVE = 'aria-live';
const ROLE = 'role';
/**
* Announcement default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.expire
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
expire: 7000
};
/**
* Announcement plugin
* @class Announcement
* @module Announcement
* @extends AbstractPlugin
*/
class Announcement extends _AbstractPlugin2.default {
/**
* Announcement constructor.
* @constructs Announcement
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Plugin options
* @property options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Original draggable trigger method. Hack until we have onAll or on('all')
* @property originalTriggerMethod
* @type {Function}
*/
this.originalTriggerMethod = this.draggable.trigger;
this[onInitialize] = this[onInitialize].bind(this);
this[onDestroy] = this[onDestroy].bind(this);
}
/**
* Attaches listeners to draggable
*/
attach() {
this.draggable.on('draggable:initialize', this[onInitialize]);
}
/**
* Detaches listeners from draggable
*/
detach() {
this.draggable.off('draggable:destroy', this[onDestroy]);
}
/**
* Returns passed in options
*/
getOptions() {
return this.draggable.options.announcements || {};
}
/**
* Announces event
* @private
* @param {AbstractEvent} event
*/
[announceEvent](event) {
const message = this.options[event.type];
if (message && typeof message === 'string') {
this[announceMessage](message);
}
if (message && typeof message === 'function') {
this[announceMessage](message(event));
}
}
/**
* Announces message to screen reader
* @private
* @param {String} message
*/
[announceMessage](message) {
announce(message, { expire: this.options.expire });
}
/**
* Initialize hander
* @private
*/
[onInitialize]() {
// Hack until there is an api for listening for all events
this.draggable.trigger = event => {
try {
this[announceEvent](event);
} finally {
// Ensure that original trigger is called
this.originalTriggerMethod.call(this.draggable, event);
}
};
}
/**
* Destroy hander
* @private
*/
[onDestroy]() {
this.draggable.trigger = this.originalTriggerMethod;
}
}
exports.default = Announcement; /**
* @const {HTMLElement} liveRegion
*/
const liveRegion = createRegion();
/**
* Announces message via live region
* @param {String} message
* @param {Object} options
* @param {Number} options.expire
*/
function announce(message, { expire }) {
const element = document.createElement('div');
element.textContent = message;
liveRegion.appendChild(element);
return setTimeout(() => {
liveRegion.removeChild(element);
}, expire);
}
/**
* Creates region element
* @return {HTMLElement}
*/
function createRegion() {
const element = document.createElement('div');
element.setAttribute('id', 'draggable-live-region');
element.setAttribute(ARIA_RELEVANT, 'additions');
element.setAttribute(ARIA_ATOMIC, 'true');
element.setAttribute(ARIA_LIVE, 'assertive');
element.setAttribute(ROLE, 'log');
element.style.position = 'fixed';
element.style.width = '1px';
element.style.height = '1px';
element.style.top = '-1px';
element.style.overflow = 'hidden';
return element;
}
// Append live region element as early as possible
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(liveRegion);
});
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _Announcement = __webpack_require__(36);
var _Announcement2 = _interopRequireDefault(_Announcement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Announcement2.default;
exports.defaultOptions = _Announcement.defaultOptions;
/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base draggable event
* @class DraggableEvent
* @module DraggableEvent
* @extends AbstractEvent
*/
class DraggableEvent extends _AbstractEvent2.default {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
* @readonly
*/
get draggable() {
return this.data.draggable;
}
}
exports.DraggableEvent = DraggableEvent; /**
* Draggable initialized event
* @class DraggableInitializedEvent
* @module DraggableInitializedEvent
* @extends DraggableEvent
*/
DraggableEvent.type = 'draggable';
class DraggableInitializedEvent extends DraggableEvent {}
exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
* Draggable destory event
* @class DraggableInitializedEvent
* @module DraggableDestroyEvent
* @extends DraggableDestroyEvent
*/
DraggableInitializedEvent.type = 'draggable:initialize';
class DraggableDestroyEvent extends DraggableEvent {}
exports.DraggableDestroyEvent = DraggableDestroyEvent;
DraggableDestroyEvent.type = 'draggable:destroy';
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base drag event
* @class DragEvent
* @module DragEvent
* @extends AbstractEvent
*/
class DragEvent extends _AbstractEvent2.default {
/**
* Draggables source element
* @property source
* @type {HTMLElement}
* @readonly
*/
get source() {
return this.data.source;
}
/**
* Draggables original source element
* @property originalSource
* @type {HTMLElement}
* @readonly
*/
get originalSource() {
return this.data.originalSource;
}
/**
* Draggables mirror element
* @property mirror
* @type {HTMLElement}
* @readonly
*/
get mirror() {
return this.data.mirror;
}
/**
* Draggables source container element
* @property sourceContainer
* @type {HTMLElement}
* @readonly
*/
get sourceContainer() {
return this.data.sourceContainer;
}
/**
* Sensor event
* @property sensorEvent
* @type {SensorEvent}
* @readonly
*/
get sensorEvent() {
return this.data.sensorEvent;
}
/**
* Original event that triggered sensor event
* @property originalEvent
* @type {Event}
* @readonly
*/
get originalEvent() {
if (this.sensorEvent) {
return this.sensorEvent.originalEvent;
}
return null;
}
}
exports.DragEvent = DragEvent; /**
* Drag start event
* @class DragStartEvent
* @module DragStartEvent
* @extends DragEvent
*/
DragEvent.type = 'drag';
class DragStartEvent extends DragEvent {}
exports.DragStartEvent = DragStartEvent; /**
* Drag move event
* @class DragMoveEvent
* @module DragMoveEvent
* @extends DragEvent
*/
DragStartEvent.type = 'drag:start';
DragStartEvent.cancelable = true;
class DragMoveEvent extends DragEvent {}
exports.DragMoveEvent = DragMoveEvent; /**
* Drag over event
* @class DragOverEvent
* @module DragOverEvent
* @extends DragEvent
*/
DragMoveEvent.type = 'drag:move';
class DragOverEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOverEvent = DragOverEvent; /**
* Drag out event
* @class DragOutEvent
* @module DragOutEvent
* @extends DragEvent
*/
DragOverEvent.type = 'drag:over';
DragOverEvent.cancelable = true;
class DragOutEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
/**
* Draggable element you left
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
}
exports.DragOutEvent = DragOutEvent; /**
* Drag over container event
* @class DragOverContainerEvent
* @module DragOverContainerEvent
* @extends DragEvent
*/
DragOutEvent.type = 'drag:out';
class DragOverContainerEvent extends DragEvent {
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOverContainerEvent = DragOverContainerEvent; /**
* Drag out container event
* @class DragOutContainerEvent
* @module DragOutContainerEvent
* @extends DragEvent
*/
DragOverContainerEvent.type = 'drag:over:container';
class DragOutContainerEvent extends DragEvent {
/**
* Draggable container you left
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.DragOutContainerEvent = DragOutContainerEvent; /**
* Drag pressure event
* @class DragPressureEvent
* @module DragPressureEvent
* @extends DragEvent
*/
DragOutContainerEvent.type = 'drag:out:container';
class DragPressureEvent extends DragEvent {
/**
* Pressure applied on draggable element
* @property pressure
* @type {Number}
* @readonly
*/
get pressure() {
return this.data.pressure;
}
}
exports.DragPressureEvent = DragPressureEvent; /**
* Drag stop event
* @class DragStopEvent
* @module DragStopEvent
* @extends DragEvent
*/
DragPressureEvent.type = 'drag:pressure';
class DragStopEvent extends DragEvent {}
exports.DragStopEvent = DragStopEvent;
DragStopEvent.type = 'drag:stop';
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _DragEvent = __webpack_require__(8);
Object.keys(_DragEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DragEvent[key];
}
});
});
var _DraggableEvent = __webpack_require__(7);
Object.keys(_DraggableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _DraggableEvent[key];
}
});
});
var _Plugins = __webpack_require__(6);
Object.keys(_Plugins).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Plugins[key];
}
});
});
var _Sensors = __webpack_require__(5);
Object.keys(_Sensors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Sensors[key];
}
});
});
var _Draggable = __webpack_require__(12);
var _Draggable2 = _interopRequireDefault(_Draggable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Draggable2.default;
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _Draggable = __webpack_require__(40);
var _Draggable2 = _interopRequireDefault(_Draggable);
var _SwappableEvent = __webpack_require__(9);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragOver = Symbol('onDragOver');
const onDragStop = Symbol('onDragStop');
/**
* Returns an announcement message when the Draggable element is swapped with another draggable element
* @param {SwappableSwappedEvent} swappableEvent
* @return {String}
*/
function onSwappableSwappedDefaultAnnouncement({ dragEvent, swappedElement }) {
const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'swappable element';
const overText = swappedElement.textContent.trim() || swappedElement.id || 'swappable element';
return `Swapped ${sourceText} with ${overText}`;
}
/**
* @const {Object} defaultAnnouncements
* @const {Function} defaultAnnouncements['swappabled:swapped']
*/
const defaultAnnouncements = {
'swappabled:swapped': onSwappableSwappedDefaultAnnouncement
};
/**
* Swappable is built on top of Draggable and allows swapping of draggable elements.
* Order is irrelevant to Swappable.
* @class Swappable
* @module Swappable
* @extends Draggable
*/
class Swappable extends _Draggable2.default {
/**
* Swappable constructor.
* @constructs Swappable
* @param {HTMLElement[]|NodeList|HTMLElement} containers - Swappable containers
* @param {Object} options - Options for Swappable
*/
constructor(containers = [], options = {}) {
super(containers, _extends({}, options, {
announcements: _extends({}, defaultAnnouncements, options.announcements || {})
}));
/**
* Last draggable element that was dragged over
* @property lastOver
* @type {HTMLElement}
*/
this.lastOver = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this.on('drag:start', this[onDragStart]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
}
/**
* Destroys Swappable instance.
*/
destroy() {
super.destroy();
this.off('drag:start', this._onDragStart).off('drag:over', this._onDragOver).off('drag:stop', this._onDragStop);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
const swappableStartEvent = new _SwappableEvent.SwappableStartEvent({
dragEvent: event
});
this.trigger(swappableStartEvent);
if (swappableStartEvent.canceled()) {
event.cancel();
}
}
/**
* Drag over handler
* @private
* @param {DragOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.over === event.originalSource || event.over === event.source || event.canceled()) {
return;
}
const swappableSwapEvent = new _SwappableEvent.SwappableSwapEvent({
dragEvent: event,
over: event.over,
overContainer: event.overContainer
});
this.trigger(swappableSwapEvent);
if (swappableSwapEvent.canceled()) {
return;
}
// swap originally swapped element back
if (this.lastOver && this.lastOver !== event.over) {
swap(this.lastOver, event.source);
}
if (this.lastOver === event.over) {
this.lastOver = null;
} else {
this.lastOver = event.over;
}
swap(event.source, event.over);
const swappableSwappedEvent = new _SwappableEvent.SwappableSwappedEvent({
dragEvent: event,
swappedElement: event.over
});
this.trigger(swappableSwappedEvent);
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const swappableStopEvent = new _SwappableEvent.SwappableStopEvent({
dragEvent: event
});
this.trigger(swappableStopEvent);
this.lastOver = null;
}
}
exports.default = Swappable;
function withTempElement(callback) {
const tmpElement = document.createElement('div');
callback(tmpElement);
tmpElement.parentNode.removeChild(tmpElement);
}
function swap(source, over) {
const overParent = over.parentNode;
const sourceParent = source.parentNode;
withTempElement(tmpElement => {
sourceParent.insertBefore(tmpElement, source);
overParent.insertBefore(source, over);
sourceParent.insertBefore(over, tmpElement);
});
}
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SwappableStopEvent = exports.SwappableSwappedEvent = exports.SwappableSwapEvent = exports.SwappableStartEvent = exports.SwappableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base swappable event
* @class SwappableEvent
* @module SwappableEvent
* @extends AbstractEvent
*/
class SwappableEvent extends _AbstractEvent2.default {
/**
* Original drag event that triggered this swappable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.SwappableEvent = SwappableEvent; /**
* Swappable start event
* @class SwappableStartEvent
* @module SwappableStartEvent
* @extends SwappableEvent
*/
SwappableEvent.type = 'swappable';
class SwappableStartEvent extends SwappableEvent {}
exports.SwappableStartEvent = SwappableStartEvent; /**
* Swappable swap event
* @class SwappableSwapEvent
* @module SwappableSwapEvent
* @extends SwappableEvent
*/
SwappableStartEvent.type = 'swappable:start';
SwappableStartEvent.cancelable = true;
class SwappableSwapEvent extends SwappableEvent {
/**
* Draggable element you are over
* @property over
* @type {HTMLElement}
* @readonly
*/
get over() {
return this.data.over;
}
/**
* Draggable container you are over
* @property overContainer
* @type {HTMLElement}
* @readonly
*/
get overContainer() {
return this.data.overContainer;
}
}
exports.SwappableSwapEvent = SwappableSwapEvent; /**
* Swappable swapped event
* @class SwappableSwappedEvent
* @module SwappableSwappedEvent
* @extends SwappableEvent
*/
SwappableSwapEvent.type = 'swappable:swap';
SwappableSwapEvent.cancelable = true;
class SwappableSwappedEvent extends SwappableEvent {
/**
* The draggable element that you swapped with
* @property swappedElement
* @type {HTMLElement}
* @readonly
*/
get swappedElement() {
return this.data.swappedElement;
}
}
exports.SwappableSwappedEvent = SwappableSwappedEvent; /**
* Swappable stop event
* @class SwappableStopEvent
* @module SwappableStopEvent
* @extends SwappableEvent
*/
SwappableSwappedEvent.type = 'swappable:swapped';
class SwappableStopEvent extends SwappableEvent {}
exports.SwappableStopEvent = SwappableStopEvent;
SwappableStopEvent.type = 'swappable:stop';
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SwappableEvent = __webpack_require__(9);
Object.keys(_SwappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SwappableEvent[key];
}
});
});
var _Swappable = __webpack_require__(41);
var _Swappable2 = _interopRequireDefault(_Swappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Swappable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Plugins", [], factory);
else if(typeof exports === 'object')
exports["Plugins"] = factory();
else
root["Plugins"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 21);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(16);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(8);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(15);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(13);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(18);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(19);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onSortableSorted = Symbol('onSortableSorted');
/**
* SwapAnimation default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @property {Boolean} defaultOptions.horizontal
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
duration: 150,
easingFunction: 'ease-in-out',
horizontal: false
};
/**
* SwapAnimation plugin adds swap animations for sortable
* @class SwapAnimation
* @module SwapAnimation
* @extends AbstractPlugin
*/
class SwapAnimation extends _AbstractPlugin2.default {
/**
* SwapAnimation constructor.
* @constructs SwapAnimation
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* SwapAnimation options
* @property {Object} options
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Last animation frame
* @property {Number} lastAnimationFrame
* @type {Number}
*/
this.lastAnimationFrame = null;
this[onSortableSorted] = this[onSortableSorted].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('sortable:sorted', this[onSortableSorted]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('sortable:sorted', this[onSortableSorted]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.swapAnimation || {};
}
/**
* Sortable sorted handler
* @param {SortableSortedEvent} sortableEvent
* @private
*/
[onSortableSorted]({ oldIndex, newIndex, dragEvent }) {
const { source, over } = dragEvent;
cancelAnimationFrame(this.lastAnimationFrame);
// Can be done in a separate frame
this.lastAnimationFrame = requestAnimationFrame(() => {
if (oldIndex >= newIndex) {
animate(source, over, this.options);
} else {
animate(over, source, this.options);
}
});
}
}
exports.default = SwapAnimation; /**
* Animates two elements
* @param {HTMLElement} from
* @param {HTMLElement} to
* @param {Object} options
* @param {Number} options.duration
* @param {String} options.easingFunction
* @param {String} options.horizontal
* @private
*/
function animate(from, to, { duration, easingFunction, horizontal }) {
for (const element of [from, to]) {
element.style.pointerEvents = 'none';
}
if (horizontal) {
const width = from.offsetWidth;
from.style.transform = `translate3d(${width}px, 0, 0)`;
to.style.transform = `translate3d(-${width}px, 0, 0)`;
} else {
const height = from.offsetHeight;
from.style.transform = `translate3d(0, ${height}px, 0)`;
to.style.transform = `translate3d(0, -${height}px, 0)`;
}
requestAnimationFrame(() => {
for (const element of [from, to]) {
element.addEventListener('transitionend', resetElementOnTransitionEnd);
element.style.transition = `transform ${duration}ms ${easingFunction}`;
element.style.transform = '';
}
});
}
/**
* Resets animation style properties after animation has completed
* @param {Event} event
* @private
*/
function resetElementOnTransitionEnd(event) {
event.target.style.transition = '';
event.target.style.pointerEvents = '';
event.target.removeEventListener('transitionend', resetElementOnTransitionEnd);
}
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _SwapAnimation = __webpack_require__(5);
var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _SwapAnimation2.default;
exports.defaultOptions = _SwapAnimation.defaultOptions;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _SnappableEvent = __webpack_require__(1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragStop = Symbol('onDragStop');
const onDragOver = Symbol('onDragOver');
const onDragOut = Symbol('onDragOut');
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
/**
* Snappable plugin which snaps draggable elements into place
* @class Snappable
* @module Snappable
* @extends AbstractPlugin
*/
class Snappable extends _AbstractPlugin2.default {
/**
* Snappable constructor.
* @constructs Snappable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of the first source element
* @property {HTMLElement|null} firstSource
*/
this.firstSource = null;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragOut] = this[onDragOut].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:stop', this[onDragStop]).on('drag:over', this[onDragOver]).on('drag:out', this[onDragOut]).on('droppable:over', this[onDragOver]).on('droppable:out', this[onDragOut]).on('mirror:created', this[onMirrorCreated]).on('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:stop', this[onDragStop]).off('drag:over', this[onDragOver]).off('drag:out', this[onDragOut]).off('droppable:over', this[onDragOver]).off('droppable:out', this[onDragOut]).off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.firstSource = event.source;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop]() {
this.firstSource = null;
}
/**
* Drag over handler
* @private
* @param {DragOverEvent|DroppableOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
if (source === this.firstSource) {
this.firstSource = null;
return;
}
const snapInEvent = new _SnappableEvent.SnapInEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapInEvent);
if (snapInEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = 'none';
}
source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
source.classList.add(this.draggable.getClassNameFor('source:placed'));
// Need to cancel this in drag out
setTimeout(() => {
source.classList.remove(this.draggable.getClassNameFor('source:placed'));
}, this.draggable.options.placedTimeout);
}
/**
* Drag out handler
* @private
* @param {DragOutEvent|DroppableOutEvent} event - Drag out event
*/
[onDragOut](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
const snapOutEvent = new _SnappableEvent.SnapOutEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapOutEvent);
if (snapOutEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = '';
}
source.classList.add(this.draggable.getClassNameFor('source:dragging'));
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
}
exports.default = Snappable;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SnapOutEvent = exports.SnapInEvent = exports.SnapEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base snap event
* @class SnapEvent
* @module SnapEvent
* @extends AbstractEvent
*/
class SnapEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this snap event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Snappable element
* @property snappable
* @type {HTMLElement}
* @readonly
*/
get snappable() {
return this.data.snappable;
}
}
exports.SnapEvent = SnapEvent; /**
* Snap in event
* @class SnapInEvent
* @module SnapInEvent
* @extends SnapEvent
*/
SnapEvent.type = 'snap';
class SnapInEvent extends SnapEvent {}
exports.SnapInEvent = SnapInEvent; /**
* Snap out event
* @class SnapOutEvent
* @module SnapOutEvent
* @extends SnapEvent
*/
SnapInEvent.type = 'snap:in';
SnapInEvent.cancelable = true;
class SnapOutEvent extends SnapEvent {}
exports.SnapOutEvent = SnapOutEvent;
SnapOutEvent.type = 'snap:out';
SnapOutEvent.cancelable = true;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(1);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
var _Snappable = __webpack_require__(7);
var _Snappable2 = _interopRequireDefault(_Snappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Snappable2.default;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
const onDragOver = Symbol('onDragOver');
const resize = Symbol('resize');
/**
* ResizeMirror default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {};
/**
* The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
* @class ResizeMirror
* @module ResizeMirror
* @extends AbstractPlugin
*/
class ResizeMirror extends _AbstractPlugin2.default {
/**
* ResizeMirror constructor.
* @constructs ResizeMirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* ResizeMirror options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* ResizeMirror remembers the last width when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastWidth
*/
this.lastWidth = 0;
/**
* ResizeMirror remembers the last height when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastHeight
*/
this.lastHeight = 0;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('mirror:created', this[onMirrorCreated]).on('drag:over', this[onDragOver]).on('drag:over:container', this[onDragOver]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]).off('drag:over', this[onDragOver]).off('drag:over:container', this[onDragOver]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.resizeMirror || {};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
/**
* Drag over handler
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[onDragOver](dragEvent) {
this[resize](dragEvent);
}
/**
* Resize function for
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[resize]({ overContainer, over }) {
requestAnimationFrame(() => {
if (this.mirror.parentNode !== overContainer) {
overContainer.appendChild(this.mirror);
}
const overElement = over || this.draggable.getDraggableElementsForContainer(overContainer)[0];
if (!overElement) {
return;
}
(0, _utils.requestNextAnimationFrame)(() => {
const overRect = overElement.getBoundingClientRect();
if (this.lastHeight === overRect.height && this.lastWidth === overRect.width) {
return;
}
this.mirror.style.width = `${overRect.width}px`;
this.mirror.style.height = `${overRect.height}px`;
this.lastWidth = overRect.width;
this.lastHeight = overRect.height;
});
});
}
}
exports.default = ResizeMirror;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _ResizeMirror = __webpack_require__(10);
var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ResizeMirror2.default;
exports.defaultOptions = _ResizeMirror.defaultOptions;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(12);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(14);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
var _CollidableEvent = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onRequestAnimationFrame = Symbol('onRequestAnimationFrame');
/**
* Collidable plugin which detects colliding elements while dragging
* @class Collidable
* @module Collidable
* @extends AbstractPlugin
*/
class Collidable extends _AbstractPlugin2.default {
/**
* Collidable constructor.
* @constructs Collidable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} currentlyCollidingElement
* @type {HTMLElement|null}
*/
this.currentlyCollidingElement = null;
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} lastCollidingElement
* @type {HTMLElement|null}
*/
this.lastCollidingElement = null;
/**
* Animation frame for finding colliding elements
* @property {Number|null} currentAnimationFrame
* @type {Number|null}
*/
this.currentAnimationFrame = null;
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onRequestAnimationFrame] = this[onRequestAnimationFrame].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns current collidables based on `collidables` option
* @return {HTMLElement[]}
*/
getCollidables() {
const collidables = this.draggable.options.collidables;
if (typeof collidables === 'string') {
return Array.prototype.slice.call(document.querySelectorAll(collidables));
} else if (collidables instanceof NodeList || collidables instanceof Array) {
return Array.prototype.slice.call(collidables);
} else if (collidables instanceof HTMLElement) {
return [collidables];
} else if (typeof collidables === 'function') {
return collidables();
} else {
return [];
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
const target = event.sensorEvent.target;
this.currentAnimationFrame = requestAnimationFrame(this[onRequestAnimationFrame](target));
if (this.currentlyCollidingElement) {
event.cancel();
}
const collidableInEvent = new _CollidableEvent.CollidableInEvent({
dragEvent: event,
collidingElement: this.currentlyCollidingElement
});
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: this.lastCollidingElement
});
const enteringCollidable = Boolean(this.currentlyCollidingElement && this.lastCollidingElement !== this.currentlyCollidingElement);
const leavingCollidable = Boolean(!this.currentlyCollidingElement && this.lastCollidingElement);
if (enteringCollidable) {
if (this.lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.draggable.trigger(collidableInEvent);
} else if (leavingCollidable) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = this.currentlyCollidingElement;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: lastCollidingElement
});
if (lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = null;
this.currentlyCollidingElement = null;
}
/**
* Animation frame function
* @private
* @param {HTMLElement} target - Current move target
* @return {Function}
*/
[onRequestAnimationFrame](target) {
return () => {
const collidables = this.getCollidables();
this.currentlyCollidingElement = (0, _utils.closest)(target, element => collidables.includes(element));
};
}
}
exports.default = Collidable;
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollidableOutEvent = exports.CollidableInEvent = exports.CollidableEvent = undefined;
var _AbstractEvent = __webpack_require__(3);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base collidable event
* @class CollidableEvent
* @module CollidableEvent
* @extends AbstractEvent
*/
class CollidableEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this colliable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.CollidableEvent = CollidableEvent; /**
* Collidable in event
* @class CollidableInEvent
* @module CollidableInEvent
* @extends CollidableEvent
*/
CollidableEvent.type = 'collidable';
class CollidableInEvent extends CollidableEvent {
/**
* Element you are currently colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableInEvent = CollidableInEvent; /**
* Collidable out event
* @class CollidableOutEvent
* @module CollidableOutEvent
* @extends CollidableEvent
*/
CollidableInEvent.type = 'collidable:in';
class CollidableOutEvent extends CollidableEvent {
/**
* Element you were previously colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableOutEvent = CollidableOutEvent;
CollidableOutEvent.type = 'collidable:out';
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(4);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
var _Collidable = __webpack_require__(17);
var _Collidable2 = _interopRequireDefault(_Collidable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Collidable2.default;
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Collidable = __webpack_require__(20);
Object.defineProperty(exports, 'Collidable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Collidable).default;
}
});
var _ResizeMirror = __webpack_require__(11);
Object.defineProperty(exports, 'ResizeMirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ResizeMirror).default;
}
});
Object.defineProperty(exports, 'defaultResizeMirrorOptions', {
enumerable: true,
get: function () {
return _ResizeMirror.defaultOptions;
}
});
var _Snappable = __webpack_require__(9);
Object.defineProperty(exports, 'Snappable', {
enumerable: true,
get: function () {
return _interopRequireDefault(_Snappable).default;
}
});
var _SwapAnimation = __webpack_require__(6);
Object.defineProperty(exports, 'SwapAnimation', {
enumerable: true,
get: function () {
return _interopRequireDefault(_SwapAnimation).default;
}
});
Object.defineProperty(exports, 'defaultSwapAnimationOptions', {
enumerable: true,
get: function () {
return _SwapAnimation.defaultOptions;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Collidable", [], factory);
else if(typeof exports === 'object')
exports["Collidable"] = factory();
else
root["Collidable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 12);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(11);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(1);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(3);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(4);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(2);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(6);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(7);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(5);
var _CollidableEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragMove = Symbol('onDragMove');
const onDragStop = Symbol('onDragStop');
const onRequestAnimationFrame = Symbol('onRequestAnimationFrame');
/**
* Collidable plugin which detects colliding elements while dragging
* @class Collidable
* @module Collidable
* @extends AbstractPlugin
*/
class Collidable extends _AbstractPlugin2.default {
/**
* Collidable constructor.
* @constructs Collidable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} currentlyCollidingElement
* @type {HTMLElement|null}
*/
this.currentlyCollidingElement = null;
/**
* Keeps track of currently colliding elements
* @property {HTMLElement|null} lastCollidingElement
* @type {HTMLElement|null}
*/
this.lastCollidingElement = null;
/**
* Animation frame for finding colliding elements
* @property {Number|null} currentAnimationFrame
* @type {Number|null}
*/
this.currentAnimationFrame = null;
this[onDragMove] = this[onDragMove].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onRequestAnimationFrame] = this[onRequestAnimationFrame].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
}
/**
* Returns current collidables based on `collidables` option
* @return {HTMLElement[]}
*/
getCollidables() {
const collidables = this.draggable.options.collidables;
if (typeof collidables === 'string') {
return Array.prototype.slice.call(document.querySelectorAll(collidables));
} else if (collidables instanceof NodeList || collidables instanceof Array) {
return Array.prototype.slice.call(collidables);
} else if (collidables instanceof HTMLElement) {
return [collidables];
} else if (typeof collidables === 'function') {
return collidables();
} else {
return [];
}
}
/**
* Drag move handler
* @private
* @param {DragMoveEvent} event - Drag move event
*/
[onDragMove](event) {
const target = event.sensorEvent.target;
this.currentAnimationFrame = requestAnimationFrame(this[onRequestAnimationFrame](target));
if (this.currentlyCollidingElement) {
event.cancel();
}
const collidableInEvent = new _CollidableEvent.CollidableInEvent({
dragEvent: event,
collidingElement: this.currentlyCollidingElement
});
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: this.lastCollidingElement
});
const enteringCollidable = Boolean(this.currentlyCollidingElement && this.lastCollidingElement !== this.currentlyCollidingElement);
const leavingCollidable = Boolean(!this.currentlyCollidingElement && this.lastCollidingElement);
if (enteringCollidable) {
if (this.lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.draggable.trigger(collidableInEvent);
} else if (leavingCollidable) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = this.currentlyCollidingElement;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop](event) {
const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
dragEvent: event,
collidingElement: lastCollidingElement
});
if (lastCollidingElement) {
this.draggable.trigger(collidableOutEvent);
}
this.lastCollidingElement = null;
this.currentlyCollidingElement = null;
}
/**
* Animation frame function
* @private
* @param {HTMLElement} target - Current move target
* @return {Function}
*/
[onRequestAnimationFrame](target) {
return () => {
const collidables = this.getCollidables();
this.currentlyCollidingElement = (0, _utils.closest)(target, element => collidables.includes(element));
};
}
}
exports.default = Collidable;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(9);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollidableOutEvent = exports.CollidableInEvent = exports.CollidableEvent = undefined;
var _AbstractEvent = __webpack_require__(10);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base collidable event
* @class CollidableEvent
* @module CollidableEvent
* @extends AbstractEvent
*/
class CollidableEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this colliable event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
}
exports.CollidableEvent = CollidableEvent; /**
* Collidable in event
* @class CollidableInEvent
* @module CollidableInEvent
* @extends CollidableEvent
*/
CollidableEvent.type = 'collidable';
class CollidableInEvent extends CollidableEvent {
/**
* Element you are currently colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableInEvent = CollidableInEvent; /**
* Collidable out event
* @class CollidableOutEvent
* @module CollidableOutEvent
* @extends CollidableEvent
*/
CollidableInEvent.type = 'collidable:in';
class CollidableOutEvent extends CollidableEvent {
/**
* Element you were previously colliding with
* @property collidingElement
* @type {HTMLElement}
* @readonly
*/
get collidingElement() {
return this.data.collidingElement;
}
}
exports.CollidableOutEvent = CollidableOutEvent;
CollidableOutEvent.type = 'collidable:out';
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CollidableEvent = __webpack_require__(0);
Object.keys(_CollidableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _CollidableEvent[key];
}
});
});
var _Collidable = __webpack_require__(8);
var _Collidable2 = _interopRequireDefault(_Collidable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Collidable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("ResizeMirror", [], factory);
else if(typeof exports === 'object')
exports["ResizeMirror"] = factory();
else
root["ResizeMirror"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 8);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(0);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;
const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
/**
* Get the closest parent element of a given element that matches the given
* selector string or matching function
*
* @param {Element} element The child element to find a parent of
* @param {String|Function} selector The string or function to use to match
* the parent element
* @return {Element|null}
*/
function closest(element, value) {
if (!element) {
return null;
}
const selector = value;
const callback = value;
const nodeList = value;
const singleElement = value;
const isSelector = Boolean(typeof value === 'string');
const isFunction = Boolean(typeof value === 'function');
const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
const isElement = Boolean(value instanceof HTMLElement);
function conditionFn(currentElement) {
if (!currentElement) {
return currentElement;
} else if (isSelector) {
return matchFunction.call(currentElement, selector);
} else if (isNodeList) {
return [...nodeList].includes(currentElement);
} else if (isElement) {
return singleElement === currentElement;
} else if (isFunction) {
return callback(currentElement);
} else {
return null;
}
}
let current = element;
do {
current = current.correspondingUseElement || current.correspondingElement || current;
if (conditionFn(current)) {
return current;
}
current = current.parentNode;
} while (current && current !== document.body && current !== document);
return null;
}
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(2);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _closest2.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _closest = __webpack_require__(3);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(1);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(5);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(6);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
const onDragOver = Symbol('onDragOver');
const resize = Symbol('resize');
/**
* ResizeMirror default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {};
/**
* The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
* @class ResizeMirror
* @module ResizeMirror
* @extends AbstractPlugin
*/
class ResizeMirror extends _AbstractPlugin2.default {
/**
* ResizeMirror constructor.
* @constructs ResizeMirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* ResizeMirror options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* ResizeMirror remembers the last width when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastWidth
*/
this.lastWidth = 0;
/**
* ResizeMirror remembers the last height when resizing the mirror
* to avoid additional writes to the DOM
* @property {number} lastHeight
*/
this.lastHeight = 0;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('mirror:created', this[onMirrorCreated]).on('drag:over', this[onDragOver]).on('drag:over:container', this[onDragOver]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]).off('drag:over', this[onDragOver]).off('drag:over:container', this[onDragOver]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.resizeMirror || {};
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
/**
* Drag over handler
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[onDragOver](dragEvent) {
this[resize](dragEvent);
}
/**
* Resize function for
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[resize]({ overContainer, over }) {
requestAnimationFrame(() => {
if (this.mirror.parentNode !== overContainer) {
overContainer.appendChild(this.mirror);
}
const overElement = over || this.draggable.getDraggableElementsForContainer(overContainer)[0];
if (!overElement) {
return;
}
(0, _utils.requestNextAnimationFrame)(() => {
const overRect = overElement.getBoundingClientRect();
if (this.lastHeight === overRect.height && this.lastWidth === overRect.width) {
return;
}
this.mirror.style.width = `${overRect.width}px`;
this.mirror.style.height = `${overRect.height}px`;
this.lastWidth = overRect.width;
this.lastHeight = overRect.height;
});
});
}
}
exports.default = ResizeMirror;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _ResizeMirror = __webpack_require__(7);
var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ResizeMirror2.default;
exports.defaultOptions = _ResizeMirror.defaultOptions;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Snappable", [], factory);
else if(typeof exports === 'object')
exports["Snappable"] = factory();
else
root["Snappable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(6);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(2);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _SnappableEvent = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragStart = Symbol('onDragStart');
const onDragStop = Symbol('onDragStop');
const onDragOver = Symbol('onDragOver');
const onDragOut = Symbol('onDragOut');
const onMirrorCreated = Symbol('onMirrorCreated');
const onMirrorDestroy = Symbol('onMirrorDestroy');
/**
* Snappable plugin which snaps draggable elements into place
* @class Snappable
* @module Snappable
* @extends AbstractPlugin
*/
class Snappable extends _AbstractPlugin2.default {
/**
* Snappable constructor.
* @constructs Snappable
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* Keeps track of the first source element
* @property {HTMLElement|null} firstSource
*/
this.firstSource = null;
/**
* Keeps track of the mirror element
* @property {HTMLElement} mirror
*/
this.mirror = null;
this[onDragStart] = this[onDragStart].bind(this);
this[onDragStop] = this[onDragStop].bind(this);
this[onDragOver] = this[onDragOver].bind(this);
this[onDragOut] = this[onDragOut].bind(this);
this[onMirrorCreated] = this[onMirrorCreated].bind(this);
this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:start', this[onDragStart]).on('drag:stop', this[onDragStop]).on('drag:over', this[onDragOver]).on('drag:out', this[onDragOut]).on('droppable:over', this[onDragOver]).on('droppable:out', this[onDragOut]).on('mirror:created', this[onMirrorCreated]).on('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:start', this[onDragStart]).off('drag:stop', this[onDragStop]).off('drag:over', this[onDragOver]).off('drag:out', this[onDragOut]).off('droppable:over', this[onDragOver]).off('droppable:out', this[onDragOut]).off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]);
}
/**
* Drag start handler
* @private
* @param {DragStartEvent} event - Drag start event
*/
[onDragStart](event) {
if (event.canceled()) {
return;
}
this.firstSource = event.source;
}
/**
* Drag stop handler
* @private
* @param {DragStopEvent} event - Drag stop event
*/
[onDragStop]() {
this.firstSource = null;
}
/**
* Drag over handler
* @private
* @param {DragOverEvent|DroppableOverEvent} event - Drag over event
*/
[onDragOver](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
if (source === this.firstSource) {
this.firstSource = null;
return;
}
const snapInEvent = new _SnappableEvent.SnapInEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapInEvent);
if (snapInEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = 'none';
}
source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
source.classList.add(this.draggable.getClassNameFor('source:placed'));
// Need to cancel this in drag out
setTimeout(() => {
source.classList.remove(this.draggable.getClassNameFor('source:placed'));
}, this.draggable.options.placedTimeout);
}
/**
* Drag out handler
* @private
* @param {DragOutEvent|DroppableOutEvent} event - Drag out event
*/
[onDragOut](event) {
if (event.canceled()) {
return;
}
const source = event.source || event.dragEvent.source;
const snapOutEvent = new _SnappableEvent.SnapOutEvent({
dragEvent: event,
snappable: event.over || event.droppable
});
this.draggable.trigger(snapOutEvent);
if (snapOutEvent.canceled()) {
return;
}
if (this.mirror) {
this.mirror.style.display = '';
}
source.classList.add(this.draggable.getClassNameFor('source:dragging'));
}
/**
* Mirror created handler
* @param {MirrorCreatedEvent} mirrorEvent
* @private
*/
[onMirrorCreated]({ mirror }) {
this.mirror = mirror;
}
/**
* Mirror destroy handler
* @param {MirrorDestroyEvent} mirrorEvent
* @private
*/
[onMirrorDestroy]() {
this.mirror = null;
}
}
exports.default = Snappable;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
const canceled = Symbol('canceled');
/**
* All events fired by draggable inherit this class. You can call `cancel()` to
* cancel a specific event or you can check if an event has been canceled by
* calling `canceled()`.
* @abstract
* @class AbstractEvent
* @module AbstractEvent
*/
class AbstractEvent {
/**
* AbstractEvent constructor.
* @constructs AbstractEvent
* @param {object} data - Event data
*/
/**
* Event type
* @static
* @abstract
* @property type
* @type {String}
*/
constructor(data) {
this[canceled] = false;
this.data = data;
}
/**
* Read-only type
* @abstract
* @return {String}
*/
/**
* Event cancelable
* @static
* @abstract
* @property cancelable
* @type {Boolean}
*/
get type() {
return this.constructor.type;
}
/**
* Read-only cancelable
* @abstract
* @return {Boolean}
*/
get cancelable() {
return this.constructor.cancelable;
}
/**
* Cancels the event instance
* @abstract
*/
cancel() {
this[canceled] = true;
}
/**
* Check if event has been canceled
* @abstract
* @return {Boolean}
*/
canceled() {
return Boolean(this[canceled]);
}
/**
* Returns new event instance with existing event data.
* This method allows for overriding of event data.
* @param {Object} data
* @return {AbstractEvent}
*/
clone(data) {
return new this.constructor(_extends({}, this.data, data));
}
}
exports.default = AbstractEvent;
AbstractEvent.type = 'event';
AbstractEvent.cancelable = false;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(4);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractEvent2.default;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SnapOutEvent = exports.SnapInEvent = exports.SnapEvent = undefined;
var _AbstractEvent = __webpack_require__(5);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Base snap event
* @class SnapEvent
* @module SnapEvent
* @extends AbstractEvent
*/
class SnapEvent extends _AbstractEvent2.default {
/**
* Drag event that triggered this snap event
* @property dragEvent
* @type {DragEvent}
* @readonly
*/
get dragEvent() {
return this.data.dragEvent;
}
/**
* Snappable element
* @property snappable
* @type {HTMLElement}
* @readonly
*/
get snappable() {
return this.data.snappable;
}
}
exports.SnapEvent = SnapEvent; /**
* Snap in event
* @class SnapInEvent
* @module SnapInEvent
* @extends SnapEvent
*/
SnapEvent.type = 'snap';
class SnapInEvent extends SnapEvent {}
exports.SnapInEvent = SnapInEvent; /**
* Snap out event
* @class SnapOutEvent
* @module SnapOutEvent
* @extends SnapEvent
*/
SnapInEvent.type = 'snap:in';
SnapInEvent.cancelable = true;
class SnapOutEvent extends SnapEvent {}
exports.SnapOutEvent = SnapOutEvent;
SnapOutEvent.type = 'snap:out';
SnapOutEvent.cancelable = true;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SnappableEvent = __webpack_require__(0);
Object.keys(_SnappableEvent).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _SnappableEvent[key];
}
});
});
var _Snappable = __webpack_require__(3);
var _Snappable2 = _interopRequireDefault(_Snappable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Snappable2.default;
/***/ })
/******/ ]);
});
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("SwapAnimation", [], factory);
else if(typeof exports === 'object')
exports["SwapAnimation"] = factory();
else
root["SwapAnimation"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* All draggable plugins inherit from this class.
* @abstract
* @class AbstractPlugin
* @module AbstractPlugin
*/
class AbstractPlugin {
/**
* AbstractPlugin constructor.
* @constructs AbstractPlugin
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
/**
* Draggable instance
* @property draggable
* @type {Draggable}
*/
this.draggable = draggable;
}
/**
* Override to add listeners
* @abstract
*/
attach() {
throw new Error('Not Implemented');
}
/**
* Override to remove listeners
* @abstract
*/
detach() {
throw new Error('Not Implemented');
}
}
exports.default = AbstractPlugin;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _AbstractPlugin2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _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; };
var _AbstractPlugin = __webpack_require__(1);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onSortableSorted = Symbol('onSortableSorted');
/**
* SwapAnimation default options
* @property {Object} defaultOptions
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @property {Boolean} defaultOptions.horizontal
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {
duration: 150,
easingFunction: 'ease-in-out',
horizontal: false
};
/**
* SwapAnimation plugin adds swap animations for sortable
* @class SwapAnimation
* @module SwapAnimation
* @extends AbstractPlugin
*/
class SwapAnimation extends _AbstractPlugin2.default {
/**
* SwapAnimation constructor.
* @constructs SwapAnimation
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* SwapAnimation options
* @property {Object} options
* @property {Number} defaultOptions.duration
* @property {String} defaultOptions.easingFunction
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
/**
* Last animation frame
* @property {Number} lastAnimationFrame
* @type {Number}
*/
this.lastAnimationFrame = null;
this[onSortableSorted] = this[onSortableSorted].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('sortable:sorted', this[onSortableSorted]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('sortable:sorted', this[onSortableSorted]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.swapAnimation || {};
}
/**
* Sortable sorted handler
* @param {SortableSortedEvent} sortableEvent
* @private
*/
[onSortableSorted]({ oldIndex, newIndex, dragEvent }) {
const { source, over } = dragEvent;
cancelAnimationFrame(this.lastAnimationFrame);
// Can be done in a separate frame
this.lastAnimationFrame = requestAnimationFrame(() => {
if (oldIndex >= newIndex) {
animate(source, over, this.options);
} else {
animate(over, source, this.options);
}
});
}
}
exports.default = SwapAnimation; /**
* Animates two elements
* @param {HTMLElement} from
* @param {HTMLElement} to
* @param {Object} options
* @param {Number} options.duration
* @param {String} options.easingFunction
* @param {String} options.horizontal
* @private
*/
function animate(from, to, { duration, easingFunction, horizontal }) {
for (const element of [from, to]) {
element.style.pointerEvents = 'none';
}
if (horizontal) {
const width = from.offsetWidth;
from.style.transform = `translate3d(${width}px, 0, 0)`;
to.style.transform = `translate3d(-${width}px, 0, 0)`;
} else {
const height = from.offsetHeight;
from.style.transform = `translate3d(0, ${height}px, 0)`;
to.style.transform = `translate3d(0, -${height}px, 0)`;
}
requestAnimationFrame(() => {
for (const element of [from, to]) {
element.addEventListener('transitionend', resetElementOnTransitionEnd);
element.style.transition = `transform ${duration}ms ${easingFunction}`;
element.style.transform = '';
}
});
}
/**
* Resets animation style properties after animation has completed
* @param {Event} event
* @private
*/
function resetElementOnTransitionEnd(event) {
event.target.style.transition = '';
event.target.style.pointerEvents = '';
event.target.removeEventListener('transitionend', resetElementOnTransitionEnd);
}
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _SwapAnimation = __webpack_require__(2);
var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _SwapAnimation2.default;
exports.defaultOptions = _SwapAnimation.defaultOptions;
/***/ })
/******/ ]);
});