123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _style = require("../utils/dom/style");
- var _event = require("../utils/dom/event");
- var _scroll = require("../utils/dom/scroll");
- var _touch = require("../mixins/touch");
- var _relation = require("../mixins/relation");
- var _bindEvent = require("../mixins/bind-event");
- // Utils
- // Mixins
- function genAlphabet() {
- var indexList = [];
- var charCodeOfA = 'A'.charCodeAt(0);
- for (var i = 0; i < 26; i++) {
- indexList.push(String.fromCharCode(charCodeOfA + i));
- }
- return indexList;
- }
- var _createNamespace = (0, _utils.createNamespace)('index-bar'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default = createComponent({
- mixins: [_touch.TouchMixin, (0, _relation.ParentMixin)('vanIndexBar'), (0, _bindEvent.BindEventMixin)(function (bind) {
- if (!this.scroller) {
- this.scroller = (0, _scroll.getScroller)(this.$el);
- }
- bind(this.scroller, 'scroll', this.onScroll);
- })],
- props: {
- zIndex: [Number, String],
- highlightColor: String,
- sticky: {
- type: Boolean,
- default: true
- },
- stickyOffsetTop: {
- type: Number,
- default: 0
- },
- indexList: {
- type: Array,
- default: genAlphabet
- }
- },
- data: function data() {
- return {
- activeAnchorIndex: null
- };
- },
- computed: {
- sidebarStyle: function sidebarStyle() {
- if ((0, _utils.isDef)(this.zIndex)) {
- return {
- zIndex: this.zIndex + 1
- };
- }
- },
- highlightStyle: function highlightStyle() {
- var highlightColor = this.highlightColor;
- if (highlightColor) {
- return {
- color: highlightColor
- };
- }
- }
- },
- watch: {
- indexList: function indexList() {
- this.$nextTick(this.onScroll);
- },
- activeAnchorIndex: function activeAnchorIndex(value) {
- if (value) {
- this.$emit('change', value);
- }
- }
- },
- methods: {
- onScroll: function onScroll() {
- var _this = this;
- if ((0, _style.isHidden)(this.$el)) {
- return;
- }
- var scrollTop = (0, _scroll.getScrollTop)(this.scroller);
- var scrollerRect = this.getScrollerRect();
- var rects = this.children.map(function (item) {
- return item.getRect(_this.scroller, scrollerRect);
- });
- var active = this.getActiveAnchorIndex(scrollTop, rects);
- this.activeAnchorIndex = this.indexList[active];
- if (this.sticky) {
- this.children.forEach(function (item, index) {
- if (index === active || index === active - 1) {
- var rect = item.$el.getBoundingClientRect();
- item.left = rect.left;
- item.width = rect.width;
- } else {
- item.left = null;
- item.width = null;
- }
- if (index === active) {
- item.active = true;
- item.top = Math.max(_this.stickyOffsetTop, rects[index].top - scrollTop) + scrollerRect.top;
- } else if (index === active - 1) {
- var activeItemTop = rects[active].top - scrollTop;
- item.active = activeItemTop > 0;
- item.top = activeItemTop + scrollerRect.top - rects[index].height;
- } else {
- item.active = false;
- }
- });
- }
- },
- getScrollerRect: function getScrollerRect() {
- if (this.scroller.getBoundingClientRect) {
- return this.scroller.getBoundingClientRect();
- }
- return {
- top: 0,
- left: 0
- };
- },
- getActiveAnchorIndex: function getActiveAnchorIndex(scrollTop, rects) {
- for (var i = this.children.length - 1; i >= 0; i--) {
- var prevHeight = i > 0 ? rects[i - 1].height : 0;
- var reachTop = this.sticky ? prevHeight + this.stickyOffsetTop : 0;
- if (scrollTop + reachTop >= rects[i].top) {
- return i;
- }
- }
- return -1;
- },
- onClick: function onClick(event) {
- this.scrollToElement(event.target);
- },
- onTouchMove: function onTouchMove(event) {
- this.touchMove(event);
- if (this.direction === 'vertical') {
- (0, _event.preventDefault)(event);
- var _event$touches$ = event.touches[0],
- clientX = _event$touches$.clientX,
- clientY = _event$touches$.clientY;
- var target = document.elementFromPoint(clientX, clientY);
- if (target) {
- var index = target.dataset.index;
- /* istanbul ignore else */
- if (this.touchActiveIndex !== index) {
- this.touchActiveIndex = index;
- this.scrollToElement(target);
- }
- }
- }
- },
- scrollTo: function scrollTo(index) {
- var match = this.children.filter(function (item) {
- return String(item.index) === index;
- });
- if (match[0]) {
- match[0].scrollIntoView();
- if (this.sticky && this.stickyOffsetTop) {
- (0, _scroll.setRootScrollTop)((0, _scroll.getRootScrollTop)() - this.stickyOffsetTop);
- }
- this.$emit('select', match[0].index);
- }
- },
- scrollToElement: function scrollToElement(element) {
- var index = element.dataset.index;
- this.scrollTo(index);
- },
- onTouchEnd: function onTouchEnd() {
- this.active = null;
- }
- },
- render: function render() {
- var _this2 = this;
- var h = arguments[0];
- var Indexes = this.indexList.map(function (index) {
- var active = index === _this2.activeAnchorIndex;
- return h("span", {
- "class": bem('index', {
- active: active
- }),
- "style": active ? _this2.highlightStyle : null,
- "attrs": {
- "data-index": index
- }
- }, [index]);
- });
- return h("div", {
- "class": bem()
- }, [h("div", {
- "class": bem('sidebar'),
- "style": this.sidebarStyle,
- "on": {
- "click": this.onClick,
- "touchstart": this.touchStart,
- "touchmove": this.onTouchMove,
- "touchend": this.onTouchEnd,
- "touchcancel": this.onTouchEnd
- }
- }, [Indexes]), this.slots('default')]);
- }
- });
- exports.default = _default;
|