Add "Move to" menu option for moving dictionary options to a specific location (#1651)

* Add "Move to" option

* Fix IDs

3 files changed, 57 insertions, 3 deletions

diff --git a/ext/css/settings.css b/ext/css/settings.css
index f0070a1f..588a5f90 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -2124,11 +2124,14 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
 .dictionary-list {
     width: 100%;
     display: grid;
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: auto auto 1fr auto auto;
     grid-template-rows: auto;
     place-items: center start;
     margin-top: 0.5em;
 }
+.dictionary-list-index {
+    margin-right: 0.5em;
+}
 .dictionary-list[data-count='0']>.dictionary-item-top {
     display: none;
 }
diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js
index 6f37798c..eca2a7d2 100644
--- a/ext/js/pages/settings/dictionary-controller.js
+++ b/ext/js/pages/settings/dictionary-controller.js
@@ -83,6 +83,7 @@ class DictionaryEntry {
         const count = this._dictionaryController.dictionaryOptionCount;
         this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0);
         this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1);
+        this._setMenuActionEnabled(bodyNode, 'moveTo', count > 1);
     }
 
     _onMenuClose(e) {
@@ -99,6 +100,9 @@ class DictionaryEntry {
             case 'moveDown':
                 this._move(1);
                 break;
+            case 'moveTo':
+                this._showMoveToModal();
+                break;
         }
     }
 
@@ -173,6 +177,20 @@ class DictionaryEntry {
         if (element === null) { return; }
         element.disabled = !enabled;
     }
+
+    _showMoveToModal() {
+        const {title} = this._dictionaryInfo;
+        const count = this._dictionaryController.dictionaryOptionCount;
+        const modal = this._dictionaryController.modalController.getModal('dictionary-move-location');
+        const input = modal.node.querySelector('#dictionary-move-location');
+
+        modal.node.dataset.index = `${this._index}`;
+        modal.node.querySelector('.dictionary-title').textContent = title;
+        input.value = `${this._index + 1}`;
+        input.max = `${count}`;
+
+        modal.setVisible(true);
+    }
 }
 
 class DictionaryExtraInfo {
@@ -269,6 +287,7 @@ class DictionaryController {
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
         this._allCheckbox.addEventListener('change', this._onAllCheckboxChange.bind(this), false);
         document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
+        document.querySelector('#dictionary-move-button').addEventListener('click', this._onDictionaryMoveButtonClick.bind(this), false);
         if (this._checkIntegrityButton !== null) {
             this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
         }
@@ -291,7 +310,8 @@ class DictionaryController {
         const {dictionaries} = options;
         if (
             index1 < 0 || index1 >= dictionaries.length ||
-            index2 < 0 || index2 >= dictionaries.length
+            index2 < 0 || index2 >= dictionaries.length ||
+            index1 === index2
         ) {
             return;
         }
@@ -497,6 +517,19 @@ class DictionaryController {
         this._checkIntegrity();
     }
 
+    _onDictionaryMoveButtonClick() {
+        const modal = this._modalController.getModal('dictionary-move-location');
+        let {index} = modal.node.dataset;
+        index = Number.parseInt(index, 10);
+
+        let target = document.querySelector('#dictionary-move-location').value;
+        target = Number.parseInt(target, 10) - 1;
+
+        if (!Number.isFinite(target) || !Number.isFinite(index) || index === target) { return; }
+
+        this.swapDictionaryOptions(index, target);
+    }
+
     _updateMainDictionarySelectOptions(dictionaries) {
         for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) {
             const fragment = document.createDocumentFragment();
diff --git a/ext/settings.html b/ext/settings.html
index 6f0c67ad..f7730eb4 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -2080,7 +2080,8 @@
             for a list free dictionaries or click the <em>Import</em> button below to select a dictionary file to import.
         </div>
         <div id="dictionary-error" class="danger-text margin-above" hidden></div>
-        <div id="dictionary-list" class="dictionary-list" data-count="0">
+        <div id="dictionary-list" class="dictionary-list generic-list" data-count="0">
+            <div class="dictionary-item-top"></div>
             <label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             <div class="dictionary-item-top dictionary-item-title-container">All</div>
             <div class="dictionary-item-top">Priority</div>
@@ -2226,9 +2227,24 @@
     </div>
 </div></div>
 
+<div id="dictionary-move-location-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+    <div class="modal-header"><div class="modal-title">Move Dictionary Options</div></div>
+    <div class="modal-body">
+        <p>Input the location the dictionary <strong class="dictionary-title"></strong> should be moved to:</p>
+        <div class="margin-above">
+            <input type="number" id="dictionary-move-location" min="1" step="1">
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="low-emphasis" data-modal-action="hide">Cancel</button>
+        <button data-modal-action="hide" id="dictionary-move-button">Move</button>
+    </div>
+</div></div>
+
 
 <!-- Dictionary templates -->
 <template id="dictionary-template">
+    <div class="dictionary-list-index generic-list-index-prefix"></div>
     <label class="toggle dictionary-item-enabled-toggle-container"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
     <div class="dictionary-item-title-container">
         <span>
@@ -2252,6 +2268,7 @@
 
 <template id="dictionary-extra-template">
     <div class="dictionary-item-bottom"></div>
+    <div class="dictionary-item-bottom"></div>
     <div class="dictionary-item-bottom dictionary-item-title-container">
         <span>
             <strong class="dictionary-title">Unassociated Data</strong> <span class="light dictionary-total-count"></span>
@@ -2268,6 +2285,7 @@
     <button class="popup-menu-item" data-menu-action="showDetails">Details&hellip;</button>
     <button class="popup-menu-item" data-menu-action="moveUp">Move up</button>
     <button class="popup-menu-item" data-menu-action="moveDown">Move down</button>
+    <button class="popup-menu-item" data-menu-action="moveTo">Move to&hellip;</button>
     <button class="popup-menu-item" data-menu-action="delete">Delete</button>
 </div></div></div></template>