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:
@ -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() {
|
||||
|
Reference in New Issue
Block a user