123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447 |
- var DragDropTouch;
- (function (DragDropTouch_1) {
- 'use strict';
-
- var DataTransfer = (function () {
- function DataTransfer() {
- this._dropEffect = 'move';
- this._effectAllowed = 'all';
- this._data = {};
- }
- Object.defineProperty(DataTransfer.prototype, "dropEffect", {
-
- get: function () {
- return this._dropEffect;
- },
- set: function (value) {
- this._dropEffect = value;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(DataTransfer.prototype, "effectAllowed", {
-
- get: function () {
- return this._effectAllowed;
- },
- set: function (value) {
- this._effectAllowed = value;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(DataTransfer.prototype, "types", {
-
- get: function () {
- return Object.keys(this._data);
- },
- enumerable: true,
- configurable: true
- });
-
- DataTransfer.prototype.clearData = function (type) {
- if (type != null) {
- delete this._data[type];
- }
- else {
- this._data = null;
- }
- };
-
- DataTransfer.prototype.getData = function (type) {
- return this._data[type] || '';
- };
-
- DataTransfer.prototype.setData = function (type, value) {
- this._data[type] = value;
- };
-
- DataTransfer.prototype.setDragImage = function (img, offsetX, offsetY) {
- var ddt = DragDropTouch._instance;
- ddt._imgCustom = img;
- ddt._imgOffset = { x: offsetX, y: offsetY };
- };
- return DataTransfer;
- }());
- DragDropTouch_1.DataTransfer = DataTransfer;
-
- var DragDropTouch = (function () {
-
- function DragDropTouch() {
- this._lastClick = 0;
-
- if (DragDropTouch._instance) {
- throw 'DragDropTouch instance already created.';
- }
-
-
- var supportsPassive = false;
- document.addEventListener('test', function () { }, {
- get passive() {
- supportsPassive = true;
- return true;
- }
- });
-
- if ('ontouchstart' in document) {
- var d = document, ts = this._touchstart.bind(this), tm = this._touchmove.bind(this), te = this._touchend.bind(this), opt = supportsPassive ? { passive: false, capture: false } : false;
- d.addEventListener('touchstart', ts, opt);
- d.addEventListener('touchmove', tm, opt);
- d.addEventListener('touchend', te);
- d.addEventListener('touchcancel', te);
- }
- }
-
- DragDropTouch.getInstance = function () {
- return DragDropTouch._instance;
- };
-
- DragDropTouch.prototype._touchstart = function (e) {
- var _this = this;
- if (this._shouldHandle(e)) {
-
- if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) {
- if (this._dispatchEvent(e, 'dblclick', e.target)) {
- e.preventDefault();
- this._reset();
- return;
- }
- }
-
- this._reset();
-
- var src = this._closestDraggable(e.target);
- if (src) {
-
- if (!this._dispatchEvent(e, 'mousemove', e.target) &&
- !this._dispatchEvent(e, 'mousedown', e.target)) {
-
- this._dragSource = src;
- this._ptDown = this._getPoint(e);
- this._lastTouch = e;
- e.preventDefault();
-
- setTimeout(function () {
- if (_this._dragSource == src && _this._img == null) {
- if (_this._dispatchEvent(e, 'contextmenu', src)) {
- _this._reset();
- }
- }
- }, DragDropTouch._CTXMENU);
- if (DragDropTouch._ISPRESSHOLDMODE) {
- this._pressHoldInterval = setTimeout(function () {
- _this._isDragEnabled = true;
- _this._touchmove(e);
- }, DragDropTouch._PRESSHOLDAWAIT);
- }
- }
- }
- }
- };
- DragDropTouch.prototype._touchmove = function (e) {
- if (this._shouldCancelPressHoldMove(e)) {
- this._reset();
- return;
- }
- if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) {
-
- var target = this._getTarget(e);
- if (this._dispatchEvent(e, 'mousemove', target)) {
- this._lastTouch = e;
- e.preventDefault();
- return;
- }
-
- if (this._dragSource && !this._img && this._shouldStartDragging(e)) {
- this._dispatchEvent(e, 'dragstart', this._dragSource);
- this._createImage(e);
- this._dispatchEvent(e, 'dragenter', target);
- }
-
- if (this._img) {
- this._lastTouch = e;
- e.preventDefault();
- if (target != this._lastTarget) {
- this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget);
- this._dispatchEvent(e, 'dragenter', target);
- this._lastTarget = target;
- }
- this._moveImage(e);
- this._isDropZone = this._dispatchEvent(e, 'dragover', target);
- }
- }
- };
- DragDropTouch.prototype._touchend = function (e) {
- if (this._shouldHandle(e)) {
-
- if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) {
- e.preventDefault();
- return;
- }
-
- if (!this._img) {
- this._dragSource = null;
- this._dispatchEvent(this._lastTouch, 'click', e.target);
- this._lastClick = Date.now();
- }
-
- this._destroyImage();
- if (this._dragSource) {
- if (e.type.indexOf('cancel') < 0 && this._isDropZone) {
- this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget);
- }
- this._dispatchEvent(this._lastTouch, 'dragend', this._dragSource);
- this._reset();
- }
- }
- };
-
-
- DragDropTouch.prototype._shouldHandle = function (e) {
- return e &&
- !e.defaultPrevented &&
- e.touches && e.touches.length < 2;
- };
-
- DragDropTouch.prototype._shouldHandleMove = function (e) {
- return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e);
- };
-
- DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) {
- return DragDropTouch._ISPRESSHOLDMODE &&
- this._isDragEnabled && e && e.touches && e.touches.length;
- };
-
- DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) {
- return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled &&
- this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN;
- };
-
- DragDropTouch.prototype._shouldStartDragging = function (e) {
- var delta = this._getDelta(e);
- return delta > DragDropTouch._THRESHOLD ||
- (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD);
- }
-
- DragDropTouch.prototype._reset = function () {
- this._destroyImage();
- this._dragSource = null;
- this._lastTouch = null;
- this._lastTarget = null;
- this._ptDown = null;
- this._isDragEnabled = false;
- this._isDropZone = false;
- this._dataTransfer = new DataTransfer();
- clearInterval(this._pressHoldInterval);
- };
-
- DragDropTouch.prototype._getPoint = function (e, page) {
- if (e && e.touches) {
- e = e.touches[0];
- }
- return { x: page ? e.pageX : e.clientX, y: page ? e.pageY : e.clientY };
- };
-
- DragDropTouch.prototype._getDelta = function (e) {
- if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) { return 0; }
- var p = this._getPoint(e);
- return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y);
- };
-
- DragDropTouch.prototype._getTarget = function (e) {
- var pt = this._getPoint(e), el = document.elementFromPoint(pt.x, pt.y);
- while (el && getComputedStyle(el).pointerEvents == 'none') {
- el = el.parentElement;
- }
- return el;
- };
-
- DragDropTouch.prototype._createImage = function (e) {
-
- if (this._img) {
- this._destroyImage();
- }
-
- var src = this._imgCustom || this._dragSource;
- this._img = src.cloneNode(true);
- this._copyStyle(src, this._img);
- this._img.style.top = this._img.style.left = '-9999px';
-
- if (!this._imgCustom) {
- var rc = src.getBoundingClientRect(), pt = this._getPoint(e);
- this._imgOffset = { x: pt.x - rc.left, y: pt.y - rc.top };
- this._img.style.opacity = DragDropTouch._OPACITY.toString();
- }
-
- this._moveImage(e);
- document.body.appendChild(this._img);
- };
-
- DragDropTouch.prototype._destroyImage = function () {
- if (this._img && this._img.parentElement) {
- this._img.parentElement.removeChild(this._img);
- }
- this._img = null;
- this._imgCustom = null;
- };
-
- DragDropTouch.prototype._moveImage = function (e) {
- var _this = this;
- requestAnimationFrame(function () {
- if (_this._img) {
- var pt = _this._getPoint(e, true), s = _this._img.style;
- s.position = 'absolute';
- s.pointerEvents = 'none';
- s.zIndex = '999999';
- s.left = Math.round(pt.x - _this._imgOffset.x) + 'px';
- s.top = Math.round(pt.y - _this._imgOffset.y) + 'px';
- }
- });
- };
-
- DragDropTouch.prototype._copyProps = function (dst, src, props) {
- for (var i = 0; i < props.length; i++) {
- var p = props[i];
- dst[p] = src[p];
- }
- };
- DragDropTouch.prototype._copyStyle = function (src, dst) {
-
- DragDropTouch._rmvAtts.forEach(function (att) {
- dst.removeAttribute(att);
- });
-
- if (src instanceof HTMLCanvasElement) {
- var cSrc = src, cDst = dst;
- cDst.width = cSrc.width;
- cDst.height = cSrc.height;
- cDst.getContext('2d').drawImage(cSrc, 0, 0);
- }
-
- var cs = getComputedStyle(src);
- for (var i = 0; i < cs.length; i++) {
- var key = cs[i];
- if (key.indexOf('transition') < 0) {
- dst.style[key] = cs[key];
- }
- }
- dst.style.pointerEvents = 'none';
-
- for (var i = 0; i < src.children.length; i++) {
- this._copyStyle(src.children[i], dst.children[i]);
- }
- };
- DragDropTouch.prototype._dispatchEvent = function (e, type, target) {
- if (e && target) {
- var evt = document.createEvent('Event'), t = e.touches ? e.touches[0] : e;
- evt.initEvent(type, true, true);
- evt.button = 0;
- evt.which = evt.buttons = 1;
- this._copyProps(evt, e, DragDropTouch._kbdProps);
- this._copyProps(evt, t, DragDropTouch._ptProps);
- evt.dataTransfer = this._dataTransfer;
- target.dispatchEvent(evt);
- return evt.defaultPrevented;
- }
- return false;
- };
-
- DragDropTouch.prototype._closestDraggable = function (e) {
- for (; e; e = e.parentElement) {
- if (e.hasAttribute('draggable') && e.draggable) {
- return e;
- }
- }
- return null;
- };
- return DragDropTouch;
- }());
- DragDropTouch._instance = new DragDropTouch();
-
- DragDropTouch._THRESHOLD = 5;
- DragDropTouch._OPACITY = 0.5;
- DragDropTouch._DBLCLICK = 500;
- DragDropTouch._CTXMENU = 900;
- DragDropTouch._ISPRESSHOLDMODE = false;
- DragDropTouch._PRESSHOLDAWAIT = 400;
- DragDropTouch._PRESSHOLDMARGIN = 25;
- DragDropTouch._PRESSHOLDTHRESHOLD = 0;
-
- DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(',');
-
-
- DragDropTouch._kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(',');
- DragDropTouch._ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY'.split(',');
- DragDropTouch_1.DragDropTouch = DragDropTouch;
- })(DragDropTouch || (DragDropTouch = {}));
|