mindoc/static/element-ui/lib/scrollbar.js

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/dist/";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({

/***/ 0:
/***/ function(module, exports, __webpack_require__) {

	module.exports = __webpack_require__(254);


/***/ },

/***/ 47:
/***/ function(module, exports) {

	module.exports = require("element-ui/lib/utils/resize-event");

/***/ },

/***/ 117:
/***/ function(module, exports) {

	module.exports = require("element-ui/lib/utils/dom");

/***/ },

/***/ 254:
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	exports.__esModule = true;

	var _main = __webpack_require__(255);

	var _main2 = _interopRequireDefault(_main);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	/* istanbul ignore next */
	_main2.default.install = function (Vue) {
	  Vue.component(_main2.default.name, _main2.default);
	};

	exports.default = _main2.default;

/***/ },

/***/ 255:
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	exports.__esModule = true;

	var _resizeEvent = __webpack_require__(47);

	var _scrollbarWidth = __webpack_require__(256);

	var _scrollbarWidth2 = _interopRequireDefault(_scrollbarWidth);

	var _util = __webpack_require__(257);

	var _bar = __webpack_require__(258);

	var _bar2 = _interopRequireDefault(_bar);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	/* istanbul ignore next */
	// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js

	exports.default = {
	  name: 'ElScrollbar',

	  components: { Bar: _bar2.default },

	  props: {
	    native: Boolean,
	    wrapStyle: {},
	    wrapClass: {},
	    viewClass: {},
	    viewStyle: {},
	    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
	    tag: {
	      type: String,
	      default: 'div'
	    }
	  },

	  data: function data() {
	    return {
	      sizeWidth: '0',
	      sizeHeight: '0',
	      moveX: 0,
	      moveY: 0
	    };
	  },


	  computed: {
	    wrap: function wrap() {
	      return this.$refs.wrap;
	    }
	  },

	  render: function render(h) {
	    var gutter = (0, _scrollbarWidth2.default)();
	    var style = this.wrapStyle;

	    if (gutter) {
	      var gutterWith = '-' + gutter + 'px';
	      var gutterStyle = 'margin-bottom: ' + gutterWith + '; margin-right: ' + gutterWith + ';';

	      if (Array.isArray(this.wrapStyle)) {
	        style = (0, _util.toObject)(this.wrapStyle);
	        style.marginRight = style.marginBottom = gutterWith;
	      } else if (typeof this.wrapStyle === 'string') {
	        style += gutterStyle;
	      } else {
	        style = gutterStyle;
	      }
	    }
	    var view = h(this.tag, {
	      class: ['el-scrollbar__view', this.viewClass],
	      style: this.viewStyle,
	      ref: 'resize'
	    }, this.$slots.default);
	    var wrap = h(
	      'div',
	      {
	        ref: 'wrap',
	        style: style,
	        on: {
	          'scroll': this.handleScroll
	        },

	        'class': [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] },
	      [[view]]
	    );
	    var nodes = void 0;

	    if (!this.native) {
	      nodes = [wrap, h(
	        _bar2.default,
	        {
	          attrs: {
	            move: this.moveX,
	            size: this.sizeWidth }
	        },
	        []
	      ), h(
	        _bar2.default,
	        {
	          attrs: {
	            vertical: true,
	            move: this.moveY,
	            size: this.sizeHeight }
	        },
	        []
	      )];
	    } else {
	      nodes = [h(
	        'div',
	        {
	          ref: 'wrap',
	          'class': [this.wrapClass, 'el-scrollbar__wrap'],
	          style: style },
	        [[view]]
	      )];
	    }
	    return h('div', { class: 'el-scrollbar' }, nodes);
	  },


	  methods: {
	    handleScroll: function handleScroll() {
	      var wrap = this.wrap;

	      this.moveY = wrap.scrollTop * 100 / wrap.clientHeight;
	      this.moveX = wrap.scrollLeft * 100 / wrap.clientWidth;
	    },
	    update: function update() {
	      var heightPercentage = void 0,
	          widthPercentage = void 0;
	      var wrap = this.wrap;
	      if (!wrap) return;

	      heightPercentage = wrap.clientHeight * 100 / wrap.scrollHeight;
	      widthPercentage = wrap.clientWidth * 100 / wrap.scrollWidth;

	      this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : '';
	      this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : '';
	    }
	  },

	  mounted: function mounted() {
	    if (this.native) return;
	    this.$nextTick(this.update);
	    !this.noresize && (0, _resizeEvent.addResizeListener)(this.$refs.resize, this.update);
	  },
	  beforeDestroy: function beforeDestroy() {
	    if (this.native) return;
	    !this.noresize && (0, _resizeEvent.removeResizeListener)(this.$refs.resize, this.update);
	  }
	};

