drip-ui/lib/swiper/index.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _swiper = _interopRequireDefault(require("./swiper.js"));

var _router = require("./router");

var _create = _interopRequireDefault(require("../utils/create"));

var _default2 = (0, _create["default"])({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "drip-swiper"
    }, [_c('div', {
      staticClass: "drip-swiper",
      style: {
        height: _vm.xheight
      }
    }, [_vm._t("default"), _vm._l(_vm.list, function (item, index) {
      return _c('div', {
        key: index + "-" + item.img,
        staticClass: "drip-swiper-item",
        attrs: {
          "data-index": index
        },
        on: {
          "click": function click($event) {
            _vm.clickListItem(item);
          }
        }
      }, [_c('a', {
        attrs: {
          "href": "javascript:"
        }
      }, [_c('div', {
        staticClass: "drip-img",
        style: {
          backgroundImage: _vm.buildBackgroundUrl(item)
        }
      }), _vm.showDescMask ? _c('p', {
        staticClass: "drip-swiper-desc"
      }, [_vm._v(_vm._s(item.title))]) : _vm._e()])]);
    }), _vm._l(_vm.listTwoLoopItem, function (item, index) {
      return _vm.listTwoLoopItem.length > 0 ? _c('div', {
        key: index + "-loop",
        staticClass: "drip-swiper-item drip-swiper-item-clone",
        attrs: {
          "data-index": index
        },
        on: {
          "click": function click($event) {
            _vm.clickListItem(item);
          }
        }
      }, [_c('a', {
        attrs: {
          "href": "javascript:"
        }
      }, [_c('div', {
        staticClass: "drip-img",
        style: {
          backgroundImage: _vm.buildBackgroundUrl(item)
        }
      }), _vm.showDescMask ? _c('p', {
        staticClass: "drip-swiper-desc"
      }, [_vm._v(_vm._s(item.title))]) : _vm._e()])]) : _vm._e();
    })], 2), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showDots,
        expression: "showDots"
      }],
      "class": [_vm.dotsClass, 'drip-indicator', "drip-indicator-" + _vm.dotsPosition]
    }, _vm._l(_vm.length, function (key, index) {
      return _c('a', {
        key: index,
        attrs: {
          "href": "javascript:"
        }
      }, [_c('i', {
        staticClass: "drip-icon-dot",
        "class": {
          'active': key - 1 === _vm.current
        }
      })]);
    }))]);
  },
  name: "swiper",
  created: function created() {
    this.index = this.value || 0;

    if (this.index) {
      this.current = this.index;
    }
  },
  mounted: function mounted() {
    var _this2 = this;

    this.hasTwoLoopItem();
    this.$nextTick(function () {
      if (!(_this2.list && _this2.list.length === 0)) {
        _this2.render(_this2.index);
      }

      _this2.xheight = _this2.getHeight();
    });
  },
  methods: {
    hasTwoLoopItem: function hasTwoLoopItem() {
      if (this.list.length === 2 && this.loop) {
        this.listTwoLoopItem = this.list;
      } else {
        this.listTwoLoopItem = [];
      }
    },
    clickListItem: function clickListItem(item) {
      (0, _router.go)(item.url, this.$router);
      this.$emit("on-click-list-item", JSON.parse(JSON.stringify(item)));
    },
    buildBackgroundUrl: function buildBackgroundUrl(item) {
      return item.fallbackImg ? "url(" + item.img + "), url(" + item.fallbackImg + ")" : "url(" + item.img + ")";
    },
    render: function render(index) {
      var _this3 = this;

      if (index === void 0) {
        index = 0;
      }

      this.swiper && this.swiper.destroy();
      this.swiper = new _swiper["default"]({
        container: this.$el,
        direction: this.direction,
        auto: this.auto,
        loop: this.loop,
        interval: this.interval,
        threshold: this.threshold,
        duration: this.duration,
        height: this.height || this._height,
        minMovingDistance: this.minMovingDistance,
        imgList: this.imgList
      }).on("swiped", function (prev, index) {
        _this3.current = index % _this3.length;
        _this3.index = index % _this3.length;
      });

      if (index > 0) {
        this.swiper.go(index);
      }
    },
    rerender: function rerender() {
      var _this4 = this;

      if (!this.$el || this.hasRender) {
        return;
      }

      this.hasRender = true;
      this.hasTwoLoopItem();
      this.$nextTick(function () {
        _this4.index = _this4.value || 0;
        _this4.current = _this4.value || 0;
        _this4.length = _this4.list.length || _this4.$children.length;

        _this4.destroy();

        _this4.render(_this4.value);
      });
    },
    destroy: function destroy() {
      this.hasRender = false;
      this.swiper && this.swiper.destroy();
    },
    getHeight: function getHeight() {
      var hasHeight = parseInt(this.height, 10);
      if (hasHeight) return this.height;

      if (!hasHeight) {
        if (this.aspectRatio) {
          return this.$el.offsetWidth * this.aspectRatio + "px";
        }

        return "180px";
      }
    }
  },
  props: {
    list: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    direction: {
      type: String,
      "default": "horizontal"
    },
    showDots: {
      type: Boolean,
      "default": true
    },
    showDescMask: {
      type: Boolean,
      "default": false
    },
    dotsPosition: {
      type: String,
      "default": "right"
    },
    dotsClass: String,
    auto: Boolean,
    loop: Boolean,
    interval: {
      type: Number,
      "default": 3000
    },
    threshold: {
      type: Number,
      "default": 50
    },
    duration: {
      type: Number,
      "default": 300
    },
    height: {
      type: String,
      "default": "auto"
    },
    aspectRatio: Number,
    minMovingDistance: {
      type: Number,
      "default": 0
    },
    value: {
      type: Number,
      "default": 0
    }
  },
  data: function data() {
    return {
      hasRender: false,
      current: this.index || 0,
      xheight: "auto",
      length: this.list.length,
      index: 0,
      listTwoLoopItem: [] // issue #1484

    };
  },
  watch: {
    list: function list(val) {
      this.rerender();
    },
    current: function current(currentIndex) {
      this.index = currentIndex;
      this.$emit("on-index-change", currentIndex);
    },
    index: function index(val) {
      var _this = this;

      if (val !== this.current) {
        this.$nextTick(function () {
          _this.swiper && _this.swiper.go(val);
        });
      }

      this.$emit("input", val);
    },
    value: function value(val) {
      this.index = val;
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.destroy();
  }
});

exports["default"] = _default2;