diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 92dcc2b6..7415b552 100644
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/scripts/pi-hole/js/groups-adlists.js
@@ -26,6 +26,7 @@ function get_groups() {
$(document).ready(function() {
$("#btnAdd").on("click", addAdlist);
+ utils.bsSelect_defaults();
get_groups();
});
@@ -47,6 +48,8 @@ function initTable() {
],
drawCallback: function() {
$('button[id^="deleteAdlist_"]').on("click", deleteAdlist);
+ // Remove visible dropdown to prevent orphaning
+ $("body > .bootstrap-select.dropdown").remove();
},
rowCallback: function(row, data) {
$(row).attr("data-id", data.id);
@@ -88,61 +91,74 @@ function initTable() {
$("td:eq(3)", row).empty();
$("td:eq(3)", row).append(
- '
' +
- '
'
+ ''
);
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(
- $("")
+ $("")
.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: '',
- 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() {
+ editAdlist.call(selectEl);
+ });
}
+ })
+ .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(
+ ''
+ );
- 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", editAdlist);
+ var ApplyBtn = "#btn_apply_" + data.id;
var button =
'