/***/ },

/***/ 256:
/***/ function(module, exports) {

	module.exports = require("element-ui/lib/utils/scrollbar-width");

/***/ },

/***/ 257:
/***/ function(module, exports) {

	module.exports = require("element-ui/lib/utils/util");

/***/ },

/***/ 258:
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	exports.__esModule = true;

	var _dom = __webpack_require__(117);

	var _util = __webpack_require__(259);

	/* istanbul ignore next */
	exports.default = {
	  name: 'Bar',

	  props: {
	    vertical: Boolean,
	    size: String,
	    move: Number
	  },

	  computed: {
	    bar: function bar() {
	      return _util.BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
	    },
	    wrap: function wrap() {
	      return this.$parent.wrap;
	    }
	  },

	  render: function render(h) {
	    var size = this.size,
	        move = this.move,
	        bar = this.bar;


	    return h(
	      'div',
	      {
	        'class': ['el-scrollbar__bar', 'is-' + bar.key],
	        on: {
	          'mousedown': this.clickTrackHandler
	        }
	      },
	      [h(
	        'div',
	        {
	          ref: 'thumb',
	          'class': 'el-scrollbar__thumb',
	          on: {
	            'mousedown': this.clickThumbHandler
	          },

	          style: (0, _util.renderThumbStyle)({ size: size, move: move, bar: bar }) },
	        []
	      )]
	    );
	  },


	  methods: {
	    clickThumbHandler: function clickThumbHandler(e) {
	      this.startDrag(e);
	      this[this.bar.axis] = e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]);
	    },
	    clickTrackHandler: function clickTrackHandler(e) {
	      var offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
	      var thumbHalf = this.$refs.thumb[this.bar.offset] / 2;
	      var thumbPositionPercentage = (offset - thumbHalf) * 100 / this.$el[this.bar.offset];

	      this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
	    },
	    startDrag: function startDrag(e) {
	      e.stopImmediatePropagation();
	      this.cursorDown = true;

	      (0, _dom.on)(document, 'mousemove', this.mouseMoveDocumentHandler);
	      (0, _dom.on)(document, 'mouseup', this.mouseUpDocumentHandler);
	      document.onselectstart = function () {
	        return false;
	      };
	    },
	    mouseMoveDocumentHandler: function mouseMoveDocumentHandler(e) {
	      if (this.cursorDown === false) return;
	      var prevPage = this[this.bar.axis];

	      if (!prevPage) return;

	      var offset = (this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1;
	      var thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage;
	      var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / this.$el[this.bar.offset];

	      this.wrap[this.bar.scroll] = thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100;
	    },
	    mouseUpDocumentHandler: function mouseUpDocumentHandler(e) {
	      this.cursorDown = false;
	      this[this.bar.axis] = 0;
	      (0, _dom.off)(document, 'mousemove', this.mouseMoveDocumentHandler);
	      document.onselectstart = null;
	    }
	  },

	  destroyed: function destroyed() {
	    (0, _dom.off)(document, 'mouseup', this.mouseUpDocumentHandler);
	  }
	};

/***/ },

/***/ 259:
/***/ function(module, exports) {

	'use strict';

	exports.__esModule = true;
	exports.renderThumbStyle = renderThumbStyle;
	var BAR_MAP = exports.BAR_MAP = {
	  vertical: {
	    offset: 'offsetHeight',
	    scroll: 'scrollTop',
	    scrollSize: 'scrollHeight',
	    size: 'height',
	    key: 'vertical',
	    axis: 'Y',
	    client: 'clientY',
	    direction: 'top'
	  },
	  horizontal: {
	    offset: 'offsetWidth',
	    scroll: 'scrollLeft',
	    scrollSize: 'scrollWidth',
	    size: 'width',
	    key: 'horizontal',
	    axis: 'X',
	    client: 'clientX',
	    direction: 'left'
	  }
	};

	function renderThumbStyle(_ref) {
	  var move = _ref.move,
	      size = _ref.size,
	      bar = _ref.bar;

	  var style = {};
	  var translate = 'translate' + bar.axis + '(' + move + '%)';

	  style[bar.size] = size;
	  style.transform = translate;
	  style.msTransform = translate;
	  style.webkitTransform = translate;

	  return style;
	};

/***/ }

/******/ });