Add swipe-click handler to media modal

Now swiping will correctly change the current media, and with a good
preview. Clicking without swiping closes the overlay.
This commit is contained in:
Tusooa Zhu 2021-08-02 19:11:59 -04:00
parent a36673a6a8
commit 29cd8fbd3b
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
5 changed files with 94 additions and 168 deletions

View file

@ -26,67 +26,13 @@ const mediaViewer = {
return supportedTypes.has(type)
})
commit('setMedia', media)
dispatch('swipeScaler/reset')
},
setCurrentMedia ({ commit, state, dispatch }, current) {
setCurrentMedia ({ commit, state }, current) {
const index = state.media.indexOf(current)
commit('setCurrentMedia', index || 0)
dispatch('swipeScaler/reset')
},
closeMediaViewer ({ commit, dispatch }) {
commit('close')
dispatch('swipeScaler/reset')
}
},
modules: {
swipeScaler: {
namespaced: true,
state: {
origOffsets: [0, 0],
offsets: [0, 0],
origScaling: 1,
scaling: 1
},
mutations: {
reset (state) {
state.origOffsets = [0, 0]
state.offsets = [0, 0]
state.origScaling = 1
state.scaling = 1
},
applyOffsets (state, { offsets }) {
state.offsets = state.origOffsets.map((k, n) => k + offsets[n])
},
applyScaling (state, { scaling }) {
state.scaling = state.origScaling * scaling
},
finish (state) {
state.origOffsets = [...state.offsets]
state.origScaling = state.scaling
},
revert (state) {
state.offsets = [...state.origOffsets]
state.scaling = state.origScaling
}
},
actions: {
reset ({ commit }) {
commit('reset')
},
apply ({ commit }, { offsets, scaling = 1 }) {
commit('applyOffsets', { offsets })
commit('applyScaling', { scaling })
},
finish ({ commit }) {
commit('finish')
},
revert ({ commit }) {
commit('revert')
}
}
}
}
}