akkoma-fe/src/modules/interface.js

200 lines
5.8 KiB
JavaScript
Raw Normal View History

2018-09-09 16:36:13 +00:00
const defaultState = {
2020-05-03 14:36:12 +00:00
settingsModalState: 'hidden',
settingsModalLoaded: false,
settingsModalTargetTab: null,
modModalState: 'hidden',
modModalLoaded: false,
modModalTargetTab: null,
2018-09-09 16:36:13 +00:00
settings: {
currentSaveStateNotice: null,
2018-12-13 11:04:09 +00:00
noticeClearTimeout: null,
notificationPermission: null
},
browserSupport: {
cssFilter: window.CSS && window.CSS.supports && (
window.CSS.supports('filter', 'drop-shadow(0 0)') ||
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
2019-03-03 14:33:40 +00:00
},
layoutType: 'normal',
2020-05-07 13:10:53 +00:00
globalNotices: [],
layoutHeight: 0,
lastTimeline: null
2018-09-09 16:36:13 +00:00
}
const interfaceMod = {
state: defaultState,
mutations: {
settingsSaved (state, { success, error }) {
if (success) {
if (state.noticeClearTimeout) {
clearTimeout(state.noticeClearTimeout)
}
2021-04-25 10:24:08 +00:00
state.settings.currentSaveStateNotice = { error: false, data: success }
state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
2018-09-09 16:36:13 +00:00
} else {
2021-04-25 10:24:08 +00:00
state.settings.currentSaveStateNotice = { error: true, errorData: error }
2018-09-09 16:36:13 +00:00
}
2018-12-13 11:04:09 +00:00
},
setNotificationPermission (state, permission) {
state.notificationPermission = permission
2019-03-03 14:33:40 +00:00
},
setLayoutType (state, value) {
state.layoutType = value
2020-05-03 14:36:12 +00:00
},
closeSettingsModal (state) {
state.settingsModalState = 'hidden'
},
togglePeekSettingsModal (state) {
switch (state.settingsModalState) {
case 'minimized':
state.settingsModalState = 'visible'
return
case 'visible':
state.settingsModalState = 'minimized'
return
default:
throw new Error('Illegal minimization state of settings modal')
}
},
openSettingsModal (state) {
state.settingsModalState = 'visible'
if (!state.settingsModalLoaded) {
state.settingsModalLoaded = true
}
},
setSettingsModalTargetTab (state, value) {
state.settingsModalTargetTab = value
},
closeModModal (state) {
state.modModalState = 'hidden'
},
togglePeekModModal (state) {
switch (state.modModalState) {
case 'minimized':
state.modModalState = 'visible'
return
case 'visible':
state.modModalState = 'minimized'
return
default:
throw new Error('Illegal minimization state of mod modal')
}
},
openModModal (state) {
state.modModalState = 'visible'
if (!state.modModalLoaded) {
state.modModalLoaded = true
}
},
setModModalTargetTab (state, value) {
state.modModalTargetTab = value
},
pushGlobalNotice (state, notice) {
state.globalNotices.push(notice)
},
removeGlobalNotice (state, notice) {
state.globalNotices = state.globalNotices.filter(n => n !== notice)
2020-05-07 13:10:53 +00:00
},
setLayoutHeight (state, value) {
state.layoutHeight = value
},
setLayoutWidth (state, value) {
state.layoutWidth = value
},
setLastTimeline (state, value) {
state.lastTimeline = value
2018-09-09 16:36:13 +00:00
}
},
actions: {
2018-09-09 18:21:23 +00:00
setPageTitle ({ rootState }, option = '') {
document.title = `${option} ${rootState.instance.name}`
2018-09-09 16:36:13 +00:00
},
settingsSaved ({ commit, dispatch }, { success, error }) {
commit('settingsSaved', { success, error })
2018-12-13 11:04:09 +00:00
},
setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission)
2019-03-03 14:33:40 +00:00
},
2020-05-03 14:36:12 +00:00
closeSettingsModal ({ commit }) {
commit('closeSettingsModal')
},
openSettingsModal ({ commit }) {
commit('openSettingsModal')
},
togglePeekSettingsModal ({ commit }) {
commit('togglePeekSettingsModal')
},
clearSettingsModalTargetTab ({ commit }) {
commit('setSettingsModalTargetTab', null)
},
openSettingsModalTab ({ commit }, value) {
commit('setSettingsModalTargetTab', value)
commit('openSettingsModal')
},
closeModModal ({ commit }) {
commit('closeModModal')
},
openModModal ({ commit }) {
commit('openModModal')
},
togglePeekModModal ({ commit }) {
commit('togglePeekModModal')
},
clearModModalTargetTab ({ commit }) {
commit('setModModalTargetTab', null)
},
pushGlobalNotice (
{ commit, dispatch, state },
{
messageKey,
messageArgs = {},
level = 'error',
timeout = 0
}) {
const notice = {
messageKey,
messageArgs,
level
}
commit('pushGlobalNotice', notice)
// Adding a new element to array wraps it in a Proxy, which breaks the comparison
// TODO: Generate UUID or something instead or relying on !== operator?
const newNotice = state.globalNotices[state.globalNotices.length - 1]
if (timeout) {
setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
}
return newNotice
},
removeGlobalNotice ({ commit }, notice) {
commit('removeGlobalNotice', notice)
2020-05-07 13:10:53 +00:00
},
setLayoutHeight ({ commit }, value) {
commit('setLayoutHeight', value)
},
// value is optional, assuming it was cached prior
2022-05-09 20:24:35 +00:00
setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
let width = value
if (value !== undefined) {
commit('setLayoutWidth', value)
} else {
width = state.layoutWidth
}
const mobileLayout = width <= 800
const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
const { thirdColumnMode } = rootGetters.mergedConfig
2022-05-09 20:24:35 +00:00
if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
commit('setLayoutType', normalOrMobile)
} else {
const wideLayout = width >= 1280
commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
}
},
setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value)
2018-09-09 16:36:13 +00:00
}
}
}
export default interfaceMod