vuepress-theme-reco/components/Common.vue

306 lines
7.3 KiB
Vue
Raw Normal View History

2019-04-15 10:35:40 +08:00
<template>
<div
class="theme-container"
:class="pageClasses"
@touchstart="onTouchStart"
@touchend="onTouchEnd">
2019-12-15 13:19:22 +08:00
<div v-if="!absoluteEncryption">
<transition name="fade">
<LoadingPage v-show="firstLoad" class="loading-wrapper" />
</transition>
<transition name="fade">
<Password v-show="!isHasKey" class="password-wrapper-out" key="out" />
</transition>
<div :class="{ 'hide': firstLoad || !isHasKey }">
<Navbar
v-if="shouldShowNavbar"
@toggle-sidebar="toggleSidebar"/>
<div
class="sidebar-mask"
@click="toggleSidebar(false)"></div>
<Sidebar
:items="sidebarItems"
@toggle-sidebar="toggleSidebar">
<slot
name="sidebar-top"
slot="top"/>
<slot
name="sidebar-bottom"
slot="bottom"/>
</Sidebar>
<Password v-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
<div :class="{ 'hide': !isHasPageKey }">
<slot></slot>
2020-03-15 15:35:10 +08:00
<ModuleTransition delay=".48">
<Comments v-show="recoShowModule" :isShowComments="shouldShowComments"/>
</ModuleTransition>
</div>
2019-11-09 02:05:06 +08:00
</div>
</div>
2019-12-15 13:19:22 +08:00
<div v-else>
<transition name="fade">
<LoadingPage v-if="firstLoad" />
<Password v-else-if="!isHasKey" />
<div v-else>
<Navbar
v-if="shouldShowNavbar"
@toggle-sidebar="toggleSidebar"/>
<div
class="sidebar-mask"
@click="toggleSidebar(false)"></div>
<Sidebar
:items="sidebarItems"
@toggle-sidebar="toggleSidebar">
<slot
name="sidebar-top"
slot="top"/>
<slot
name="sidebar-bottom"
slot="bottom"/>
</Sidebar>
<Password v-if="!isHasPageKey" :isPage="true"></Password>
<div v-else>
<slot></slot>
2020-03-15 15:35:10 +08:00
<ModuleTransition delay=".48">
<Comments v-show="recoShowModule" :isShowComments="shouldShowComments"/>
</ModuleTransition>
2019-12-15 13:19:22 +08:00
</div>
</div>
</transition>
</div>
2019-04-15 10:35:40 +08:00
</div>
</template>
<script>
2019-12-31 11:32:29 +08:00
import md5 from 'md5'
import Navbar from '@theme/components/Navbar'
import Sidebar from '@theme/components/Sidebar'
import { resolveSidebarItems } from '@theme/helpers/utils'
2019-04-15 10:35:40 +08:00
import Password from '@theme/components/Password'
2019-09-20 13:54:13 +08:00
import { setTimeout } from 'timers'
2020-03-15 15:35:10 +08:00
import ModuleTransition from '@theme/components/ModuleTransition'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
2019-04-15 10:35:40 +08:00
export default {
2020-03-15 15:35:10 +08:00
mixins: [moduleTransitonMixin],
components: { Sidebar, Navbar, Password, ModuleTransition },
2019-04-15 10:35:40 +08:00
props: {
sidebar: {
type: Boolean,
2019-10-26 21:51:20 +08:00
default: true
},
isComment: {
type: Boolean,
default: true
}
},
2019-04-15 10:35:40 +08:00
data () {
return {
isSidebarOpen: false,
isHasKey: true,
2019-05-05 11:18:15 +08:00
isHasPageKey: true,
2019-09-01 23:25:12 +08:00
firstLoad: true
2019-04-15 10:35:40 +08:00
}
},
computed: {
2019-11-24 16:06:16 +08:00
absoluteEncryption () {
return this.$themeConfig.keyPage && this.$themeConfig.keyPage.absoluteEncryption === true
},
// 是否显示评论
2019-10-26 01:42:44 +08:00
shouldShowComments () {
const { isShowComments, home } = this.$frontmatter
2019-10-26 01:42:44 +08:00
return !(
this.isComment == false ||
isShowComments == false ||
home == true
)
},
2019-10-26 01:42:44 +08:00
2019-04-15 10:35:40 +08:00
shouldShowNavbar () {
const { themeConfig } = this.$site
const { frontmatter } = this.$page
2019-10-26 01:42:44 +08:00
2019-04-15 10:35:40 +08:00
if (
2019-09-20 13:54:13 +08:00
frontmatter.navbar === false ||
2019-10-26 01:42:44 +08:00
themeConfig.navbar === false
) return false
2019-04-15 10:35:40 +08:00
return (
2019-09-20 13:54:13 +08:00
this.$title ||
themeConfig.logo ||
themeConfig.repo ||
themeConfig.nav ||
this.$themeLocaleConfig.nav
2019-04-15 10:35:40 +08:00
)
},
shouldShowSidebar () {
const { frontmatter } = this.$page
return (
2019-09-20 13:54:13 +08:00
this.sidebar !== false &&
!frontmatter.home &&
frontmatter.sidebar !== false &&
this.sidebarItems.length
2019-04-15 10:35:40 +08:00
)
},
sidebarItems () {
return resolveSidebarItems(
this.$page,
this.$page.regularPath,
this.$site,
this.$localePath
)
},
pageClasses () {
2019-07-20 19:00:36 +08:00
const userPageClass = this.$frontmatter.pageClass
2019-04-15 10:35:40 +08:00
return [
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
2019-09-01 22:03:39 +08:00
'no-sidebar': !this.shouldShowSidebar
2019-04-15 10:35:40 +08:00
},
userPageClass
]
}
},
mounted () {
this.$router.afterEach(() => {
this.isSidebarOpen = false
})
2019-05-05 11:18:15 +08:00
this.hasKey()
this.hasPageKey()
2019-09-01 23:25:12 +08:00
this.handleLoading()
2019-04-15 10:35:40 +08:00
},
methods: {
2019-05-05 11:18:15 +08:00
hasKey () {
2019-05-08 15:13:18 +08:00
const keyPage = this.$themeConfig.keyPage
2019-12-31 11:32:29 +08:00
if (!keyPage || !keyPage.keys || keyPage.keys.length === 0) {
2019-09-20 13:54:13 +08:00
this.isHasKey = true
2019-05-05 11:18:15 +08:00
return
}
2019-12-31 11:32:29 +08:00
let { keys } = keyPage
keys = keys.map(item => md5(item))
2019-05-05 11:18:15 +08:00
this.isHasKey = keys && keys.indexOf(sessionStorage.getItem('key')) > -1
},
hasPageKey () {
2019-12-31 11:32:29 +08:00
let pageKeys = this.$frontmatter.keys
if (!pageKeys || pageKeys.length === 0) {
2019-09-20 13:54:13 +08:00
this.isHasPageKey = true
2019-05-05 11:18:15 +08:00
return
}
2019-12-31 11:32:29 +08:00
pageKeys = pageKeys.map(item => md5(item))
this.isHasPageKey = pageKeys.indexOf(sessionStorage.getItem(`pageKey${window.location.pathname}`)) > -1
2019-05-05 11:18:15 +08:00
},
2019-04-15 10:35:40 +08:00
toggleSidebar (to) {
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
},
// side swipe
onTouchStart (e) {
this.touchStart = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
},
onTouchEnd (e) {
const dx = e.changedTouches[0].clientX - this.touchStart.x
const dy = e.changedTouches[0].clientY - this.touchStart.y
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
if (dx > 0 && this.touchStart.x <= 80) {
this.toggleSidebar(true)
} else {
this.toggleSidebar(false)
}
}
2019-09-01 23:25:12 +08:00
},
handleLoading () {
const time = this.$frontmatter.home && sessionStorage.getItem('firstLoad') == undefined ? 1000 : 0
setTimeout(() => {
this.firstLoad = false
if (sessionStorage.getItem('firstLoad') == undefined) sessionStorage.setItem('firstLoad', false)
}, time)
2019-04-15 10:35:40 +08:00
}
2019-07-20 18:50:45 +08:00
},
watch: {
$frontmatter (newVal, oldVal) {
2019-10-26 01:42:44 +08:00
this.hasKey()
this.hasPageKey()
2019-07-20 18:50:45 +08:00
}
2019-04-15 10:35:40 +08:00
}
}
</script>
2019-08-31 01:50:57 +08:00
<style lang="stylus" scoped>
2019-11-09 02:05:06 +08:00
.theme-container
.loading-wrapper
position absolute
z-index 22
top 0
bottom 0
left 0
right 0
margin auto
2019-11-13 15:32:33 +08:00
.password-wrapper-out
2019-11-09 02:05:06 +08:00
position absolute
z-index 21
top 0
bottom 0
left 0
right 0
margin auto
2019-11-13 15:32:33 +08:00
.password-wrapper-in
2019-11-09 02:05:06 +08:00
position absolute
z-index 8
top 0
bottom 0
left 0
right 0
.hide
height 100vh
overflow hidden
.theme-container.no-sidebar
.comments-wrapper
padding-left 2rem
.comments-wrapper
padding 2rem 2rem 2rem 22rem
max-width: 740px;
margin: 0 auto;
@media (max-width: $MQNarrow)
.theme-container.no-sidebar
.comments-wrapper
padding-left 2rem
.comments-wrapper
2019-10-20 01:22:59 +08:00
padding-left: 18.4rem;
@media (max-width: $MQMobile)
.comments-wrapper
padding-left: 2rem
2019-08-31 01:50:57 +08:00
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>