瀏覽代碼

Change post on scrubber release

sbkwgh 8 年之前
父節點
當前提交
66d1fa67b1
共有 2 個文件被更改,包括 32 次插入9 次删除
  1. 27 8
      src/components/PostScrubber.vue
  2. 5 1
      src/components/routes/Thread.vue

+ 27 - 8
src/components/PostScrubber.vue

@@ -26,7 +26,7 @@
 <script>
 	export default {
 		name: 'PostScrubber',
-		props: ['posts'],
+		props: ['posts', 'value'],
 		data () {
 			return {
 				clientY: 0,
@@ -50,29 +50,47 @@
 				}
 			},
 			currentPost () {
-				let postDivision = this.lineHeight / this.posts
-				let postNumber = Math.floor(this.draggerYCoord/ postDivision)
+					let postDivision = this.lineHeight / this.posts
+					let postNumber = Math.floor(this.draggerYCoord/ postDivision)
+					let retPostNumber
 
-				if(postNumber === this.posts) {
-					return postNumber
-				} else {
-					return postNumber + 1
-				}
+					if(postNumber === this.posts) {
+						retPostNumber = postNumber
+					} else {
+						retPostNumber = postNumber + 1
+					}
+
+					return retPostNumber
 			}
 		},
 		methods: {
 			setDragging (val) {
 				this.dragging = val
+
+				if(!val) {
+					this.$emit('input', this.currentPost-1)
+				}
 			},
 			lineClick (e) {
 				this.clientY = e.clientY
+			},
+			setCurrentPost () {
+				let postNumber = +this.value
+				let postDivision = this.lineHeight / this.posts
+
+				this.clientY = this.lineTop + postDivision * postNumber
 			}
 		},
+		watch: {
+			value: 'setCurrentPost'
+		},
 		mounted () {
 			let lineRect = this.$refs.line.getBoundingClientRect()
 			this.lineTop = lineRect.top
 			this.lineHeight = lineRect.height
 
+			this.setCurrentPost()
+
 			window.addEventListener('mousemove', e => {
 				if(this.dragging) {
 					this.clientY = e.clientY
@@ -80,6 +98,7 @@
 			})
 			window.addEventListener('mouseup', e => {
 				this.dragging = false
+				this.$emit('input', this.currentPost-1)
 			})
 		}
 	}

+ 5 - 1
src/components/routes/Thread.vue

@@ -1,6 +1,10 @@
 <template>
 	<div class='route_container'>
-		<post-scrubber :posts='$store.state.thread.totalPostsCount'></post-scrubber>
+		<post-scrubber
+			:posts='$store.state.thread.totalPostsCount'
+			:value='$route.params.id || 0'
+			@input='goToPost'
+		></post-scrubber>
 		<header class='thread_header'>
 			<div
 				class='thread_header__thread_title thread_header__thread_title--app_header'