Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-02-07 04:43:52 +01:00
Code Issues Releases Wiki Activity

refs #850 Replace ImageViewer with typescript

Browse Source
This commit is contained in:
AkiraFukushima 2019-04-10 21:18:22 +09:00
parent 9670ee1dc8
commit 7c01aa877a
3 changed files with 111 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/store/TimelineSpace/Modals.ts
View File

@ -1,5 +1,5 @@
import NewToot from './Modals/NewToot'
import ImageViewer from './Modals/ImageViewer'
import ImageViewer, { ImageViewerState } from './Modals/ImageViewer'
import Jump, { JumpState } from './Modals/Jump'
import ListMembership from './Modals/ListMembership'
import AddListMember, { AddListMemberState } from './Modals/AddListMember'
@ -13,7 +13,8 @@ export interface ModalsState {}
export interface ModalsModuleState extends ModalsState {
Jump: JumpState,
AddListMember: AddListMemberState
AddListMember: AddListMemberState,
ImageViewer: ImageViewerState
}
const state = (): ModalsState => ({})

78
src/renderer/store/TimelineSpace/Modals/ImageViewer.js
View File

@ -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

108
src/renderer/store/TimelineSpace/Modals/ImageViewer.ts Normal file
View File

@ -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