import Vue from "vue"; import { getSidebarItems } from "@theme/utils/sidebar"; import Navbar from "@theme/components/Navbar/Navbar.vue"; import Sidebar from "@theme/components/Sidebar/Sidebar.vue"; import throttle from "lodash.throttle"; export default Vue.extend({ name: "Common", components: { Navbar, Sidebar, }, props: { navbar: { type: Boolean, default: true }, sidebar: { type: Boolean, default: true }, }, data: () => ({ isSidebarOpen: false, hideNavbar: false, touchStart: { clientX: 0, clientY: 0, }, }), computed: { enableNavbar() { if (this.navbar === false) return false; const { frontmatter } = this.$page; if (frontmatter.navbar === false || this.$themeConfig.navbar === false) return false; return Boolean(this.$title || this.$themeConfig.logo || this.$themeConfig.repo || this.$themeConfig.nav || this.$themeLocaleConfig.nav); }, enableSidebar() { if (this.sidebar === false) return false; return (!this.$frontmatter.home && this.$frontmatter.sidebar !== false && this.sidebarItems.length !== 0); }, sidebarItems() { if (this.sidebar === false) return []; return getSidebarItems(this.$page, this.$site, this.$localePath); }, pageClasses() { const userPageClass = this.$page.frontmatter.pageClass; return [ { "has-navbar": this.enableNavbar, "has-sidebar": this.enableSidebar, "has-anchor": this.enableAnchor, "hide-navbar": this.hideNavbar, "sidebar-open": this.isSidebarOpen, }, userPageClass, ]; }, headers() { return this.getHeader(this.sidebarItems); }, enableAnchor() { return (this.$frontmatter.anchorDisplay || (this.$themeConfig.anchorDisplay !== false && this.$frontmatter.anchorDisplay !== false)); }, }, mounted() { let lastDistance = 0; this.$router.afterEach(() => { this.isSidebarOpen = false; }); window.addEventListener("scroll", throttle(() => { const distance = this.getScrollTop(); // scroll down if (lastDistance < distance && distance > 58) { if (!this.isSidebarOpen) this.hideNavbar = true; // scroll up } else this.hideNavbar = false; lastDistance = distance; }, 300)); }, methods: { /** Get scroll distance */ getScrollTop() { return (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); }, toggleSidebar(to) { this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen; this.$emit("toggle-sidebar", this.isSidebarOpen); }, // Side swipe onTouchStart(event) { this.touchStart = { clientX: event.changedTouches[0].clientX, clientY: event.changedTouches[0].clientY, }; }, onTouchEnd(event) { const dx = event.changedTouches[0].clientX - this.touchStart.clientX; const dy = event.changedTouches[0].clientY - this.touchStart.clientY; if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) if (dx > 0 && this.touchStart.clientX <= 80) this.toggleSidebar(true); else this.toggleSidebar(false); }, getHeader(items) { for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.type === "group") { const matching = this.getHeader(item.children); if (matching.length !== 0) return matching; } else if (item.type === "page" && item.headers && item.path === this.$route.path) return item.headers; } return []; }, }, }); //# sourceMappingURL=Common.js.map