X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/02dc3154e34775f44b4f38b525224a2354aa698c..refs/pull/3693/head:/resources/js/components/image-manager.js diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js index 71bc55f2e..23a6c4cbb 100644 --- a/resources/js/components/image-manager.js +++ b/resources/js/components/image-manager.js @@ -27,8 +27,8 @@ class ImageManager { this.type = 'gallery'; this.lastSelected = {}; this.lastSelectedTime = 0; + this.callback = null; this.resetState = () => { - this.callback = null; this.hasData = false; this.page = 1; this.filter = 'all'; @@ -74,6 +74,10 @@ class ImageManager { this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this)); + this.listContainer.addEventListener('error', event => { + event.target.src = baseUrl('loading_error.png'); + }, true); + onSelect(this.selectButton, () => { if (this.callback) { this.callback(this.lastSelected); @@ -118,6 +122,9 @@ class ImageManager { }; const {data: html} = await window.$http.get(`images/${this.type}`, params); + if (params.page === 1) { + this.listContainer.innerHTML = ''; + } this.addReturnedHtmlElementsToList(html); removeLoading(this.listContainer); } @@ -143,14 +150,19 @@ class ImageManager { this.resetState(); this.resetListView(); this.resetSearchView(); - this.formContainer.innerHTML = ''; + this.resetEditForm(); this.setActiveFilterTab('all'); + this.selectButton.classList.add('hidden'); } resetSearchView() { this.searchInput.value = ''; } + resetEditForm() { + this.formContainer.innerHTML = ''; + } + resetListView() { showLoading(this.listContainer); this.page = 1; @@ -173,6 +185,8 @@ class ImageManager { if (!alreadySelected) { event.target.classList.add('selected'); this.loadImageEditForm(image.id); + } else { + this.resetEditForm(); } this.selectButton.classList.toggle('hidden', alreadySelected);