Cache inner width and height
parent
bf11924dfd
commit
d11e463203
|
@ -255,7 +255,7 @@ export default class App extends Mixins(GlobalMixin, UserConfig) {
|
||||||
|
|
||||||
linkClick() {
|
linkClick() {
|
||||||
const nav: any = this.$refs.nav;
|
const nav: any = this.$refs.nav;
|
||||||
if (window.innerWidth <= 1024) nav?.toggleNavigation(false);
|
if (globalThis.windowInnerWidth <= 1024) nav?.toggleNavigation(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
doRouteChecks() {
|
doRouteChecks() {
|
||||||
|
|
|
@ -320,7 +320,7 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
const fontSizePx = parseFloat(
|
const fontSizePx = parseFloat(
|
||||||
getComputedStyle(this.$refs.cursorSt as any).fontSize
|
getComputedStyle(this.$refs.cursorSt as any).fontSize
|
||||||
);
|
);
|
||||||
const minGap = fontSizePx + (window.innerWidth <= 768 ? 5 : 2);
|
const minGap = fontSizePx + (globalThis.windowInnerWidth <= 768 ? 5 : 2);
|
||||||
let prevShow = -9999;
|
let prevShow = -9999;
|
||||||
for (const [idx, tick] of this.ticks.entries()) {
|
for (const [idx, tick] of this.ticks.entries()) {
|
||||||
// Conservative
|
// Conservative
|
||||||
|
|
|
@ -364,12 +364,13 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
|
||||||
|
|
||||||
// Scroll if at top or bottom
|
// Scroll if at top or bottom
|
||||||
const scrollUp = touch.clientY > 50 && touch.clientY < 110; // 50 topbar
|
const scrollUp = touch.clientY > 50 && touch.clientY < 110; // 50 topbar
|
||||||
const scrollDown = touch.clientY > window.innerHeight - 60;
|
const scrollDown = touch.clientY > globalThis.windowInnerHeight - 60;
|
||||||
if (scrollUp || scrollDown) {
|
if (scrollUp || scrollDown) {
|
||||||
if (scrollUp) {
|
if (scrollUp) {
|
||||||
this.touchScrollDelta = (-1 * (110 - touch.clientY)) / 3;
|
this.touchScrollDelta = (-1 * (110 - touch.clientY)) / 3;
|
||||||
} else {
|
} else {
|
||||||
this.touchScrollDelta = (touch.clientY - window.innerHeight + 60) / 3;
|
this.touchScrollDelta =
|
||||||
|
(touch.clientY - globalThis.windowInnerHeight + 60) / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.touchAnchor && !this.touchScrollInterval) {
|
if (this.touchAnchor && !this.touchScrollInterval) {
|
||||||
|
|
|
@ -313,11 +313,11 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
||||||
}
|
}
|
||||||
|
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return window.innerWidth <= 768;
|
return globalThis.windowInnerWidth <= 768;
|
||||||
}
|
}
|
||||||
|
|
||||||
isMobileLayout() {
|
isMobileLayout() {
|
||||||
return window.innerWidth <= 600;
|
return globalThis.windowInnerWidth <= 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
get isMonthView() {
|
get isMonthView() {
|
||||||
|
@ -378,6 +378,11 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
||||||
|
|
||||||
/** Do resize after some time */
|
/** Do resize after some time */
|
||||||
handleResizeWithDelay() {
|
handleResizeWithDelay() {
|
||||||
|
// Update global vars
|
||||||
|
globalThis.windowInnerWidth = window.innerWidth;
|
||||||
|
globalThis.windowInnerHeight = window.innerHeight;
|
||||||
|
|
||||||
|
// Reflow after timer
|
||||||
if (this.resizeTimer) {
|
if (this.resizeTimer) {
|
||||||
clearTimeout(this.resizeTimer);
|
clearTimeout(this.resizeTimer);
|
||||||
}
|
}
|
||||||
|
|
|
@ -212,7 +212,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
|
||||||
if (this.canShare) base++;
|
if (this.canShare) base++;
|
||||||
if (this.canEdit) base++;
|
if (this.canEdit) base++;
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
if (globalThis.windowInnerWidth < 768) {
|
||||||
return Math.min(base, 3);
|
return Math.min(base, 3);
|
||||||
} else {
|
} else {
|
||||||
return Math.min(base, 5);
|
return Math.min(base, 5);
|
||||||
|
@ -317,8 +317,8 @@ export default class Viewer extends Mixins(GlobalMixin) {
|
||||||
const sidebarWidth = this.sidebarOpen ? this.sidebarWidth : 0;
|
const sidebarWidth = this.sidebarOpen ? this.sidebarWidth : 0;
|
||||||
this.outerWidth = `calc(100vw - ${sidebarWidth}px)`;
|
this.outerWidth = `calc(100vw - ${sidebarWidth}px)`;
|
||||||
return {
|
return {
|
||||||
x: window.innerWidth - sidebarWidth,
|
x: globalThis.windowInnerWidth - sidebarWidth,
|
||||||
y: window.innerHeight,
|
y: globalThis.windowInnerHeight,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
...args,
|
...args,
|
||||||
|
@ -556,7 +556,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
|
||||||
const thumb = this.thumbElem(e.slide.data?.photo);
|
const thumb = this.thumbElem(e.slide.data?.photo);
|
||||||
if (thumb && this.fullyOpened) {
|
if (thumb && this.fullyOpened) {
|
||||||
const rect = thumb.getBoundingClientRect();
|
const rect = thumb.getBoundingClientRect();
|
||||||
if (rect.bottom < 50 || rect.top > window.innerHeight - 50) {
|
if (rect.bottom < 50 || rect.top > globalThis.windowInnerHeight - 50) {
|
||||||
thumb.scrollIntoView({
|
thumb.scrollIntoView({
|
||||||
block: "center",
|
block: "center",
|
||||||
});
|
});
|
||||||
|
|
|
@ -147,7 +147,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
|
||||||
// Choose preview photo
|
// Choose preview photo
|
||||||
for (const year of this.years) {
|
for (const year of this.years) {
|
||||||
// Try to prioritize landscape photos on desktop
|
// Try to prioritize landscape photos on desktop
|
||||||
if (window.innerWidth <= 600) {
|
if (globalThis.windowInnerWidth <= 600) {
|
||||||
const landscape = year.photos.filter((p) => p.w > p.h);
|
const landscape = year.photos.filter((p) => p.w > p.h);
|
||||||
year.preview = utils.randomChoice(landscape);
|
year.preview = utils.randomChoice(landscape);
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,9 +41,15 @@ declare global {
|
||||||
var currentViewerPhoto: IPhoto;
|
var currentViewerPhoto: IPhoto;
|
||||||
|
|
||||||
var touchingPhoto: boolean;
|
var touchingPhoto: boolean;
|
||||||
|
var windowInnerWidth: number; // cache
|
||||||
|
var windowInnerHeight: number; // cache
|
||||||
}
|
}
|
||||||
|
|
||||||
globalThis.vuerouter = router;
|
globalThis.vuerouter = router;
|
||||||
|
|
||||||
globalThis.touchingPhoto = false;
|
globalThis.touchingPhoto = false;
|
||||||
|
globalThis.windowInnerWidth = window.innerWidth;
|
||||||
|
globalThis.windowInnerHeight = window.innerHeight;
|
||||||
|
|
||||||
Vue.use(VueVirtualScroller);
|
Vue.use(VueVirtualScroller);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue