Change code to use bootstrap-multiselect

Signed-off-by: yubiuser <github@yubiuser.dev>

Author: yubiuser

scripts/js/groups-clients.js

@@ -189,7 +189,7 @@ function initTable() {
 
       // Select assigned groups
       selectEl.val(data.groups);
-      // Initialize Tom Select
+      // Initialize group multi-select
       const ts = utils.createGroupSelect(selectEl, {
         onChange() {
           // enable Apply button
@@ -198,6 +198,8 @@ function initTable() {
               .addClass("btn-success")
               .prop("disabled", false)
               .on("click", () => {
+                $(applyBtn).removeClass("btn-success").prop("disabled", true).off("click");
+                ts.close();
                 editClient.call(selectEl);
               });
           }
@@ -213,7 +215,7 @@ function initTable() {
         },
       });
       $(ts.dropdown)
-        .find(".ts-actions-box")
+        .find(".multiselect-actions-box")
         .append(
           '<button type="button" id=btn_apply_' +
             dataId +

scripts/js/groups-domains.js

@@ -233,7 +233,7 @@ function initTable() {
 
       // Select assigned groups
       selectEl.val(data.groups);
-      // Initialize Tom Select
+      // Initialize group multi-select
       const applyBtn = "#btn_apply_" + dataId;
       const ts = utils.createGroupSelect(selectEl, {
         onChange() {
@@ -244,6 +244,8 @@ function initTable() {
               .addClass("btn-success")
               .prop("disabled", false)
               .on("click", () => {
+                $(applyBtn).removeClass("btn-success").prop("disabled", true).off("click");
+                ts.close();
                 editDomain.call(selectEl);
               });
           }
@@ -261,7 +263,7 @@ function initTable() {
         },
       });
       $(ts.dropdown)
-        .find(".ts-actions-box")
+        .find(".multiselect-actions-box")
         .append(
           '<button type="button" id=btn_apply_' +
             dataId +

scripts/js/groups-lists.js

@@ -285,7 +285,7 @@ function initTable() {
 
       // Select assigned groups
       selectEl.val(data.groups);
-      // Initialize Tom Select
+      // Initialize group multi-select
       const ts = utils.createGroupSelect(selectEl, {
         onChange() {
           // enable Apply button
@@ -294,6 +294,8 @@ function initTable() {
               .addClass("btn-success")
               .prop("disabled", false)
               .on("click", () => {
+                $(applyBtn).removeClass("btn-success").prop("disabled", true).off("click");
+                ts.close();
                 editList.call(selectEl);
               });
           }
@@ -309,7 +311,7 @@ function initTable() {
         },
       });
       $(ts.dropdown)
-        .find(".ts-actions-box")
+        .find(".multiselect-actions-box")
         .append(
           '<button type="button" id=btn_apply_' +
             dataId +

scripts/js/utils.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false, apiFailure: false, updateFtlInfo: false, NProgress:false, WaitMe:false, TomSelect: false */
+/* global moment:false, apiFailure: false, updateFtlInfo: false, NProgress:false, WaitMe:false */
 
 "use strict";
 
@@ -358,49 +358,140 @@ function validateHostnameStrict(name) {
 }
 
 /**
- * Create a Tom Select multi-select out of a <select multiple> element, with
- * "Select all"/"Select none" actions injected into the dropdown (bootstrap-
- * select used to provide this via its actionsBox option).
+ * Create a bootstrap-multiselect out of a <select multiple> element, with
+ * "Select all"/"Select none" actions injected above the options.
  * @param {HTMLElement|jQuery} selectEl - The <select multiple> element (or a jQuery wrapper around it)
- * @param {object} [options] - Extra options merged into the Tom Select config
- * @returns {TomSelect} The created Tom Select instance
+ * @param {object} [options] - Extra options merged into the bootstrap-multiselect config
+ * @returns {object} A small wrapper exposing compatibility helpers used by callers
  */
 function createGroupSelect(selectEl, options = {}) {
-  const el = selectEl instanceof HTMLElement ? selectEl : selectEl[0];
-  const allValues = [...el.options].map(option => option.value);
-
-  const ts = new TomSelect(el, {
-    plugins: ["remove_button"],
-    create: false,
-    placeholder: "none selected",
-    // Tom Select keeps the placeholder visible on multi-selects by default;
-    // hide it once at least one group is selected so the "none selected"
-    // hint does not sit below the selected item chips.
-    hidePlaceholder: true,
-    // Render the dropdown into <body> instead of nesting it in the table
-    // cell, since ancestors like .table-responsive/.card clip overflow and
-    // would otherwise cut it off (bootstrap-select used container: "body"
-    // for the same reason).
-    dropdownParent: "body",
-    ...options,
+  const select = selectEl instanceof HTMLElement ? $(selectEl) : selectEl;
+  const allValues = select.find("option").map((_, option) => option.value).get();
+  const { onChange, onDropdownClose, onInitialized, ...multiselectOptions } = options;
+
+  select.multiselect({
+    nonSelectedText: "none selected",
+    buttonContainer: '<div class="btn-group w-100" />',
+    buttonWidth: "100%",
+    onChange(option, checked) {
+      if (typeof onChange === "function") {
+        onChange(option, checked);
+      }
+    },
+    onDropdownHidden(event) {
+      if (typeof onDropdownClose === "function") {
+        onDropdownClose(event);
+      }
+    },
+    onInitialized(initializedSelect, initializedContainer) {
+      if (typeof onInitialized === "function") {
+        onInitialized(initializedSelect, initializedContainer);
+      }
+    },
+    ...multiselectOptions,
   });
 
-  const actionsBox = document.createElement("div");
-  actionsBox.className = "ts-actions-box";
-  actionsBox.innerHTML =
-    '<div class="btn-group btn-group-sm">' +
-    '<button type="button" class="btn btn-secondary btn-sm select-all">All</button>' +
-    '<button type="button" class="btn btn-secondary btn-sm select-none">None</button>' +
-    "</div>";
-  actionsBox.querySelector(".select-all").addEventListener("click", () => {
-    ts.setValue(allValues);
+  const multiselect = select.data("multiselect");
+  const container = multiselect ? multiselect.$container : $();
+  const button = multiselect ? multiselect.$button : $();
+  const dropdown = multiselect ? multiselect.$popupContainer : $();
+  const dropdownParent = dropdown.parent();
+  const updateDropdownPosition = () => {
+    if (button.length === 0 || dropdown.length === 0) {
+      return;
+    }
+
+    const rect = button[0].getBoundingClientRect();
+    dropdown[0].style.setProperty("--multiselect-trigger-left", `${rect.left}px`);
+    dropdown[0].style.setProperty("--multiselect-trigger-bottom", `${rect.bottom}px`);
+    dropdown[0].style.setProperty("--multiselect-trigger-width", `${rect.width}px`);
+  };
+
+  const cleanupDropdown = () => {
+    $(window).off("resize", updateDropdownPosition).off("scroll", updateDropdownPosition);
+
+    if (dropdown.length === 0 || dropdownParent.length === 0) {
+      return;
+    }
+
+    dropdown.removeClass("multiselect-floating-menu show");
+    dropdown[0].style.removeProperty("--multiselect-trigger-left");
+    dropdown[0].style.removeProperty("--multiselect-trigger-bottom");
+    dropdown[0].style.removeProperty("--multiselect-trigger-width");
+    dropdown.appendTo(dropdownParent);
+  };
+
+  container
+    .on("shown.bs.dropdown.multiselectPortal", () => {
+      if (dropdown.length === 0 || dropdownParent.length === 0) {
+        return;
+      }
+
+      dropdown.detach().appendTo(document.body);
+      dropdown.addClass("multiselect-floating-menu");
+      updateDropdownPosition();
+      $(window)
+        .on("resize", updateDropdownPosition)
+        .on("scroll", updateDropdownPosition);
+    })
+    .on("hidden.bs.dropdown.multiselectPortal", () => {
+      cleanupDropdown();
+    });
+
+  const actionsItem = $(
+    '<div class="multiselect-actions">' +
+      '<div class="multiselect-actions-box">' +
+      '<div class="btn-group btn-group-sm">' +
+      '<button type="button" class="btn btn-secondary btn-sm select-all">All</button>' +
+      '<button type="button" class="btn btn-secondary btn-sm select-none">None</button>' +
+      "</div>" +
+      "</div>" +
+      "</div>"
+  );
+
+  actionsItem.find(".select-all").on("click", event => {
+    event.preventDefault();
+    select.multiselect("select", allValues, true);
   });
-  actionsBox.querySelector(".select-none").addEventListener("click", () => {
-    ts.clear();
+
+  actionsItem.find(".select-none").on("click", event => {
+    event.preventDefault();
+    const selectedValues = select.find("option:selected").map((_, option) => option.value).get();
+    select.multiselect("deselect", selectedValues, true);
   });
-  ts.dropdown.prepend(actionsBox);
 
-  return ts;
+  dropdown.prepend(actionsItem);
+
+  return {
+    setValue(values) {
+      const selectedValues = select.find("option:selected").map((_, option) => option.value).get();
+
+      if (selectedValues.length > 0) {
+        select.multiselect("deselect", selectedValues);
+      }
+
+      if (Array.isArray(values) && values.length > 0) {
+        select.multiselect("select", values);
+      }
+
+      select.multiselect("updateButtonText");
+    },
+    clear() {
+      const selectedValues = select.find("option:selected").map((_, option) => option.value).get();
+
+      if (selectedValues.length > 0) {
+        select.multiselect("deselect", selectedValues);
+      }
+
+      select.multiselect("updateButtonText");
+    },
+    close() {
+      button.removeClass("show").attr("aria-expanded", "false");
+      container.removeClass("show");
+      cleanupDropdown();
+    },
+    dropdown,
+  };
 }
 
 const backupStorage = {};

style/pi-hole.css

@@ -555,26 +555,40 @@ tfoot.add-new-item > tr > th {
   --bs-form-select-bg-img: url("../../style/icons/form-select-arrow-dark.svg");
 }
 
-/* Tom Select "Select all / Select none" actions, injected above the
-  options list to replace bootstrap-select's actionsBox feature */
-.ts-actions-box {
+.multiselect-actions-box {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25em;
   padding: 0.5em;
   border-bottom: 1px solid var(--bs-border-color);
 }
 
-.ts-actions-box .btn {
+.multiselect-actions-box .btn {
   flex: 1 0 auto;
 }
 
-.ts-actions-box .btn-group {
+.multiselect-actions-box .btn-group {
   display: flex;
   gap: 2px;
   width: 100%;
 }
 
+.multiselect-floating-menu {
+  position: fixed;
+  inset: auto auto auto auto;
+  top: var(--multiselect-trigger-bottom);
+  left: var(--multiselect-trigger-left);
+  min-width: var(--multiselect-trigger-width);
+  max-width: calc(100vw - var(--multiselect-trigger-left) - 16px);
+  z-index: 1055;
+}
+
+.multiselect-container .dropdown-item.active,
+.multiselect-container .dropdown-item:active {
+  color: var(--bs-dropdown-link-active-color);
+  background-color: var(--bs-dropdown-link-active-bg);
+}
+
 .sidebar-menu .nav-link p {
   width: 100%;
 }
@@ -1765,19 +1779,6 @@ td.dnssec i {
   text-align: center;
 }
 
-/* Tom Select general styles */
-.ts-control,
-.ts-control input,
-.ts-dropdown {
-  font-size: 12px;
-}
-
-/* Tom Select - Dark theme colors */
-/* Dropdown menu background and border alignment */
-[data-bs-theme="dark"] .ts-dropdown {
-  color: var(--bs-dropdown-link-color);
-}
-
 /* Dropdown individual option items */
 [data-bs-theme="dark"] .ts-dropdown .option {
   color: var(--bs-dropdown-link-color);