You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
4.6 KiB
183 lines
4.6 KiB
import Vue from 'vue' |
|
import { decode, parsePath, withoutBase, withoutTrailingSlash, normalizeURL } from 'ufo' |
|
|
|
import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, urlJoin, sanitizeComponent } from './utils' |
|
import NuxtError from '../src/layouts/error.vue' |
|
|
|
import '../node_modules/element-ui/lib/theme-chalk/index.css' |
|
|
|
import '../node_modules/video.js/dist/video-js.css' |
|
|
|
import '../node_modules/vue-video-player/src/custom-theme.css' |
|
|
|
import _6dce6561 from '../src/layouts/common.vue' |
|
import _6ef953c7 from '../src/layouts/detail.vue' |
|
import _6f6c098b from './layouts/default.vue' |
|
|
|
const layouts = { "_common": sanitizeComponent(_6dce6561),"_detail": sanitizeComponent(_6ef953c7),"_default": sanitizeComponent(_6f6c098b) } |
|
|
|
export default { |
|
render (h, props) { |
|
const layoutEl = h(this.layout || 'nuxt') |
|
const templateEl = h('div', { |
|
domProps: { |
|
id: '__layout' |
|
}, |
|
key: this.layoutName |
|
}, [layoutEl]) |
|
|
|
const transitionEl = h('transition', { |
|
props: { |
|
name: 'layout', |
|
mode: 'out-in' |
|
}, |
|
on: { |
|
beforeEnter (el) { |
|
// Ensure to trigger scroll event after calling scrollBehavior |
|
window.$nuxt.$nextTick(() => { |
|
window.$nuxt.$emit('triggerScroll') |
|
}) |
|
} |
|
} |
|
}, [templateEl]) |
|
|
|
return h('div', { |
|
domProps: { |
|
id: '__nuxt' |
|
} |
|
}, [ |
|
|
|
transitionEl |
|
]) |
|
}, |
|
|
|
data: () => ({ |
|
isOnline: true, |
|
|
|
layout: null, |
|
layoutName: '', |
|
|
|
nbFetching: 0 |
|
}), |
|
|
|
beforeCreate () { |
|
Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt) |
|
}, |
|
created () { |
|
// Add this.$nuxt in child instances |
|
this.$root.$options.$nuxt = this |
|
|
|
if (process.client) { |
|
// add to window so we can listen when ready |
|
window.$nuxt = this |
|
|
|
this.refreshOnlineStatus() |
|
// Setup the listeners |
|
window.addEventListener('online', this.refreshOnlineStatus) |
|
window.addEventListener('offline', this.refreshOnlineStatus) |
|
} |
|
// Add $nuxt.error() |
|
this.error = this.nuxt.error |
|
// Add $nuxt.context |
|
this.context = this.$options.context |
|
}, |
|
|
|
watch: { |
|
'nuxt.err': 'errorChanged' |
|
}, |
|
|
|
computed: { |
|
isOffline () { |
|
return !this.isOnline |
|
}, |
|
|
|
isFetching () { |
|
return this.nbFetching > 0 |
|
}, |
|
}, |
|
|
|
methods: { |
|
refreshOnlineStatus () { |
|
if (process.client) { |
|
if (typeof window.navigator.onLine === 'undefined') { |
|
// If the browser doesn't support connection status reports |
|
// assume that we are online because most apps' only react |
|
// when they now that the connection has been interrupted |
|
this.isOnline = true |
|
} else { |
|
this.isOnline = window.navigator.onLine |
|
} |
|
} |
|
}, |
|
|
|
async refresh () { |
|
const pages = getMatchedComponentsInstances(this.$route) |
|
|
|
if (!pages.length) { |
|
return |
|
} |
|
|
|
const promises = pages.map((page) => { |
|
const p = [] |
|
|
|
// Old fetch |
|
if (page.$options.fetch && page.$options.fetch.length) { |
|
p.push(promisify(page.$options.fetch, this.context)) |
|
} |
|
if (page.$fetch) { |
|
p.push(page.$fetch()) |
|
} else { |
|
// Get all component instance to call $fetch |
|
for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) { |
|
p.push(component.$fetch()) |
|
} |
|
} |
|
|
|
if (page.$options.asyncData) { |
|
p.push( |
|
promisify(page.$options.asyncData, this.context) |
|
.then((newData) => { |
|
for (const key in newData) { |
|
Vue.set(page.$data, key, newData[key]) |
|
} |
|
}) |
|
) |
|
} |
|
|
|
return Promise.all(p) |
|
}) |
|
try { |
|
await Promise.all(promises) |
|
} catch (error) { |
|
globalHandleError(error) |
|
this.error(error) |
|
} |
|
}, |
|
errorChanged () { |
|
if (this.nuxt.err) { |
|
let errorLayout = (NuxtError.options || NuxtError).layout; |
|
|
|
if (typeof errorLayout === 'function') { |
|
errorLayout = errorLayout(this.context) |
|
} |
|
|
|
this.setLayout(errorLayout) |
|
} |
|
}, |
|
|
|
setLayout (layout) { |
|
if (!layout || !layouts['_' + layout]) { |
|
layout = 'default' |
|
} |
|
this.layoutName = layout |
|
this.layout = layouts['_' + layout] |
|
return this.layout |
|
}, |
|
loadLayout (layout) { |
|
if (!layout || !layouts['_' + layout]) { |
|
layout = 'default' |
|
} |
|
return Promise.resolve(layouts['_' + layout]) |
|
}, |
|
}, |
|
}
|
|
|