Revert some changes to HttpFetchException

[bookstack] / resources / js / components / image-manager.js

diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index 732bc2cb452c5721cfcc85a152a286309b007209..78abcf30d8b8c5465f360094f9a9d193be02dd5e 100644 (file)
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -18,8 +18,12 @@ export class ImageManager extends Component {
         this.listContainer = this.$refs.listContainer;
         this.filterTabs = this.$manyRefs.filterTabs;
         this.selectButton = this.$refs.selectButton;
         this.listContainer = this.$refs.listContainer;
         this.filterTabs = this.$manyRefs.filterTabs;
         this.selectButton = this.$refs.selectButton;

+        this.uploadButton = this.$refs.uploadButton;
+        this.uploadHint = this.$refs.uploadHint;

         this.formContainer = this.$refs.formContainer;
         this.formContainer = this.$refs.formContainer;

+        this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;

         this.dropzoneContainer = this.$refs.dropzoneContainer;
         this.dropzoneContainer = this.$refs.dropzoneContainer;

+        this.loadMore = this.$refs.loadMore;

 
         // Instance data
         this.type = 'gallery';
 
         // Instance data
         this.type = 'gallery';


@@ -37,6 +41,7 @@ export class ImageManager extends Component {
     }
 
     setupListeners() {
     }
 
     setupListeners() {

+        // Filter tab click

         onSelect(this.filterTabs, e => {
             this.resetAll();
             this.filter = e.target.dataset.filter;
         onSelect(this.filterTabs, e => {
             this.resetAll();
             this.filter = e.target.dataset.filter;


@@ -44,36 +49,33 @@ export class ImageManager extends Component {
             this.loadGallery();
         });
 
             this.loadGallery();
         });
 

+        // Search submit

         this.searchForm.addEventListener('submit', event => {
             this.resetListView();
             this.loadGallery();
         this.searchForm.addEventListener('submit', event => {
             this.resetListView();
             this.loadGallery();

+            this.cancelSearch.toggleAttribute('hidden', !this.searchInput.value);

             event.preventDefault();
         });
 
             event.preventDefault();
         });
 

-        onSelect(this.cancelSearch, event => {
+        // Cancel search button
+        onSelect(this.cancelSearch, () => {

             this.resetListView();
             this.resetSearchView();
             this.loadGallery();
             this.resetListView();
             this.resetSearchView();
             this.loadGallery();

-            this.cancelSearch.classList.remove('active');

         });
 
         });
 

-        this.searchInput.addEventListener('input', event => {
-            this.cancelSearch.classList.toggle('active', this.searchInput.value.trim());
-        });
-
-        onChildEvent(this.listContainer, '.load-more', 'click', async event => {
-            showLoading(event.target);
-            this.page++;
-            await this.loadGallery();
-            event.target.remove();
-        });
+        // Load more button click
+        onChildEvent(this.container, '.load-more button', 'click', this.runLoadMore.bind(this));

 
 

+        // 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 = baseUrl('loading_error.png');
+            event.target.src = window.baseUrl('loading_error.png');

         }, true);
 
         }, true);
 

+        // Footer select button click

         onSelect(this.selectButton, () => {
             if (this.callback) {
                 this.callback(this.lastSelected);
         onSelect(this.selectButton, () => {
             if (this.callback) {
                 this.callback(this.lastSelected);


@@ -81,14 +83,39 @@ export class ImageManager extends Component {
             this.hide();
         });
 
             this.hide();
         });
 

-        onChildEvent(this.formContainer, '#image-manager-delete', 'click', event => {
+        // Delete button click
+        onChildEvent(this.formContainer, '#image-manager-delete', 'click', () => {

             if (this.lastSelected) {
                 this.loadImageEditForm(this.lastSelected.id, true);
             }
         });
 
             if (this.lastSelected) {
                 this.loadImageEditForm(this.lastSelected.id, true);
             }
         });
 

-        this.formContainer.addEventListener('ajax-form-success', this.refreshGallery.bind(this));
-        this.container.addEventListener('dropzone-success', this.refreshGallery.bind(this));
+        // Edit form submit
+        this.formContainer.addEventListener('ajax-form-success', () => {
+            this.refreshGallery();
+            this.resetEditForm();
+        });
+
+        // Image upload success
+        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') {


@@ -97,7 +124,15 @@ export class ImageManager extends Component {
         this.callback = callback;
         this.type = type;
         this.getPopup().show();
         this.callback = callback;
         this.type = type;
         this.getPopup().show();

-        this.dropzoneContainer.classList.toggle('hidden', type !== 'gallery');
+
+        const hideUploads = type !== 'gallery';
+        this.dropzoneContainer.classList.toggle('hidden', hideUploads);
+        this.uploadButton.classList.toggle('hidden', hideUploads);
+        this.uploadHint.classList.toggle('hidden', hideUploads);
+
+        /** @var {Dropzone} * */
+        const dropzone = window.$components.firstOnElement(this.container, 'dropzone');
+        dropzone.toggleActive(!hideUploads);

 
         if (!this.hasData) {
             this.loadGallery();
 
         if (!this.hasData) {
             this.loadGallery();


@@ -135,6 +170,14 @@ export class ImageManager extends Component {
     addReturnedHtmlElementsToList(html) {
         const el = document.createElement('div');
         el.innerHTML = html;
     addReturnedHtmlElementsToList(html) {
         const el = document.createElement('div');
         el.innerHTML = html;

+
+        const loadMore = el.querySelector('.load-more');
+        if (loadMore) {
+            loadMore.remove();
+            this.loadMore.innerHTML = loadMore.innerHTML;
+        }
+        this.loadMore.toggleAttribute('hidden', !loadMore);
+

         window.$components.init(el);
         for (const child of [...el.children]) {
             this.listContainer.appendChild(child);
         window.$components.init(el);
         for (const child of [...el.children]) {
             this.listContainer.appendChild(child);


@@ -159,10 +202,12 @@ export class ImageManager extends Component {
 
     resetSearchView() {
         this.searchInput.value = '';
 
     resetSearchView() {
         this.searchInput.value = '';

+        this.cancelSearch.toggleAttribute('hidden', true);

     }
 
     resetEditForm() {
         this.formContainer.innerHTML = '';
     }
 
     resetEditForm() {
         this.formContainer.innerHTML = '';

+        this.formContainerPlaceholder.removeAttribute('hidden');

     }
 
     resetListView() {
     }
 
     resetListView() {


@@ -209,7 +254,18 @@ export class ImageManager extends Component {
         const params = requestDelete ? {delete: true} : {};
         const {data: formHtml} = await window.$http.get(`/images/edit/${imageId}`, params);
         this.formContainer.innerHTML = formHtml;
         const params = requestDelete ? {delete: true} : {};
         const {data: formHtml} = await window.$http.get(`/images/edit/${imageId}`, params);
         this.formContainer.innerHTML = formHtml;

+        this.formContainerPlaceholder.setAttribute('hidden', '');

         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');
+    }
+

 }
 }