added new buttons to image library

jlcvolleyball · Aug 17, 2023 · 80f893e · 80f893e
1 parent 8b2b414
commit 80f893e
Showing 1 changed file with 56 additions and 8 deletions.
diff --git a/FaceDemo/public/js/modes/ImageMode.js b/FaceDemo/public/js/modes/ImageMode.js
@@ -8,6 +8,7 @@ class ImageMode extends Mode {
 
     this._slideOut = null;
     this._imagePicker = null;
+    this._removeBtn = null;
   }
 
   async setup(parent) {
@@ -22,22 +23,34 @@ class ImageMode extends Mode {
     this._imagePicker = new ImagePicker((select) => { this._onImagePickerClose(select); });
     this._imagePicker.setup(this._slideOut.root());
 
-    let buttonAdd = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Add New Image</a>`).appendTo(this._slideOut.root());
+    let buttonAdd = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Add</a>`).appendTo(this._slideOut.root());
     buttonAdd.get(0).addEventListener('click', () => { this._imageUploadInput.click() });
-    let buttonClose = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Close</a>`).appendTo(this._slideOut.root());
-    buttonClose.get(0).addEventListener('click', () => { this._slideOut.close(); });
+
 
     //add remove image button
     let buttonRemove = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Remove</a>`).appendTo(this._slideOut.root());
     buttonRemove.get(0).addEventListener('click', () => { this._onRemoveImage() });
+    // let check_vid = document.querySelectorAll(".thumbnail.first.selected")
+    // console.log(check_vid.length)
+    // if(check_vid.length > 0) {
+    //   //buttonRemove.attr("disabled", "disabled");
+    //   //document.getElementById("buttonRemove").disabled = true;
+    //   buttonRemove.disabled = true;
+    // }
+    self._removeBtn = buttonRemove;
+    $(`<br> </br>`).appendTo(this._slideOut.root())
 
     //add clear all images button
-    let buttonClear = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Clear</a>`).appendTo(this._slideOut.root());
+    let buttonClear = $(`<a href="#!" class="waves-effect waves-light btn red" style="margin-right: 10px;">Remove All</a>`).appendTo(this._slideOut.root());
     buttonClear.get(0).addEventListener('click', () => { this._onClearImage() });
 
     //add reset default images button
-    let buttonDefault = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Reset Default</a>`).appendTo(this._slideOut.root());
+    let buttonDefault = $(`<a href="#!" class="waves-effect waves-light btn red" style="margin-right: 10px;">Reset to Default</a>`).appendTo(this._slideOut.root());
     buttonDefault.get(0).addEventListener('click', () => { this._onDefaultImages() });
+    $(`<br> </br>`).appendTo(this._slideOut.root())
+
+    let buttonClose = $(`<a href="#!" class="waves-effect waves-light btn blue" style="margin-right: 10px;">Close</a>`).appendTo(this._slideOut.root());
+    buttonClose.get(0).addEventListener('click', () => { this._slideOut.close(); });
 
     let masterColumn = $(`<div class="column center-content""></div>`).appendTo(parent);
 
@@ -124,7 +137,9 @@ class ImageMode extends Mode {
     this._onHorizontalOutputSelectChange(); // simulate the firing of the event for initial set up
 
     this._setFeed(0); // video
+
     $('.tooltipped').tooltip();
+    this._onImageSelectChange();
   }
 
   clear() {
@@ -205,6 +220,10 @@ class ImageMode extends Mode {
       this._image.src = url;
       this._closeVideo();
     }
+    const ulElement = document.querySelector('.image_picker_selector');
+    ulElement.addEventListener('click', () => {
+      this._onImageSelectChange();
+    });
   }
 
   _onImagePickerClose(select) {
@@ -220,19 +239,23 @@ class ImageMode extends Mode {
         element.parentNode.removeChild(element);
       }
     }
+    this._onImageSelectChange();
   }
 
   _onClearImage() {
     app.imageLibrary().clearImages()
     this._imagePicker.initialize(app.imageLibrary().nImages() - 1)
-    this._setFeed(app.imageLibrary().nImages() - 1)
+    // this._setFeed(app.imageLibrary().nImages() - 1)
+    this._setFeed(0)
     console.log("clearing image")
   }
 
   _onDefaultImages() {
     app.imageLibrary().resetDefaultImages()
-    this._imagePicker.initialize(app.imageLibrary().nImages() - 1);
-    this._setFeed(app.imageLibrary().nImages() - 1);
+    //this._imagePicker.initialize(app.imageLibrary().nImages() - 1);
+    this._imagePicker.initialize(0);
+    // this._setFeed(app.imageLibrary().nImages() - 1);
+    this._setFeed(0);
     console.log("setting images to default")
   }
 
@@ -278,4 +301,29 @@ class ImageMode extends Mode {
       icon.html("pause");
     }
   }
+
+  _onImageSelectChange() {
+    var selected = document.querySelectorAll(".thumbnail.selected")
+    let shouldDisableRemove = false;
+    if(selected.length > 0) {
+      for(var i=0; i<selected.length; i++) {
+        var element = selected[i];
+        if(element.parentNode.classList.contains("first")) {
+          shouldDisableRemove = true;
+          break;
+        }
+      }
+    }
+    else
+      shouldDisableRemove = true;
+
+    //self._removeBtn.get(0).style.display = shouldDisableRemove? "none" : "";
+    if(shouldDisableRemove)
+    {
+      if(!self._removeBtn.get(0).classList.contains("disabled"))
+        self._removeBtn.get(0).classList.add("disabled");
+    }
+    else
+      self._removeBtn.get(0).classList.remove("disabled");
+  }
 }