Scanning inputs refactor (#974)

* Add support for count nodes

* Add support for menu button

1 files changed, 32 insertions, 2 deletions

diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index f4aeb236..a7054b32 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -26,6 +26,7 @@ class ScanInputsController {
         this._os = null;
         this._container = null;
         this._addButton = null;
+        this._scanningInputCountNodes = null;
         this._entries = [];
     }
 
@@ -35,6 +36,7 @@ class ScanInputsController {
 
         this._container = document.querySelector('#scan-input-list');
         this._addButton = document.querySelector('#scan-input-add');
+        this._scanningInputCountNodes = document.querySelectorAll('.scanning-input-count');
 
         this._addButton.addEventListener('click', this._onAddButtonClick.bind(this), false);
         this._settingsController.on('scanInputsChanged', this._onScanInputsChanged.bind(this));
@@ -94,6 +96,8 @@ class ScanInputsController {
             const {include, exclude} = inputs[i];
             this._addOption(i, include, exclude);
         }
+
+        this._updateCounts();
     }
 
     _onAddButtonClick(e) {
@@ -103,6 +107,7 @@ class ScanInputsController {
         const include = '';
         const exclude = '';
         this._addOption(index, include, exclude);
+        this._updateCounts();
         this._modifyProfileSettings([{
             action: 'splice',
             path: 'scanning.inputs',
@@ -118,6 +123,13 @@ class ScanInputsController {
         field.prepare(this._container, include, exclude);
     }
 
+    _updateCounts() {
+        const stringValue = `${this._entries.length}`;
+        for (const node of this._scanningInputCountNodes) {
+            node.textContent = stringValue;
+        }
+    }
+
     async _modifyProfileSettings(targets) {
         await this._settingsController.modifyProfileSettings(targets);
         this._settingsController.trigger('scanInputsChanged', {source: this});
@@ -169,6 +181,7 @@ class ScanInputField {
         const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
         const excludeMouseButton = node.querySelector('.mouse-button[data-property=exclude]');
         const removeButton = node.querySelector('.scan-input-remove');
+        const menuButton = node.querySelector('.scanning-input-menu-button');
 
         this._node = node;
         container.appendChild(node);
@@ -181,7 +194,12 @@ class ScanInputField {
 
         this._eventListeners.on(this._includeInputField, 'change', this._onIncludeValueChange.bind(this));
         this._eventListeners.on(this._excludeInputField, 'change', this._onExcludeValueChange.bind(this));
-        this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
+        if (removeButton !== null) {
+            this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
+        }
+        if (menuButton !== null) {
+            this._eventListeners.addEventListener(menuButton, 'menuClosed', this._onMenuClosed.bind(this));
+        }
 
         this._updateDataSettingTargets();
     }
@@ -209,7 +227,15 @@ class ScanInputField {
 
     _onRemoveClick(e) {
         e.preventDefault();
-        this._parent.removeInput(this._index);
+        this._removeSelf();
+    }
+
+    _onMenuClosed({detail: {action}}) {
+        switch (action) {
+            case 'remove':
+                this._removeSelf();
+                break;
+        }
     }
 
     _isPointerTypeSupported(pointerType) {
@@ -225,4 +251,8 @@ class ScanInputField {
             typeCheckbox.dataset.setting = `scanning.inputs[${index}].${property}`;
         }
     }
+
+    _removeSelf() {
+        this._parent.removeInput(this._index);
+    }
 }