85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<transition name="sw-update-popup">
|
|
<div
|
|
v-if="enabled"
|
|
class="sw-update-popup"
|
|
>
|
|
{{message}}<br>
|
|
<button @click="reload">{{buttonText}}</button>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
updateEvent: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
popupConfig () {
|
|
for (const config of [this.$themeLocaleConfig, this.$site.themeConfig]) {
|
|
const sw = config.serviceWorker
|
|
if (sw && sw.updatePopup) {
|
|
return typeof sw.updatePopup === 'object' ? sw.updatePopup : {}
|
|
}
|
|
}
|
|
return null
|
|
},
|
|
|
|
enabled () {
|
|
return Boolean(this.popupConfig && this.updateEvent)
|
|
},
|
|
|
|
message () {
|
|
const c = this.popupConfig
|
|
return (c && c.message) || 'New content is available.'
|
|
},
|
|
|
|
buttonText () {
|
|
const c = this.popupConfig
|
|
return (c && c.buttonText) || 'Refresh'
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
reload () {
|
|
if (this.updateEvent) {
|
|
this.updateEvent.skipWaiting().then(() => {
|
|
location.reload(true)
|
|
})
|
|
this.updateEvent = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import './styles/config.styl'
|
|
|
|
.sw-update-popup
|
|
position fixed
|
|
right 1em
|
|
bottom 1em
|
|
padding 1em
|
|
border 1px solid $accentColor
|
|
border-radius 3px
|
|
background #fff
|
|
box-shadow 0 4px 16px rgba(0, 0, 0, 0.5)
|
|
text-align center
|
|
|
|
button
|
|
margin-top 0.5em
|
|
padding 0.25em 2em
|
|
|
|
.sw-update-popup-enter-active, .sw-update-popup-leave-active
|
|
transition opacity 0.3s, transform 0.3s
|
|
|
|
.sw-update-popup-enter, .sw-update-popup-leave-to
|
|
opacity 0
|
|
transform translate(0, 50%) scale(0.5)
|
|
</style>
|