Page MenuHomePhorge
Files F85831620

No OneTemporary
Actions

Authored By
Unknown
Size
6 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 ce5b2b4217..cb9602dce9 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,79 +1,104 @@
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'
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
},
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.clientX
+ if (e.type === 'dragstart') {
+ this.mouseDragStart = e.clientX
+ e.dataTransfer.setDragImage(this.ghostImg, 0, 0)
+ } else {
+ this.mouseDragStart = e.changedTouches[0].clientX
+ }
},
handleDragEnd (e) {
- if (e.clientX < this.mouseDragStart) {
- this.goPrev()
+ let clientX
+ if (e.type === 'dragend') {
+ e.srcElement.style.transform = ''
+ clientX = e.clientX
} else {
+ clientX = e.changedTouches[0].clientX
+ }
+
+ // Go to next/prev media if drag movement is more than 100px
+ if (this.mouseDragStart - clientX > 100) {
+ this.goPrev()
+ }
+ if (this.mouseDragStart - clientX < -100) {
this.goNext()
}
+ },
+ handleDragMove (e) {
+ if (e.type === 'drag') {
+ const delta = e.clientX - this.mouseDragStart
+ e.srcElement.style.transform = `translateX(${delta}px)`
+ }
}
},
mounted () {
+ this.ghostImg = document.createElement('img')
+ this.ghostImg.src = '/static/ghot-img.png'
+ this.ghostImg.className = 'hidden-drag-ghost'
+ document.body.appendChild(this.ghostImg)
document.addEventListener('keydown', this.handleKeydownEvent)
},
destroyed () {
document.removeEventListener('keydown', this.handleKeydownEvent)
}
}
export default MediaModal
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index d907153bdf..84f0f94618 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,109 +1,127 @@
<template>
<div class="modal-view" v-if="showing" @click.prevent="hide">
- <div draggable="true" class="modal-image" v-on:dragstart="handleDragStart" v-on:dragend="handleDragEnd">
+ <div
+ draggable="true"
+ class="modal-image"
+ v-on:dragstart="handleDragStart"
+ v-on:touchstart="handleDragStart"
+ v-on:dragend="handleDragEnd"
+ v-on:touchend="handleDragEnd"
+ v-on:drag="handleDragMove"
+ v-on:touchmove="handleDragMove"
+ >
<img v-if="type === 'image'" :src="currentMedia.url"/>
<VideoAttachment
v-if="type === 'video'"
:attachment="currentMedia"
:controls="true"
@click.stop.native="">
</VideoAttachment>
</div>
<button
:title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev"
v-if="canNavigate"
@click.stop.prevent="goPrev"
>
<i class="icon-left-open arrow-icon" />
</button>
<button
:title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next"
v-if="canNavigate"
@click.stop.prevent="goNext"
>
<i class="icon-right-open arrow-icon" />
</button>
</div>
</template>
<script src="./media_modal.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.modal-view {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+ cursor: pointer;
img, video {
max-width: 100%;
max-height: 100%;
}
img {
pointer-events: none;
}
}
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
outline: none;
box-shadow: none;
&:hover {
box-shadow: none;
}
.arrow-icon {
position: absolute;
top: 35px;
height: 30px;
width: 32px;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: 6px;
}
}
&--next {
right: 0;
.arrow-icon {
right: 6px;
}
}
}
+.hidden-drag-ghost {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ visibility: hidden;
+}
+
</style>
diff --git a/static/ghost-img.png b/static/ghost-img.png
new file mode 100644
index 0000000000..56eff073e4
Binary files /dev/null and b/static/ghost-img.png differ

File Metadata

Mime Type
text/x-diff
Expires
Sun, Nov 1, 6:56 PM (11 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1803260
Default Alt Text
(6 KB)

Event Timeline