diff --git a/package-lock.json b/package-lock.json
index b341cb8..20d43cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11902,6 +11902,11 @@
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
"dev": true
},
+ "vue-infinite-loading": {
+ "version": "2.4.5",
+ "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
+ "integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g=="
+ },
"vue-jest": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.5.tgz",
diff --git a/package.json b/package.json
index 477b9a1..f7c2def 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"axios": "^0.18.1",
"vue": "^2.6.10",
+ "vue-infinite-loading": "^2.4.5",
"vue-meta": "^1.6.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.1",
diff --git a/src/index.js b/src/index.js
index 1bf6ef2..b18aa72 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,8 @@ import router from './router'
import store from './store'
// import { sync } from 'vuex-router-sync'
import Meta from 'vue-meta'
+import InfiniteLoading from 'vue-infinite-loading'
+
import App from './App'
import 'assets/css/mdi/css/materialdesignicons.css'
@@ -11,6 +13,23 @@ import 'assets/css/app.scss'
Vue.use(Meta)
+Vue.use(InfiniteLoading, {
+ props: {
+ spinner: 'spiral'
+ },
+ slots: {
+ noMore: '',
+ noResult: ''
+ },
+ system: {
+ throttleLimit: 5000
+ }
+ // system: {
+ // throttleLimit: 50,
+ // /* other settings need to configure */
+ // }
+})
+
// sync(store, router) // done. Returns an unsync callback fn
new Vue({
diff --git a/src/pages/Edition.vue b/src/pages/Edition.vue
index 625b40b..49e099a 100644
--- a/src/pages/Edition.vue
+++ b/src/pages/Edition.vue
@@ -31,12 +31,18 @@
-
+
+
+
+
+
@@ -72,7 +78,7 @@ export default {
meta: null,
editionid: null,
textid: null,
- textdata: null,
+ texts: [],
metainfotitle: undefined,
title: undefined,
author: undefined,
@@ -90,7 +96,8 @@ export default {
watch: {
textid: function (newid, oldid) {
console.log('textid watcher', this, oldid, newid)
- this.getTextContent()
+ this.texts = []
+ this.getTextContent(newid)
},
textdata: function (newtxtdata, oldtxtdata) {
console.log('textdata watcher', oldtxtdata, newtxtdata)
@@ -167,18 +174,39 @@ export default {
...mapActions({
getCorpuses: 'Corpus/getCorpuses'
}),
- getTextContent () {
- console.log('getTextContent', this.textid)
- if (this.textid) {
- REST.get(`/items/` + this.textid, {})
- .then(({ data }) => {
- console.log('text REST: data', data)
- this.textdata = data
- })
- .catch((error) => {
- console.warn('Issue with getTextContent', error)
- Promise.reject(error)
- })
+ getTextContent (textid, $state = null, direction = 'next') {
+ console.log('getTextContent', textid)
+ REST.get(`/items/${textid}`, {})
+ .then(({ data }) => {
+ console.log('text REST: data', data)
+ if (direction === 'next') {
+ this.texts.push(data)
+ } else {
+ this.texts.unshift(data)
+ }
+ if ($state) {
+ $state.loaded()
+ }
+ })
+ .catch((error) => {
+ console.warn('Issue with getTextContent', error)
+ Promise.reject(error)
+ })
+ },
+ nextText ($state) {
+ console.log('infinite loading nextText()', this.texts[this.texts.length - 1].content.itemAfterUuid, $state)
+ if (this.texts[this.texts.length - 1].content.itemAfterUuid) {
+ this.getTextContent(this.texts[this.texts.length - 1].content.itemAfterUuid, $state, 'next')
+ } else {
+ $state.complete()
+ }
+ },
+ prevText ($state) {
+ console.log('infinite loading prevText()', this.texts[0].content.itemBeforeUuid, $state)
+ if (this.texts[0].content.itemBeforeUuid) {
+ this.getTextContent(this.texts[0].content.itemBeforeUuid, $state, 'prev')
+ } else {
+ $state.complete()
}
},
onHoverLink (elmt) {