iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
488 lines (458 loc) • 17.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _configConsumerProps = require('../config-provider/configConsumerProps');
var _propsUtil = require('../_util/props-util');
var _addEventListener = require('../vc-util/Dom/addEventListener');
var _addEventListener2 = _interopRequireDefault(_addEventListener);
var _warning = require('../vc-util/warning');
var _vcDialog = require('../vc-dialog');
var _vcDialog2 = _interopRequireDefault(_vcDialog);
var _classnames5 = require('classnames');
var _classnames6 = _interopRequireDefault(_classnames5);
var _getFixScaleEleTransPosition = require('./getFixScaleEleTransPosition');
var _getFixScaleEleTransPosition2 = _interopRequireDefault(_getFixScaleEleTransPosition);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _Image = require('./Image');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'AImagePreviewGroup',
inheritAttrs: false,
props: (0, _propsUtil.mergeProps)(_Image.ImageProps, {
mode: _vueTypes2['default'].oneOf(['normal', 'album']).def('normal')
}),
inject: {
configProvider: { 'default': function _default() {
return _configConsumerProps.ConfigConsumerProps;
} }
},
data: function data() {
return {
ANT_PREVIEW_GROUP: true,
imagesUrls: [],
currentIds: '',
visible: false,
isMoving: false,
scale: 1,
rotate: 0,
wheelDirection: 0,
position: {
x: 0,
y: 0
},
originPositionRef: {
originX: 0,
originY: 0,
deltaX: 0,
deltaY: 0
},
currentPreviewIndex: 0,
showLeftOrRightSwitches: false,
previewGroupCount: 0
};
},
beforeDestroy: function beforeDestroy() {
this.detachListeners();
},
methods: {
onAfterClose: function onAfterClose() {
this.scale = 1;
this.rotate = 0;
this.wheelDirection = 0;
this.currentIds = '';
this.imagesUrls = [];
this.detachListeners();
this.originPositionRef = {
originX: 0,
originY: 0,
deltaX: 0,
deltaY: 0
};
this.position = {
x: 0,
y: 0
};
this.currentPreviewIndex = 0;
this.showLeftOrRightSwitches = false;
this.previewGroupCount = 0;
},
addWindowsListeners: function addWindowsListeners() {
this.onMouseUpListener = (0, _addEventListener2['default'])(window, 'mouseup', this.onMouseUp, false);
this.onMouseMoveListener = (0, _addEventListener2['default'])(window, 'mousemove', this.onMouseMove, false);
this.onScrollWheelListener = (0, _addEventListener2['default'])(window, 'wheel', this.onWheelMove, {
passive: false
});
try {
if (window.top !== window.self) {
this.onMouseUpListener = (0, _addEventListener2['default'])(window.top, 'mouseup', this.onMouseUp, false);
this.onMouseUpListener = (0, _addEventListener2['default'])(window.top, 'mousemove', this.onMouseMove, false);
}
} catch (error) {
/* istanbul ignore next */
(0, _warning.warning)(false, '[vc-image] ' + error);
}
},
detachListeners: function detachListeners() {
this.onMouseUpListener && this.onMouseUpListener.remove();
this.onMouseMoveListener && this.onMouseMoveListener.remove();
this.onScrollWheelListener && this.onScrollWheelListener.remove();
},
reset: function reset() {
this.visible = false;
this.scale = 1;
this.rotate = 0;
},
setPreview: function setPreview(e) {
var _this = this;
this.$nextTick(function () {
(0, _propsUtil.filterEmpty)(_this.$slots['default']).forEach(function (item) {
var props = (0, _propsUtil.getOptionProps)(item);
if (props.preview) {
_this.imagesUrls.push(props);
}
});
_this.previewGroupCount = _this.imagesUrls.length;
_this.showLeftOrRightSwitches = _this.previewGroupCount > 1;
_this.currentIds = e;
_this.currentPreviewIndex = _this.imagesUrls.length && _this.imagesUrls.findIndex(function (item) {
return item.src === e;
});
_this.visible = true;
_this.addWindowsListeners();
});
},
onZoomIn: function onZoomIn() {
this.scale++;
this.setPosition({
x: 0,
y: 0
});
},
onZoomOut: function onZoomOut() {
if (this.scale > 1) {
this.scale--;
}
this.setPosition({
x: 0,
y: 0
});
},
onRotateRight: function onRotateRight() {
this.rotate += 90;
},
onRotateLeft: function onRotateLeft() {
this.rotate -= 90;
},
onMouseUp: function onMouseUp(event) {
event.preventDefault();
event.stopPropagation();
if (this.visible && this.isMoving) {
var imgRef = this.$refs.imgRef;
var width = imgRef.offsetWidth * this.scale;
var height = imgRef.offsetHeight * this.scale;
var _imgRef$getBoundingCl = imgRef.getBoundingClientRect(),
left = _imgRef$getBoundingCl.left,
top = _imgRef$getBoundingCl.top;
var isRotate = this.rotate % 180 !== 0;
this.isMoving = false;
var fixState = (0, _getFixScaleEleTransPosition2['default'])(isRotate ? height : width, isRotate ? width : height, left, top);
if (fixState) {
this.setPosition((0, _extends3['default'])({}, fixState));
}
}
},
onMouseDown: function onMouseDown(event) {
if (event.button !== 0) return;
event.preventDefault();
event.stopPropagation();
this.originPositionRef = {
deltaX: event.pageX - this.position.x,
deltaY: event.pageY - this.position.y,
originX: this.position.x,
originY: this.position.y
};
this.isMoving = true;
},
onMouseMove: function onMouseMove(event) {
if (!this.isMoving) return;
event.preventDefault();
this.setPosition({
x: event.pageX - this.originPositionRef.deltaX,
y: event.pageY - this.originPositionRef.deltaY
});
},
onWheelMove: function onWheelMove(event) {
if (!this.visible) return;
event.preventDefault();
this.wheelDirection = event.nativeEvent.deltaY;
this.setLastWheelZoomDirection();
},
setLastWheelZoomDirection: function setLastWheelZoomDirection() {
if (this.wheelDirection > 0) {
this.onZoomOut();
} else if (this.wheelDirection < 0) {
this.onZoomIn();
} else {
this.setPosition({
x: 0,
y: 0
});
}
},
handleCancel: function handleCancel() {
this.reset();
this.$emit('close');
},
setPosition: function setPosition(e) {
if (e.x || e.x === 0) {
this.position.x = e.x;
}
if (e.y || e.y === 0) {
this.position.y = e.y;
}
},
onSwitchLeft: function onSwitchLeft(event) {
this.rotate = 0;
this.scale = 1;
this.setPosition({
x: 0,
y: 0
});
event.preventDefault();
event.stopPropagation();
if (this.currentPreviewIndex > 0) {
this.currentPreviewIndex = this.currentPreviewIndex - 1;
this.setCurrent(this.currentPreviewIndex);
}
},
onSwitchRight: function onSwitchRight(event) {
this.rotate = 0;
this.scale = 1;
this.setPosition({
x: 0,
y: 0
});
event.preventDefault();
event.stopPropagation();
if (this.currentPreviewIndex < this.previewGroupCount - 1) {
this.currentPreviewIndex = this.currentPreviewIndex + 1;
this.setCurrent(this.currentPreviewIndex);
}
},
setCurrent: function setCurrent(key) {
this.currentIds = this.imagesUrls[key].src;
}
},
render: function render() {
var h = arguments[0];
var customizePrefixCls = this.prefixCls,
$slots = this.$slots,
visible = this.visible,
scale = this.scale,
rotate = this.rotate,
mode = this.mode,
currentIds = this.currentIds,
showLeftOrRightSwitches = this.showLeftOrRightSwitches;
var _configProvider = this.configProvider,
getPrefixCls = _configProvider.getPrefixCls,
getContextPopupContainer = _configProvider.getPopupContainer;
var wrapperPrefixCls = getPrefixCls('image-group', customizePrefixCls);
var prefixCls = getPrefixCls('image-preview', customizePrefixCls);
var dialogProps = {
props: (0, _extends3['default'])({}, this.$props, {
getContainer: getContextPopupContainer,
prefixCls: prefixCls,
visible: visible
}),
on: {
close: this.handleCancel
}
};
var wrapClassName = (0, _classnames6['default'])((0, _defineProperty3['default'])({}, prefixCls + '-moving', this.isMoving));
var toolClassName = prefixCls + '-operations-operation';
var iconClassName = prefixCls + '-operations-icon';
var closeIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('path', {
attrs: { d: 'M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z' }
})]
);
var leftIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('path', {
attrs: { d: 'M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z' }
})]
);
var rightIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('path', {
attrs: { d: 'M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z' }
})]
);
var rotateLeftIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('defs', [h('style')]), h('path', {
attrs: { d: 'M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z' }
}), h('path', {
attrs: { d: 'M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z' }
})]
);
var rotateRightIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('defs', [h('style')]), h('path', {
attrs: { d: 'M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z' }
}), h('path', {
attrs: { d: 'M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z' }
})]
);
var zoomInIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('path', {
attrs: { d: 'M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z' }
})]
);
var zoomOutIcon = h(
'svg',
{
attrs: { viewBox: '64 64 896 896', focusable: 'false', xmlns: 'http://www.w3.org/2000/svg' }
},
[h('path', {
attrs: { d: 'M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z' }
})]
);
var tools = [{
icon: closeIcon,
onClick: this.handleCancel,
type: 'close'
}, {
icon: zoomInIcon,
onClick: this.onZoomIn,
type: 'zoomIn'
}, {
icon: zoomOutIcon,
onClick: this.onZoomOut,
type: 'zoomOut',
disabled: this.scale === 1
}, {
icon: rotateRightIcon,
onClick: this.onRotateRight,
type: 'rotateRight'
}, {
icon: rotateLeftIcon,
onClick: this.onRotateLeft,
type: 'rotateLeft'
}];
var slotsArray = (0, _propsUtil.filterEmpty)($slots['default']);
return h(
'div',
{ 'class': wrapperPrefixCls, ref: 'AntimageGroup' },
[mode === 'album' ? slotsArray[0] : slotsArray, h(
_vcDialog2['default'],
(0, _babelHelperVueJsxMergeProps2['default'])([{
attrs: {
closable: false,
wrapClassName: wrapClassName,
transitionName: 'zoom',
afterClose: this.onAfterClose,
maskClosable: false,
maskTransitionName: 'fade',
keyboard: true
}
}, dialogProps]),
[h(
'ul',
{ 'class': prefixCls + '-operations' },
[tools.map(function (item) {
return h(
'li',
{
'class': (0, _classnames6['default'])(toolClassName, (0, _defineProperty3['default'])({}, prefixCls + '-operations-operation-disabled', item.disabled)),
on: {
'click': item.onClick
},
key: item.type
},
[h(
'span',
{ 'class': (0, _classnames6['default'])(iconClassName, ['anticon', iconClassName]) },
[item.icon]
)]
);
})]
), h(
'div',
{
'class': prefixCls + '-img-wrapper',
style: {
transform: 'translate3d(' + this.position.x + 'px, ' + this.position.y + 'px, 0)'
}
},
[h('img', {
on: {
'mousedown': this.onMouseDown
},
ref: 'imgRef',
'class': prefixCls + '-img',
attrs: { src: currentIds
},
style: {
transform: 'scale3d(' + scale + ', ' + scale + ', 1) rotate(' + rotate + 'deg)'
}
})]
), showLeftOrRightSwitches ? h(
'div',
{
'class': (0, _classnames6['default'])(prefixCls + '-switch-left', (0, _defineProperty3['default'])({}, prefixCls + '-switch-left-disabled', this.currentPreviewIndex <= 0)),
on: {
'click': this.onSwitchLeft
}
},
[h(
'span',
{ 'class': (0, _classnames6['default'])(iconClassName, ['anticon', iconClassName]) },
[leftIcon]
)]
) : null, showLeftOrRightSwitches ? h(
'div',
{
'class': (0, _classnames6['default'])(prefixCls + '-switch-right', (0, _defineProperty3['default'])({}, prefixCls + '-switch-right-disabled', this.currentPreviewIndex >= this.previewGroupCount - 1)),
on: {
'click': this.onSwitchRight
}
},
[h(
'span',
{ 'class': (0, _classnames6['default'])(iconClassName, ['anticon', iconClassName]) },
[rightIcon]
)]
) : null]
)]
);
}
};