Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-09-29 20:55:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Image manager: added ability to trigger load more via scroll

Browse Source
This commit is contained in:
Dan Brown 2023-05-26 18:05:29 +01:00
parent 6c91e09c73
commit dc6133c4c4
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
resources/js/components/image-manager.js
View File

@ -41,6 +41,7 @@ export class ImageManager extends Component {
} }
setupListeners() { setupListeners() {
// Filter tab click
onSelect(this.filterTabs, e => { onSelect(this.filterTabs, e => {
this.resetAll(); this.resetAll();
this.filter = e.target.dataset.filter; this.filter = e.target.dataset.filter;
@ -48,31 +49,32 @@ export class ImageManager extends Component {
this.loadGallery(); this.loadGallery();
}); });
// Search submit
this.searchForm.addEventListener('submit', event => { this.searchForm.addEventListener('submit', event => {
this.resetListView(); this.resetListView();
this.loadGallery(); this.loadGallery();
event.preventDefault(); event.preventDefault();
}); });
// Cancel search button
onSelect(this.cancelSearch, () => { onSelect(this.cancelSearch, () => {
this.resetListView(); this.resetListView();
this.resetSearchView(); this.resetSearchView();
this.loadGallery(); this.loadGallery();
}); });
onChildEvent(this.container, '.load-more button', 'click', async event => { // Load more button click
const wrapper = event.target.closest('.load-more'); onChildEvent(this.container, '.load-more button', 'click', this.runLoadMore.bind(this));
showLoading(wrapper);
this.page += 1;
await this.loadGallery();
});
// Select image event
this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this)); this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this));
// Image load error handling
this.listContainer.addEventListener('error', event => { this.listContainer.addEventListener('error', event => {
event.target.src = window.baseUrl('loading_error.png'); event.target.src = window.baseUrl('loading_error.png');
}, true); }, true);
// Footer select button click
onSelect(this.selectButton, () => { onSelect(this.selectButton, () => {
if (this.callback) { if (this.callback) {
this.callback(this.lastSelected); this.callback(this.lastSelected);
@ -80,17 +82,39 @@ export class ImageManager extends Component {
this.hide(); this.hide();
}); });
// Delete button click
onChildEvent(this.formContainer, '#image-manager-delete', 'click', () => { onChildEvent(this.formContainer, '#image-manager-delete', 'click', () => {
if (this.lastSelected) { if (this.lastSelected) {
this.loadImageEditForm(this.lastSelected.id, true); this.loadImageEditForm(this.lastSelected.id, true);
} }
}); });
// Edit form submit
this.formContainer.addEventListener('ajax-form-success', () => { this.formContainer.addEventListener('ajax-form-success', () => {
this.refreshGallery(); this.refreshGallery();
this.resetEditForm(); this.resetEditForm();
}); });
// Image upload success
this.container.addEventListener('dropzone-upload-success', this.refreshGallery.bind(this)); this.container.addEventListener('dropzone-upload-success', this.refreshGallery.bind(this));
// Auto load-more on scroll
const scrollZone = this.listContainer.parentElement;
let scrollEvents = [];
scrollZone.addEventListener('wheel', event => {
const scrollOffset = Math.ceil(scrollZone.scrollHeight - scrollZone.scrollTop);
const bottomedOut = scrollOffset === scrollZone.clientHeight;
if (!bottomedOut || event.deltaY < 1) {
return;
}
const secondAgo = Date.now() - 1000;
scrollEvents.push(Date.now());
scrollEvents = scrollEvents.filter(d => d >= secondAgo);
if (scrollEvents.length > 5 && this.canLoadMore()) {
this.runLoadMore();
}
});
} }
show(callback, type = 'gallery') { show(callback, type = 'gallery') {
@ -232,4 +256,14 @@ export class ImageManager extends Component {
window.$components.init(this.formContainer); window.$components.init(this.formContainer);
} }
runLoadMore() {
showLoading(this.loadMore);
this.page += 1;
this.loadGallery();
}
canLoadMore() {
return this.loadMore.querySelector('button') && !this.loadMore.hasAttribute('hidden');
}
} }