Page MenuHomePhorge
Files F85631028

No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index d5e0da7283..42daf65e23 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,106 +1,110 @@
import StillImage from '../still-image/still-image.vue'
import VideoAttachment from '../video_attachment/video_attachment.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import browserDetectService from '../../services/browser_detect/browser_detect.service'
const MediaModal = {
components: {
StillImage,
VideoAttachment
},
computed: {
showing () {
return this.$store.state.mediaViewer.activated
},
media () {
return this.$store.state.mediaViewer.media
},
currentIndex () {
return this.$store.state.mediaViewer.currentIndex
},
currentMedia () {
return this.media[this.currentIndex]
},
canNavigate () {
return this.media.length > 1
},
draggable () {
return browserDetectService.isMobileBrowser()
},
type () {
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
}
},
methods: {
hide () {
this.$store.dispatch('closeMediaViewer')
},
goPrev () {
if (this.canNavigate) {
const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
this.$store.dispatch('setCurrent', this.media[prevIndex])
}
},
goNext () {
if (this.canNavigate) {
const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
this.$store.dispatch('setCurrent', this.media[nextIndex])
}
},
handleKeydownEvent (e) {
if (!this.showing) {
return
}
if (e.keyCode === 27) { // escape
this.hide()
}
if (e.keyCode === 39) { // arrow right
this.goNext()
}
if (e.keyCode === 37) { // arrow left
this.goPrev()
}
},
handleDragStart (e) {
this.mouseDragStart = e.changedTouches[0].clientX
},
handleDragEnd (e) {
// Go to next/prev media if drag movement is more than 30px
if (this.mouseDragStart - e.changedTouches[0].clientX > 30) {
this.goNext()
}
if (this.mouseDragStart - e.changedTouches[0].clientX < -30) {
this.goPrev()
}
},
handleHorizontalScroll (e) {
- if (!this.showing || this.scrolling) return
+ if (!this.showing) return
- if (e.deltaY === 0 && e.deltaX < -30) {
- this.controlMassWheelEvents()
- this.goNext()
- }
- if (e.deltaY === 0 && e.deltaX > 30) {
- this.controlMassWheelEvents()
- this.goPrev()
+ if (e.deltaY === 0 && !this.scrolling) {
+ if (e.deltaX < -30) {
+ this.controlMassWheelEvents()
+ this.goNext()
+ }
+ if (e.deltaX > 30) {
+ this.controlMassWheelEvents()
+ this.goPrev()
+ }
}
+
+ e.preventDefault()
},
controlMassWheelEvents () {
// Control dozens of mouse wheel events triggered from one scroll.
this.scrolling = true
setTimeout(() => {
this.scrolling = false
}, 500)
}
},
mounted () {
window.addEventListener('wheel', this.handleHorizontalScroll)
document.addEventListener('keydown', this.handleKeydownEvent)
},
destroyed () {
window.removeEventListener('wheel', this.handleHorizontalScroll)
document.removeEventListener('keydown', this.handleKeydownEvent)
}
}
export default MediaModal

File Metadata

Mime Type
text/x-diff
Expires
Mon, Aug 10, 7:24 AM (1 d, 22 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1724894
Default Alt Text
(3 KB)

Event Timeline