Enhance changelog input to textarea with character counter

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

diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index dddf6ad8f82717291a18be5d02dbca83a63ed60d..c8108ab28c19f6b456e419a50833ae8cd98f9b34 100644 (file)
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -1,6 +1,6 @@
 import {
     onChildEvent, onSelect, removeLoading, showLoading,
 import {
     onChildEvent, onSelect, removeLoading, showLoading,

-} from '../services/dom';
+} from '../services/dom.ts';

 import {Component} from './component';
 
 export class ImageManager extends Component {
 import {Component} from './component';
 
 export class ImageManager extends Component {


@@ -53,6 +53,7 @@ export class ImageManager extends Component {
         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();
         });
 


@@ -89,6 +90,15 @@ export class ImageManager extends Component {
             }
         });
 
             }
         });
 

+        // Rebuild thumbs click
+        onChildEvent(this.formContainer, '#image-manager-rebuild-thumbs', 'click', async (_, button) => {
+            button.disabled = true;
+            if (this.lastSelected) {
+                await this.rebuildThumbnails(this.lastSelected.id);
+            }
+            button.disabled = false;
+        });
+

         // Edit form submit
         this.formContainer.addEventListener('ajax-form-success', () => {
             this.refreshGallery();
         // Edit form submit
         this.formContainer.addEventListener('ajax-form-success', () => {
             this.refreshGallery();


@@ -201,6 +211,7 @@ export class ImageManager extends Component {
 
     resetSearchView() {
         this.searchInput.value = '';
 
     resetSearchView() {
         this.searchInput.value = '';

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

     }
 
     resetEditForm() {
     }
 
     resetEditForm() {


@@ -218,8 +229,8 @@ export class ImageManager extends Component {
         this.loadGallery();
     }
 
         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');
         const isDblClick = ((image && image.id === this.lastSelected.id)
             && Date.now() - this.lastSelectedTime < 400);
         const alreadySelected = event.target.classList.contains('selected');


@@ -227,12 +238,15 @@ export class ImageManager extends Component {
             el.classList.remove('selected');
         });
 
             el.classList.remove('selected');
         });
 

-        if (!alreadySelected) {
+        if (!alreadySelected && !isDblClick) {

             event.target.classList.add('selected');
             event.target.classList.add('selected');

-            this.loadImageEditForm(image.id);
-        } else {
+            image = await this.loadImageEditForm(image.id);
+        } else if (!isDblClick) {

             this.resetEditForm();
             this.resetEditForm();

+        } else if (isDblClick) {
+            image = this.lastSelected;

         }
         }

+

         this.selectButton.classList.toggle('hidden', alreadySelected);
 
         if (isDblClick && this.callback) {
         this.selectButton.classList.toggle('hidden', alreadySelected);
 
         if (isDblClick && this.callback) {


@@ -254,6 +268,9 @@ export class ImageManager extends Component {
         this.formContainer.innerHTML = formHtml;
         this.formContainerPlaceholder.setAttribute('hidden', '');
         window.$components.init(this.formContainer);
         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() {
     }
 
     runLoadMore() {


@@ -266,4 +283,14 @@ export class ImageManager extends Component {
         return this.loadMore.querySelector('button') && !this.loadMore.hasAttribute('hidden');
     }
 
         return this.loadMore.querySelector('button') && !this.loadMore.hasAttribute('hidden');
     }
 

+    async rebuildThumbnails(imageId) {
+        try {
+            const response = await window.$http.put(`/images/${imageId}/rebuild-thumbnails`);
+            window.$events.success(response.data);
+            this.refreshGallery();
+        } catch (err) {
+            window.$events.showResponseError(err);
+        }
+    }
+

 }
 }