90 lines
1.8 KiB
Vue
90 lines
1.8 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="less">
|
|
@import './styles/config.less';
|
|
|
|
.sw-update-popup {
|
|
position: fixed;
|
|
right: 1em;
|
|
bottom: 1em;
|
|
padding: 1em;
|
|
border: 0.3em solid var(--BClr);
|
|
border-radius: 0.3em;
|
|
background: var(--BgClr);
|
|
box-shadow: 0 0.4em 1.2em hsla(var(--BClr-h), var(--BClr-s), var(--BClr-l), 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>
|