87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
/* eslint-disable no-new */
|
|
import Vue from 'vue';
|
|
import axios from '../../lib/utils/axios_utils';
|
|
import notebookLab from '../../notebook/index.vue';
|
|
|
|
export default () => {
|
|
const el = document.getElementById('js-notebook-viewer');
|
|
|
|
new Vue({
|
|
el,
|
|
components: {
|
|
notebookLab,
|
|
},
|
|
data() {
|
|
return {
|
|
error: false,
|
|
loadError: false,
|
|
loading: true,
|
|
json: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
if (gon.katex_css_url) {
|
|
const katexStyles = document.createElement('link');
|
|
katexStyles.setAttribute('rel', 'stylesheet');
|
|
katexStyles.setAttribute('href', gon.katex_css_url);
|
|
document.head.appendChild(katexStyles);
|
|
}
|
|
|
|
if (gon.katex_js_url) {
|
|
const katexScript = document.createElement('script');
|
|
katexScript.addEventListener('load', () => {
|
|
this.loadFile();
|
|
});
|
|
katexScript.setAttribute('src', gon.katex_js_url);
|
|
document.head.appendChild(katexScript);
|
|
} else {
|
|
this.loadFile();
|
|
}
|
|
},
|
|
methods: {
|
|
loadFile() {
|
|
axios.get(el.dataset.endpoint)
|
|
.then(res => res.data)
|
|
.then((data) => {
|
|
this.json = data;
|
|
this.loading = false;
|
|
})
|
|
.catch((e) => {
|
|
if (e.status !== 200) {
|
|
this.loadError = true;
|
|
}
|
|
|
|
this.error = true;
|
|
});
|
|
},
|
|
},
|
|
template: `
|
|
<div class="container-fluid md prepend-top-default append-bottom-default">
|
|
<div
|
|
class="text-center loading"
|
|
v-if="loading && !error">
|
|
<i
|
|
class="fa fa-spinner fa-spin"
|
|
aria-hidden="true"
|
|
aria-label="iPython notebook loading">
|
|
</i>
|
|
</div>
|
|
<notebook-lab
|
|
v-if="!loading && !error"
|
|
:notebook="json"
|
|
code-css-class="code white" />
|
|
<p
|
|
class="text-center"
|
|
v-if="error">
|
|
<span v-if="loadError">
|
|
An error occurred whilst loading the file. Please try again later.
|
|
</span>
|
|
<span v-else>
|
|
An error occurred whilst parsing the file.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
`,
|
|
});
|
|
};
|