diff --git a/FaceDemo/public/js/modes/ImageMode.js b/FaceDemo/public/js/modes/ImageMode.js index 03b9ff6..762b3d2 100644 --- 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 = $(`Add New Image`).appendTo(this._slideOut.root()); + let buttonAdd = $(`Add`).appendTo(this._slideOut.root()); buttonAdd.get(0).addEventListener('click', () => { this._imageUploadInput.click() }); - let buttonClose = $(`Close`).appendTo(this._slideOut.root()); - buttonClose.get(0).addEventListener('click', () => { this._slideOut.close(); }); + //add remove image button let buttonRemove = $(`Remove`).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; + $(`

`).appendTo(this._slideOut.root()) //add clear all images button - let buttonClear = $(`Clear`).appendTo(this._slideOut.root()); + let buttonClear = $(`Remove All`).appendTo(this._slideOut.root()); buttonClear.get(0).addEventListener('click', () => { this._onClearImage() }); //add reset default images button - let buttonDefault = $(`Reset Default`).appendTo(this._slideOut.root()); + let buttonDefault = $(`Reset to Default`).appendTo(this._slideOut.root()); buttonDefault.get(0).addEventListener('click', () => { this._onDefaultImages() }); + $(`

`).appendTo(this._slideOut.root()) + + let buttonClose = $(`Close`).appendTo(this._slideOut.root()); + buttonClose.get(0).addEventListener('click', () => { this._slideOut.close(); }); let masterColumn = $(`
`).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