1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00

Images: Rolled out image memory handling to image actions

- Moved thumnbail loading out of repo into ImageResizer.
- Updated gallery and editor image handling to show errors where
  possible to indicate memory issues for resizing/thumbs.
- Updated gallery to load image data in a per-image basis via edit form
  for more resiliant thumb/data fetching. Data was previously provided
  via gallery listing, which could be affected by failing generation
  of other images.
- Updated image manager double click handling to be more pleasant and
  not flash away the edit form.
- Updated editor handlers to use main URL when thumbs fail to load.
This commit is contained in:
Dan Brown
2023-10-01 13:05:18 +01:00
parent 20bcbd76ef
commit b2d48d9a7f
15 changed files with 142 additions and 78 deletions

View File

@ -1,6 +1,4 @@
import {
onChildEvent, onSelect, removeLoading, showLoading,
} from '../services/dom';
import {onChildEvent, onSelect, removeLoading, showLoading,} from '../services/dom';
import {Component} from './component';
export class ImageManager extends Component {
@ -229,8 +227,8 @@ export class ImageManager extends Component {
this.loadGallery();
}
onImageSelectEvent(event) {
const image = JSON.parse(event.detail.data);
async onImageSelectEvent(event) {
let image = JSON.parse(event.detail.data);
const isDblClick = ((image && image.id === this.lastSelected.id)
&& Date.now() - this.lastSelectedTime < 400);
const alreadySelected = event.target.classList.contains('selected');
@ -238,12 +236,15 @@ export class ImageManager extends Component {
el.classList.remove('selected');
});
if (!alreadySelected) {
if (!alreadySelected && !isDblClick) {
event.target.classList.add('selected');
this.loadImageEditForm(image.id);
} else {
image = await this.loadImageEditForm(image.id);
} else if (!isDblClick) {
this.resetEditForm();
} else if (isDblClick) {
image = this.lastSelected;
}
this.selectButton.classList.toggle('hidden', alreadySelected);
if (isDblClick && this.callback) {
@ -265,6 +266,9 @@ export class ImageManager extends Component {
this.formContainer.innerHTML = formHtml;
this.formContainerPlaceholder.setAttribute('hidden', '');
window.$components.init(this.formContainer);
const imageDataEl = this.formContainer.querySelector('#image-manager-form-image-data');
return JSON.parse(imageDataEl.text);
}
runLoadMore() {