117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
|
|
import { Entity } from 'megalodon'
|
|
import { RootState } from '@/store'
|
|
|
|
export type ImageViewerState = {
|
|
modalOpen: boolean
|
|
currentIndex: number
|
|
mediaList: Array<Entity.Attachment>
|
|
loading: boolean
|
|
}
|
|
|
|
const state = (): ImageViewerState => ({
|
|
modalOpen: false,
|
|
currentIndex: -1,
|
|
mediaList: [],
|
|
loading: false
|
|
})
|
|
|
|
export const MUTATION_TYPES = {
|
|
CHANGE_MODAL: 'changeModal',
|
|
CHANGE_CURRENT_INDEX: 'changeCurrentIndex',
|
|
CHANGE_MEDIA_LIST: 'changeMediaList',
|
|
INCREMENT_INDEX: 'incrementIndex',
|
|
DECREMENT_INDEX: 'decrementIndex',
|
|
CHANGE_LOADING: 'changeLoading'
|
|
}
|
|
|
|
const mutations: MutationTree<ImageViewerState> = {
|
|
[MUTATION_TYPES.CHANGE_MODAL]: (state, value: boolean) => {
|
|
state.modalOpen = value
|
|
},
|
|
[MUTATION_TYPES.CHANGE_CURRENT_INDEX]: (state, currentIndex: number) => {
|
|
state.currentIndex = currentIndex
|
|
},
|
|
[MUTATION_TYPES.CHANGE_MEDIA_LIST]: (state, mediaList: Array<Entity.Attachment>) => {
|
|
state.mediaList = mediaList
|
|
},
|
|
[MUTATION_TYPES.INCREMENT_INDEX]: state => {
|
|
state.currentIndex++
|
|
},
|
|
[MUTATION_TYPES.DECREMENT_INDEX]: state => {
|
|
state.currentIndex--
|
|
},
|
|
[MUTATION_TYPES.CHANGE_LOADING]: (state, value: boolean) => {
|
|
state.loading = value
|
|
}
|
|
}
|
|
|
|
export const ACTION_TYPES = {
|
|
OPEN_MODAL: 'openModal',
|
|
CLOSE_MODAL: 'closeModal',
|
|
INCREMENT_INDEX: 'incrementIndex',
|
|
DECREMENT_INDEX: 'decrementIndex',
|
|
LOADED: 'loaded'
|
|
}
|
|
|
|
const actions: ActionTree<ImageViewerState, RootState> = {
|
|
[ACTION_TYPES.OPEN_MODAL]: ({ commit }, { currentIndex, mediaList }) => {
|
|
commit(MUTATION_TYPES.CHANGE_MODAL, true)
|
|
commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, currentIndex as number)
|
|
commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, mediaList as Array<Entity.Attachment>)
|
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
|
},
|
|
[ACTION_TYPES.CLOSE_MODAL]: ({ commit }) => {
|
|
commit(MUTATION_TYPES.CHANGE_MODAL, false)
|
|
commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, -1)
|
|
commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, [])
|
|
commit(MUTATION_TYPES.CHANGE_LOADING, false)
|
|
},
|
|
[ACTION_TYPES.INCREMENT_INDEX]: ({ commit }) => {
|
|
commit(MUTATION_TYPES.INCREMENT_INDEX)
|
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
|
},
|
|
[ACTION_TYPES.DECREMENT_INDEX]: ({ commit }) => {
|
|
commit(MUTATION_TYPES.DECREMENT_INDEX)
|
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
|
},
|
|
[ACTION_TYPES.LOADED]: ({ commit }) => {
|
|
commit(MUTATION_TYPES.CHANGE_LOADING, false)
|
|
}
|
|
}
|
|
|
|
const getters: GetterTree<ImageViewerState, RootState> = {
|
|
imageURL: (state): string | null => {
|
|
if (state.currentIndex >= 0) {
|
|
return state.mediaList[state.currentIndex].url
|
|
}
|
|
return null
|
|
},
|
|
imageType: (state): string | null => {
|
|
if (state.currentIndex >= 0) {
|
|
return state.mediaList[state.currentIndex].type
|
|
}
|
|
return null
|
|
},
|
|
showLeft: (state): boolean => {
|
|
const notFirst = state.currentIndex > 0
|
|
const isManyItem = state.mediaList.length > 1
|
|
return notFirst && isManyItem
|
|
},
|
|
showRight: (state): boolean => {
|
|
const notLast = state.currentIndex < state.mediaList.length - 1
|
|
const isManyItem = state.mediaList.length > 1
|
|
return notLast && isManyItem
|
|
}
|
|
}
|
|
|
|
const ImageViewer: Module<ImageViewerState, RootState> = {
|
|
namespaced: true,
|
|
state: state,
|
|
mutations: mutations,
|
|
actions: actions,
|
|
getters: getters
|
|
}
|
|
|
|
export default ImageViewer
|