sam/admin-fe
1
0
Fork 0
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'
const { body } = document
const WIDTH = 1024
const RATIO = 3
const mobileWidth = 480
const tabletWidth = 801
const ratio = 3
export default {
watch: {
@ -17,23 +18,31 @@ export default {
},
mounted() {
const isMobile = this.isMobile()
if (isMobile) {
store.dispatch('toggleDevice', 'mobile')
const isTablet = this.isTablet()
if (isMobile || isTablet) {
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
store.dispatch('closeSideBar', { withoutAnimation: true })
}
},
methods: {
isMobile() {
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() {
if (!document.hidden) {
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 })
} else {
store.dispatch('toggleDevice', 'desktop')
}
}
}