ai.touchui-vue 1.30.2 → 1.30.4

package/packages/pic/src/pic-viewer.vue

@@ -1,331 +1,331 @@
-<template>
-	<transition name="viewer-fade">
-		<div ref="viewer" tabindex="-1" class="to-picViewer" :style="{ 'z-index': viewerZIndex }">
-			<div class="bg" @click.self="handleMaskClick"></div>
-			<!-- CLOSE -->
-			<to-icon v-size="2" value="close" mode="fill" color="info" link fillet="round" @click="hide"></to-icon>
-			<!-- ARROW -->
-			<template v-if="!isSingle">
-				<to-icon v-size="2" v-dis="!infinite && isFirst" value="back" mode="fill" color="info" link fillet="round" @click="prev"></to-icon>
-				<to-icon v-size="2" v-dis="!infinite && isLast" value="next" mode="fill" color="info" link fillet="round" @click="next"></to-icon>
-			</template>
-			<!-- ACTIONS -->
-			<div class="fn">
-				<to-button mode="none" fillet="pill" fillet-position="left" icon="zoomout" color="bg" @click="handleActions('zoomOut')"></to-button>
-				<to-button mode="none" icon="zoomin" color="bg" @click="handleActions('zoomIn')"></to-button>
-				<to-button mode="none" color="bg" @click.native="toggleMode()">{{ mode.name === 'contain'?t('to.pic.viewer.full'):t('to.pic.viewer.restore') }}</to-button>
-				<to-button mode="none" icon="leftrotation" color="bg" @click="handleActions('anticlocelise')"></to-button>
-				<to-button mode="none" fillet="pill" fillet-position="right" icon="reset" color="bg" @click="handleActions('clocelise')"></to-button>
-			</div>
-			<!-- CANVAS -->
-			<div class="canvas">
-				<img
-					v-for="(url) in urlList.filter((item,i) => i === index)"
-					ref="img"
-					:key="url"
-					:src="currentImg"
-					:style="imgStyle"
-					@load="handleImgLoad"
-					@error="handleImgError"
-					@mousedown="handleMouseDown"
-					@touchstart="handleMouseDown"
-					/>
-			</div>
-		</div>
-	</transition>
-</template>
-
-<script>
-import { on, off } from 'ai.touchui-vue/src/utils/dom';
-import { rafThrottle, isFirefox } from 'ai.touchui-vue/src/utils/util';
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-const Mode = {
-	CONTAIN: {
-		name: 'contain',
-		icon: 'el-icon-full-screen'
-	},
-	ORIGINAL: {
-		name: 'original',
-		icon: 'el-icon-c-scale-to-original'
-	}
-};
-
-const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
-
-export default {
-	name: 'ToImageViewer',
-	mixins: [Locale],
-	props: {
-		urlList: {
-			type: Array,
-			default: () => []
-		},
-		zIndex: {
-			type: Number,
-			default: 2000
-		},
-		onSwitch: {
-			type: Function,
-			default() {
-				return {}
-			}
-		},
-		onClose: {
-			type: Function,
-			default() {
-				return {}
-			}
-		},
-		initialIndex: {
-			type: Number,
-			default: 0
-		},
-		appendToBody: {
-			type: Boolean,
-			default: true
-		},
-		maskClosable: {
-			type: Boolean,
-			default: true
-		}
-	},
-
-	data() {
-		return {
-			index: this.initialIndex,
-			isShow: false,
-			infinite: true,
-			loading: false,
-			mode: Mode.CONTAIN,
-			transform: {
-				scale: 1,
-				deg: 0,
-				offsetX: 0,
-				offsetY: 0,
-				enableTransition: false
-			}
-		};
-	},
-	computed: {
-		isSingle() {
-			return this.urlList.length <= 1
-		},
-		isFirst() {
-			return this.index === 0
-		},
-		isLast() {
-			return this.index === this.urlList.length - 1
-		},
-		currentImg() {
-			return this.urlList[this.index]
-		},
-		imgStyle() {
-			const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
-			const style = {
-				transform: `scale(${scale}) rotate(${deg}deg)`,
-				transition: enableTransition ? 'transform .3s' : '',
-				'margin-left': `${offsetX}px`,
-				'margin-top': `${offsetY}px`
-			}
-			if (this.mode === Mode.CONTAIN) {
-				style.maxWidth = style.maxHeight = '100%'
-			}
-			return style
-		},
-		viewerZIndex() {
-			const nextZIndex = window.$TouchUI.zIndex
-			window.$TouchUI.zIndex++
-			return this.zIndex > nextZIndex ? this.zIndex : nextZIndex
-		}
-	},
-	watch: {
-		index: {
-			handler: function(val) {
-				this.reset()
-				this.onSwitch(val)
-			}
-		},
-		currentImg(val) {
-			this.$nextTick(_ => {
-				const $img = this.$refs.img[0]
-				if (!$img.complete) {
-					this.loading = true
-				}
-			})
-		}
-	},
-	mounted() {
-		this.deviceSupportInstall()
-		if (this.appendToBody) {
-			document.body.appendChild(this.$el)
-		}
-		// add tabindex then wrapper can be focusable via Javascript
-		// focus wrapper so arrow key can't cause inner scroll behavior underneath
-		this.$refs['viewer'].focus()
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	methods: {
-		destroy() {
-			// if appendToBody is true, remove DOM node after destroy
-			if (this.appendToBody && this.$el && this.$el.parentNode) {
-				this.$el.parentNode.removeChild(this.$el)
-			}
-		},
-		hide() {
-			this.deviceSupportUninstall()
-			this.onClose()
-		},
-		deviceSupportInstall() {
-			this._keyDownHandler = e => {
-				e.stopPropagation()
-				const keyCode = e.keyCode
-				switch (keyCode) {
-					// ESC
-					case 27:
-						this.hide()
-						break
-						// SPACE
-					case 32:
-						this.toggleMode()
-						break
-						// LEFT_ARROW
-					case 37:
-						this.prev()
-						break
-						// UP_ARROW
-					case 38:
-						this.handleActions('zoomIn')
-						break
-						// RIGHT_ARROW
-					case 39:
-						this.next()
-						break
-						// DOWN_ARROW
-					case 40:
-						this.handleActions('zoomOut')
-						break
-				}
-			}
-			this._mouseWheelHandler = rafThrottle(e => {
-				const delta = e.wheelDelta ? e.wheelDelta : -e.detail
-				if (delta > 0) {
-					this.handleActions('zoomIn', {
-						zoomRate: 0.015,
-						enableTransition: false
-					})
-				} else {
-					this.handleActions('zoomOut', {
-						zoomRate: 0.015,
-						enableTransition: false
-					})
-				}
-			})
-			on(document, 'keydown', this._keyDownHandler)
-			on(document, mousewheelEventName, this._mouseWheelHandler)
-		},
-		deviceSupportUninstall() {
-			off(document, 'keydown', this._keyDownHandler)
-			off(document, mousewheelEventName, this._mouseWheelHandler)
-			this._keyDownHandler = null
-			this._mouseWheelHandler = null
-		},
-		handleImgLoad(e) {
-			this.loading = false
-		},
-		handleImgError(e) {
-			this.loading = false
-			e.target.alt = this.t('pic.tip.error.load')
-		},
-		handleMouseDown(e) {
-			if (this.loading || (!e.touches && e.button !== 0)) return
-			const { offsetX, offsetY } = this.transform
-			let startX = e.pageX
-			let startY = e.pageY
-			if (e.touches) {
-				startX = e.touches[0].pageX
-				startY = e.touches[0].pageY
-			}
-			this._dragHandler = rafThrottle(ev => {
-				this.transform.offsetX = offsetX + ev.pageX - startX
-				this.transform.offsetY = offsetY + ev.pageY - startY
-				if (ev.touches) {
-					this.transform.offsetX = offsetX + ev.touches[0].pageX - startX
-					this.transform.offsetY = offsetY + ev.touches[0].pageY - startY
-				}
-			})
-			on(document, 'mousemove', this._dragHandler)
-			on(document, 'mouseup', ev => {
-				off(document, 'mousemove', this._dragHandler)
-				off(document, 'touchmove', this._dragHandler)
-			})
-			on(document, 'touchmove', this._dragHandler)
-			on(document, 'touchend', ev => {
-				off(document, 'mousemove', this._dragHandler)
-				off(document, 'touchmove', this._dragHandler)
-			})
-			e.preventDefault()
-		},
-		handleMaskClick() {
-			if (this.maskClosable) {
-				this.hide()
-			}
-		},
-		reset() {
-			this.transform = {
-				scale: 1,
-				deg: 0,
-				offsetX: 0,
-				offsetY: 0,
-				enableTransition: false
-			}
-		},
-		toggleMode() {
-			if (this.loading) return
-			const modeNames = Object.keys(Mode)
-			const modeValues = Object.values(Mode)
-			const index = modeValues.indexOf(this.mode)
-			const nextIndex = (index + 1) % modeNames.length
-			this.mode = Mode[modeNames[nextIndex]]
-			this.reset()
-		},
-		prev() {
-			if (this.isFirst && !this.infinite) return
-			const len = this.urlList.length
-			this.index = (this.index - 1 + len) % len
-		},
-		next() {
-			if (this.isLast && !this.infinite) return
-			const len = this.urlList.length
-			this.index = (this.index + 1) % len
-		},
-		handleActions(action, options = {}) {
-			if (this.loading) return
-			const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: 0.2, rotateDeg: 90, enableTransition: true }, options)
-
-			const { transform } = this
-			switch (action) {
-				case 'zoomOut':
-					if (transform.scale > 0.2) {
-						transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
-					}
-					break
-				case 'zoomIn':
-					transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
-					break
-				case 'clocelise':
-					transform.deg += rotateDeg
-					break
-				case 'anticlocelise':
-					transform.deg -= rotateDeg
-					break
-			}
-			transform.enableTransition = enableTransition
-		}
-	}
-}
-</script>
+<template>
+	<transition name="viewer-fade">
+		<div ref="viewer" tabindex="-1" class="to-picViewer" :style="{ 'z-index': viewerZIndex }">
+			<div class="bg" @click.self="handleMaskClick"></div>
+			<!-- CLOSE -->
+			<to-icon v-size="2" value="close" mode="fill" color="info" link fillet="round" @click="hide"></to-icon>
+			<!-- ARROW -->
+			<template v-if="!isSingle">
+				<to-icon v-size="2" v-dis="!infinite && isFirst" value="back" mode="fill" color="info" link fillet="round" @click="prev"></to-icon>
+				<to-icon v-size="2" v-dis="!infinite && isLast" value="next" mode="fill" color="info" link fillet="round" @click="next"></to-icon>
+			</template>
+			<!-- ACTIONS -->
+			<div class="fn">
+				<to-button mode="none" fillet="pill" fillet-position="left" icon="zoomout" color="bg" @click="handleActions('zoomOut')"></to-button>
+				<to-button mode="none" icon="zoomin" color="bg" @click="handleActions('zoomIn')"></to-button>
+				<to-button mode="none" color="bg" @click.native="toggleMode()">{{ mode.name === 'contain'?t('to.pic.viewer.full'):t('to.pic.viewer.restore') }}</to-button>
+				<to-button mode="none" icon="leftrotation" color="bg" @click="handleActions('anticlocelise')"></to-button>
+				<to-button mode="none" fillet="pill" fillet-position="right" icon="reset" color="bg" @click="handleActions('clocelise')"></to-button>
+			</div>
+			<!-- CANVAS -->
+			<div class="canvas">
+				<img
+					v-for="(url) in urlList.filter((item,i) => i === index)"
+					ref="img"
+					:key="url"
+					:src="currentImg"
+					:style="imgStyle"
+					@load="handleImgLoad"
+					@error="handleImgError"
+					@mousedown="handleMouseDown"
+					@touchstart="handleMouseDown"
+					/>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import { on, off } from 'ai.touchui-vue/src/utils/dom';
+import { rafThrottle, isFirefox } from 'ai.touchui-vue/src/utils/util';
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+const Mode = {
+	CONTAIN: {
+		name: 'contain',
+		icon: 'el-icon-full-screen'
+	},
+	ORIGINAL: {
+		name: 'original',
+		icon: 'el-icon-c-scale-to-original'
+	}
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+	name: 'ToImageViewer',
+	mixins: [Locale],
+	props: {
+		urlList: {
+			type: Array,
+			default: () => []
+		},
+		zIndex: {
+			type: Number,
+			default: 2000
+		},
+		onSwitch: {
+			type: Function,
+			default() {
+				return {}
+			}
+		},
+		onClose: {
+			type: Function,
+			default() {
+				return {}
+			}
+		},
+		initialIndex: {
+			type: Number,
+			default: 0
+		},
+		appendToBody: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	data() {
+		return {
+			index: this.initialIndex,
+			isShow: false,
+			infinite: true,
+			loading: false,
+			mode: Mode.CONTAIN,
+			transform: {
+				scale: 1,
+				deg: 0,
+				offsetX: 0,
+				offsetY: 0,
+				enableTransition: false
+			}
+		};
+	},
+	computed: {
+		isSingle() {
+			return this.urlList.length <= 1
+		},
+		isFirst() {
+			return this.index === 0
+		},
+		isLast() {
+			return this.index === this.urlList.length - 1
+		},
+		currentImg() {
+			return this.urlList[this.index]
+		},
+		imgStyle() {
+			const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
+			const style = {
+				transform: `scale(${scale}) rotate(${deg}deg)`,
+				transition: enableTransition ? 'transform .3s' : '',
+				'margin-left': `${offsetX}px`,
+				'margin-top': `${offsetY}px`
+			}
+			if (this.mode === Mode.CONTAIN) {
+				style.maxWidth = style.maxHeight = '100%'
+			}
+			return style
+		},
+		viewerZIndex() {
+			const nextZIndex = window.$TouchUI.zIndex
+			window.$TouchUI.zIndex++
+			return this.zIndex > nextZIndex ? this.zIndex : nextZIndex
+		}
+	},
+	watch: {
+		index: {
+			handler: function(val) {
+				this.reset()
+				this.onSwitch(val)
+			}
+		},
+		currentImg(val) {
+			this.$nextTick(_ => {
+				const $img = this.$refs.img[0]
+				if (!$img.complete) {
+					this.loading = true
+				}
+			})
+		}
+	},
+	mounted() {
+		this.deviceSupportInstall()
+		if (this.appendToBody) {
+			document.body.appendChild(this.$el)
+		}
+		// add tabindex then wrapper can be focusable via Javascript
+		// focus wrapper so arrow key can't cause inner scroll behavior underneath
+		this.$refs['viewer'].focus()
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	methods: {
+		destroy() {
+			// if appendToBody is true, remove DOM node after destroy
+			if (this.appendToBody && this.$el && this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el)
+			}
+		},
+		hide() {
+			this.deviceSupportUninstall()
+			this.onClose()
+		},
+		deviceSupportInstall() {
+			this._keyDownHandler = e => {
+				e.stopPropagation()
+				const keyCode = e.keyCode
+				switch (keyCode) {
+					// ESC
+					case 27:
+						this.hide()
+						break
+						// SPACE
+					case 32:
+						this.toggleMode()
+						break
+						// LEFT_ARROW
+					case 37:
+						this.prev()
+						break
+						// UP_ARROW
+					case 38:
+						this.handleActions('zoomIn')
+						break
+						// RIGHT_ARROW
+					case 39:
+						this.next()
+						break
+						// DOWN_ARROW
+					case 40:
+						this.handleActions('zoomOut')
+						break
+				}
+			}
+			this._mouseWheelHandler = rafThrottle(e => {
+				const delta = e.wheelDelta ? e.wheelDelta : -e.detail
+				if (delta > 0) {
+					this.handleActions('zoomIn', {
+						zoomRate: 0.015,
+						enableTransition: false
+					})
+				} else {
+					this.handleActions('zoomOut', {
+						zoomRate: 0.015,
+						enableTransition: false
+					})
+				}
+			})
+			on(document, 'keydown', this._keyDownHandler)
+			on(document, mousewheelEventName, this._mouseWheelHandler)
+		},
+		deviceSupportUninstall() {
+			off(document, 'keydown', this._keyDownHandler)
+			off(document, mousewheelEventName, this._mouseWheelHandler)
+			this._keyDownHandler = null
+			this._mouseWheelHandler = null
+		},
+		handleImgLoad(e) {
+			this.loading = false
+		},
+		handleImgError(e) {
+			this.loading = false
+			e.target.alt = this.t('pic.tip.error.load')
+		},
+		handleMouseDown(e) {
+			if (this.loading || (!e.touches && e.button !== 0)) return
+			const { offsetX, offsetY } = this.transform
+			let startX = e.pageX
+			let startY = e.pageY
+			if (e.touches) {
+				startX = e.touches[0].pageX
+				startY = e.touches[0].pageY
+			}
+			this._dragHandler = rafThrottle(ev => {
+				this.transform.offsetX = offsetX + ev.pageX - startX
+				this.transform.offsetY = offsetY + ev.pageY - startY
+				if (ev.touches) {
+					this.transform.offsetX = offsetX + ev.touches[0].pageX - startX
+					this.transform.offsetY = offsetY + ev.touches[0].pageY - startY
+				}
+			})
+			on(document, 'mousemove', this._dragHandler)
+			on(document, 'mouseup', ev => {
+				off(document, 'mousemove', this._dragHandler)
+				off(document, 'touchmove', this._dragHandler)
+			})
+			on(document, 'touchmove', this._dragHandler)
+			on(document, 'touchend', ev => {
+				off(document, 'mousemove', this._dragHandler)
+				off(document, 'touchmove', this._dragHandler)
+			})
+			e.preventDefault()
+		},
+		handleMaskClick() {
+			if (this.maskClosable) {
+				this.hide()
+			}
+		},
+		reset() {
+			this.transform = {
+				scale: 1,
+				deg: 0,
+				offsetX: 0,
+				offsetY: 0,
+				enableTransition: false
+			}
+		},
+		toggleMode() {
+			if (this.loading) return
+			const modeNames = Object.keys(Mode)
+			const modeValues = Object.values(Mode)
+			const index = modeValues.indexOf(this.mode)
+			const nextIndex = (index + 1) % modeNames.length
+			this.mode = Mode[modeNames[nextIndex]]
+			this.reset()
+		},
+		prev() {
+			if (this.isFirst && !this.infinite) return
+			const len = this.urlList.length
+			this.index = (this.index - 1 + len) % len
+		},
+		next() {
+			if (this.isLast && !this.infinite) return
+			const len = this.urlList.length
+			this.index = (this.index + 1) % len
+		},
+		handleActions(action, options = {}) {
+			if (this.loading) return
+			const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: 0.2, rotateDeg: 90, enableTransition: true }, options)
+
+			const { transform } = this
+			switch (action) {
+				case 'zoomOut':
+					if (transform.scale > 0.2) {
+						transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
+					}
+					break
+				case 'zoomIn':
+					transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
+					break
+				case 'clocelise':
+					transform.deg += rotateDeg
+					break
+				case 'anticlocelise':
+					transform.deg -= rotateDeg
+					break
+			}
+			transform.enableTransition = enableTransition
+		}
+	}
+}
+</script>