2016-10-28 01:01:48 +09:00
|
|
|
import UserPanel from './components/user_panel/user_panel.vue'
|
2016-11-07 04:11:23 +09:00
|
|
|
import NavPanel from './components/nav_panel/nav_panel.vue'
|
2016-11-28 03:44:56 +09:00
|
|
|
import Notifications from './components/notifications/notifications.vue'
|
2019-07-16 01:42:27 +09:00
|
|
|
import SearchBar from './components/search_bar/search_bar.vue'
|
2018-02-04 00:27:33 +09:00
|
|
|
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
2018-09-03 15:57:22 +09:00
|
|
|
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
2018-09-03 14:43:10 +09:00
|
|
|
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
2018-01-26 23:11:34 +09:00
|
|
|
import ChatPanel from './components/chat_panel/chat_panel.vue'
|
2019-01-15 02:23:13 +09:00
|
|
|
import MediaModal from './components/media_modal/media_modal.vue'
|
2018-12-16 02:13:01 +09:00
|
|
|
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
2019-09-20 02:59:34 +09:00
|
|
|
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
|
2019-03-13 06:50:54 +09:00
|
|
|
import MobileNav from './components/mobile_nav/mobile_nav.vue'
|
2019-03-19 17:53:11 +09:00
|
|
|
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
|
2019-09-20 02:27:37 +09:00
|
|
|
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
|
2019-04-02 04:41:34 +09:00
|
|
|
import { windowWidth } from './services/window_utils/window_utils'
|
2016-10-27 02:03:55 +09:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'app',
|
|
|
|
components: {
|
2016-11-07 04:11:23 +09:00
|
|
|
UserPanel,
|
2016-11-28 03:44:56 +09:00
|
|
|
NavPanel,
|
2017-05-13 01:54:12 +09:00
|
|
|
Notifications,
|
2019-07-16 01:42:27 +09:00
|
|
|
SearchBar,
|
2018-02-11 23:12:05 +09:00
|
|
|
InstanceSpecificPanel,
|
2018-09-03 15:57:22 +09:00
|
|
|
FeaturesPanel,
|
2018-09-03 14:55:40 +09:00
|
|
|
WhoToFollowPanel,
|
2018-12-16 02:13:01 +09:00
|
|
|
ChatPanel,
|
2019-01-15 02:23:13 +09:00
|
|
|
MediaModal,
|
2019-03-12 01:51:37 +09:00
|
|
|
SideDrawer,
|
2019-09-20 02:59:34 +09:00
|
|
|
MobilePostStatusButton,
|
2019-03-19 17:53:11 +09:00
|
|
|
MobileNav,
|
2019-09-20 02:27:37 +09:00
|
|
|
UserReportingModal,
|
|
|
|
PostStatusModal
|
2016-11-04 00:58:32 +09:00
|
|
|
},
|
2017-01-18 01:27:39 +09:00
|
|
|
data: () => ({
|
2018-08-31 10:06:00 +09:00
|
|
|
mobileActivePanel: 'timeline',
|
2019-07-16 01:42:27 +09:00
|
|
|
searchBarHidden: true,
|
2018-08-31 10:06:00 +09:00
|
|
|
supportsMask: window.CSS && window.CSS.supports && (
|
|
|
|
window.CSS.supports('mask-size', 'contain') ||
|
|
|
|
window.CSS.supports('-webkit-mask-size', 'contain') ||
|
|
|
|
window.CSS.supports('-moz-mask-size', 'contain') ||
|
|
|
|
window.CSS.supports('-ms-mask-size', 'contain') ||
|
|
|
|
window.CSS.supports('-o-mask-size', 'contain')
|
2019-04-30 03:37:08 +09:00
|
|
|
)
|
2017-01-18 01:27:39 +09:00
|
|
|
}),
|
2018-08-25 19:12:33 +09:00
|
|
|
created () {
|
|
|
|
// Load the locale from the storage
|
2019-10-07 05:28:30 +09:00
|
|
|
this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
|
2019-03-03 23:33:40 +09:00
|
|
|
window.addEventListener('resize', this.updateMobileState)
|
|
|
|
},
|
|
|
|
destroyed () {
|
|
|
|
window.removeEventListener('resize', this.updateMobileState)
|
2018-08-25 19:12:33 +09:00
|
|
|
},
|
2016-11-04 00:58:32 +09:00
|
|
|
computed: {
|
2016-11-28 03:44:56 +09:00
|
|
|
currentUser () { return this.$store.state.users.currentUser },
|
2017-02-17 00:59:06 +09:00
|
|
|
background () {
|
2018-09-10 04:02:22 +09:00
|
|
|
return this.currentUser.background_image || this.$store.state.instance.background
|
2017-02-17 00:59:06 +09:00
|
|
|
},
|
2018-09-10 04:02:22 +09:00
|
|
|
enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
|
2018-08-31 10:06:00 +09:00
|
|
|
logoStyle () {
|
|
|
|
return {
|
|
|
|
'visibility': this.enableMask ? 'hidden' : 'visible'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
logoMaskStyle () {
|
|
|
|
return this.enableMask ? {
|
2018-09-10 04:02:22 +09:00
|
|
|
'mask-image': `url(${this.$store.state.instance.logo})`
|
2018-08-31 10:06:00 +09:00
|
|
|
} : {
|
|
|
|
'background-color': this.enableMask ? '' : 'transparent'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
logoBgStyle () {
|
|
|
|
return Object.assign({
|
2018-12-03 13:49:14 +09:00
|
|
|
'margin': `${this.$store.state.instance.logoMargin} 0`,
|
2019-07-16 01:42:27 +09:00
|
|
|
opacity: this.searchBarHidden ? 1 : 0
|
2018-08-31 10:06:00 +09:00
|
|
|
}, this.enableMask ? {} : {
|
|
|
|
'background-color': this.enableMask ? '' : 'transparent'
|
|
|
|
})
|
|
|
|
},
|
2018-09-10 04:02:22 +09:00
|
|
|
logo () { return this.$store.state.instance.logo },
|
2019-02-04 05:32:24 +09:00
|
|
|
bgStyle () {
|
2018-11-15 01:39:17 +09:00
|
|
|
return {
|
|
|
|
'background-image': `url(${this.background})`
|
|
|
|
}
|
|
|
|
},
|
2019-02-15 21:20:52 +09:00
|
|
|
bgAppStyle () {
|
|
|
|
return {
|
|
|
|
'--body-background-image': `url(${this.background})`
|
|
|
|
}
|
|
|
|
},
|
2018-09-10 03:21:23 +09:00
|
|
|
sitename () { return this.$store.state.instance.name },
|
2018-02-04 08:36:10 +09:00
|
|
|
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
2019-12-02 09:34:01 +09:00
|
|
|
hideSitename () { return this.$store.state.instance.hideSitename },
|
2018-09-10 03:21:23 +09:00
|
|
|
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
2019-08-13 03:29:11 +09:00
|
|
|
showInstanceSpecificPanel () {
|
|
|
|
return this.$store.state.instance.showInstanceSpecificPanel &&
|
2019-10-07 05:28:30 +09:00
|
|
|
!this.$store.getters.mergedConfig.hideISP &&
|
2019-08-13 03:29:11 +09:00
|
|
|
this.$store.state.instance.instanceSpecificPanelContent
|
|
|
|
},
|
2019-03-03 23:33:40 +09:00
|
|
|
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
|
2019-11-12 05:25:38 +09:00
|
|
|
isMobileLayout () { return this.$store.state.interface.mobileLayout },
|
|
|
|
privateMode () { return this.$store.state.instance.private }
|
2017-01-18 01:27:39 +09:00
|
|
|
},
|
|
|
|
methods: {
|
2017-02-19 05:55:16 +09:00
|
|
|
scrollToTop () {
|
|
|
|
window.scrollTo(0, 0)
|
2017-07-02 19:25:34 +09:00
|
|
|
},
|
|
|
|
logout () {
|
2018-11-10 18:43:25 +09:00
|
|
|
this.$router.replace('/main/public')
|
2017-07-02 19:25:34 +09:00
|
|
|
this.$store.dispatch('logout')
|
2018-12-03 13:49:14 +09:00
|
|
|
},
|
2019-07-16 01:42:27 +09:00
|
|
|
onSearchBarToggled (hidden) {
|
|
|
|
this.searchBarHidden = hidden
|
2018-12-16 02:13:01 +09:00
|
|
|
},
|
2019-03-03 23:33:40 +09:00
|
|
|
updateMobileState () {
|
2019-04-02 04:41:34 +09:00
|
|
|
const mobileLayout = windowWidth() <= 800
|
|
|
|
const changed = mobileLayout !== this.isMobileLayout
|
2019-03-03 23:33:40 +09:00
|
|
|
if (changed) {
|
2019-04-02 04:41:34 +09:00
|
|
|
this.$store.dispatch('setMobileLayout', mobileLayout)
|
2019-03-03 23:33:40 +09:00
|
|
|
}
|
2017-01-18 01:27:39 +09:00
|
|
|
}
|
2016-10-27 02:03:55 +09:00
|
|
|
}
|
|
|
|
}
|