refs #850 Replace ImageViewer with typescript
This commit is contained in:
parent
9670ee1dc8
commit
7c01aa877a
|
@ -1,5 +1,5 @@
|
||||||
import NewToot from './Modals/NewToot'
|
import NewToot from './Modals/NewToot'
|
||||||
import ImageViewer from './Modals/ImageViewer'
|
import ImageViewer, { ImageViewerState } from './Modals/ImageViewer'
|
||||||
import Jump, { JumpState } from './Modals/Jump'
|
import Jump, { JumpState } from './Modals/Jump'
|
||||||
import ListMembership from './Modals/ListMembership'
|
import ListMembership from './Modals/ListMembership'
|
||||||
import AddListMember, { AddListMemberState } from './Modals/AddListMember'
|
import AddListMember, { AddListMemberState } from './Modals/AddListMember'
|
||||||
|
@ -13,7 +13,8 @@ export interface ModalsState {}
|
||||||
|
|
||||||
export interface ModalsModuleState extends ModalsState {
|
export interface ModalsModuleState extends ModalsState {
|
||||||
Jump: JumpState,
|
Jump: JumpState,
|
||||||
AddListMember: AddListMemberState
|
AddListMember: AddListMemberState,
|
||||||
|
ImageViewer: ImageViewerState
|
||||||
}
|
}
|
||||||
|
|
||||||
const state = (): ModalsState => ({})
|
const state = (): ModalsState => ({})
|
||||||
|
|
|
@ -1,78 +0,0 @@
|
||||||
const ImageViewer = {
|
|
||||||
namespaced: true,
|
|
||||||
state: {
|
|
||||||
modalOpen: false,
|
|
||||||
currentIndex: -1,
|
|
||||||
mediaList: [],
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
changeModal (state, value) {
|
|
||||||
state.modalOpen = value
|
|
||||||
},
|
|
||||||
changeCurrentIndex (state, currentIndex) {
|
|
||||||
state.currentIndex = currentIndex
|
|
||||||
},
|
|
||||||
changeMedliaList (state, mediaList) {
|
|
||||||
state.mediaList = mediaList
|
|
||||||
},
|
|
||||||
incrementIndex (state) {
|
|
||||||
state.currentIndex++
|
|
||||||
},
|
|
||||||
decrementIndex (state) {
|
|
||||||
state.currentIndex--
|
|
||||||
},
|
|
||||||
loading (state, value) {
|
|
||||||
state.loading = value
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
openModal ({ commit }, { currentIndex, mediaList }) {
|
|
||||||
commit('changeModal', true)
|
|
||||||
commit('changeCurrentIndex', currentIndex)
|
|
||||||
commit('changeMedliaList', mediaList)
|
|
||||||
commit('loading', true)
|
|
||||||
},
|
|
||||||
closeModal ({ commit }) {
|
|
||||||
commit('changeModal', false)
|
|
||||||
commit('changeCurrentIndex', -1)
|
|
||||||
commit('changeMedliaList', [])
|
|
||||||
commit('loading', false)
|
|
||||||
},
|
|
||||||
incrementIndex ({ commit }) {
|
|
||||||
commit('incrementIndex')
|
|
||||||
commit('loading', true)
|
|
||||||
},
|
|
||||||
decrementIndex ({ commit }) {
|
|
||||||
commit('decrementIndex')
|
|
||||||
commit('loading', true)
|
|
||||||
},
|
|
||||||
async loaded ({ commit }) {
|
|
||||||
commit('loading', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
imageURL (state) {
|
|
||||||
if (state.currentIndex >= 0) {
|
|
||||||
return state.mediaList[state.currentIndex].url
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imageType (state) {
|
|
||||||
if (state.currentIndex >= 0) {
|
|
||||||
return state.mediaList[state.currentIndex].type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showLeft (state) {
|
|
||||||
const notFirst = (state.currentIndex > 0)
|
|
||||||
const isManyItem = (state.mediaList.length > 1)
|
|
||||||
return (notFirst && isManyItem)
|
|
||||||
},
|
|
||||||
showRight (state) {
|
|
||||||
const notLast = (state.currentIndex < (state.mediaList.length - 1))
|
|
||||||
const isManyItem = (state.mediaList.length > 1)
|
|
||||||
return (notLast && isManyItem)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ImageViewer
|
|
|
@ -0,0 +1,108 @@
|
||||||
|
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
|
||||||
|
import { Attachment } from 'megalodon'
|
||||||
|
import { RootState } from '@/store';
|
||||||
|
|
||||||
|
export interface ImageViewerState {
|
||||||
|
modalOpen: boolean,
|
||||||
|
currentIndex: number,
|
||||||
|
mediaList: Array<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<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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions: ActionTree<ImageViewerState, RootState> = {
|
||||||
|
openModal: ({ 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<Attachment>)
|
||||||
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
||||||
|
},
|
||||||
|
closeModal: ({ 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)
|
||||||
|
},
|
||||||
|
incrementIndex: ({ commit }) => {
|
||||||
|
commit(MUTATION_TYPES.INCREMENT_INDEX)
|
||||||
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
||||||
|
},
|
||||||
|
decrementIndex: ({ commit }) => {
|
||||||
|
commit(MUTATION_TYPES.DECREMENT_INDEX)
|
||||||
|
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
||||||
|
},
|
||||||
|
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
|
Loading…
Reference in New Issue