improve multiselect

Signed-off-by: Th3M3 <the_me@outlook.de>

scripts/pi-hole/js/groups-domains.js

@@ -55,6 +55,7 @@ $(document).ready(function() {
 
   $("#add2black, #add2white").on("click", addDomain);
 
+  utils.bsSelect_defaults();
   get_groups();
 });
 
@@ -77,6 +78,8 @@ function initTable() {
     ],
     drawCallback: function() {
       $('button[id^="deleteDomain_"]').on("click", deleteDomain);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
     },
     rowCallback: function(row, data) {
       $(row).attr("data-id", data.id);
@@ -153,63 +156,76 @@ function initTable() {
       if (table.column(5).visible()) {
         $("td:eq(4)", row).empty();
         $("td:eq(4)", row).append(
-          '<div id="selectHome_' +
-            data.id +
-            '">' +
-            '<select id="multiselect_' +
-            data.id +
-            '" multiple="multiple"></select></div>'
+          '<select class="selectpicker" id="multiselect_' + data.id + '" multiple></select>'
         );
         var selectEl = $("#multiselect_" + data.id, row);
         // Add all known groups
         for (var i = 0; i < groups.length; i++) {
-          var extra = "";
+          var data_sub = "";
           if (!groups[i].enabled) {
-            extra = " (disabled)";
+            data_sub = 'data-subtext="(disabled)"';
           }
 
           selectEl.append(
-            $("<option />")
+            $("<option " + data_sub + "/>")
               .val(groups[i].id)
-              .text(groups[i].name + extra)
+              .text(groups[i].name)
           );
         }
 
         // Select assigned groups
         selectEl.val(data.groups);
-        // Initialize multiselect
-        selectEl.multiselect({
-          includeSelectAllOption: true,
-          buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
-          maxHeight: 200,
-          onDropdownShown: function() {
-            var el = $("#container_" + data.id);
-            var top = el[0].getBoundingClientRect().top;
-            var bottom = $(window).height() - top - el.height();
-            if (bottom < 200) {
-              el.addClass("dropup");
+        // Initialize bootstrap-select
+        selectEl
+          // fix dropdown if it would stick out right of the viewport
+          .on("show.bs.select", function() {
+            var winWidth = $(window).width();
+            var dropdownEl = $("body > .bootstrap-select.dropdown");
+            if (dropdownEl.length > 0) {
+              dropdownEl.removeClass("align-right");
+              var width = dropdownEl.width();
+              var left = dropdownEl.offset().left;
+              if (left + width > winWidth) {
+                dropdownEl.addClass("align-right");
+              }
             }
-
-            if (bottom > 200) {
-              el.removeClass("dropup");
+          })
+          .on("changed.bs.select", function() {
+            // enable Apply button
+            if ($(ApplyBtn).prop("disabled")) {
+              $(ApplyBtn)
+                .addClass("btn-success")
+                .prop("disabled", false)
+                .on("click", function() {
+                  editDomain.call(selectEl);
+                });
             }
-
-            var offset = el.offset();
-            $("body").append(el);
-            el.css("position", "absolute");
-            el.css("top", offset.top + "px");
-            el.css("left", offset.left + "px");
-          },
-          onDropdownHide: function() {
-            var el = $("#container_" + data.id);
-            var home = $("#selectHome_" + data.id);
-            home.append(el);
-            el.removeAttr("style");
-          }
-        });
-        selectEl.on("change", editDomain);
+          })
+          .on("hide.bs.select", function() {
+            // Restore values if drop-down menu is closed without clicking the Apply button
+            if (!$(ApplyBtn).prop("disabled")) {
+              $(this)
+                .val(data.groups)
+                .selectpicker("refresh");
+              $(ApplyBtn)
+                .removeClass("btn-success")
+                .prop("disabled", true)
+                .off("click");
+            }
+          })
+          .selectpicker()
+          .siblings(".dropdown-menu")
+          .find(".btn-group")
+          .parent()
+          .prepend(
+            '<button type="button" id=btn_apply_' +
+              data.id +
+              ' class="btn btn-block btn-sm" disabled>Apply</button>'
+          );
       }
 
+      var ApplyBtn = "#btn_apply_" + data.id;
+
       // Highlight row (if url parameter "domainid=" is used)
       if ("domainid" in GETDict && data.id === parseInt(GETDict.domainid)) {
         $(row)
@@ -364,7 +380,7 @@ function addDomain() {
         domainEl.val("");
         commentEl.val("");
         wildcardEl.prop("checked", false);
-        table.ajax.reload();
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert("error", "", "Error while adding new " + domain_regex, response.message);
       }
@@ -456,6 +472,7 @@ function editDomain() {
           "Successfully " + done + " " + domain_regex,
           domain
         );
+        table.ajax.reload(null, false);
       } else
         utils.showAlert(
           "error",
@@ -509,7 +526,8 @@ function deleteDomain() {
         table
           .row(tr)
           .remove()
-          .draw(false);
+          .draw(false)
+          .ajax.reload(null, false);
       } else {
         utils.showAlert(
           "error",