This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/vuetify/es5/components/VSlideGroup/VSlideGroup.js

342 lines
12 KiB
JavaScript
Raw Normal View History

2019-08-11 18:48:02 +00:00
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.BaseSlideGroup = void 0;
require("../../../src/components/VSlideGroup/VSlideGroup.sass");
var _VIcon = _interopRequireDefault(require("../VIcon"));
var _transitions = require("../transitions");
var _VItemGroup = require("../VItemGroup/VItemGroup");
var _resize = _interopRequireDefault(require("../../directives/resize"));
var _touch = _interopRequireDefault(require("../../directives/touch"));
var _mixins = _interopRequireDefault(require("../../util/mixins"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var BaseSlideGroup = (0, _mixins.default)(_VItemGroup.BaseItemGroup
/* @vue/component */
).extend({
name: 'base-slide-group',
directives: {
Resize: _resize.default,
Touch: _touch.default
},
props: {
activeClass: {
type: String,
default: 'v-slide-item--active'
},
centerActive: Boolean,
nextIcon: {
type: String,
default: '$vuetify.icons.next'
},
mobileBreakPoint: {
type: [Number, String],
default: 1264,
validator: function validator(v) {
return !isNaN(parseInt(v));
}
},
prevIcon: {
type: String,
default: '$vuetify.icons.prev'
},
showArrows: Boolean
},
data: function data() {
return {
isOverflowing: false,
resizeTimeout: 0,
startX: 0,
scrollOffset: 0,
widths: {
content: 0,
wrapper: 0
}
};
},
computed: {
__cachedNext: function __cachedNext() {
return this.genTransition('next');
},
__cachedPrev: function __cachedPrev() {
return this.genTransition('prev');
},
classes: function classes() {
return _objectSpread({}, _VItemGroup.BaseItemGroup.options.computed.classes.call(this), {
'v-slide-group': true
});
},
hasAffixes: function hasAffixes() {
return (this.showArrows || !this.isMobile) && this.isOverflowing;
},
hasNext: function hasNext() {
if (!this.hasAffixes) return false;
var _this$widths = this.widths,
content = _this$widths.content,
wrapper = _this$widths.wrapper; // Check one scroll ahead to know the width of right-most item
return content > Math.abs(this.scrollOffset) + wrapper;
},
hasPrev: function hasPrev() {
return this.hasAffixes && this.scrollOffset !== 0;
},
isMobile: function isMobile() {
return this.$vuetify.breakpoint.width < this.mobileBreakPoint;
}
},
watch: {
internalValue: 'setWidths',
// When overflow changes, the arrows alter
// the widths of the content and wrapper
// and need to be recalculated
isOverflowing: 'setWidths',
scrollOffset: function scrollOffset(val) {
this.$refs.content.style.transform = "translateX(".concat(-val, "px)");
}
},
methods: {
genNext: function genNext() {
var _this = this;
if (!this.hasAffixes) return null;
var slot = this.$scopedSlots.next ? this.$scopedSlots.next({}) : this.$slots.next || this.__cachedNext;
return this.$createElement('div', {
staticClass: 'v-slide-group__next',
class: {
'v-slide-group__next--disabled': !this.hasNext
},
on: {
click: function click() {
return _this.onAffixClick('next');
}
},
key: 'next'
}, [slot]);
},
genContent: function genContent() {
return this.$createElement('div', {
staticClass: 'v-slide-group__content',
ref: 'content'
}, this.$slots.default);
},
genData: function genData() {
return {
class: this.classes,
directives: [{
name: 'resize',
value: this.onResize
}]
};
},
genIcon: function genIcon(location) {
var icon = location;
if (this.$vuetify.rtl && location === 'prev') {
icon = 'next';
} else if (this.$vuetify.rtl && location === 'next') {
icon = 'prev';
}
var upperLocation = "".concat(location[0].toUpperCase()).concat(location.slice(1));
var hasAffix = this["has".concat(upperLocation)];
if (!this.showArrows && !hasAffix) return null;
return this.$createElement(_VIcon.default, {
props: {
disabled: !hasAffix
}
}, this["".concat(icon, "Icon")]);
},
genPrev: function genPrev() {
var _this2 = this;
if (!this.hasAffixes) return null;
var slot = this.$scopedSlots.prev ? this.$scopedSlots.prev({}) : this.$slots.prev || this.__cachedPrev;
return this.$createElement('div', {
staticClass: 'v-slide-group__prev',
class: {
'v-slide-group__prev--disabled': !this.hasPrev
},
on: {
click: function click() {
return _this2.onAffixClick('prev');
}
},
key: 'prev'
}, [slot]);
},
genTransition: function genTransition(location) {
return this.$createElement(_transitions.VFadeTransition, [this.genIcon(location)]);
},
genWrapper: function genWrapper() {
var _this3 = this;
return this.$createElement('div', {
staticClass: 'v-slide-group__wrapper',
directives: [{
name: 'touch',
value: {
start: function start(e) {
return _this3.overflowCheck(e, _this3.onTouchStart);
},
move: function move(e) {
return _this3.overflowCheck(e, _this3.onTouchMove);
},
end: function end(e) {
return _this3.overflowCheck(e, _this3.onTouchEnd);
}
}
}],
ref: 'wrapper'
}, [this.genContent()]);
},
calculateNewOffset: function calculateNewOffset(direction, widths, rtl, currentScrollOffset) {
var sign = rtl ? -1 : 1;
var newAbosluteOffset = sign * currentScrollOffset + (direction === 'prev' ? -1 : 1) * widths.wrapper;
return sign * Math.max(Math.min(newAbosluteOffset, widths.content - widths.wrapper), 0);
},
onAffixClick: function onAffixClick(location) {
this.$emit("click:".concat(location));
this.scrollTo(location);
},
onResize: function onResize() {
/* istanbul ignore next */
if (this._isDestroyed) return;
this.setWidths();
},
onTouchStart: function onTouchStart(e) {
var content = this.$refs.content;
this.startX = this.scrollOffset + e.touchstartX;
content.style.setProperty('transition', 'none');
content.style.setProperty('willChange', 'transform');
},
onTouchMove: function onTouchMove(e) {
this.scrollOffset = this.startX - e.touchmoveX;
},
onTouchEnd: function onTouchEnd() {
var _this$$refs = this.$refs,
content = _this$$refs.content,
wrapper = _this$$refs.wrapper;
var maxScrollOffset = content.clientWidth - wrapper.clientWidth;
content.style.setProperty('transition', null);
content.style.setProperty('willChange', null);
/* istanbul ignore else */
if (this.scrollOffset < 0 || !this.isOverflowing) {
this.scrollOffset = 0;
} else if (this.scrollOffset >= maxScrollOffset) {
this.scrollOffset = maxScrollOffset;
}
},
overflowCheck: function overflowCheck(e, fn) {
e.stopPropagation();
this.isOverflowing && fn(e);
},
scrollIntoView
/* istanbul ignore next */
: function scrollIntoView() {
if (!this.selectedItem) {
return;
}
if (this.centerActive) {
this.scrollOffset = this.calculateCenteredOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl);
} else if (this.isOverflowing) {
this.scrollOffset = this.calculateUpdatedOffset(this.selectedItem.$el, this.widths, this.$vuetify.rtl, this.scrollOffset);
} else {
this.scrollOffset = 0;
}
},
calculateUpdatedOffset: function calculateUpdatedOffset(selectedElement, widths, rtl, currentScrollOffset) {
var clientWidth = selectedElement.clientWidth;
var offsetLeft = rtl ? widths.content - selectedElement.offsetLeft - clientWidth : selectedElement.offsetLeft;
if (rtl) {
currentScrollOffset = -currentScrollOffset;
}
var totalWidth = widths.wrapper + currentScrollOffset;
var itemOffset = clientWidth + offsetLeft;
var additionalOffset = clientWidth * 0.3;
if (offsetLeft < currentScrollOffset) {
currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0);
} else if (totalWidth < itemOffset) {
currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper);
}
return rtl ? -currentScrollOffset : currentScrollOffset;
},
calculateCenteredOffset: function calculateCenteredOffset(selectedElement, widths, rtl) {
var offsetLeft = selectedElement.offsetLeft,
clientWidth = selectedElement.clientWidth;
if (rtl) {
var offsetCentered = widths.content - offsetLeft - clientWidth / 2 - widths.wrapper / 2;
return -Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered));
} else {
var _offsetCentered = offsetLeft + clientWidth / 2 - widths.wrapper / 2;
return Math.min(widths.content - widths.wrapper, Math.max(0, _offsetCentered));
}
},
scrollTo
/* istanbul ignore next */
: function scrollTo(location) {
this.scrollOffset = this.calculateNewOffset(location, {
// Force reflow
content: this.$refs.content ? this.$refs.content.clientWidth : 0,
wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
}, this.$vuetify.rtl, this.scrollOffset);
},
setWidths
/* istanbul ignore next */
: function setWidths() {
var _this4 = this;
window.requestAnimationFrame(function () {
var _this4$$refs = _this4.$refs,
content = _this4$$refs.content,
wrapper = _this4$$refs.wrapper;
_this4.widths = {
content: content ? content.clientWidth : 0,
wrapper: wrapper ? wrapper.clientWidth : 0
};
_this4.isOverflowing = _this4.widths.wrapper < _this4.widths.content;
_this4.scrollIntoView();
});
}
},
render: function render(h) {
return h('div', this.genData(), [this.genPrev(), this.genWrapper(), this.genNext()]);
}
});
exports.BaseSlideGroup = BaseSlideGroup;
var _default = BaseSlideGroup.extend({
name: 'v-slide-group',
provide: function provide() {
return {
slideGroup: this
};
}
});
exports.default = _default;
//# sourceMappingURL=VSlideGroup.js.map