Merge pull request #106 from netgen/ngrm-change-event-debounce

Ngrm change event debounce
netgen · Sep 25, 2023 · dea9113 · dea9113
2 parents 4fd4b83 + 560244b
commit dea9113
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 9 deletions.
diff --git a/bundle/Resources/public/css/remotemedia.css b/bundle/Resources/public/css/remotemedia.css
diff --git a/bundle/Resources/public/js/remotemedia-vendors.js b/bundle/Resources/public/js/remotemedia-vendors.js
diff --git a/bundle/Resources/public/js/remotemedia.js b/bundle/Resources/public/js/remotemedia.js
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,6 +20,7 @@
     "portal-vue": "^2.1.7",
     "pretty-bytes": "^5.6.0",
     "vue": "^2.6.10",
+    "vue-debounce": "^4.0.0",
     "vue-select": "^3.2.0"
   },
   "devDependencies": {

diff --git a/frontend/src/components/Preview.vue b/frontend/src/components/Preview.vue
@@ -38,7 +38,7 @@
           <input type="text"
                :name="this.config.inputFields.altText"
                v-model="selectedImage.alternateText"
-               @input="dispatchChangeEvent"
+               v-debounce:500ms="dispatchChangeEvent"
                class="media-alttext data"
           >
         </div>
@@ -52,7 +52,7 @@
           <input type="text"
                :name="this.config.inputFields.caption"
                v-model="selectedImage.caption"
-               @input="dispatchChangeEvent"
+               v-debounce:500ms="dispatchChangeEvent"
                class="media-caption data"
           >
         </div>
@@ -77,7 +77,7 @@
           <input type="text"
                  :name="this.config.inputFields.watermarkText"
                  v-model="selectedImage.watermarkText"
-                 @input="dispatchChangeEvent"
+                 v-debounce:500ms="dispatchChangeEvent"
                  class="media-watermarktext data"
           >
         </div>

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import PortalVue from 'portal-vue';
+import vueDebounce from 'vue-debounce'
 import './scss/ngremotemedia.scss';
 import 'cropperjs/dist/cropper.css';
 import Interactions from './components/Interactions';
@@ -9,6 +10,7 @@ import SelectFolderInteraction from "./components/SelectFolderInteraction.vue";
 
 Vue.config.productionTip = false;
 Vue.use(PortalVue);
+Vue.use(vueDebounce);
 
 const initInteractionsVue = (el) => {
     window[`ngrm_interactions_vue_${el.dataset.id}`] = new Vue({