qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support of tablet device in ResizeHandler

Browse source
This commit is contained in:
Angelina Filippova 2020-02-17 17:02:40 +03:00
parent 436934109a
commit e697d7eadf
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/views/layout/mixin/ResizeHandler.js
View file

@ -1,8 +1,9 @@
import store from '@/store' import store from '@/store'
const { body } = document const { body } = document
const WIDTH = 1024 const mobileWidth = 480
const RATIO = 3 const tabletWidth = 801
const ratio = 3
export default { export default {
watch: { watch: {
@ -17,23 +18,31 @@ export default {
}, },
mounted() { mounted() {
const isMobile = this.isMobile() const isMobile = this.isMobile()
if (isMobile) { const isTablet = this.isTablet()
store.dispatch('toggleDevice', 'mobile') if (isMobile || isTablet) {
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
store.dispatch('closeSideBar', { withoutAnimation: true }) store.dispatch('closeSideBar', { withoutAnimation: true })
} }
}, },
methods: { methods: {
isMobile() { isMobile() {
const rect = body.getBoundingClientRect() const rect = body.getBoundingClientRect()
return rect.width - RATIO < WIDTH return rect.width - ratio < mobileWidth
},
isTablet() {
const rect = body.getBoundingClientRect()
return rect.width - ratio < tabletWidth && rect.width - ratio > mobileWidth
}, },
resizeHandler() { resizeHandler() {
if (!document.hidden) { if (!document.hidden) {
const isMobile = this.isMobile() const isMobile = this.isMobile()
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop') const isTablet = this.isTablet()
if (isMobile) { if (isMobile || isTablet) {
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
store.dispatch('closeSideBar', { withoutAnimation: true }) store.dispatch('closeSideBar', { withoutAnimation: true })
} else {
store.dispatch('toggleDevice', 'desktop')
} }
} }
} }