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:
parent
a36673a6a8
commit
29cd8fbd3b
5 changed files with 94 additions and 168 deletions
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue