@meve/ui/es/scroller/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import { createNamespace } from '../utils/create';
import { props } from './props';
import { isMobile, toSizeUnit } from '../utils/elements';
import { range, removeItem } from '../utils/shared';
import { createLockMixin } from '../context/lock';


var stack = [];

var _createNamespace = createNamespace('scroller'),
    namespace = _createNamespace.namespace,
    createComponent = _createNamespace.createComponent;

var ScrollerPlugin = createComponent({
  props: props,
  mixins: [createLockMixin('mouseEnter')],
  data: function data() {
    return {
      isMobile: false,
      scrollY: 0,
      maxScrollY: 0,
      scrollViewTranslateY: 0,
      transitionDuration: 0,
      scrollbarRatio: 0,
      mouseEnter: false,
      touching: false,
      touchY: 0
    };
  },
  watch: {
    height: function height() {
      this.resize();
    }
  },
  computed: {
    showScrollbar: function showScrollbar() {
      return !this.isMobile && this.scrollbarRatio < 1 && (this.touching || this.mouseEnter);
    }
  },
  mounted: function mounted() {
    this.isMobile = isMobile();
  },
  beforeDestroy: function beforeDestroy() {
    document.removeEventListener('touchmove', this.handleTouchMove);
    document.removeEventListener('touchend', this.handleTouchend);
    document.removeEventListener('mousewheel', this.handleMouseWheel);
    removeItem(stack, this);
  },
  methods: {
    resize: function resize() {
      var scroller = this.$refs.scroller;
      this.scrollbarRatio = scroller.clientHeight / scroller.scrollHeight || 0;
      this.maxScrollY = scroller.clientHeight - this.scrollbarRatio * scroller.clientHeight;
    },
    getScrollTop: function getScrollTop() {
      return this.isMobile ? this.$refs.scroller.scrollTop : this.scrollViewTranslateY;
    },
    scrollTo: function scrollTo(y) {
      if (this.isMobile) {
        this.$refs.scroller.scrollTop = y;
        return;
      }

      this.scrollY = y * this.scrollbarRatio;
      this.scrollY = range(this.scrollY, 0, this.maxScrollY);
      this.scrollViewTranslateY = this.scrollY / this.scrollbarRatio;
    },
    scrollToTop: function scrollToTop() {
      var _this = this;

      if (this.isMobile) {
        setTimeout(function () {
          _this.$refs.scroller.scrollTop = 0;
        });
        return;
      }

      this.scrollY = 0;
      this.scrollViewTranslateY = 0;
    },
    scrollUp: function scrollUp(y) {
      if (this.isMobile) {
        this.$refs.scroller.scrollTop -= y;
        return;
      }

      this.scrollY -= y * this.scrollbarRatio;
      this.scrollY = range(this.scrollY, 0, this.maxScrollY);
      this.scrollViewTranslateY = this.scrollY / this.scrollbarRatio;
    },
    scrollDown: function scrollDown(y) {
      if (this.isMobile) {
        this.$refs.scroller.scrollTop += y;
        return;
      }

      this.scrollY += y * this.scrollbarRatio;
      this.scrollY = range(this.scrollY, 0, this.maxScrollY);
      this.scrollViewTranslateY = this.scrollY / this.scrollbarRatio;
    },
    handleMouseEnter: function handleMouseEnter() {
      if (this.isMobile) {
        return;
      }

      stack.push(this);
      this.mouseEnter = true;
      this.resize();
      document.addEventListener('mousewheel', this.handleMouseWheel);
    },
    handleMouseWheel: function handleMouseWheel(_ref) {
      var deltaY = _ref.deltaY;
      var last = stack[stack.length - 1];

      if (last !== this) {
        return;
      }

      if (this.touching) {
        return;
      }

      this.transitionDuration = 100;
      this.scrollY += deltaY * this.scrollbarRatio;
      this.scrollY = range(this.scrollY, 0, this.maxScrollY);
      this.scrollViewTranslateY = this.scrollY / this.scrollbarRatio;
    },
    handleMouseLeave: function handleMouseLeave() {
      this.mouseEnter = false;
      removeItem(stack, this);
      document.removeEventListener('mousewheel', this.handleMouseWheel);
    },
    handleTouchstart: function handleTouchstart(event) {
      this.touching = true;
      this.touchY = event.touches[0].clientY;
      document.addEventListener('touchmove', this.handleTouchMove);
      document.addEventListener('touchend', this.handleTouchend);
    },
    handleTouchMove: function handleTouchMove(event) {
      var touchY = this.touchY;
      this.transitionDuration = 0;
      var clientY = event.touches[0].clientY;
      var deltaY = clientY - touchY;
      this.touchY = clientY;
      this.scrollY += deltaY;
      this.scrollY = range(this.scrollY, 0, this.maxScrollY);
      this.scrollViewTranslateY = this.scrollY / this.scrollbarRatio;
    },
    handleTouchend: function handleTouchend() {
      this.touching = false;
      document.removeEventListener('touchmove', this.handleTouchMove);
      document.removeEventListener('touchend', this.handleTouchend);
    }
  },
  render: function render() {
    var h = arguments[0];
    var height = this.height,
        showScrollbar = this.showScrollbar,
        isMobile = this.isMobile,
        scrollbarRatio = this.scrollbarRatio,
        scrollY = this.scrollY,
        scrollViewTranslateY = this.scrollViewTranslateY,
        transitionDuration = this.transitionDuration,
        handleTouchstart = this.handleTouchstart,
        handleMouseEnter = this.handleMouseEnter,
        handleMouseLeave = this.handleMouseLeave;
    return h("div", {
      "ref": "scroller",
      "class": [namespace(), isMobile ? namespace('--mobile') : null],
      "style": {
        maxHeight: toSizeUnit(height)
      },
      "on": _extends({}, {
        "mouseenter": function mouseenter($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          handleMouseEnter.apply(void 0, [$event].concat(attrs));
        },
        "mouseleave": function mouseleave($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          handleMouseLeave.apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__scroll-view'),
      "style": {
        transform: !isMobile ? "translateY(" + -scrollViewTranslateY + "px)" : undefined,
        transition: !isMobile ? "transform " + transitionDuration + "ms" : undefined
      }
    }, [this.slots()]), h("transition", {
      "attrs": {
        "name": "scrollbar-fade"
      }
    }, [h("div", {
      "class": namespace('__scrollbar'),
      "directives": [{
        name: "show",
        value: showScrollbar
      }]
    }, [h("div", {
      "class": namespace('__scrollbar-inner'),
      "style": {
        height: scrollbarRatio * 100 + "%",
        transition: "top " + transitionDuration + "ms",
        top: scrollY + "px"
      },
      "on": _extends({}, {
        "touchstart": function touchstart($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          handleTouchstart.apply(void 0, [$event].concat(attrs));
        }
      })
    })])])]);
  }
});
export var _ScrollerComponent = ScrollerPlugin;
export default ScrollerPlugin;