Small changes again

Add shift click to delete, change default column sizes, turn off spellcheck underlines by default
SocksTheWolf · Jun 2, 2024 · 51c0374 · 51c0374
1 parent e34b543
commit 51c0374
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/assets/js/tier-table.js b/assets/js/tier-table.js
@@ -133,9 +133,9 @@ function addRow() {
   table_body.appendChild(row);
 }
 
-function deleteRow(row_id) {
+function deleteRow(row_id, shiftClicked) {
   const tier_title = document.getElementById(row_id).firstChild.innerText;	
-  if (confirm(`Are you sure you want to delete row "${tier_title}"?`) == true) {
+  if (shiftClicked || confirm(`Are you sure you want to delete row "${tier_title}"?`)) {
     const row = document.getElementById(row_id);
     row.parentElement.removeChild(row);
   }
@@ -149,7 +149,7 @@ function createSettingsTd(row_id, table_id) {
   let go_down = createFAElement("fas", "fa-level-down-alt");
   go_down.addEventListener("click", () => moveRowDown(row_id, table_id));
   let delete_row = createFAElement("fas", "fa-trash");
-  delete_row.addEventListener("click", () => deleteRow(row_id));
+  delete_row.addEventListener("click", (ev) => deleteRow(row_id, ev.shiftKey));
 
   let container = document.createElement("td");
   [add, go_up, go_down, delete_row].forEach((el, idx, max) => {
@@ -180,6 +180,7 @@ function generateTable(identifier, count = -1) {
     const tier_th = document.createElement("th");
     tier_th.setAttribute("scope", "row");
     tier_th.setAttribute("contenteditable", "true");
+    tier_th.setAttribute("spellcheck", "false");
     tier_th.classList.add(
       `tlm-bgcolor-${row_name}`,
       "text-center",

diff --git a/index.html b/index.html
@@ -99,12 +99,10 @@
         <div class="w-100 p-2">
           <table class="table">
             <thead>
-              <tr>
-                <th scope="col" class="col-1 text-center">Tier</th>
-                <th scope="col" class="col-9 text-center">Content</th>
-                <th scope="col" class="col-2 text-center" id="settings">
-                  <span class="d-none d-md-inline">Settings</span>
-                </th>
+              <tr class="text-center">
+                <th scope="col" class="col-2">Tier</th>
+                <th scope="col" class="col-9">Content</th>
+                <th scope="col" class="col-1" id="settings">Settings</th>
               </tr>
             </thead>
             <tbody id="tableBody"></tbody>
@@ -213,6 +211,10 @@ <h5 class="modal-title" id="helpModalLabel">Help</h5>
               Use the "Settings" column to add bulk images to tiers, change tier
               colors, and move tiers up and down in the tier list.
             </p>
+            <p>
+              Hold Shift while pressing the Trash button to skip confirmation when
+              deleting a row.
+            </p>
           </div>
           <div class="modal-footer">
             <button