vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+62
@@ -0,0 +1,62 @@
|
||||
function closeConditional() {
|
||||
return false;
|
||||
}
|
||||
function directive(e, el, binding) {
|
||||
// Args may not always be supplied
|
||||
binding.args = binding.args || {};
|
||||
// If no closeConditional was supplied assign a default
|
||||
var isActive = binding.args.closeConditional || closeConditional;
|
||||
// The include element callbacks below can be expensive
|
||||
// so we should avoid calling them when we're not active.
|
||||
// Explicitly check for false to allow fallback compatibility
|
||||
// with non-toggleable components
|
||||
if (!e || isActive(e) === false) return;
|
||||
// If click was triggered programmaticaly (domEl.click()) then
|
||||
// it shouldn't be treated as click-outside
|
||||
// Chrome/Firefox support isTrusted property
|
||||
// IE/Edge support pointerType property (empty if not triggered
|
||||
// by pointing device)
|
||||
if ('isTrusted' in e && !e.isTrusted || 'pointerType' in e && !e.pointerType) return;
|
||||
// Check if additional elements were passed to be included in check
|
||||
// (click must be outside all included elements, if any)
|
||||
var elements = (binding.args.include || function () {
|
||||
return [];
|
||||
})();
|
||||
// Add the root element for the component this directive was defined on
|
||||
elements.push(el);
|
||||
// Check if it's a click outside our elements, and then if our callback returns true.
|
||||
// Non-toggleable components should take action in their callback and return falsy.
|
||||
// Toggleable can return true if it wants to deactivate.
|
||||
// Note that, because we're in the capture phase, this callback will occur before
|
||||
// the bubbling click event on any outside elements.
|
||||
!elements.some(function (el) {
|
||||
return el.contains(e.target);
|
||||
}) && setTimeout(function () {
|
||||
isActive(e) && binding.value && binding.value(e);
|
||||
}, 0);
|
||||
}
|
||||
export default {
|
||||
// [data-app] may not be found
|
||||
// if using bind, inserted makes
|
||||
// sure that the root element is
|
||||
// available, iOS does not support
|
||||
// clicks on body
|
||||
inserted: function inserted(el, binding) {
|
||||
var onClick = function onClick(e) {
|
||||
return directive(e, el, binding);
|
||||
};
|
||||
// iOS does not recognize click events on document
|
||||
// or body, this is the entire purpose of the v-app
|
||||
// component and [data-app], stop removing this
|
||||
var app = document.querySelector('[data-app]') || document.body; // This is only for unit tests
|
||||
app.addEventListener('click', onClick, true);
|
||||
el._clickOutside = onClick;
|
||||
},
|
||||
unbind: function unbind(el) {
|
||||
if (!el._clickOutside) return;
|
||||
var app = document.querySelector('[data-app]') || document.body; // This is only for unit tests
|
||||
app && app.removeEventListener('click', el._clickOutside, true);
|
||||
delete el._clickOutside;
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=click-outside.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../src/directives/click-outside.ts"],"names":[],"mappings":"AAYA,SAAS,gBAAT,GAAyB;AACvB,WAAO,KAAP;AACD;AAED,SAAS,SAAT,CAAoB,CAApB,EAAqC,EAArC,EAAsD,OAAtD,EAAoF;AAClF;AACA,YAAQ,IAAR,GAAe,QAAQ,IAAR,IAAgB,EAA/B;AAEA;AACA,QAAM,WAAY,QAAQ,IAAR,CAAa,gBAAb,IAAiC,gBAAnD;AAEA;AACA;AACA;AACA;AACA,QAAI,CAAC,CAAD,IAAM,SAAS,CAAT,MAAgB,KAA1B,EAAiC;AAEjC;AACA;AACA;AACA;AACA;AACA,QAAK,eAAe,CAAf,IAAoB,CAAC,EAAE,SAAxB,IACD,iBAAiB,CAAjB,IAAsB,CAAC,EAAE,WAD5B,EAEE;AAEF;AACA;AACA,QAAM,WAAW,CAAC,QAAQ,IAAR,CAAa,OAAb,IAAyB;AAAA,eAAM,EAAN;AAAA,KAA1B,GAAjB;AACA;AACA,aAAS,IAAT,CAAc,EAAd;AAEA;AACA;AACA;AACA;AACA;AACA,KAAC,SAAS,IAAT,CAAc;AAAA,eAAM,GAAG,QAAH,CAAY,EAAE,MAAd,CAAN;AAAA,KAAd,CAAD,IAAuD,WAAW,YAAK;AACrE,iBAAS,CAAT,KAAe,QAAQ,KAAvB,IAAgC,QAAQ,KAAR,CAAc,CAAd,CAAhC;AACD,KAFsD,EAEpD,CAFoD,CAAvD;AAGD;AAED,eAAe;AACb;AACA;AACA;AACA;AACA;AACA,YANa,oBAMH,EANG,EAMc,OANd,EAM4C;AACvD,YAAM,UAAU,SAAV,OAAU,CAAC,CAAD;AAAA,mBAAc,UAAU,CAAV,EAA6B,EAA7B,EAAiC,OAAjC,CAAd;AAAA,SAAhB;AACA;AACA;AACA;AACA,YAAM,MAAM,SAAS,aAAT,CAAuB,YAAvB,KACV,SAAS,IADX,CALuD,CAMvC;AAChB,YAAI,gBAAJ,CAAqB,OAArB,EAA8B,OAA9B,EAAuC,IAAvC;AACA,WAAG,aAAH,GAAmB,OAAnB;AACD,KAfY;AAiBb,UAjBa,kBAiBL,EAjBK,EAiBU;AACrB,YAAI,CAAC,GAAG,aAAR,EAAuB;AAEvB,YAAM,MAAM,SAAS,aAAT,CAAuB,YAAvB,KACV,SAAS,IADX,CAHqB,CAIL;AAChB,eAAO,IAAI,mBAAJ,CAAwB,OAAxB,EAAiC,GAAG,aAApC,EAAmD,IAAnD,CAAP;AACA,eAAO,GAAG,aAAV;AACD;AAxBY,CAAf","sourcesContent":["import { VNodeDirective } from 'vue/types/vnode'\n\ninterface ClickOutsideBindingArgs {\n closeConditional?: (e: Event) => boolean\n include?: () => HTMLElement[]\n}\n\ninterface ClickOutsideDirective extends VNodeDirective {\n value?: (e: Event) => void\n args?: ClickOutsideBindingArgs\n}\n\nfunction closeConditional () {\n return false\n}\n\nfunction directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective): void {\n // Args may not always be supplied\n binding.args = binding.args || {}\n\n // If no closeConditional was supplied assign a default\n const isActive = (binding.args.closeConditional || closeConditional)\n\n // The include element callbacks below can be expensive\n // so we should avoid calling them when we're not active.\n // Explicitly check for false to allow fallback compatibility\n // with non-toggleable components\n if (!e || isActive(e) === false) return\n\n // If click was triggered programmaticaly (domEl.click()) then\n // it shouldn't be treated as click-outside\n // Chrome/Firefox support isTrusted property\n // IE/Edge support pointerType property (empty if not triggered\n // by pointing device)\n if (('isTrusted' in e && !e.isTrusted) ||\n ('pointerType' in e && !e.pointerType)\n ) return\n\n // Check if additional elements were passed to be included in check\n // (click must be outside all included elements, if any)\n const elements = (binding.args.include || (() => []))()\n // Add the root element for the component this directive was defined on\n elements.push(el)\n\n // Check if it's a click outside our elements, and then if our callback returns true.\n // Non-toggleable components should take action in their callback and return falsy.\n // Toggleable can return true if it wants to deactivate.\n // Note that, because we're in the capture phase, this callback will occur before\n // the bubbling click event on any outside elements.\n !elements.some(el => el.contains(e.target as Node)) && setTimeout(() => {\n isActive(e) && binding.value && binding.value(e)\n }, 0)\n}\n\nexport default {\n // [data-app] may not be found\n // if using bind, inserted makes\n // sure that the root element is\n // available, iOS does not support\n // clicks on body\n inserted (el: HTMLElement, binding: ClickOutsideDirective) {\n const onClick = (e: Event) => directive(e as PointerEvent, el, binding)\n // iOS does not recognize click events on document\n // or body, this is the entire purpose of the v-app\n // component and [data-app], stop removing this\n const app = document.querySelector('[data-app]') ||\n document.body // This is only for unit tests\n app.addEventListener('click', onClick, true)\n el._clickOutside = onClick\n },\n\n unbind (el: HTMLElement) {\n if (!el._clickOutside) return\n\n const app = document.querySelector('[data-app]') ||\n document.body // This is only for unit tests\n app && app.removeEventListener('click', el._clickOutside, true)\n delete el._clickOutside\n }\n}\n"],"sourceRoot":""}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import ClickOutside from './click-outside';
|
||||
import Resize from './resize';
|
||||
import Ripple from './ripple';
|
||||
import Scroll from './scroll';
|
||||
import Touch from './touch';
|
||||
export { ClickOutside, Ripple, Resize, Scroll, Touch };
|
||||
export default {
|
||||
ClickOutside: ClickOutside,
|
||||
Ripple: Ripple,
|
||||
Resize: Resize,
|
||||
Scroll: Scroll,
|
||||
Touch: Touch
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAP,MAAyB,iBAAzB;AACA,OAAO,MAAP,MAAmB,UAAnB;AACA,OAAO,MAAP,MAAmB,UAAnB;AACA,OAAO,MAAP,MAAmB,UAAnB;AACA,OAAO,KAAP,MAAkB,SAAlB;AAEA,SACE,YADF,EAEE,MAFF,EAGE,MAHF,EAIE,MAJF,EAKE,KALF;AAQA,eAAe;AACb,8BADa;AAEb,kBAFa;AAGb,kBAHa;AAIb,kBAJa;AAKb;AALa,CAAf","sourcesContent":["import ClickOutside from './click-outside'\nimport Resize from './resize'\nimport Ripple from './ripple'\nimport Scroll from './scroll'\nimport Touch from './touch'\n\nexport {\n ClickOutside,\n Ripple,\n Resize,\n Scroll,\n Touch\n}\n\nexport default {\n ClickOutside,\n Ripple,\n Resize,\n Scroll,\n Touch\n}\n"],"sourceRoot":""}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
function inserted(el, binding) {
|
||||
var callback = binding.value;
|
||||
var options = binding.options || { passive: true };
|
||||
window.addEventListener('resize', callback, options);
|
||||
el._onResize = {
|
||||
callback: callback,
|
||||
options: options
|
||||
};
|
||||
if (!binding.modifiers || !binding.modifiers.quiet) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
function unbind(el) {
|
||||
if (!el._onResize) return;
|
||||
var _el$_onResize = el._onResize,
|
||||
callback = _el$_onResize.callback,
|
||||
options = _el$_onResize.options;
|
||||
|
||||
window.removeEventListener('resize', callback, options);
|
||||
delete el._onResize;
|
||||
}
|
||||
export default {
|
||||
inserted: inserted,
|
||||
unbind: unbind
|
||||
};
|
||||
//# sourceMappingURL=resize.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../src/directives/resize.ts"],"names":[],"mappings":"AAOA,SAAS,QAAT,CAAmB,EAAnB,EAAoC,OAApC,EAAiE;AAC/D,QAAM,WAAW,QAAQ,KAAzB;AACA,QAAM,UAAU,QAAQ,OAAR,IAAmB,EAAE,SAAS,IAAX,EAAnC;AAEA,WAAO,gBAAP,CAAwB,QAAxB,EAAkC,QAAlC,EAA4C,OAA5C;AACA,OAAG,SAAH,GAAe;AACb,0BADa;AAEb;AAFa,KAAf;AAKA,QAAI,CAAC,QAAQ,SAAT,IAAsB,CAAC,QAAQ,SAAR,CAAkB,KAA7C,EAAoD;AAClD;AACD;AACF;AAED,SAAS,MAAT,CAAiB,EAAjB,EAAgC;AAC9B,QAAI,CAAC,GAAG,SAAR,EAAmB;AADW,wBAGA,GAAG,SAHH;AAAA,QAGtB,QAHsB,iBAGtB,QAHsB;AAAA,QAGZ,OAHY,iBAGZ,OAHY;;AAI9B,WAAO,mBAAP,CAA2B,QAA3B,EAAqC,QAArC,EAA+C,OAA/C;AACA,WAAO,GAAG,SAAV;AACD;AAED,eAAe;AACb,sBADa;AAEb;AAFa,CAAf","sourcesContent":["import { VNodeDirective } from 'vue/types/vnode'\n\ninterface ResizeVNodeDirective extends VNodeDirective {\n value?: () => void\n options?: boolean | AddEventListenerOptions\n}\n\nfunction inserted (el: HTMLElement, binding: ResizeVNodeDirective) {\n const callback = binding.value!\n const options = binding.options || { passive: true }\n\n window.addEventListener('resize', callback, options)\n el._onResize = {\n callback,\n options\n }\n\n if (!binding.modifiers || !binding.modifiers.quiet) {\n callback()\n }\n}\n\nfunction unbind (el: HTMLElement) {\n if (!el._onResize) return\n\n const { callback, options } = el._onResize\n window.removeEventListener('resize', callback, options)\n delete el._onResize\n}\n\nexport default {\n inserted,\n unbind\n}\n"],"sourceRoot":""}
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
import { consoleWarn } from '../util/console';
|
||||
function transform(el, value) {
|
||||
el.style['transform'] = value;
|
||||
el.style['webkitTransform'] = value;
|
||||
}
|
||||
function opacity(el, value) {
|
||||
el.style['opacity'] = value.toString();
|
||||
}
|
||||
function isTouchEvent(e) {
|
||||
return e.constructor.name === 'TouchEvent';
|
||||
}
|
||||
var calculate = function calculate(e, el) {
|
||||
var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
|
||||
var offset = el.getBoundingClientRect();
|
||||
var target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e;
|
||||
var localX = target.clientX - offset.left;
|
||||
var localY = target.clientY - offset.top;
|
||||
var radius = 0;
|
||||
var scale = 0.3;
|
||||
if (el._ripple && el._ripple.circle) {
|
||||
scale = 0.15;
|
||||
radius = el.clientWidth / 2;
|
||||
radius = value.center ? radius : radius + Math.sqrt(Math.pow(localX - radius, 2) + Math.pow(localY - radius, 2)) / 4;
|
||||
} else {
|
||||
radius = Math.sqrt(Math.pow(el.clientWidth, 2) + Math.pow(el.clientHeight, 2)) / 2;
|
||||
}
|
||||
var centerX = (el.clientWidth - radius * 2) / 2 + 'px';
|
||||
var centerY = (el.clientHeight - radius * 2) / 2 + 'px';
|
||||
var x = value.center ? centerX : localX - radius + 'px';
|
||||
var y = value.center ? centerY : localY - radius + 'px';
|
||||
return { radius: radius, scale: scale, x: x, y: y, centerX: centerX, centerY: centerY };
|
||||
};
|
||||
var ripple = {
|
||||
/* eslint-disable max-statements */
|
||||
show: function show(e, el) {
|
||||
var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
|
||||
if (!el._ripple || !el._ripple.enabled) {
|
||||
return;
|
||||
}
|
||||
var container = document.createElement('span');
|
||||
var animation = document.createElement('span');
|
||||
container.appendChild(animation);
|
||||
container.className = 'v-ripple__container';
|
||||
if (value.class) {
|
||||
container.className += ' ' + value.class;
|
||||
}
|
||||
|
||||
var _calculate = calculate(e, el, value),
|
||||
radius = _calculate.radius,
|
||||
scale = _calculate.scale,
|
||||
x = _calculate.x,
|
||||
y = _calculate.y,
|
||||
centerX = _calculate.centerX,
|
||||
centerY = _calculate.centerY;
|
||||
|
||||
var size = radius * 2 + 'px';
|
||||
animation.className = 'v-ripple__animation';
|
||||
animation.style.width = size;
|
||||
animation.style.height = size;
|
||||
el.appendChild(container);
|
||||
var computed = window.getComputedStyle(el);
|
||||
if (computed && computed.position === 'static') {
|
||||
el.style.position = 'relative';
|
||||
el.dataset.previousPosition = 'static';
|
||||
}
|
||||
animation.classList.add('v-ripple__animation--enter');
|
||||
animation.classList.add('v-ripple__animation--visible');
|
||||
transform(animation, 'translate(' + x + ', ' + y + ') scale3d(' + scale + ',' + scale + ',' + scale + ')');
|
||||
opacity(animation, 0);
|
||||
animation.dataset.activated = String(performance.now());
|
||||
setTimeout(function () {
|
||||
animation.classList.remove('v-ripple__animation--enter');
|
||||
animation.classList.add('v-ripple__animation--in');
|
||||
transform(animation, 'translate(' + centerX + ', ' + centerY + ') scale3d(1,1,1)');
|
||||
opacity(animation, 0.25);
|
||||
}, 0);
|
||||
},
|
||||
hide: function hide(el) {
|
||||
if (!el || !el._ripple || !el._ripple.enabled) return;
|
||||
var ripples = el.getElementsByClassName('v-ripple__animation');
|
||||
if (ripples.length === 0) return;
|
||||
var animation = ripples[ripples.length - 1];
|
||||
if (animation.dataset.isHiding) return;else animation.dataset.isHiding = 'true';
|
||||
var diff = performance.now() - Number(animation.dataset.activated);
|
||||
var delay = Math.max(250 - diff, 0);
|
||||
setTimeout(function () {
|
||||
animation.classList.remove('v-ripple__animation--in');
|
||||
animation.classList.add('v-ripple__animation--out');
|
||||
opacity(animation, 0);
|
||||
setTimeout(function () {
|
||||
var ripples = el.getElementsByClassName('v-ripple__animation');
|
||||
if (ripples.length === 1 && el.dataset.previousPosition) {
|
||||
el.style.position = el.dataset.previousPosition;
|
||||
delete el.dataset.previousPosition;
|
||||
}
|
||||
animation.parentNode && el.removeChild(animation.parentNode);
|
||||
}, 300);
|
||||
}, delay);
|
||||
}
|
||||
};
|
||||
function isRippleEnabled(value) {
|
||||
return typeof value === 'undefined' || !!value;
|
||||
}
|
||||
function rippleShow(e) {
|
||||
var value = {};
|
||||
var element = e.currentTarget;
|
||||
if (!element || !element._ripple || element._ripple.touched) return;
|
||||
if (isTouchEvent(e)) {
|
||||
element._ripple.touched = true;
|
||||
}
|
||||
value.center = element._ripple.centered;
|
||||
if (element._ripple.class) {
|
||||
value.class = element._ripple.class;
|
||||
}
|
||||
ripple.show(e, element, value);
|
||||
}
|
||||
function rippleHide(e) {
|
||||
var element = e.currentTarget;
|
||||
if (!element) return;
|
||||
window.setTimeout(function () {
|
||||
if (element._ripple) {
|
||||
element._ripple.touched = false;
|
||||
}
|
||||
});
|
||||
ripple.hide(element);
|
||||
}
|
||||
function updateRipple(el, binding, wasEnabled) {
|
||||
var enabled = isRippleEnabled(binding.value);
|
||||
if (!enabled) {
|
||||
ripple.hide(el);
|
||||
}
|
||||
el._ripple = el._ripple || {};
|
||||
el._ripple.enabled = enabled;
|
||||
var value = binding.value || {};
|
||||
if (value.center) {
|
||||
el._ripple.centered = true;
|
||||
}
|
||||
if (value.class) {
|
||||
el._ripple.class = binding.value.class;
|
||||
}
|
||||
if (value.circle) {
|
||||
el._ripple.circle = value.circle;
|
||||
}
|
||||
if (enabled && !wasEnabled) {
|
||||
el.addEventListener('touchstart', rippleShow, { passive: true });
|
||||
el.addEventListener('touchend', rippleHide, { passive: true });
|
||||
el.addEventListener('touchcancel', rippleHide);
|
||||
el.addEventListener('mousedown', rippleShow);
|
||||
el.addEventListener('mouseup', rippleHide);
|
||||
el.addEventListener('mouseleave', rippleHide);
|
||||
// Anchor tags can be dragged, causes other hides to fail - #1537
|
||||
el.addEventListener('dragstart', rippleHide, { passive: true });
|
||||
} else if (!enabled && wasEnabled) {
|
||||
removeListeners(el);
|
||||
}
|
||||
}
|
||||
function removeListeners(el) {
|
||||
el.removeEventListener('mousedown', rippleShow);
|
||||
el.removeEventListener('touchstart', rippleHide);
|
||||
el.removeEventListener('touchend', rippleHide);
|
||||
el.removeEventListener('touchcancel', rippleHide);
|
||||
el.removeEventListener('mouseup', rippleHide);
|
||||
el.removeEventListener('mouseleave', rippleHide);
|
||||
el.removeEventListener('dragstart', rippleHide);
|
||||
}
|
||||
function directive(el, binding, node) {
|
||||
updateRipple(el, binding, false);
|
||||
// warn if an inline element is used, waiting for el to be in the DOM first
|
||||
node.context && node.context.$nextTick(function () {
|
||||
var computed = window.getComputedStyle(el);
|
||||
if (computed && computed.display === 'inline') {
|
||||
var context = node.fnOptions ? [node.fnOptions, node.context] : [node.componentInstance];
|
||||
consoleWarn.apply(undefined, ['v-ripple can only be used on block-level elements'].concat(context));
|
||||
}
|
||||
});
|
||||
}
|
||||
function unbind(el) {
|
||||
delete el._ripple;
|
||||
removeListeners(el);
|
||||
}
|
||||
function update(el, binding) {
|
||||
if (binding.value === binding.oldValue) {
|
||||
return;
|
||||
}
|
||||
var wasEnabled = isRippleEnabled(binding.oldValue);
|
||||
updateRipple(el, binding, wasEnabled);
|
||||
}
|
||||
export default {
|
||||
bind: directive,
|
||||
unbind: unbind,
|
||||
update: update
|
||||
};
|
||||
//# sourceMappingURL=ripple.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+27
@@ -0,0 +1,27 @@
|
||||
function inserted(el, binding) {
|
||||
var callback = binding.value;
|
||||
var options = binding.options || { passive: true };
|
||||
var target = binding.arg ? document.querySelector(binding.arg) : window;
|
||||
if (!target) return;
|
||||
target.addEventListener('scroll', callback, options);
|
||||
el._onScroll = {
|
||||
callback: callback,
|
||||
options: options,
|
||||
target: target
|
||||
};
|
||||
}
|
||||
function unbind(el) {
|
||||
if (!el._onScroll) return;
|
||||
var _el$_onScroll = el._onScroll,
|
||||
callback = _el$_onScroll.callback,
|
||||
options = _el$_onScroll.options,
|
||||
target = _el$_onScroll.target;
|
||||
|
||||
target.removeEventListener('scroll', callback, options);
|
||||
delete el._onScroll;
|
||||
}
|
||||
export default {
|
||||
inserted: inserted,
|
||||
unbind: unbind
|
||||
};
|
||||
//# sourceMappingURL=scroll.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../src/directives/scroll.ts"],"names":[],"mappings":"AASA,SAAS,QAAT,CAAmB,EAAnB,EAAoC,OAApC,EAAiE;AAC/D,QAAM,WAAW,QAAQ,KAAzB;AACA,QAAM,UAAU,QAAQ,OAAR,IAAmB,EAAE,SAAS,IAAX,EAAnC;AACA,QAAM,SAAS,QAAQ,GAAR,GAAc,SAAS,aAAT,CAAuB,QAAQ,GAA/B,CAAd,GAAoD,MAAnE;AACA,QAAI,CAAC,MAAL,EAAa;AAEb,WAAO,gBAAP,CAAwB,QAAxB,EAAkC,QAAlC,EAA4C,OAA5C;AAEA,OAAG,SAAH,GAAe;AACb,0BADa;AAEb,wBAFa;AAGb;AAHa,KAAf;AAKD;AAED,SAAS,MAAT,CAAiB,EAAjB,EAAgC;AAC9B,QAAI,CAAC,GAAG,SAAR,EAAmB;AADW,wBAGQ,GAAG,SAHX;AAAA,QAGtB,QAHsB,iBAGtB,QAHsB;AAAA,QAGZ,OAHY,iBAGZ,OAHY;AAAA,QAGH,MAHG,iBAGH,MAHG;;AAK9B,WAAO,mBAAP,CAA2B,QAA3B,EAAqC,QAArC,EAA+C,OAA/C;AACA,WAAO,GAAG,SAAV;AACD;AAED,eAAe;AACb,sBADa;AAEb;AAFa,CAAf","sourcesContent":["import { VNodeDirective } from 'vue/types/vnode'\nimport { DirectiveOptions } from 'vue'\n\ninterface ScrollVNodeDirective extends VNodeDirective {\n arg: string\n value: EventListenerOrEventListenerObject\n options?: boolean | AddEventListenerOptions\n}\n\nfunction inserted (el: HTMLElement, binding: ScrollVNodeDirective) {\n const callback = binding.value\n const options = binding.options || { passive: true }\n const target = binding.arg ? document.querySelector(binding.arg) : window\n if (!target) return\n\n target.addEventListener('scroll', callback, options)\n\n el._onScroll = {\n callback,\n options,\n target\n }\n}\n\nfunction unbind (el: HTMLElement) {\n if (!el._onScroll) return\n\n const { callback, options, target } = el._onScroll\n\n target.removeEventListener('scroll', callback, options)\n delete el._onScroll\n}\n\nexport default {\n inserted,\n unbind\n} as DirectiveOptions\n"],"sourceRoot":""}
|
||||
+96
@@ -0,0 +1,96 @@
|
||||
import { keys } from '../util/helpers';
|
||||
var handleGesture = function handleGesture(wrapper) {
|
||||
var touchstartX = wrapper.touchstartX,
|
||||
touchendX = wrapper.touchendX,
|
||||
touchstartY = wrapper.touchstartY,
|
||||
touchendY = wrapper.touchendY;
|
||||
|
||||
var dirRatio = 0.5;
|
||||
var minDistance = 16;
|
||||
wrapper.offsetX = touchendX - touchstartX;
|
||||
wrapper.offsetY = touchendY - touchstartY;
|
||||
if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
|
||||
wrapper.left && touchendX < touchstartX - minDistance && wrapper.left(wrapper);
|
||||
wrapper.right && touchendX > touchstartX + minDistance && wrapper.right(wrapper);
|
||||
}
|
||||
if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
|
||||
wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper);
|
||||
wrapper.down && touchendY > touchstartY + minDistance && wrapper.down(wrapper);
|
||||
}
|
||||
};
|
||||
function _touchstart(event, wrapper) {
|
||||
var touch = event.changedTouches[0];
|
||||
wrapper.touchstartX = touch.clientX;
|
||||
wrapper.touchstartY = touch.clientY;
|
||||
wrapper.start && wrapper.start(Object.assign(event, wrapper));
|
||||
}
|
||||
function _touchend(event, wrapper) {
|
||||
var touch = event.changedTouches[0];
|
||||
wrapper.touchendX = touch.clientX;
|
||||
wrapper.touchendY = touch.clientY;
|
||||
wrapper.end && wrapper.end(Object.assign(event, wrapper));
|
||||
handleGesture(wrapper);
|
||||
}
|
||||
function _touchmove(event, wrapper) {
|
||||
var touch = event.changedTouches[0];
|
||||
wrapper.touchmoveX = touch.clientX;
|
||||
wrapper.touchmoveY = touch.clientY;
|
||||
wrapper.move && wrapper.move(Object.assign(event, wrapper));
|
||||
}
|
||||
function createHandlers(value) {
|
||||
var wrapper = {
|
||||
touchstartX: 0,
|
||||
touchstartY: 0,
|
||||
touchendX: 0,
|
||||
touchendY: 0,
|
||||
touchmoveX: 0,
|
||||
touchmoveY: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
left: value.left,
|
||||
right: value.right,
|
||||
up: value.up,
|
||||
down: value.down,
|
||||
start: value.start,
|
||||
move: value.move,
|
||||
end: value.end
|
||||
};
|
||||
return {
|
||||
touchstart: function touchstart(e) {
|
||||
return _touchstart(e, wrapper);
|
||||
},
|
||||
touchend: function touchend(e) {
|
||||
return _touchend(e, wrapper);
|
||||
},
|
||||
touchmove: function touchmove(e) {
|
||||
return _touchmove(e, wrapper);
|
||||
}
|
||||
};
|
||||
}
|
||||
function inserted(el, binding, vnode) {
|
||||
var value = binding.value;
|
||||
var target = value.parent ? el.parentElement : el;
|
||||
var options = value.options || { passive: true };
|
||||
// Needed to pass unit tests
|
||||
if (!target) return;
|
||||
var handlers = createHandlers(binding.value);
|
||||
target._touchHandlers = Object(target._touchHandlers);
|
||||
target._touchHandlers[vnode.context._uid] = handlers;
|
||||
keys(handlers).forEach(function (eventName) {
|
||||
target.addEventListener(eventName, handlers[eventName], options);
|
||||
});
|
||||
}
|
||||
function unbind(el, binding, vnode) {
|
||||
var target = binding.value.parent ? el.parentElement : el;
|
||||
if (!target || !target._touchHandlers) return;
|
||||
var handlers = target._touchHandlers[vnode.context._uid];
|
||||
keys(handlers).forEach(function (eventName) {
|
||||
target.removeEventListener(eventName, handlers[eventName]);
|
||||
});
|
||||
delete target._touchHandlers[vnode.context._uid];
|
||||
}
|
||||
export default {
|
||||
inserted: inserted,
|
||||
unbind: unbind
|
||||
};
|
||||
//# sourceMappingURL=touch.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user