Sha256: 80f2c2ba50ccff7e112624c3dfd5e8eddd9a31f4cc1f966e8816e47b173fec41
Contents?: true
Size: 1.88 KB
Versions: 25
Compression:
Stored size: 1.88 KB
Contents
import { vueWindowSizeMixin } from 'vue-window-size'
export default {
mixins: [vueWindowSizeMixin],
computed: {
previewLeftPadding() {
return this.currentSection ? this.calculatePreviewLeftPadding() : 0
},
previewPaneMaxWidth() {
const sectionPaneWidth =
document.querySelector('.slide-pane')?.offsetWidth || 0
console.log('previewPaneMaxWidth', this.windowWidth, sectionPaneWidth)
return this.windowWidth - sectionPaneWidth
},
previewScaleRatio() {
if (!this.mustPreviewScale()) return 1
const sidebarWidth = document.querySelector(
'.content-area > aside',
).offsetWidth
const sectionPaneWidth = document.querySelector('.slide-pane').offsetWidth
return (
(this.windowWidth - sectionPaneWidth) /
(this.windowWidth - sidebarWidth)
)
},
hasEnoughWidthForTablet() {
return (
this.isTabletDevice &&
this.previewPaneMaxWidth > this.deviceWidthMap.tablet
)
},
hasEnoughWidthForMobile() {
return (
this.isMobileDevice &&
this.previewPaneMaxWidth > this.deviceWidthMap.mobile
)
},
},
methods: {
calculatePreviewLeftPadding() {
const sidebarWidth =
document.querySelector('.content-area > aside')?.offsetWidth || 0
const sectionPaneWidth =
document.querySelector('.slide-pane')?.offsetWidth || 0
return sectionPaneWidth - sidebarWidth
},
mustPreviewScale() {
// case: the section / block pane is not opened
if (!this.currentSection) return false
// case: there is enough width for the tablet viewport, no need to scale down
if (this.hasEnoughWidthForTablet) return false
// case: there is enough width for the mobile viewport, no need to scale down
if (this.hasEnoughWidthForMobile) return false
return true // desktop device
},
},
}
Version data entries
25 entries across 25 versions & 1 rubygems