From 0ee3c06c777123734c6e18af6b89768e130035d1 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Wed, 1 Jan 2020 15:57:33 +0000
Subject: [PATCH 01/27] Fix tooltip percentage computation. While we're at it,
 also put the blocked queries under permitted ones and show them in gray
 instead of blue.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/index.js | 38 +++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 026b73943..9871a939a 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -160,8 +160,8 @@ function updateQueriesOverTime() {
         timeLineChart.data.labels.push(d);
         var blocked = data.ads_over_time[1][hour];
         var permitted = data.domains_over_time[1][hour] - blocked;
-        timeLineChart.data.datasets[0].data.push(permitted);
-        timeLineChart.data.datasets[1].data.push(blocked);
+        timeLineChart.data.datasets[0].data.push(blocked);
+        timeLineChart.data.datasets[1].data.push(permitted);
       }
     }
 
@@ -764,6 +764,9 @@ $(document).ready(function() {
 
   updateSummaryData();
 
+  var blockedColor = "#999999";
+  var permittedColor = "#00a65a";
+
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   timeLineChart = new Chart(ctx, {
     type: "bar",
@@ -771,22 +774,22 @@ $(document).ready(function() {
       labels: [],
       datasets: [
         {
-          label: "Permitted DNS Queries",
+          label: "Blocked DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0, 166, 90,.8)",
-          borderColor: "rgba(0, 166, 90,.8)",
-          pointBorderColor: "rgba(0, 166, 90,.8)",
+          backgroundColor: blockedColor,
+          borderColor: blockedColor,
+          pointBorderColor: blockedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
           pointHitRadius: 5
         },
         {
-          label: "Blocked DNS Queries",
+          label: "Permitted DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0,192,239,1)",
-          borderColor: "rgba(0,192,239,1)",
-          pointBorderColor: "rgba(0,192,239,1)",
+          backgroundColor: permittedColor,
+          borderColor: permittedColor,
+          pointBorderColor: permittedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
@@ -798,6 +801,9 @@ $(document).ready(function() {
       tooltips: {
         enabled: true,
         mode: "x-axis",
+        itemSort: function(a, b) {
+          return b.datasetIndex - a.datasetIndex;
+        },
         callbacks: {
           title: function(tooltipItem) {
             var label = tooltipItem[0].xLabel;
@@ -806,15 +812,15 @@ $(document).ready(function() {
             var m = parseInt(time[2], 10) || 0;
             var from = padNumber(h) + ":" + padNumber(m - 5) + ":00";
             var to = padNumber(h) + ":" + padNumber(m + 4) + ":59";
-            return "Upstreams from " + from + " to " + to;
+            return "Queries from " + from + " to " + to;
           },
           label: function(tooltipItems, data) {
-            if (tooltipItems.datasetIndex === 1) {
+            if (tooltipItems.datasetIndex === 0) {
               var percentage = 0.0;
-              var total = parseInt(data.datasets[0].data[tooltipItems.index]);
-              var blocked = parseInt(data.datasets[1].data[tooltipItems.index]);
-              if (total > 0) {
-                percentage = (100.0 * blocked) / total;
+              var permitted = parseInt(data.datasets[1].data[tooltipItems.index]);
+              var blocked = parseInt(data.datasets[0].data[tooltipItems.index]);
+              if (permitted + blocked > 0) {
+                percentage = (100.0 * blocked) / (permitted + blocked);
               }
 
               return (

From ac1e68acdedb7376678fbf8703bb4a03bde59bbc Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Wed, 1 Jan 2020 18:20:42 +0000
Subject: [PATCH 02/27] Apply the same changes to the long-term graph page.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/db_graph.js | 59 ++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index aab3eb777..b57ead4b1 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/scripts/pi-hole/js/db_graph.js
@@ -160,23 +160,23 @@ function updateQueriesOverTime() {
       for (hour in dates) {
         if (Object.prototype.hasOwnProperty.call(dates, hour)) {
           var date,
-            dom = 0,
-            ads = 0;
+            total = 0,
+            blocked = 0;
           date = new Date(1000 * dates[hour]);
 
           var idx = data.domains_over_time[0].indexOf(dates[hour].toString());
           if (idx > -1) {
-            dom = data.domains_over_time[1][idx];
+            total = data.domains_over_time[1][idx];
           }
 
           idx = data.ads_over_time[0].indexOf(dates[hour].toString());
           if (idx > -1) {
-            ads = data.ads_over_time[1][idx];
+            blocked = data.ads_over_time[1][idx];
           }
 
           timeLineChart.data.labels.push(date);
-          timeLineChart.data.datasets[0].data.push(dom - ads);
-          timeLineChart.data.datasets[1].data.push(ads);
+          timeLineChart.data.datasets[0].data.push(blocked);
+          timeLineChart.data.datasets[1].data.push(total - blocked);
         }
       }
 
@@ -190,28 +190,30 @@ function updateQueriesOverTime() {
 
 $(document).ready(function() {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
+  var blockedColor = "#999999";
+  var permittedColor = "#00a65a";
   timeLineChart = new Chart(ctx, {
     type: "bar",
     data: {
       labels: [],
       datasets: [
         {
-          label: "Permitted DNS Queries",
+          label: "Blocked DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0, 166, 90,.8)",
-          borderColor: "rgba(0, 166, 90,.8)",
-          pointBorderColor: "rgba(0, 166, 90,.8)",
+          backgroundColor: blockedColor,
+          borderColor: blockedColor,
+          pointBorderColor: blockedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
           pointHitRadius: 5
         },
         {
-          label: "Blocked DNS Queries",
+          label: "Permitted DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0,192,239,1)",
-          borderColor: "rgba(0,192,239,1)",
-          pointBorderColor: "rgba(0,192,239,1)",
+          backgroundColor: permittedColor,
+          borderColor: permittedColor,
+          pointBorderColor: permittedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
@@ -222,6 +224,9 @@ $(document).ready(function() {
     options: {
       tooltips: {
         enabled: true,
+        itemSort: function(a, b) {
+          return b.datasetIndex - a.datasetIndex;
+        },
         mode: "x-axis",
         callbacks: {
           title: function(tooltipItem) {
@@ -232,8 +237,8 @@ $(document).ready(function() {
               "-" +
               padNumber(time.getMonth() + 1) +
               "-" +
-              padNumber(time.getDate()) +
-              " " +
+              padNumber(time.getDate());
+            var from_time =
               padNumber(time.getHours()) +
               ":" +
               padNumber(time.getMinutes()) +
@@ -245,22 +250,28 @@ $(document).ready(function() {
               "-" +
               padNumber(time.getMonth() + 1) +
               "-" +
-              padNumber(time.getDate()) +
-              " " +
+              padNumber(time.getDate());
+            var until_time =
               padNumber(time.getHours()) +
               ":" +
               padNumber(time.getMinutes()) +
               ":" +
               padNumber(time.getSeconds());
-            return "Queries from " + from_date + " to " + until_date;
+            if (from_date === until_date) {
+              return "Queries from " + from_time + " to " + until_time;
+            } else {
+              return (
+                "Queries from " + from_date + " " + from_time + " to " + until_date + " " + until_time
+              );
+            }
           },
           label: function(tooltipItems, data) {
-            if (tooltipItems.datasetIndex === 1) {
+            if (tooltipItems.datasetIndex === 0) {
               var percentage = 0.0;
-              var total = parseInt(data.datasets[0].data[tooltipItems.index]);
-              var blocked = parseInt(data.datasets[1].data[tooltipItems.index]);
-              if (total > 0) {
-                percentage = (100.0 * blocked) / total;
+              var permitted = parseInt(data.datasets[1].data[tooltipItems.index]);
+              var blocked = parseInt(data.datasets[0].data[tooltipItems.index]);
+              if (permitted + blocked > 0) {
+                percentage = (100.0 * blocked) / (permitted + blocked);
               }
 
               return (

From f2713a9b3d9a986bdccd82bcb00a93ad93f7cbe0 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 2 Jan 2020 13:24:45 +0000
Subject: [PATCH 03/27] Always show date (but only once if the interval is on
 the same date), break long lines on small displays, and abbreviate gray color
 definition.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/db_graph.js | 26 ++++++++++++++++++++------
 scripts/pi-hole/js/index.js    |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index b57ead4b1..8636244db 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/scripts/pi-hole/js/db_graph.js
@@ -190,7 +190,7 @@ function updateQueriesOverTime() {
 
 $(document).ready(function() {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
-  var blockedColor = "#999999";
+  var blockedColor = "#999";
   var permittedColor = "#00a65a";
   timeLineChart = new Chart(ctx, {
     type: "bar",
@@ -258,12 +258,26 @@ $(document).ready(function() {
               ":" +
               padNumber(time.getSeconds());
             if (from_date === until_date) {
-              return "Queries from " + from_time + " to " + until_time;
-            } else {
-              return (
-                "Queries from " + from_date + " " + from_time + " to " + until_date + " " + until_time
-              );
+              // Abbreviated form for intervals on the same day
+              return "Queries from " + from_time + " to " + until_time + " on " + from_date;
             }
+
+            // Full tooltip for intervals spanning more than one date.
+            // We split title in two lines on small screens
+            if ($(window).width() < 992) {
+              from_date += "\n";
+            }
+
+            return (
+              "Queries from " +
+              from_date +
+              " " +
+              from_time +
+              " to " +
+              until_date +
+              " " +
+              until_time
+            ).split("\n ");
           },
           label: function(tooltipItems, data) {
             if (tooltipItems.datasetIndex === 0) {
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9871a939a..4f61e62b0 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -764,7 +764,7 @@ $(document).ready(function() {
 
   updateSummaryData();
 
-  var blockedColor = "#999999";
+  var blockedColor = "#999";
   var permittedColor = "#00a65a";
 
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");

From 4337dabff646d39ddab1ddd4f2f04ed4a8f0b9fa Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 2 Jan 2020 13:28:01 +0000
Subject: [PATCH 04/27] Always break tooltip title into two lines on narrow
 screens.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/db_graph.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index 8636244db..e39f39b3e 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/scripts/pi-hole/js/db_graph.js
@@ -257,12 +257,20 @@ $(document).ready(function() {
               padNumber(time.getMinutes()) +
               ":" +
               padNumber(time.getSeconds());
+
             if (from_date === until_date) {
               // Abbreviated form for intervals on the same day
-              return "Queries from " + from_time + " to " + until_time + " on " + from_date;
+              // We split title in two lines on small screens
+              if ($(window).width() < 992) {
+                until_time += "\n";
+              }
+
+              return ("Queries from " + from_time + " to " + until_time + " on " + from_date).split(
+                "\n "
+              );
             }
 
-            // Full tooltip for intervals spanning more than one date.
+            // Full tooltip for intervals spanning more than one day
             // We split title in two lines on small screens
             if ($(window).width() < 992) {
               from_date += "\n";

From 4f824bec7845c75c60b957f8b44d598d2e2efcc7 Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Tue, 18 Feb 2020 08:41:06 +0000
Subject: [PATCH 05/27] Fix potential code injection on MAC address validator

Co-authored-by: DL6ER <dl6er@dl6er.de>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 scripts/pi-hole/php/savesettings.php | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/scripts/pi-hole/php/savesettings.php b/scripts/pi-hole/php/savesettings.php
index 6804f6a8b..8ea24bf8d 100644
--- a/scripts/pi-hole/php/savesettings.php
+++ b/scripts/pi-hole/php/savesettings.php
@@ -53,7 +53,15 @@ function validDomainWildcard($domain_name)
 function validMAC($mac_addr)
 {
   // Accepted input format: 00:01:02:1A:5F:FF (characters may be lower case)
-  return (preg_match('/([a-fA-F0-9]{2}[:]?){6}/', $mac_addr) == 1);
+  return !filter_var($mac_addr, FILTER_VALIDATE_MAC) === false;
+}
+
+function formatMAC($mac_addr)
+{
+	preg_match("/([0-9a-fA-F]{2}[:]){5}([0-9a-fA-F]{2})/", $mac_addr, $matches);
+	if(count($matches) > 0)
+		return $matches[0];
+	return null;
 }
 
 function validEmail($email)

From fd983a2b68ac5f3aa8a54fa7df5f2155430772bc Mon Sep 17 00:00:00 2001
From: Th3M3 <the_me@outlook.de>
Date: Sun, 15 Mar 2020 21:43:16 +0100
Subject: [PATCH 06/27] improve multiselect

Signed-off-by: Th3M3 <the_me@outlook.de>
---
 scripts/pi-hole/js/groups-adlists.js          |   97 +-
 scripts/pi-hole/js/groups-clients.js          |  100 +-
 scripts/pi-hole/js/groups-common.js           |   21 +-
 scripts/pi-hole/js/groups-domains.js          |  100 +-
 scripts/pi-hole/php/header.php                |    4 +-
 style/pi-hole.css                             |    5 +
 .../bootstrap/css/bootstrap-multiselect.css   |    1 -
 .../bootstrap/css/bootstrap-select.min.css    |    6 +
 .../bootstrap/js/bootstrap-multiselect.js     | 1716 -----------------
 .../bootstrap/js/bootstrap-select.min.js      |    9 +
 10 files changed, 218 insertions(+), 1841 deletions(-)
 delete mode 100644 style/vendor/bootstrap/css/bootstrap-multiselect.css
 create mode 100644 style/vendor/bootstrap/css/bootstrap-select.min.css
 delete mode 100644 style/vendor/bootstrap/js/bootstrap-multiselect.js
 create mode 100644 style/vendor/bootstrap/js/bootstrap-select.min.js

diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 92dcc2b6c..7415b5529 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(
-        '<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() {
+                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(
+          '<button type="button" id=btn_apply_' +
+            data.id +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
 
-          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 =
         '<button class="btn btn-danger btn-xs" type="button" id="deleteAdlist_' +
@@ -230,6 +246,7 @@ function addAdlist() {
           "Successfully added adlist",
           address
         );
+        table.ajax.reload(null, false);
         $("#new_address").val("");
         $("#new_comment").val("");
         table.ajax.reload();
@@ -304,6 +321,7 @@ function editAdlist() {
           "Successfully " + done + " adlist ",
           address
         );
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert(
           "error",
@@ -350,7 +368,8 @@ function deleteAdlist() {
         table
           .row(tr)
           .remove()
-          .draw(false);
+          .draw(false)
+          .ajax.reload(null, false);
       } else {
         utils.showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
       }
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 14640a22c..66604d5c1 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -65,6 +65,7 @@ $(document).ready(function() {
   $("#btnAdd").on("click", addClient);
 
   reload_client_suggestions();
+  utils.bsSelect_defaults();
   get_groups();
 
   $("#select").on("change", function() {
@@ -90,6 +91,8 @@ function initTable() {
     ],
     drawCallback: function() {
       $('button[id^="deleteClient_"]').on("click", deleteClient);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
     },
     rowCallback: function(row, data) {
       $(row).attr("data-id", data.id);
@@ -126,61 +129,74 @@ function initTable() {
 
       $("td:eq(2)", row).empty();
       $("td:eq(2)", 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() {
+                editClient.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(
+          '<button type="button" id=btn_apply_' +
+            data.id +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
 
-          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", editClient);
+      var ApplyBtn = "#btn_apply_" + data.id;
 
       var button =
         '<button class="btn btn-danger btn-xs" type="button" id="deleteClient_' +
@@ -278,7 +294,7 @@ function addClient() {
       if (response.success) {
         utils.showAlert("success", "glyphicon glyphicon-plus", "Successfully added client", ip);
         reload_client_suggestions();
-        table.ajax.reload();
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert("error", "", "Error while adding new client", response.message);
       }
@@ -339,10 +355,11 @@ function editClient() {
       if (response.success) {
         utils.showAlert(
           "success",
-          "glyphicon glyphicon-plus",
+          "glyphicon glyphicon-pencil",
           "Successfully " + done + " client",
           ip_name
         );
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert(
           "error",
@@ -394,7 +411,8 @@ function deleteClient() {
         table
           .row(tr)
           .remove()
-          .draw(false);
+          .draw(false)
+          .ajax.reload(null, false);
         reload_client_suggestions();
       } else {
         utils.showAlert("error", "", "Error while deleting client with ID " + id, response.message);
diff --git a/scripts/pi-hole/js/groups-common.js b/scripts/pi-hole/js/groups-common.js
index e50d0af7b..903d5a432 100644
--- a/scripts/pi-hole/js/groups-common.js
+++ b/scripts/pi-hole/js/groups-common.js
@@ -129,6 +129,24 @@ function validateIPv6CIDR(ip) {
   return ipv6validator.test(ip);
 }
 
+function bsSelect_defaults() {
+  // set bootstrap-select defaults
+  var pickerDEFAULTS = $.fn.selectpicker.Constructor.DEFAULTS;
+  pickerDEFAULTS.noneSelectedText = "none selected";
+  pickerDEFAULTS.selectedTextFormat = "count > 1";
+  pickerDEFAULTS.actionsBox = true;
+  pickerDEFAULTS.width = "fit";
+  pickerDEFAULTS.container = "body";
+  pickerDEFAULTS.dropdownAlignRight = "auto";
+  pickerDEFAULTS.countSelectedText = function(num, total) {
+    if (num === total) {
+      return "All selected (" + num + ")";
+    }
+
+    return num + " selected";
+  };
+}
+
 window.utils = (function() {
   return {
     showAlert: showAlert,
@@ -136,6 +154,7 @@ window.utils = (function() {
     disableAll: disableAll,
     enableAll: enableAll,
     validateIPv4CIDR: validateIPv4CIDR,
-    validateIPv6CIDR: validateIPv6CIDR
+    validateIPv6CIDR: validateIPv6CIDR,
+    bsSelect_defaults: bsSelect_defaults
   };
 })();
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index f40df7107..20c22eabb 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/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",
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index 2cecd9e0f..2522ce139 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -223,8 +223,8 @@ function pidofFTL()
     <script src="scripts/vendor/bootstrap-notify.min.js"></script>
 
 <?php if(in_array($scriptname, array("groups.php", "groups-clients.php", "groups-domains.php", "groups-adlists.php"))){ ?>
-    <script src="style/vendor/bootstrap/js/bootstrap-multiselect.js"></script>
-    <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap-multiselect.css">
+    <script src="style/vendor/bootstrap/js/bootstrap-select.min.js"></script>
+    <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap-select.min.css">
     <script src="style/vendor/bootstrap/js/bootstrap-toggle.min.js"></script>
     <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap-toggle.min.css">
     <script src="scripts/vendor/moment.min.js"></script>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index c53cb42ea..08ee7abb0 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -260,4 +260,9 @@ code.breakall
 
 .pointer {
     cursor: pointer;
+}
+
+.bootstrap-select.bs-container.align-right {
+    left: unset !important;
+    right: 10px;
 }
\ No newline at end of file
diff --git a/style/vendor/bootstrap/css/bootstrap-multiselect.css b/style/vendor/bootstrap/css/bootstrap-multiselect.css
deleted file mode 100644
index 5acaf9f7a..000000000
--- a/style/vendor/bootstrap/css/bootstrap-multiselect.css
+++ /dev/null
@@ -1 +0,0 @@
-span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
diff --git a/style/vendor/bootstrap/css/bootstrap-select.min.css b/style/vendor/bootstrap/css/bootstrap-select.min.css
new file mode 100644
index 000000000..78f79a985
--- /dev/null
+++ b/style/vendor/bootstrap/css/bootstrap-select.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Bootstrap-select v1.13.12 (https://developer.snapappointments.com/bootstrap-select)
+ *
+ * Copyright 2012-2019 SnapAppointments, LLC
+ * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
+ */@-webkit-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}@-o-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}@keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}.bootstrap-select>select.bs-select-hidden,select.bs-select-hidden,select.selectpicker{display:none!important}.bootstrap-select{width:220px\0;vertical-align:middle}.bootstrap-select>.dropdown-toggle{position:relative;width:100%;text-align:right;white-space:nowrap;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.bootstrap-select>.dropdown-toggle:after{margin-top:-1px}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:#999}.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:hover{color:rgba(255,255,255,.5)}.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none;z-index:0!important}.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2!important}.bootstrap-select.is-invalid .dropdown-toggle,.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle,.was-validated .bootstrap-select select:invalid+.dropdown-toggle{border-color:#b94a48}.bootstrap-select.is-valid .dropdown-toggle,.was-validated .bootstrap-select select:valid+.dropdown-toggle{border-color:#28a745}.bootstrap-select.fit-width{width:auto!important}.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.bootstrap-select .dropdown-toggle:focus,.bootstrap-select>select.mobile-device:focus+.dropdown-toggle{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:none;height:auto}:not(.input-group)>.bootstrap-select.form-control:not([class*=col-]){width:100%}.bootstrap-select.form-control.input-group-btn{float:none;z-index:auto}.form-inline .bootstrap-select,.form-inline .bootstrap-select.form-control:not([class*=col-]){width:auto}.bootstrap-select:not(.input-group-btn),.bootstrap-select[class*=col-]{float:none;display:inline-block;margin-left:0}.bootstrap-select.dropdown-menu-right,.bootstrap-select[class*=col-].dropdown-menu-right,.row .bootstrap-select[class*=col-].dropdown-menu-right{float:right}.form-group .bootstrap-select,.form-horizontal .bootstrap-select,.form-inline .bootstrap-select{margin-bottom:0}.form-group-lg .bootstrap-select.form-control,.form-group-sm .bootstrap-select.form-control{padding:0}.form-group-lg .bootstrap-select.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-lg .dropdown-toggle,.bootstrap-select.form-control-sm .dropdown-toggle{font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-sm .dropdown-toggle{padding:.25rem .5rem}.bootstrap-select.form-control-lg .dropdown-toggle{padding:.5rem 1rem}.form-inline .bootstrap-select .form-control{width:100%}.bootstrap-select.disabled,.bootstrap-select>.disabled{cursor:not-allowed}.bootstrap-select.disabled:focus,.bootstrap-select>.disabled:focus{outline:0!important}.bootstrap-select.bs-container{position:absolute;top:0;left:0;height:0!important;padding:0!important}.bootstrap-select.bs-container .dropdown-menu{z-index:1060}.bootstrap-select .dropdown-toggle .filter-option{position:static;top:0;left:0;float:left;height:100%;width:100%;text-align:left;overflow:hidden;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.bs3.bootstrap-select .dropdown-toggle .filter-option{padding-right:inherit}.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option{position:absolute;padding-top:inherit;padding-bottom:inherit;padding-left:inherit;float:none}.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner{padding-right:inherit}.bootstrap-select .dropdown-toggle .filter-option-inner-inner{overflow:hidden}.bootstrap-select .dropdown-toggle .filter-expand{width:0!important;float:left;opacity:0!important;overflow:hidden}.bootstrap-select .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.input-group .bootstrap-select.form-control .dropdown-toggle{border-radius:inherit}.bootstrap-select[class*=col-] .dropdown-toggle{width:100%}.bootstrap-select .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .dropdown-menu>.inner:focus{outline:0!important}.bootstrap-select .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.bootstrap-select .dropdown-menu li{position:relative}.bootstrap-select .dropdown-menu li.active small{color:rgba(255,255,255,.5)!important}.bootstrap-select .dropdown-menu li.disabled a{cursor:not-allowed}.bootstrap-select .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bootstrap-select .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.bootstrap-select .dropdown-menu li a span.check-mark{display:none}.bootstrap-select .dropdown-menu li a span.text{display:inline-block}.bootstrap-select .dropdown-menu li small{padding-left:.5em}.bootstrap-select .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .dropdown-menu .notify.fadeOut{-webkit-animation:.3s linear 750ms forwards bs-notify-fadeOut;-o-animation:.3s linear 750ms forwards bs-notify-fadeOut;animation:.3s linear 750ms forwards bs-notify-fadeOut}.bootstrap-select .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.bootstrap-select.fit-width .dropdown-toggle .filter-option{position:static;display:inline;padding:0}.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner{display:inline}.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before{content:'\00a0'}.bootstrap-select.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{position:absolute;display:inline-block;right:15px;top:5px}.bootstrap-select.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select .bs-ok-default:after{content:'';display:block;width:.5em;height:1em;border-style:solid;border-width:0 .26em .26em 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle{z-index:1061}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before{bottom:auto;top:-4px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after{bottom:auto;top:-4px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:before{display:block}.bs-actionsbox,.bs-donebutton,.bs-searchbox{padding:4px 8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}
\ No newline at end of file
diff --git a/style/vendor/bootstrap/js/bootstrap-multiselect.js b/style/vendor/bootstrap/js/bootstrap-multiselect.js
deleted file mode 100644
index 9a50a18a0..000000000
--- a/style/vendor/bootstrap/js/bootstrap-multiselect.js
+++ /dev/null
@@ -1,1716 +0,0 @@
-/**
- * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)
- *
- * Apache License, Version 2.0:
- * Copyright (c) 2012 - 2015 David Stutz
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a
- * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * BSD 3-Clause License:
- * Copyright (c) 2012 - 2015 David Stutz
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *    - Redistributions of source code must retain the above copyright notice,
- *      this list of conditions and the following disclaimer.
- *    - Redistributions in binary form must reproduce the above copyright notice,
- *      this list of conditions and the following disclaimer in the documentation
- *      and/or other materials provided with the distribution.
- *    - Neither the name of David Stutz nor the names of its contributors may be
- *      used to endorse or promote products derived from this software without
- *      specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
- * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
- * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
- * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
- * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-!function ($) {
-    "use strict";// jshint ;_;
-
-    if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
-        ko.bindingHandlers.multiselect = {
-            after: ['options', 'value', 'selectedOptions', 'enable', 'disable'],
-
-            init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
-                var $element = $(element);
-                var config = ko.toJS(valueAccessor());
-
-                $element.multiselect(config);
-
-                if (allBindings.has('options')) {
-                    var options = allBindings.get('options');
-                    if (ko.isObservable(options)) {
-                        ko.computed({
-                            read: function() {
-                                options();
-                                setTimeout(function() {
-                                    var ms = $element.data('multiselect');
-                                    if (ms)
-                                        ms.updateOriginalOptions();//Not sure how beneficial this is.
-                                    $element.multiselect('rebuild');
-                                }, 1);
-                            },
-                            disposeWhenNodeIsRemoved: element
-                        });
-                    }
-                }
-
-                //value and selectedOptions are two-way, so these will be triggered even by our own actions.
-                //It needs some way to tell if they are triggered because of us or because of outside change.
-                //It doesn't loop but it's a waste of processing.
-                if (allBindings.has('value')) {
-                    var value = allBindings.get('value');
-                    if (ko.isObservable(value)) {
-                        ko.computed({
-                            read: function() {
-                                value();
-                                setTimeout(function() {
-                                    $element.multiselect('refresh');
-                                }, 1);
-                            },
-                            disposeWhenNodeIsRemoved: element
-                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
-                    }
-                }
-
-                //Switched from arrayChange subscription to general subscription using 'refresh'.
-                //Not sure performance is any better using 'select' and 'deselect'.
-                if (allBindings.has('selectedOptions')) {
-                    var selectedOptions = allBindings.get('selectedOptions');
-                    if (ko.isObservable(selectedOptions)) {
-                        ko.computed({
-                            read: function() {
-                                selectedOptions();
-                                setTimeout(function() {
-                                    $element.multiselect('refresh');
-                                }, 1);
-                            },
-                            disposeWhenNodeIsRemoved: element
-                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
-                    }
-                }
-
-                var setEnabled = function (enable) {
-                    setTimeout(function () {
-                        if (enable)
-                            $element.multiselect('enable');
-                        else
-                            $element.multiselect('disable');
-                    });
-                };
-
-                if (allBindings.has('enable')) {
-                    var enable = allBindings.get('enable');
-                    if (ko.isObservable(enable)) {
-                        ko.computed({
-                            read: function () {
-                                setEnabled(enable());
-                            },
-                            disposeWhenNodeIsRemoved: element
-                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
-                    } else {
-                        setEnabled(enable);
-                    }
-                }
-
-                if (allBindings.has('disable')) {
-                    var disable = allBindings.get('disable');
-                    if (ko.isObservable(disable)) {
-                        ko.computed({
-                            read: function () {
-                                setEnabled(!disable());
-                            },
-                            disposeWhenNodeIsRemoved: element
-                        }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
-                    } else {
-                        setEnabled(!disable);
-                    }
-                }
-
-                ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
-                    $element.multiselect('destroy');
-                });
-            },
-
-            update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
-                var $element = $(element);
-                var config = ko.toJS(valueAccessor());
-
-                $element.multiselect('setOptions', config);
-                $element.multiselect('rebuild');
-            }
-        };
-    }
-
-    function forEach(array, callback) {
-        for (var index = 0; index < array.length; ++index) {
-            callback(array[index], index);
-        }
-    }
-
-    /**
-     * Constructor to create a new multiselect using the given select.
-     *
-     * @param {jQuery} select
-     * @param {Object} options
-     * @returns {Multiselect}
-     */
-    function Multiselect(select, options) {
-
-        this.$select = $(select);
-        this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
-
-        // Placeholder via data attributes
-        if (this.$select.attr("data-placeholder")) {
-            this.options.nonSelectedText = this.$select.data("placeholder");
-        }
-
-        // Initialization.
-        // We have to clone to create a new reference.
-        this.originalOptions = this.$select.clone()[0].options;
-        this.query = '';
-        this.searchTimeout = null;
-        this.lastToggledInput = null;
-
-        this.options.multiple = this.$select.attr('multiple') === "multiple";
-        this.options.onChange = $.proxy(this.options.onChange, this);
-        this.options.onSelectAll = $.proxy(this.options.onSelectAll, this);
-        this.options.onDeselectAll = $.proxy(this.options.onDeselectAll, this);
-        this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
-        this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
-        this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
-        this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
-        this.options.onInitialized = $.proxy(this.options.onInitialized, this);
-        this.options.onFiltering = $.proxy(this.options.onFiltering, this);
-
-        // Build select all if enabled.
-        this.buildContainer();
-        this.buildButton();
-        this.buildDropdown();
-        this.buildSelectAll();
-        this.buildDropdownOptions();
-        this.buildFilter();
-
-        this.updateButtonText();
-        this.updateSelectAll(true);
-
-        if (this.options.enableClickableOptGroups && this.options.multiple) {
-            this.updateOptGroups();
-        }
-
-        this.options.wasDisabled = this.$select.prop('disabled');
-        if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
-            this.disable();
-        }
-
-        this.$select.wrap('<span class="multiselect-native-select" />').after(this.$container);
-        this.options.onInitialized(this.$select, this.$container);
-    }
-
-    Multiselect.prototype = {
-
-        defaults: {
-            /**
-             * Default text function will either print 'None selected' in case no
-             * option is selected or a list of the selected options up to a length
-             * of 3 selected options.
-             *
-             * @param {jQuery} options
-             * @param {jQuery} select
-             * @returns {String}
-             */
-            buttonText: function(options, select) {
-                if (this.disabledText.length > 0
-                        && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty)))  {
-
-                    return this.disabledText;
-                }
-                else if (options.length === 0) {
-                    return this.nonSelectedText;
-                }
-                else if (this.allSelectedText
-                        && options.length === $('option', $(select)).length
-                        && $('option', $(select)).length !== 1
-                        && this.multiple) {
-
-                    if (this.selectAllNumber) {
-                        return this.allSelectedText + ' (' + options.length + ')';
-                    }
-                    else {
-                        return this.allSelectedText;
-                    }
-                }
-                else if (options.length > this.numberDisplayed) {
-                    return options.length + ' ' + this.nSelectedText;
-                }
-                else {
-                    var selected = '';
-                    var delimiter = this.delimiterText;
-
-                    options.each(function() {
-                        var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
-                        selected += label + delimiter;
-                    });
-
-                    return selected.substr(0, selected.length - this.delimiterText.length);
-                }
-            },
-            /**
-             * Updates the title of the button similar to the buttonText function.
-             *
-             * @param {jQuery} options
-             * @param {jQuery} select
-             * @returns {@exp;selected@call;substr}
-             */
-            buttonTitle: function(options, select) {
-                if (options.length === 0) {
-                    return this.nonSelectedText;
-                }
-                else {
-                    var selected = '';
-                    var delimiter = this.delimiterText;
-
-                    options.each(function () {
-                        var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
-                        selected += label + delimiter;
-                    });
-                    return selected.substr(0, selected.length - this.delimiterText.length);
-                }
-            },
-            checkboxName: function(option) {
-                return false; // no checkbox name
-            },
-            /**
-             * Create a label.
-             *
-             * @param {jQuery} element
-             * @returns {String}
-             */
-            optionLabel: function(element){
-                return $(element).attr('label') || $(element).text();
-            },
-            /**
-             * Create a class.
-             *
-             * @param {jQuery} element
-             * @returns {String}
-             */
-            optionClass: function(element) {
-                return $(element).attr('class') || '';
-            },
-            /**
-             * Triggered on change of the multiselect.
-             *
-             * Not triggered when selecting/deselecting options manually.
-             *
-             * @param {jQuery} option
-             * @param {Boolean} checked
-             */
-            onChange : function(option, checked) {
-
-            },
-            /**
-             * Triggered when the dropdown is shown.
-             *
-             * @param {jQuery} event
-             */
-            onDropdownShow: function(event) {
-
-            },
-            /**
-             * Triggered when the dropdown is hidden.
-             *
-             * @param {jQuery} event
-             */
-            onDropdownHide: function(event) {
-
-            },
-            /**
-             * Triggered after the dropdown is shown.
-             *
-             * @param {jQuery} event
-             */
-            onDropdownShown: function(event) {
-
-            },
-            /**
-             * Triggered after the dropdown is hidden.
-             *
-             * @param {jQuery} event
-             */
-            onDropdownHidden: function(event) {
-
-            },
-            /**
-             * Triggered on select all.
-             */
-            onSelectAll: function() {
-
-            },
-            /**
-             * Triggered on deselect all.
-             */
-            onDeselectAll: function() {
-
-            },
-            /**
-             * Triggered after initializing.
-             *
-             * @param {jQuery} $select
-             * @param {jQuery} $container
-             */
-            onInitialized: function($select, $container) {
-
-            },
-            /**
-             * Triggered on filtering.
-             *
-             * @param {jQuery} $filter
-             */
-            onFiltering: function($filter) {
-
-            },
-            enableHTML: false,
-            buttonClass: 'btn btn-default',
-            inheritClass: false,
-            buttonWidth: 'auto',
-            buttonContainer: '<div class="btn-group" />',
-            dropRight: false,
-            dropUp: false,
-            selectedClass: 'active',
-            // Maximum height of the dropdown menu.
-            // If maximum height is exceeded a scrollbar will be displayed.
-            maxHeight: false,
-            includeSelectAllOption: false,
-            includeSelectAllIfMoreThan: 0,
-            selectAllText: ' Select all',
-            selectAllValue: 'multiselect-all',
-            selectAllName: false,
-            selectAllNumber: true,
-            selectAllJustVisible: true,
-            enableFiltering: false,
-            enableCaseInsensitiveFiltering: false,
-            enableFullValueFiltering: false,
-            enableClickableOptGroups: false,
-            enableCollapsibleOptGroups: false,
-            filterPlaceholder: 'Search',
-            // possible options: 'text', 'value', 'both'
-            filterBehavior: 'text',
-            includeFilterClearBtn: true,
-            preventInputChangeEvent: false,
-            nonSelectedText: 'None selected',
-            nSelectedText: 'selected',
-            allSelectedText: 'All selected',
-            numberDisplayed: 3,
-            disableIfEmpty: false,
-            disabledText: '',
-            delimiterText: ', ',
-            templates: {
-                button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
-                ul: '<ul class="multiselect-container dropdown-menu"></ul>',
-                filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
-                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
-                li: '<li><a tabindex="0"><label></label></a></li>',
-                divider: '<li class="multiselect-item divider"></li>',
-                liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
-            }
-        },
-
-        constructor: Multiselect,
-
-        /**
-         * Builds the container of the multiselect.
-         */
-        buildContainer: function() {
-            this.$container = $(this.options.buttonContainer);
-            this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
-            this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
-            this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);
-            this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);
-        },
-
-        /**
-         * Builds the button of the multiselect.
-         */
-        buildButton: function() {
-            this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
-            if (this.$select.attr('class') && this.options.inheritClass) {
-                this.$button.addClass(this.$select.attr('class'));
-            }
-            // Adopt active state.
-            if (this.$select.prop('disabled')) {
-                this.disable();
-            }
-            else {
-                this.enable();
-            }
-
-            // Manually add button width if set.
-            if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
-                this.$button.css({
-                    'width' : '100%', //this.options.buttonWidth,
-                    'overflow' : 'hidden',
-                    'text-overflow' : 'ellipsis'
-                });
-                this.$container.css({
-                    'width': this.options.buttonWidth
-                });
-            }
-
-            // Keep the tab index from the select.
-            var tabindex = this.$select.attr('tabindex');
-            if (tabindex) {
-                this.$button.attr('tabindex', tabindex);
-            }
-
-            this.$container.prepend(this.$button);
-        },
-
-        /**
-         * Builds the ul representing the dropdown menu.
-         */
-        buildDropdown: function() {
-
-            // Build ul.
-            this.$ul = $(this.options.templates.ul);
-
-            if (this.options.dropRight) {
-                this.$ul.addClass('pull-right');
-            }
-
-            // Set max height of dropdown menu to activate auto scrollbar.
-            if (this.options.maxHeight) {
-                // TODO: Add a class for this option to move the css declarations.
-                this.$ul.css({
-                    'max-height': this.options.maxHeight + 'px',
-                    'overflow-y': 'auto',
-                    'overflow-x': 'hidden'
-                });
-            }
-
-            if (this.options.dropUp) {
-
-                var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0));
-                var moveCalc = height + 34;
-
-                this.$ul.css({
-                    'max-height': height + 'px',
-                    'overflow-y': 'auto',
-                    'overflow-x': 'hidden',
-                    'margin-top': "-" + moveCalc + 'px'
-                });
-            }
-
-            this.$container.append(this.$ul);
-        },
-
-        /**
-         * Build the dropdown options and binds all necessary events.
-         *
-         * Uses createDivider and createOptionValue to create the necessary options.
-         */
-        buildDropdownOptions: function() {
-
-            this.$select.children().each($.proxy(function(index, element) {
-
-                var $element = $(element);
-                // Support optgroups and options without a group simultaneously.
-                var tag = $element.prop('tagName')
-                    .toLowerCase();
-
-                if ($element.prop('value') === this.options.selectAllValue) {
-                    return;
-                }
-
-                if (tag === 'optgroup') {
-                    this.createOptgroup(element);
-                }
-                else if (tag === 'option') {
-
-                    if ($element.data('role') === 'divider') {
-                        this.createDivider();
-                    }
-                    else {
-                        this.createOptionValue(element);
-                    }
-
-                }
-
-                // Other illegal tags will be ignored.
-            }, this));
-
-            // Bind the change event on the dropdown elements.
-            $('li:not(.multiselect-group) input', this.$ul).on('change', $.proxy(function(event) {
-                var $target = $(event.target);
-
-                var checked = $target.prop('checked') || false;
-                var isSelectAllOption = $target.val() === this.options.selectAllValue;
-
-                // Apply or unapply the configured selected class.
-                if (this.options.selectedClass) {
-                    if (checked) {
-                        $target.closest('li')
-                            .addClass(this.options.selectedClass);
-                    }
-                    else {
-                        $target.closest('li')
-                            .removeClass(this.options.selectedClass);
-                    }
-                }
-
-                // Get the corresponding option.
-                var value = $target.val();
-                var $option = this.getOptionByValue(value);
-
-                var $optionsNotThis = $('option', this.$select).not($option);
-                var $checkboxesNotThis = $('input', this.$container).not($target);
-
-                if (isSelectAllOption) {
-
-                    if (checked) {
-                        this.selectAll(this.options.selectAllJustVisible, true);
-                    }
-                    else {
-                        this.deselectAll(this.options.selectAllJustVisible, true);
-                    }
-                }
-                else {
-                    if (checked) {
-                        $option.prop('selected', true);
-
-                        if (this.options.multiple) {
-                            // Simply select additional option.
-                            $option.prop('selected', true);
-                        }
-                        else {
-                            // Unselect all other options and corresponding checkboxes.
-                            if (this.options.selectedClass) {
-                                $($checkboxesNotThis).closest('li').removeClass(this.options.selectedClass);
-                            }
-
-                            $($checkboxesNotThis).prop('checked', false);
-                            $optionsNotThis.prop('selected', false);
-
-                            // It's a single selection, so close.
-                            this.$button.click();
-                        }
-
-                        if (this.options.selectedClass === "active") {
-                            $optionsNotThis.closest("a").css("outline", "");
-                        }
-                    }
-                    else {
-                        // Unselect option.
-                        $option.prop('selected', false);
-                    }
-
-                    // To prevent select all from firing onChange: #575
-                    this.options.onChange($option, checked);
-
-                    // Do not update select all or optgroups on select all change!
-                    this.updateSelectAll();
-
-                    if (this.options.enableClickableOptGroups && this.options.multiple) {
-                        this.updateOptGroups();
-                    }
-                }
-
-                this.$select.change();
-                this.updateButtonText();
-
-                if(this.options.preventInputChangeEvent) {
-                    return false;
-                }
-            }, this));
-
-            $('li a', this.$ul).on('mousedown', function(e) {
-                if (e.shiftKey) {
-                    // Prevent selecting text by Shift+click
-                    return false;
-                }
-            });
-
-            $('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
-                event.stopPropagation();
-
-                var $target = $(event.target);
-
-                if (event.shiftKey && this.options.multiple) {
-                    if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
-                        event.preventDefault();
-                        $target = $target.find("input");
-                        $target.prop("checked", !$target.prop("checked"));
-                    }
-                    var checked = $target.prop('checked') || false;
-
-                    if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
-                        var from = $target.closest("li").index();
-                        var to = this.lastToggledInput.closest("li").index();
-
-                        if (from > to) { // Swap the indices
-                            var tmp = to;
-                            to = from;
-                            from = tmp;
-                        }
-
-                        // Make sure we grab all elements since slice excludes the last index
-                        ++to;
-
-                        // Change the checkboxes and underlying options
-                        var range = this.$ul.find("li").slice(from, to).find("input");
-
-                        range.prop('checked', checked);
-
-                        if (this.options.selectedClass) {
-                            range.closest('li')
-                                .toggleClass(this.options.selectedClass, checked);
-                        }
-
-                        for (var i = 0, j = range.length; i < j; i++) {
-                            var $checkbox = $(range[i]);
-
-                            var $option = this.getOptionByValue($checkbox.val());
-
-                            $option.prop('selected', checked);
-                        }
-                    }
-
-                    // Trigger the select "change" event
-                    $target.trigger("change");
-                }
-
-                // Remembers last clicked option
-                if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
-                    this.lastToggledInput = $target;
-                }
-
-                $target.blur();
-            }, this));
-
-            // Keyboard support.
-            this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function(event) {
-                if ($('input[type="text"]', this.$container).is(':focus')) {
-                    return;
-                }
-
-                if (event.keyCode === 9 && this.$container.hasClass('open')) {
-                    this.$button.click();
-                }
-                else {
-                    var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible");
-
-                    if (!$items.length) {
-                        return;
-                    }
-
-                    var index = $items.index($items.filter(':focus'));
-
-                    // Navigation up.
-                    if (event.keyCode === 38 && index > 0) {
-                        index--;
-                    }
-                    // Navigate down.
-                    else if (event.keyCode === 40 && index < $items.length - 1) {
-                        index++;
-                    }
-                    else if (!~index) {
-                        index = 0;
-                    }
-
-                    var $current = $items.eq(index);
-                    $current.focus();
-
-                    if (event.keyCode === 32 || event.keyCode === 13) {
-                        var $checkbox = $current.find('input');
-
-                        $checkbox.prop("checked", !$checkbox.prop("checked"));
-                        $checkbox.change();
-                    }
-
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-            }, this));
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                $("li.multiselect-group input", this.$ul).on("change", $.proxy(function(event) {
-                    event.stopPropagation();
-
-                    var $target = $(event.target);
-                    var checked = $target.prop('checked') || false;
-
-                    var $li = $(event.target).closest('li');
-                    var $group = $li.nextUntil("li.multiselect-group")
-                        .not('.multiselect-filter-hidden')
-                        .not('.disabled');
-
-                    var $inputs = $group.find("input");
-
-                    var values = [];
-                    var $options = [];
-
-                    if (this.options.selectedClass) {
-                        if (checked) {
-                            $li.addClass(this.options.selectedClass);
-                        }
-                        else {
-                            $li.removeClass(this.options.selectedClass);
-                        }
-                    }
-
-                    $.each($inputs, $.proxy(function(index, input) {
-                        var value = $(input).val();
-                        var $option = this.getOptionByValue(value);
-
-                        if (checked) {
-                            $(input).prop('checked', true);
-                            $(input).closest('li')
-                                .addClass(this.options.selectedClass);
-
-                            $option.prop('selected', true);
-                        }
-                        else {
-                            $(input).prop('checked', false);
-                            $(input).closest('li')
-                                .removeClass(this.options.selectedClass);
-
-                            $option.prop('selected', false);
-                        }
-
-                        $options.push(this.getOptionByValue(value));
-                    }, this))
-
-                    // Cannot use select or deselect here because it would call updateOptGroups again.
-
-                    this.options.onChange($options, checked);
-
-                    this.updateButtonText();
-                    this.updateSelectAll();
-                }, this));
-            }
-
-            if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
-                $("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
-                    var $li = $(event.target).closest('li');
-                    var $inputs = $li.nextUntil("li.multiselect-group")
-                            .not('.multiselect-filter-hidden');
-
-                    var visible = true;
-                    $inputs.each(function() {
-                        visible = visible && $(this).is(':visible');
-                    });
-
-                    if (visible) {
-                        $inputs.hide()
-                            .addClass('multiselect-collapsible-hidden');
-                    }
-                    else {
-                        $inputs.show()
-                            .removeClass('multiselect-collapsible-hidden');
-                    }
-                }, this));
-
-                $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
-                $("li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
-                $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
-            }
-        },
-
-        /**
-         * Create an option using the given select option.
-         *
-         * @param {jQuery} element
-         */
-        createOptionValue: function(element) {
-            var $element = $(element);
-            if ($element.is(':selected')) {
-                $element.prop('selected', true);
-            }
-
-            // Support the label attribute on options.
-            var label = this.options.optionLabel(element);
-            var classes = this.options.optionClass(element);
-            var value = $element.val();
-            var inputType = this.options.multiple ? "checkbox" : "radio";
-
-            var $li = $(this.options.templates.li);
-            var $label = $('label', $li);
-            $label.addClass(inputType);
-            $li.addClass(classes);
-
-            if (this.options.enableHTML) {
-                $label.html(" " + label);
-            }
-            else {
-                $label.text(" " + label);
-            }
-
-            var $checkbox = $('<input/>').attr('type', inputType);
-
-            var name = this.options.checkboxName($element);
-            if (name) {
-                $checkbox.attr('name', name);
-            }
-
-            $label.prepend($checkbox);
-
-            var selected = $element.prop('selected') || false;
-            $checkbox.val(value);
-
-            if (value === this.options.selectAllValue) {
-                $li.addClass("multiselect-item multiselect-all");
-                $checkbox.parent().parent()
-                    .addClass('multiselect-all');
-            }
-
-            $label.attr('title', $element.attr('title'));
-
-            this.$ul.append($li);
-
-            if ($element.is(':disabled')) {
-                $checkbox.attr('disabled', 'disabled')
-                    .prop('disabled', true)
-                    .closest('a')
-                    .attr("tabindex", "-1")
-                    .closest('li')
-                    .addClass('disabled');
-            }
-
-            $checkbox.prop('checked', selected);
-
-            if (selected && this.options.selectedClass) {
-                $checkbox.closest('li')
-                    .addClass(this.options.selectedClass);
-            }
-        },
-
-        /**
-         * Creates a divider using the given select option.
-         *
-         * @param {jQuery} element
-         */
-        createDivider: function(element) {
-            var $divider = $(this.options.templates.divider);
-            this.$ul.append($divider);
-        },
-
-        /**
-         * Creates an optgroup.
-         *
-         * @param {jQuery} group
-         */
-        createOptgroup: function(group) {
-            var label = $(group).attr("label");
-            var value = $(group).attr("value");
-            var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>');
-
-            var classes = this.options.optionClass(group);
-            $li.addClass(classes);
-
-            if (this.options.enableHTML) {
-                $('label b', $li).html(" " + label);
-            }
-            else {
-                $('label b', $li).text(" " + label);
-            }
-
-            if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
-                $('a', $li).append('<span class="caret-container"><b class="caret"></b></span>');
-            }
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                $('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
-            }
-
-            if ($(group).is(':disabled')) {
-                $li.addClass('disabled');
-            }
-
-            this.$ul.append($li);
-
-            $("option", group).each($.proxy(function($, group) {
-                this.createOptionValue(group);
-            }, this))
-        },
-
-        /**
-         * Build the select all.
-         *
-         * Checks if a select all has already been created.
-         */
-        buildSelectAll: function() {
-            if (typeof this.options.selectAllValue === 'number') {
-                this.options.selectAllValue = this.options.selectAllValue.toString();
-            }
-
-            var alreadyHasSelectAll = this.hasSelectAll();
-
-            if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
-                    && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) {
-
-                // Check whether to add a divider after the select all.
-                if (this.options.includeSelectAllDivider) {
-                    this.$ul.prepend($(this.options.templates.divider));
-                }
-
-                var $li = $(this.options.templates.li);
-                $('label', $li).addClass("checkbox");
-
-                if (this.options.enableHTML) {
-                    $('label', $li).html(" " + this.options.selectAllText);
-                }
-                else {
-                    $('label', $li).text(" " + this.options.selectAllText);
-                }
-
-                if (this.options.selectAllName) {
-                    $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
-                }
-                else {
-                    $('label', $li).prepend('<input type="checkbox" />');
-                }
-
-                var $checkbox = $('input', $li);
-                $checkbox.val(this.options.selectAllValue);
-
-                $li.addClass("multiselect-item multiselect-all");
-                $checkbox.parent().parent()
-                    .addClass('multiselect-all');
-
-                this.$ul.prepend($li);
-
-                $checkbox.prop('checked', false);
-            }
-        },
-
-        /**
-         * Builds the filter.
-         */
-        buildFilter: function() {
-
-            // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength.
-            if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {
-                var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering);
-
-                if (this.$select.find('option').length >= enableFilterLength) {
-
-                    this.$filter = $(this.options.templates.filter);
-                    $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
-
-                    // Adds optional filter clear button
-                    if(this.options.includeFilterClearBtn) {
-                        var clearBtn = $(this.options.templates.filterClearBtn);
-                        clearBtn.on('click', $.proxy(function(event){
-                            clearTimeout(this.searchTimeout);
-
-                            this.$filter.find('.multiselect-search').val('');
-                            $('li', this.$ul).show().removeClass('multiselect-filter-hidden');
-
-                            this.updateSelectAll();
-
-                            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                                this.updateOptGroups();
-                            }
-
-                        }, this));
-                        this.$filter.find('.input-group').append(clearBtn);
-                    }
-
-                    this.$ul.prepend(this.$filter);
-
-                    this.$filter.val(this.query).on('click', function(event) {
-                        event.stopPropagation();
-                    }).on('input keydown', $.proxy(function(event) {
-                        // Cancel enter key default behaviour
-                        if (event.which === 13) {
-                          event.preventDefault();
-                      }
-
-                        // This is useful to catch "keydown" events after the browser has updated the control.
-                        clearTimeout(this.searchTimeout);
-
-                        this.searchTimeout = this.asyncFunction($.proxy(function() {
-
-                            if (this.query !== event.target.value) {
-                                this.query = event.target.value;
-
-                                var currentGroup, currentGroupVisible;
-                                $.each($('li', this.$ul), $.proxy(function(index, element) {
-                                    var value = $('input', element).length > 0 ? $('input', element).val() : "";
-                                    var text = $('label', element).text();
-
-                                    var filterCandidate = '';
-                                    if ((this.options.filterBehavior === 'text')) {
-                                        filterCandidate = text;
-                                    }
-                                    else if ((this.options.filterBehavior === 'value')) {
-                                        filterCandidate = value;
-                                    }
-                                    else if (this.options.filterBehavior === 'both') {
-                                        filterCandidate = text + '\n' + value;
-                                    }
-
-                                    if (value !== this.options.selectAllValue && text) {
-
-                                        // By default lets assume that element is not
-                                        // interesting for this search.
-                                        var showElement = false;
-
-                                        if (this.options.enableCaseInsensitiveFiltering) {
-                                            filterCandidate = filterCandidate.toLowerCase();
-                                            this.query = this.query.toLowerCase();
-                                        }
-
-                                        if (this.options.enableFullValueFiltering && this.options.filterBehavior !== 'both') {
-                                            var valueToMatch = filterCandidate.trim().substring(0, this.query.length);
-                                            if (this.query.indexOf(valueToMatch) > -1) {
-                                                showElement = true;
-                                            }
-                                        }
-                                        else if (filterCandidate.indexOf(this.query) > -1) {
-                                            showElement = true;
-                                        }
-
-                                        // Toggle current element (group or group item) according to showElement boolean.
-                                        $(element).toggle(showElement)
-                                            .toggleClass('multiselect-filter-hidden', !showElement);
-
-                                        // Differentiate groups and group items.
-                                        if ($(element).hasClass('multiselect-group')) {
-                                            // Remember group status.
-                                            currentGroup = element;
-                                            currentGroupVisible = showElement;
-                                        }
-                                        else {
-                                            // Show group name when at least one of its items is visible.
-                                            if (showElement) {
-                                                $(currentGroup).show()
-                                                    .removeClass('multiselect-filter-hidden');
-                                            }
-
-                                            // Show all group items when group name satisfies filter.
-                                            if (!showElement && currentGroupVisible) {
-                                                $(element).show()
-                                                    .removeClass('multiselect-filter-hidden');
-                                            }
-                                        }
-                                    }
-                                }, this));
-                            }
-
-                            this.updateSelectAll();
-
-                            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                                this.updateOptGroups();
-                            }
-
-                            this.options.onFiltering(event.target);
-
-                        }, this), 300, this);
-                    }, this));
-                }
-            }
-        },
-
-        /**
-         * Unbinds the whole plugin.
-         */
-        destroy: function() {
-            this.$container.remove();
-            this.$select.show();
-
-            // reset original state
-            this.$select.prop('disabled', this.options.wasDisabled);
-
-            this.$select.data('multiselect', null);
-        },
-
-        /**
-         * Refreshs the multiselect based on the selected options of the select.
-         */
-        refresh: function () {
-            var inputs = $.map($('li input', this.$ul), $);
-
-            $('option', this.$select).each($.proxy(function (index, element) {
-                var $elem = $(element);
-                var value = $elem.val();
-                var $input;
-                for (var i = inputs.length; 0 < i--; /**/) {
-                    if (value !== ($input = inputs[i]).val())
-                        continue; // wrong li
-
-                    if ($elem.is(':selected')) {
-                        $input.prop('checked', true);
-
-                        if (this.options.selectedClass) {
-                            $input.closest('li')
-                                .addClass(this.options.selectedClass);
-                        }
-                    }
-                    else {
-                        $input.prop('checked', false);
-
-                        if (this.options.selectedClass) {
-                            $input.closest('li')
-                                .removeClass(this.options.selectedClass);
-                        }
-                    }
-
-                    if ($elem.is(":disabled")) {
-                        $input.attr('disabled', 'disabled')
-                            .prop('disabled', true)
-                            .closest('li')
-                            .addClass('disabled');
-                    }
-                    else {
-                        $input.prop('disabled', false)
-                            .closest('li')
-                            .removeClass('disabled');
-                    }
-                    break; // assumes unique values
-                }
-            }, this));
-
-            this.updateButtonText();
-            this.updateSelectAll();
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-        },
-
-        /**
-         * Select all options of the given values.
-         *
-         * If triggerOnChange is set to true, the on change event is triggered if
-         * and only if one value is passed.
-         *
-         * @param {Array} selectValues
-         * @param {Boolean} triggerOnChange
-         */
-        select: function(selectValues, triggerOnChange) {
-            if(!$.isArray(selectValues)) {
-                selectValues = [selectValues];
-            }
-
-            for (var i = 0; i < selectValues.length; i++) {
-                var value = selectValues[i];
-
-                if (value === null || value === undefined) {
-                    continue;
-                }
-
-                var $option = this.getOptionByValue(value);
-                var $checkbox = this.getInputByValue(value);
-
-                if($option === undefined || $checkbox === undefined) {
-                    continue;
-                }
-
-                if (!this.options.multiple) {
-                    this.deselectAll(false);
-                }
-
-                if (this.options.selectedClass) {
-                    $checkbox.closest('li')
-                        .addClass(this.options.selectedClass);
-                }
-
-                $checkbox.prop('checked', true);
-                $option.prop('selected', true);
-
-                if (triggerOnChange) {
-                    this.options.onChange($option, true);
-                }
-            }
-
-            this.updateButtonText();
-            this.updateSelectAll();
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-        },
-
-        /**
-         * Clears all selected items.
-         */
-        clearSelection: function () {
-            this.deselectAll(false);
-            this.updateButtonText();
-            this.updateSelectAll();
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-        },
-
-        /**
-         * Deselects all options of the given values.
-         *
-         * If triggerOnChange is set to true, the on change event is triggered, if
-         * and only if one value is passed.
-         *
-         * @param {Array} deselectValues
-         * @param {Boolean} triggerOnChange
-         */
-        deselect: function(deselectValues, triggerOnChange) {
-            if(!$.isArray(deselectValues)) {
-                deselectValues = [deselectValues];
-            }
-
-            for (var i = 0; i < deselectValues.length; i++) {
-                var value = deselectValues[i];
-
-                if (value === null || value === undefined) {
-                    continue;
-                }
-
-                var $option = this.getOptionByValue(value);
-                var $checkbox = this.getInputByValue(value);
-
-                if($option === undefined || $checkbox === undefined) {
-                    continue;
-                }
-
-                if (this.options.selectedClass) {
-                    $checkbox.closest('li')
-                        .removeClass(this.options.selectedClass);
-                }
-
-                $checkbox.prop('checked', false);
-                $option.prop('selected', false);
-
-                if (triggerOnChange) {
-                    this.options.onChange($option, false);
-                }
-            }
-
-            this.updateButtonText();
-            this.updateSelectAll();
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-        },
-
-        /**
-         * Selects all enabled & visible options.
-         *
-         * If justVisible is true or not specified, only visible options are selected.
-         *
-         * @param {Boolean} justVisible
-         * @param {Boolean} triggerOnSelectAll
-         */
-        selectAll: function (justVisible, triggerOnSelectAll) {
-
-            var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
-            var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
-            var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
-
-            if(justVisible) {
-                $('input:enabled' , visibleLis).prop('checked', true);
-                visibleLis.addClass(this.options.selectedClass);
-
-                $('input:enabled' , visibleLis).each($.proxy(function(index, element) {
-                    var value = $(element).val();
-                    var option = this.getOptionByValue(value);
-                    $(option).prop('selected', true);
-                }, this));
-            }
-            else {
-                $('input:enabled' , allLis).prop('checked', true);
-                allLis.addClass(this.options.selectedClass);
-
-                $('input:enabled' , allLis).each($.proxy(function(index, element) {
-                    var value = $(element).val();
-                    var option = this.getOptionByValue(value);
-                    $(option).prop('selected', true);
-                }, this));
-            }
-
-            $('li input[value="' + this.options.selectAllValue + '"]', this.$ul).prop('checked', true);
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-
-            if (triggerOnSelectAll) {
-                this.options.onSelectAll();
-            }
-        },
-
-        /**
-         * Deselects all options.
-         *
-         * If justVisible is true or not specified, only visible options are deselected.
-         *
-         * @param {Boolean} justVisible
-         */
-        deselectAll: function (justVisible, triggerOnDeselectAll) {
-
-            var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
-            var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
-            var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
-
-            if(justVisible) {
-                $('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false);
-                visibleLis.removeClass(this.options.selectedClass);
-
-                $('input[type="checkbox"]:enabled' , visibleLis).each($.proxy(function(index, element) {
-                    var value = $(element).val();
-                    var option = this.getOptionByValue(value);
-                    $(option).prop('selected', false);
-                }, this));
-            }
-            else {
-                $('input[type="checkbox"]:enabled' , allLis).prop('checked', false);
-                allLis.removeClass(this.options.selectedClass);
-
-                $('input[type="checkbox"]:enabled' , allLis).each($.proxy(function(index, element) {
-                    var value = $(element).val();
-                    var option = this.getOptionByValue(value);
-                    $(option).prop('selected', false);
-                }, this));
-            }
-
-            $('li input[value="' + this.options.selectAllValue + '"]', this.$ul).prop('checked', false);
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-
-            if (triggerOnDeselectAll) {
-                this.options.onDeselectAll();
-            }
-        },
-
-        /**
-         * Rebuild the plugin.
-         *
-         * Rebuilds the dropdown, the filter and the select all option.
-         */
-        rebuild: function() {
-            this.$ul.html('');
-
-            // Important to distinguish between radios and checkboxes.
-            this.options.multiple = this.$select.attr('multiple') === "multiple";
-
-            this.buildSelectAll();
-            this.buildDropdownOptions();
-            this.buildFilter();
-
-            this.updateButtonText();
-            this.updateSelectAll(true);
-
-            if (this.options.enableClickableOptGroups && this.options.multiple) {
-                this.updateOptGroups();
-            }
-
-            if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
-                this.disable();
-            }
-            else {
-                this.enable();
-            }
-
-            if (this.options.dropRight) {
-                this.$ul.addClass('pull-right');
-            }
-        },
-
-        /**
-         * The provided data will be used to build the dropdown.
-         */
-        dataprovider: function(dataprovider) {
-
-            var groupCounter = 0;
-            var $select = this.$select.empty();
-
-            $.each(dataprovider, function (index, option) {
-                var $tag;
-
-                if ($.isArray(option.children)) { // create optiongroup tag
-                    groupCounter++;
-
-                    $tag = $('<optgroup/>').attr({
-                        label: option.label || 'Group ' + groupCounter,
-                        disabled: !!option.disabled
-                    });
-
-                    forEach(option.children, function(subOption) { // add children option tags
-                        var attributes = {
-                            value: subOption.value,
-                            label: subOption.label || subOption.value,
-                            title: subOption.title,
-                            selected: !!subOption.selected,
-                            disabled: !!subOption.disabled
-                        };
-
-                        //Loop through attributes object and add key-value for each attribute
-                       for (var key in subOption.attributes) {
-                            attributes['data-' + key] = subOption.attributes[key];
-                       }
-                         //Append original attributes + new data attributes to option
-                        $tag.append($('<option/>').attr(attributes));
-                    });
-                }
-                else {
-
-                    var attributes = {
-                        'value': option.value,
-                        'label': option.label || option.value,
-                        'title': option.title,
-                        'class': option.class,
-                        'selected': !!option.selected,
-                        'disabled': !!option.disabled
-                    };
-                    //Loop through attributes object and add key-value for each attribute
-                    for (var key in option.attributes) {
-                      attributes['data-' + key] = option.attributes[key];
-                    }
-                    //Append original attributes + new data attributes to option
-                    $tag = $('<option/>').attr(attributes);
-
-                    $tag.text(option.label || option.value);
-                }
-
-                $select.append($tag);
-            });
-
-            this.rebuild();
-        },
-
-        /**
-         * Enable the multiselect.
-         */
-        enable: function() {
-            this.$select.prop('disabled', false);
-            this.$button.prop('disabled', false)
-                .removeClass('disabled');
-        },
-
-        /**
-         * Disable the multiselect.
-         */
-        disable: function() {
-            this.$select.prop('disabled', true);
-            this.$button.prop('disabled', true)
-                .addClass('disabled');
-        },
-
-        /**
-         * Set the options.
-         *
-         * @param {Array} options
-         */
-        setOptions: function(options) {
-            this.options = this.mergeOptions(options);
-        },
-
-        /**
-         * Merges the given options with the default options.
-         *
-         * @param {Array} options
-         * @returns {Array}
-         */
-        mergeOptions: function(options) {
-            return $.extend(true, {}, this.defaults, this.options, options);
-        },
-
-        /**
-         * Checks whether a select all checkbox is present.
-         *
-         * @returns {Boolean}
-         */
-        hasSelectAll: function() {
-            return $('li.multiselect-all', this.$ul).length > 0;
-        },
-
-        /**
-         * Update opt groups.
-         */
-        updateOptGroups: function() {
-            var $groups = $('li.multiselect-group', this.$ul)
-            var selectedClass = this.options.selectedClass;
-
-            $groups.each(function() {
-                var $options = $(this).nextUntil('li.multiselect-group')
-                    .not('.multiselect-filter-hidden')
-                    .not('.disabled');
-
-                var checked = true;
-                $options.each(function() {
-                    var $input = $('input', this);
-
-                    if (!$input.prop('checked')) {
-                        checked = false;
-                    }
-                });
-
-                if (selectedClass) {
-                    if (checked) {
-                        $(this).addClass(selectedClass);
-                    }
-                    else {
-                        $(this).removeClass(selectedClass);
-                    }
-                }
-
-                $('input', this).prop('checked', checked);
-            });
-        },
-
-        /**
-         * Updates the select all checkbox based on the currently displayed and selected checkboxes.
-         */
-        updateSelectAll: function(notTriggerOnSelectAll) {
-            if (this.hasSelectAll()) {
-                var allBoxes = $("li:not(.multiselect-item):not(.multiselect-filter-hidden):not(.multiselect-group):not(.disabled) input:enabled", this.$ul);
-                var allBoxesLength = allBoxes.length;
-                var checkedBoxesLength = allBoxes.filter(":checked").length;
-                var selectAllLi  = $("li.multiselect-all", this.$ul);
-                var selectAllInput = selectAllLi.find("input");
-
-                if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
-                    selectAllInput.prop("checked", true);
-                    selectAllLi.addClass(this.options.selectedClass);
-                }
-                else {
-                    selectAllInput.prop("checked", false);
-                    selectAllLi.removeClass(this.options.selectedClass);
-                }
-            }
-        },
-
-        /**
-         * Update the button text and its title based on the currently selected options.
-         */
-        updateButtonText: function() {
-            var options = this.getSelected();
-
-            // First update the displayed button text.
-            if (this.options.enableHTML) {
-                $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
-            }
-            else {
-                $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
-            }
-
-            // Now update the title attribute of the button.
-            $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
-        },
-
-        /**
-         * Get all selected options.
-         *
-         * @returns {jQUery}
-         */
-        getSelected: function() {
-            return $('option', this.$select).filter(":selected");
-        },
-
-        /**
-         * Gets a select option by its value.
-         *
-         * @param {String} value
-         * @returns {jQuery}
-         */
-        getOptionByValue: function (value) {
-
-            var options = $('option', this.$select);
-            var valueToCompare = value.toString();
-
-            for (var i = 0; i < options.length; i = i + 1) {
-                var option = options[i];
-                if (option.value === valueToCompare) {
-                    return $(option);
-                }
-            }
-        },
-
-        /**
-         * Get the input (radio/checkbox) by its value.
-         *
-         * @param {String} value
-         * @returns {jQuery}
-         */
-        getInputByValue: function (value) {
-
-            var checkboxes = $('li input:not(.multiselect-search)', this.$ul);
-            var valueToCompare = value.toString();
-
-            for (var i = 0; i < checkboxes.length; i = i + 1) {
-                var checkbox = checkboxes[i];
-                if (checkbox.value === valueToCompare) {
-                    return $(checkbox);
-                }
-            }
-        },
-
-        /**
-         * Used for knockout integration.
-         */
-        updateOriginalOptions: function() {
-            this.originalOptions = this.$select.clone()[0].options;
-        },
-
-        asyncFunction: function(callback, timeout, self) {
-            var args = Array.prototype.slice.call(arguments, 3);
-            return setTimeout(function() {
-                callback.apply(self || window, args);
-            }, timeout);
-        },
-
-        setAllSelectedText: function(allSelectedText) {
-            this.options.allSelectedText = allSelectedText;
-            this.updateButtonText();
-        }
-    };
-
-    $.fn.multiselect = function(option, parameter, extraOptions) {
-        return this.each(function() {
-            var data = $(this).data('multiselect');
-            var options = typeof option === 'object' && option;
-
-            // Initialize the multiselect.
-            if (!data) {
-                data = new Multiselect(this, options);
-                $(this).data('multiselect', data);
-            }
-
-            // Call multiselect method.
-            if (typeof option === 'string') {
-                data[option](parameter, extraOptions);
-
-                if (option === 'destroy') {
-                    $(this).data('multiselect', false);
-                }
-            }
-        });
-    };
-
-    $.fn.multiselect.Constructor = Multiselect;
-
-    $(function() {
-        $("select[data-role=multiselect]").multiselect();
-    });
-
-}(window.jQuery);
diff --git a/style/vendor/bootstrap/js/bootstrap-select.min.js b/style/vendor/bootstrap/js/bootstrap-select.min.js
new file mode 100644
index 000000000..6a4529019
--- /dev/null
+++ b/style/vendor/bootstrap/js/bootstrap-select.min.js
@@ -0,0 +1,9 @@
+/*!
+ * Bootstrap-select v1.13.12 (https://developer.snapappointments.com/bootstrap-select)
+ *
+ * Copyright 2012-2019 SnapAppointments, LLC
+ * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
+ */
+
+!function(e,t){void 0===e&&void 0!==window&&(e=window),"function"==typeof define&&define.amd?define(["jquery"],function(e){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(require("jquery")):t(e.jQuery)}(this,function(e){!function(z){"use strict";var d=["sanitize","whiteList","sanitizeFn"],r=["background","cite","href","itemtype","longdesc","poster","src","xlink:href"],e={"*":["class","dir","id","lang","role","tabindex","style",/^aria-[\w-]*$/i],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],div:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]},l=/^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi,a=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i;function v(e,t){var i=e.nodeName.toLowerCase();if(-1!==z.inArray(i,t))return-1===z.inArray(i,r)||Boolean(e.nodeValue.match(l)||e.nodeValue.match(a));for(var s=z(t).filter(function(e,t){return t instanceof RegExp}),n=0,o=s.length;n<o;n++)if(i.match(s[n]))return!0;return!1}function P(e,t,i){if(i&&"function"==typeof i)return i(e);for(var s=Object.keys(t),n=0,o=e.length;n<o;n++)for(var r=e[n].querySelectorAll("*"),l=0,a=r.length;l<a;l++){var c=r[l],d=c.nodeName.toLowerCase();if(-1!==s.indexOf(d))for(var h=[].slice.call(c.attributes),p=[].concat(t["*"]||[],t[d]||[]),u=0,f=h.length;u<f;u++){var m=h[u];v(m,p)||c.removeAttribute(m.nodeName)}else c.parentNode.removeChild(c)}}"classList"in document.createElement("_")||function(e){if("Element"in e){var t="classList",i="prototype",s=e.Element[i],n=Object,o=function(){var i=z(this);return{add:function(e){return e=Array.prototype.slice.call(arguments).join(" "),i.addClass(e)},remove:function(e){return e=Array.prototype.slice.call(arguments).join(" "),i.removeClass(e)},toggle:function(e,t){return i.toggleClass(e,t)},contains:function(e){return i.hasClass(e)}}};if(n.defineProperty){var r={get:o,enumerable:!0,configurable:!0};try{n.defineProperty(s,t,r)}catch(e){void 0!==e.number&&-2146823252!==e.number||(r.enumerable=!1,n.defineProperty(s,t,r))}}else n[i].__defineGetter__&&s.__defineGetter__(t,o)}}(window);var t,c,i=document.createElement("_");if(i.classList.add("c1","c2"),!i.classList.contains("c2")){var s=DOMTokenList.prototype.add,n=DOMTokenList.prototype.remove;DOMTokenList.prototype.add=function(){Array.prototype.forEach.call(arguments,s.bind(this))},DOMTokenList.prototype.remove=function(){Array.prototype.forEach.call(arguments,n.bind(this))}}if(i.classList.toggle("c3",!1),i.classList.contains("c3")){var o=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:o.call(this,e)}}function h(e){if(null==this)throw new TypeError;var t=String(this);if(e&&"[object RegExp]"==c.call(e))throw new TypeError;var i=t.length,s=String(e),n=s.length,o=1<arguments.length?arguments[1]:void 0,r=o?Number(o):0;r!=r&&(r=0);var l=Math.min(Math.max(r,0),i);if(i<n+l)return!1;for(var a=-1;++a<n;)if(t.charCodeAt(l+a)!=s.charCodeAt(a))return!1;return!0}function O(e,t){var i,s=e.selectedOptions,n=[];if(t){for(var o=0,r=s.length;o<r;o++)(i=s[o]).disabled||"OPTGROUP"===i.parentNode.tagName&&i.parentNode.disabled||n.push(i);return n}return s}function T(e,t){for(var i,s=[],n=t||e.selectedOptions,o=0,r=n.length;o<r;o++)(i=n[o]).disabled||"OPTGROUP"===i.parentNode.tagName&&i.parentNode.disabled||s.push(i.value||i.text);return e.multiple?s:s.length?s[0]:null}i=null,String.prototype.startsWith||(t=function(){try{var e={},t=Object.defineProperty,i=t(e,e,e)&&t}catch(e){}return i}(),c={}.toString,t?t(String.prototype,"startsWith",{value:h,configurable:!0,writable:!0}):String.prototype.startsWith=h),Object.keys||(Object.keys=function(e,t,i){for(t in i=[],e)i.hasOwnProperty.call(e,t)&&i.push(t);return i}),HTMLSelectElement&&!HTMLSelectElement.prototype.hasOwnProperty("selectedOptions")&&Object.defineProperty(HTMLSelectElement.prototype,"selectedOptions",{get:function(){return this.querySelectorAll(":checked")}});var p={useDefault:!1,_set:z.valHooks.select.set};z.valHooks.select.set=function(e,t){return t&&!p.useDefault&&z(e).data("selected",!0),p._set.apply(this,arguments)};var A=null,u=function(){try{return new Event("change"),!0}catch(e){return!1}}();function k(e,t,i,s){for(var n=["display","subtext","tokens"],o=!1,r=0;r<n.length;r++){var l=n[r],a=e[l];if(a&&(a=a.toString(),"display"===l&&(a=a.replace(/<[^>]+>/g,"")),s&&(a=w(a)),a=a.toUpperCase(),o="contains"===i?0<=a.indexOf(t):a.startsWith(t)))break}return o}function L(e){return parseInt(e,10)||0}z.fn.triggerNative=function(e){var t,i=this[0];i.dispatchEvent?(u?t=new Event(e,{bubbles:!0}):(t=document.createEvent("Event")).initEvent(e,!0,!1),i.dispatchEvent(t)):i.fireEvent?((t=document.createEventObject()).eventType=e,i.fireEvent("on"+e,t)):this.trigger(e)};var f={"\xc0":"A","\xc1":"A","\xc2":"A","\xc3":"A","\xc4":"A","\xc5":"A","\xe0":"a","\xe1":"a","\xe2":"a","\xe3":"a","\xe4":"a","\xe5":"a","\xc7":"C","\xe7":"c","\xd0":"D","\xf0":"d","\xc8":"E","\xc9":"E","\xca":"E","\xcb":"E","\xe8":"e","\xe9":"e","\xea":"e","\xeb":"e","\xcc":"I","\xcd":"I","\xce":"I","\xcf":"I","\xec":"i","\xed":"i","\xee":"i","\xef":"i","\xd1":"N","\xf1":"n","\xd2":"O","\xd3":"O","\xd4":"O","\xd5":"O","\xd6":"O","\xd8":"O","\xf2":"o","\xf3":"o","\xf4":"o","\xf5":"o","\xf6":"o","\xf8":"o","\xd9":"U","\xda":"U","\xdb":"U","\xdc":"U","\xf9":"u","\xfa":"u","\xfb":"u","\xfc":"u","\xdd":"Y","\xfd":"y","\xff":"y","\xc6":"Ae","\xe6":"ae","\xde":"Th","\xfe":"th","\xdf":"ss","\u0100":"A","\u0102":"A","\u0104":"A","\u0101":"a","\u0103":"a","\u0105":"a","\u0106":"C","\u0108":"C","\u010a":"C","\u010c":"C","\u0107":"c","\u0109":"c","\u010b":"c","\u010d":"c","\u010e":"D","\u0110":"D","\u010f":"d","\u0111":"d","\u0112":"E","\u0114":"E","\u0116":"E","\u0118":"E","\u011a":"E","\u0113":"e","\u0115":"e","\u0117":"e","\u0119":"e","\u011b":"e","\u011c":"G","\u011e":"G","\u0120":"G","\u0122":"G","\u011d":"g","\u011f":"g","\u0121":"g","\u0123":"g","\u0124":"H","\u0126":"H","\u0125":"h","\u0127":"h","\u0128":"I","\u012a":"I","\u012c":"I","\u012e":"I","\u0130":"I","\u0129":"i","\u012b":"i","\u012d":"i","\u012f":"i","\u0131":"i","\u0134":"J","\u0135":"j","\u0136":"K","\u0137":"k","\u0138":"k","\u0139":"L","\u013b":"L","\u013d":"L","\u013f":"L","\u0141":"L","\u013a":"l","\u013c":"l","\u013e":"l","\u0140":"l","\u0142":"l","\u0143":"N","\u0145":"N","\u0147":"N","\u014a":"N","\u0144":"n","\u0146":"n","\u0148":"n","\u014b":"n","\u014c":"O","\u014e":"O","\u0150":"O","\u014d":"o","\u014f":"o","\u0151":"o","\u0154":"R","\u0156":"R","\u0158":"R","\u0155":"r","\u0157":"r","\u0159":"r","\u015a":"S","\u015c":"S","\u015e":"S","\u0160":"S","\u015b":"s","\u015d":"s","\u015f":"s","\u0161":"s","\u0162":"T","\u0164":"T","\u0166":"T","\u0163":"t","\u0165":"t","\u0167":"t","\u0168":"U","\u016a":"U","\u016c":"U","\u016e":"U","\u0170":"U","\u0172":"U","\u0169":"u","\u016b":"u","\u016d":"u","\u016f":"u","\u0171":"u","\u0173":"u","\u0174":"W","\u0175":"w","\u0176":"Y","\u0177":"y","\u0178":"Y","\u0179":"Z","\u017b":"Z","\u017d":"Z","\u017a":"z","\u017c":"z","\u017e":"z","\u0132":"IJ","\u0133":"ij","\u0152":"Oe","\u0153":"oe","\u0149":"'n","\u017f":"s"},m=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,g=RegExp("[\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff\\u1ab0-\\u1aff\\u1dc0-\\u1dff]","g");function b(e){return f[e]}function w(e){return(e=e.toString())&&e.replace(m,b).replace(g,"")}var I,x,$,y,S=(I={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},x="(?:"+Object.keys(I).join("|")+")",$=RegExp(x),y=RegExp(x,"g"),function(e){return e=null==e?"":""+e,$.test(e)?e.replace(y,E):e});function E(e){return I[e]}var C={32:" ",48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",59:";",65:"A",66:"B",67:"C",68:"D",69:"E",70:"F",71:"G",72:"H",73:"I",74:"J",75:"K",76:"L",77:"M",78:"N",79:"O",80:"P",81:"Q",82:"R",83:"S",84:"T",85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9"},N=27,D=13,H=32,W=9,B=38,M=40,R={success:!1,major:"3"};try{R.full=(z.fn.dropdown.Constructor.VERSION||"").split(" ")[0].split("."),R.major=R.full[0],R.success=!0}catch(e){}var U=0,j=".bs.select",V={DISABLED:"disabled",DIVIDER:"divider",SHOW:"open",DROPUP:"dropup",MENU:"dropdown-menu",MENURIGHT:"dropdown-menu-right",MENULEFT:"dropdown-menu-left",BUTTONCLASS:"btn-default",POPOVERHEADER:"popover-title",ICONBASE:"glyphicon",TICKICON:"glyphicon-ok"},F={MENU:"."+V.MENU},_={span:document.createElement("span"),i:document.createElement("i"),subtext:document.createElement("small"),a:document.createElement("a"),li:document.createElement("li"),whitespace:document.createTextNode("\xa0"),fragment:document.createDocumentFragment()};_.a.setAttribute("role","option"),_.subtext.className="text-muted",_.text=_.span.cloneNode(!1),_.text.className="text",_.checkMark=_.span.cloneNode(!1);var G=new RegExp(B+"|"+M),q=new RegExp("^"+W+"$|"+N),K=function(e,t,i){var s=_.li.cloneNode(!1);return e&&(1===e.nodeType||11===e.nodeType?s.appendChild(e):s.innerHTML=e),void 0!==t&&""!==t&&(s.className=t),null!=i&&s.classList.add("optgroup-"+i),s},Y=function(e,t,i){var s=_.a.cloneNode(!0);return e&&(11===e.nodeType?s.appendChild(e):s.insertAdjacentHTML("beforeend",e)),void 0!==t&&""!==t&&(s.className=t),"4"===R.major&&s.classList.add("dropdown-item"),i&&s.setAttribute("style",i),s},Z=function(e,t){var i,s,n=_.text.cloneNode(!1);if(e.content)n.innerHTML=e.content;else{if(n.textContent=e.text,e.icon){var o=_.whitespace.cloneNode(!1);(s=(!0===t?_.i:_.span).cloneNode(!1)).className=e.iconBase+" "+e.icon,_.fragment.appendChild(s),_.fragment.appendChild(o)}e.subtext&&((i=_.subtext.cloneNode(!1)).textContent=e.subtext,n.appendChild(i))}if(!0===t)for(;0<n.childNodes.length;)_.fragment.appendChild(n.childNodes[0]);else _.fragment.appendChild(n);return _.fragment},J=function(e){var t,i,s=_.text.cloneNode(!1);if(s.innerHTML=e.label,e.icon){var n=_.whitespace.cloneNode(!1);(i=_.span.cloneNode(!1)).className=e.iconBase+" "+e.icon,_.fragment.appendChild(i),_.fragment.appendChild(n)}return e.subtext&&((t=_.subtext.cloneNode(!1)).textContent=e.subtext,s.appendChild(t)),_.fragment.appendChild(s),_.fragment},Q=function(e,t){var i=this;p.useDefault||(z.valHooks.select.set=p._set,p.useDefault=!0),this.$element=z(e),this.$newElement=null,this.$button=null,this.$menu=null,this.options=t,this.selectpicker={main:{},search:{},current:{},view:{},keydown:{keyHistory:"",resetKeyHistory:{start:function(){return setTimeout(function(){i.selectpicker.keydown.keyHistory=""},800)}}}},null===this.options.title&&(this.options.title=this.$element.attr("title"));var s=this.options.windowPadding;"number"==typeof s&&(this.options.windowPadding=[s,s,s,s]),this.val=Q.prototype.val,this.render=Q.prototype.render,this.refresh=Q.prototype.refresh,this.setStyle=Q.prototype.setStyle,this.selectAll=Q.prototype.selectAll,this.deselectAll=Q.prototype.deselectAll,this.destroy=Q.prototype.destroy,this.remove=Q.prototype.remove,this.show=Q.prototype.show,this.hide=Q.prototype.hide,this.init()};function X(e){var l,a=arguments,c=e;if([].shift.apply(a),!R.success){try{R.full=(z.fn.dropdown.Constructor.VERSION||"").split(" ")[0].split(".")}catch(e){Q.BootstrapVersion?R.full=Q.BootstrapVersion.split(" ")[0].split("."):(R.full=[R.major,"0","0"],console.warn("There was an issue retrieving Bootstrap's version. Ensure Bootstrap is being loaded before bootstrap-select and there is no namespace collision. If loading Bootstrap asynchronously, the version may need to be manually specified via $.fn.selectpicker.Constructor.BootstrapVersion.",e))}R.major=R.full[0],R.success=!0}if("4"===R.major){var t=[];Q.DEFAULTS.style===V.BUTTONCLASS&&t.push({name:"style",className:"BUTTONCLASS"}),Q.DEFAULTS.iconBase===V.ICONBASE&&t.push({name:"iconBase",className:"ICONBASE"}),Q.DEFAULTS.tickIcon===V.TICKICON&&t.push({name:"tickIcon",className:"TICKICON"}),V.DIVIDER="dropdown-divider",V.SHOW="show",V.BUTTONCLASS="btn-light",V.POPOVERHEADER="popover-header",V.ICONBASE="",V.TICKICON="bs-ok-default";for(var i=0;i<t.length;i++){e=t[i];Q.DEFAULTS[e.name]=V[e.className]}}var s=this.each(function(){var e=z(this);if(e.is("select")){var t=e.data("selectpicker"),i="object"==typeof c&&c;if(t){if(i)for(var s in i)i.hasOwnProperty(s)&&(t.options[s]=i[s])}else{var n=e.data();for(var o in n)n.hasOwnProperty(o)&&-1!==z.inArray(o,d)&&delete n[o];var r=z.extend({},Q.DEFAULTS,z.fn.selectpicker.defaults||{},n,i);r.template=z.extend({},Q.DEFAULTS.template,z.fn.selectpicker.defaults?z.fn.selectpicker.defaults.template:{},n.template,i.template),e.data("selectpicker",t=new Q(this,r))}"string"==typeof c&&(l=t[c]instanceof Function?t[c].apply(t,a):t.options[c])}});return void 0!==l?l:s}Q.VERSION="1.13.12",Q.DEFAULTS={noneSelectedText:"Nothing selected",noneResultsText:"No results matched {0}",countSelectedText:function(e,t){return 1==e?"{0} item selected":"{0} items selected"},maxOptionsText:function(e,t){return[1==e?"Limit reached ({n} item max)":"Limit reached ({n} items max)",1==t?"Group limit reached ({n} item max)":"Group limit reached ({n} items max)"]},selectAllText:"Select All",deselectAllText:"Deselect All",doneButton:!1,doneButtonText:"Close",multipleSeparator:", ",styleBase:"btn",style:V.BUTTONCLASS,size:"auto",title:null,selectedTextFormat:"values",width:!1,container:!1,hideDisabled:!1,showSubtext:!1,showIcon:!0,showContent:!0,dropupAuto:!0,header:!1,liveSearch:!1,liveSearchPlaceholder:null,liveSearchNormalize:!1,liveSearchStyle:"contains",actionsBox:!1,iconBase:V.ICONBASE,tickIcon:V.TICKICON,showTick:!1,template:{caret:'<span class="caret"></span>'},maxOptions:!1,mobile:!1,selectOnTab:!1,dropdownAlignRight:!1,windowPadding:0,virtualScroll:600,display:!1,sanitize:!0,sanitizeFn:null,whiteList:e},Q.prototype={constructor:Q,init:function(){var i=this,e=this.$element.attr("id");U++,this.selectId="bs-select-"+U,this.$element[0].classList.add("bs-select-hidden"),this.multiple=this.$element.prop("multiple"),this.autofocus=this.$element.prop("autofocus"),this.$element[0].classList.contains("show-tick")&&(this.options.showTick=!0),this.$newElement=this.createDropdown(),this.$element.after(this.$newElement).prependTo(this.$newElement),this.$button=this.$newElement.children("button"),this.$menu=this.$newElement.children(F.MENU),this.$menuInner=this.$menu.children(".inner"),this.$searchbox=this.$menu.find("input"),this.$element[0].classList.remove("bs-select-hidden"),!0===this.options.dropdownAlignRight&&this.$menu[0].classList.add(V.MENURIGHT),void 0!==e&&this.$button.attr("data-id",e),this.checkDisabled(),this.clickListener(),this.options.liveSearch?(this.liveSearchListener(),this.focusedParent=this.$searchbox[0]):this.focusedParent=this.$menuInner[0],this.setStyle(),this.render(),this.setWidth(),this.options.container?this.selectPosition():this.$element.on("hide"+j,function(){if(i.isVirtual()){var e=i.$menuInner[0],t=e.firstChild.cloneNode(!1);e.replaceChild(t,e.firstChild),e.scrollTop=0}}),this.$menu.data("this",this),this.$newElement.data("this",this),this.options.mobile&&this.mobile(),this.$newElement.on({"hide.bs.dropdown":function(e){i.$element.trigger("hide"+j,e)},"hidden.bs.dropdown":function(e){i.$element.trigger("hidden"+j,e)},"show.bs.dropdown":function(e){i.$element.trigger("show"+j,e)},"shown.bs.dropdown":function(e){i.$element.trigger("shown"+j,e)}}),i.$element[0].hasAttribute("required")&&this.$element.on("invalid"+j,function(){i.$button[0].classList.add("bs-invalid"),i.$element.on("shown"+j+".invalid",function(){i.$element.val(i.$element.val()).off("shown"+j+".invalid")}).on("rendered"+j,function(){this.validity.valid&&i.$button[0].classList.remove("bs-invalid"),i.$element.off("rendered"+j)}),i.$button.on("blur"+j,function(){i.$element.trigger("focus").trigger("blur"),i.$button.off("blur"+j)})}),setTimeout(function(){i.createLi(),i.$element.trigger("loaded"+j)})},createDropdown:function(){var e=this.multiple||this.options.showTick?" show-tick":"",t=this.multiple?' aria-multiselectable="true"':"",i="",s=this.autofocus?" autofocus":"";R.major<4&&this.$element.parent().hasClass("input-group")&&(i=" input-group-btn");var n,o="",r="",l="",a="";return this.options.header&&(o='<div class="'+V.POPOVERHEADER+'"><button type="button" class="close" aria-hidden="true">&times;</button>'+this.options.header+"</div>"),this.options.liveSearch&&(r='<div class="bs-searchbox"><input type="search" class="form-control" autocomplete="off"'+(null===this.options.liveSearchPlaceholder?"":' placeholder="'+S(this.options.liveSearchPlaceholder)+'"')+' role="combobox" aria-label="Search" aria-controls="'+this.selectId+'" aria-autocomplete="list"></div>'),this.multiple&&this.options.actionsBox&&(l='<div class="bs-actionsbox"><div class="btn-group btn-group-sm btn-block"><button type="button" class="actions-btn bs-select-all btn '+V.BUTTONCLASS+'">'+this.options.selectAllText+'</button><button type="button" class="actions-btn bs-deselect-all btn '+V.BUTTONCLASS+'">'+this.options.deselectAllText+"</button></div></div>"),this.multiple&&this.options.doneButton&&(a='<div class="bs-donebutton"><div class="btn-group btn-block"><button type="button" class="btn btn-sm '+V.BUTTONCLASS+'">'+this.options.doneButtonText+"</button></div></div>"),n='<div class="dropdown bootstrap-select'+e+i+'"><button type="button" class="'+this.options.styleBase+' dropdown-toggle" '+("static"===this.options.display?'data-display="static"':"")+'data-toggle="dropdown"'+s+' role="combobox" aria-owns="'+this.selectId+'" aria-haspopup="listbox" aria-expanded="false"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner"></div></div> </div>'+("4"===R.major?"":'<span class="bs-caret">'+this.options.template.caret+"</span>")+'</button><div class="'+V.MENU+" "+("4"===R.major?"":V.SHOW)+'">'+o+r+l+'<div class="inner '+V.SHOW+'" role="listbox" id="'+this.selectId+'" tabindex="-1" '+t+'><ul class="'+V.MENU+" inner "+("4"===R.major?V.SHOW:"")+'" role="presentation"></ul></div>'+a+"</div></div>",z(n)},setPositionData:function(){this.selectpicker.view.canHighlight=[];for(var e=this.selectpicker.view.size=0;e<this.selectpicker.current.data.length;e++){var t=this.selectpicker.current.data[e],i=!0;"divider"===t.type?(i=!1,t.height=this.sizeInfo.dividerHeight):"optgroup-label"===t.type?(i=!1,t.height=this.sizeInfo.dropdownHeaderHeight):t.height=this.sizeInfo.liHeight,t.disabled&&(i=!1),this.selectpicker.view.canHighlight.push(i),i&&(this.selectpicker.view.size++,t.posinset=this.selectpicker.view.size),t.position=(0===e?0:this.selectpicker.current.data[e-1].position)+t.height}},isVirtual:function(){return!1!==this.options.virtualScroll&&this.selectpicker.main.elements.length>=this.options.virtualScroll||!0===this.options.virtualScroll},createView:function(A,e,t){var L,N,D=this,i=0,H=[];if(this.selectpicker.current=A?this.selectpicker.search:this.selectpicker.main,this.setPositionData(),e)if(t)i=this.$menuInner[0].scrollTop;else if(!D.multiple){var s=D.$element[0],n=(s.options[s.selectedIndex]||{}).liIndex;if("number"==typeof n&&!1!==D.options.size){var o=D.selectpicker.main.data[n],r=o&&o.position;r&&(i=r-(D.sizeInfo.menuInnerHeight+D.sizeInfo.liHeight)/2)}}function l(e,t){var i,s,n,o,r,l,a,c,d=D.selectpicker.current.elements.length,h=[],p=!0,u=D.isVirtual();D.selectpicker.view.scrollTop=e,i=Math.ceil(D.sizeInfo.menuInnerHeight/D.sizeInfo.liHeight*1.5),s=Math.round(d/i)||1;for(var f=0;f<s;f++){var m=(f+1)*i;if(f===s-1&&(m=d),h[f]=[f*i+(f?1:0),m],!d)break;void 0===r&&e-1<=D.selectpicker.current.data[m-1].position-D.sizeInfo.menuInnerHeight&&(r=f)}if(void 0===r&&(r=0),l=[D.selectpicker.view.position0,D.selectpicker.view.position1],n=Math.max(0,r-1),o=Math.min(s-1,r+1),D.selectpicker.view.position0=!1===u?0:Math.max(0,h[n][0])||0,D.selectpicker.view.position1=!1===u?d:Math.min(d,h[o][1])||0,a=l[0]!==D.selectpicker.view.position0||l[1]!==D.selectpicker.view.position1,void 0!==D.activeIndex&&(N=D.selectpicker.main.elements[D.prevActiveIndex],H=D.selectpicker.main.elements[D.activeIndex],L=D.selectpicker.main.elements[D.selectedIndex],t&&(D.activeIndex!==D.selectedIndex&&D.defocusItem(H),D.activeIndex=void 0),D.activeIndex&&D.activeIndex!==D.selectedIndex&&D.defocusItem(L)),void 0!==D.prevActiveIndex&&D.prevActiveIndex!==D.activeIndex&&D.prevActiveIndex!==D.selectedIndex&&D.defocusItem(N),(t||a)&&(c=D.selectpicker.view.visibleElements?D.selectpicker.view.visibleElements.slice():[],D.selectpicker.view.visibleElements=!1===u?D.selectpicker.current.elements:D.selectpicker.current.elements.slice(D.selectpicker.view.position0,D.selectpicker.view.position1),D.setOptionStatus(),(A||!1===u&&t)&&(p=!function(e,i){return e.length===i.length&&e.every(function(e,t){return e===i[t]})}(c,D.selectpicker.view.visibleElements)),(t||!0===u)&&p)){var v,g,b=D.$menuInner[0],w=document.createDocumentFragment(),I=b.firstChild.cloneNode(!1),x=D.selectpicker.view.visibleElements,k=[];b.replaceChild(I,b.firstChild);f=0;for(var $=x.length;f<$;f++){var y,S,E=x[f];D.options.sanitize&&(y=E.lastChild)&&(S=D.selectpicker.current.data[f+D.selectpicker.view.position0])&&S.content&&!S.sanitized&&(k.push(y),S.sanitized=!0),w.appendChild(E)}if(D.options.sanitize&&k.length&&P(k,D.options.whiteList,D.options.sanitizeFn),!0===u?(v=0===D.selectpicker.view.position0?0:D.selectpicker.current.data[D.selectpicker.view.position0-1].position,g=D.selectpicker.view.position1>d-1?0:D.selectpicker.current.data[d-1].position-D.selectpicker.current.data[D.selectpicker.view.position1-1].position,b.firstChild.style.marginTop=v+"px",b.firstChild.style.marginBottom=g+"px"):(b.firstChild.style.marginTop=0,b.firstChild.style.marginBottom=0),b.firstChild.appendChild(w),!0===u&&D.sizeInfo.hasScrollBar){var C=b.firstChild.offsetWidth;if(t&&C<D.sizeInfo.menuInnerInnerWidth&&D.sizeInfo.totalMenuWidth>D.sizeInfo.selectWidth)b.firstChild.style.minWidth=D.sizeInfo.menuInnerInnerWidth+"px";else if(C>D.sizeInfo.menuInnerInnerWidth){D.$menu[0].style.minWidth=0;var O=b.firstChild.offsetWidth;O>D.sizeInfo.menuInnerInnerWidth&&(D.sizeInfo.menuInnerInnerWidth=O,b.firstChild.style.minWidth=D.sizeInfo.menuInnerInnerWidth+"px"),D.$menu[0].style.minWidth=""}}}if(D.prevActiveIndex=D.activeIndex,D.options.liveSearch){if(A&&t){var z,T=0;D.selectpicker.view.canHighlight[T]||(T=1+D.selectpicker.view.canHighlight.slice(1).indexOf(!0)),z=D.selectpicker.view.visibleElements[T],D.defocusItem(D.selectpicker.view.currentActive),D.activeIndex=(D.selectpicker.current.data[T]||{}).index,D.focusItem(z)}}else D.$menuInner.trigger("focus")}l(i,!0),this.$menuInner.off("scroll.createView").on("scroll.createView",function(e,t){D.noScroll||l(this.scrollTop,t),D.noScroll=!1}),z(window).off("resize"+j+"."+this.selectId+".createView").on("resize"+j+"."+this.selectId+".createView",function(){D.$newElement.hasClass(V.SHOW)&&l(D.$menuInner[0].scrollTop)})},focusItem:function(e,t,i){if(e){t=t||this.selectpicker.main.data[this.activeIndex];var s=e.firstChild;s&&(s.setAttribute("aria-setsize",this.selectpicker.view.size),s.setAttribute("aria-posinset",t.posinset),!0!==i&&(this.focusedParent.setAttribute("aria-activedescendant",s.id),e.classList.add("active"),s.classList.add("active")))}},defocusItem:function(e){e&&(e.classList.remove("active"),e.firstChild&&e.firstChild.classList.remove("active"))},setPlaceholder:function(){var e=!1;if(this.options.title&&!this.multiple){this.selectpicker.view.titleOption||(this.selectpicker.view.titleOption=document.createElement("option")),e=!0;var t=this.$element[0],i=!1,s=!this.selectpicker.view.titleOption.parentNode;if(s)this.selectpicker.view.titleOption.className="bs-title-option",this.selectpicker.view.titleOption.value="",i=void 0===z(t.options[t.selectedIndex]).attr("selected")&&void 0===this.$element.data("selected");!s&&0===this.selectpicker.view.titleOption.index||t.insertBefore(this.selectpicker.view.titleOption,t.firstChild),i&&(t.selectedIndex=0)}return e},createLi:function(){var c=this,f=this.options.iconBase,m=':not([hidden]):not([data-hidden="true"])',v=[],g=[],d=0,b=0,e=this.setPlaceholder()?1:0;this.options.hideDisabled&&(m+=":not(:disabled)"),!c.options.showTick&&!c.multiple||_.checkMark.parentNode||(_.checkMark.className=f+" "+c.options.tickIcon+" check-mark",_.a.appendChild(_.checkMark));var t=this.$element[0].querySelectorAll("select > *"+m);function w(e){var t=g[g.length-1];t&&"divider"===t.type&&(t.optID||e.optID)||((e=e||{}).type="divider",v.push(K(!1,V.DIVIDER,e.optID?e.optID+"div":void 0)),g.push(e))}function I(e,t){if((t=t||{}).divider="true"===e.getAttribute("data-divider"),t.divider)w({optID:t.optID});else{var i=g.length,s=e.style.cssText,n=s?S(s):"",o=(e.className||"")+(t.optgroupClass||"");t.optID&&(o="opt "+o),t.text=e.textContent,t.content=e.getAttribute("data-content"),t.tokens=e.getAttribute("data-tokens"),t.subtext=e.getAttribute("data-subtext"),t.icon=e.getAttribute("data-icon"),t.iconBase=f;var r=Z(t),l=K(Y(r,o,n),"",t.optID);l.firstChild&&(l.firstChild.id=c.selectId+"-"+i),v.push(l),e.liIndex=i,t.display=t.content||t.text,t.type="option",t.index=i,t.option=e,t.disabled=t.disabled||e.disabled,g.push(t);var a=0;t.display&&(a+=t.display.length),t.subtext&&(a+=t.subtext.length),t.icon&&(a+=1),d<a&&(d=a,c.selectpicker.view.widestOption=v[v.length-1])}}function i(e,t){var i=t[e],s=t[e-1],n=t[e+1],o=i.querySelectorAll("option"+m);if(o.length){var r,l,a={label:S(i.label),subtext:i.getAttribute("data-subtext"),icon:i.getAttribute("data-icon"),iconBase:f},c=" "+(i.className||"");b++,s&&w({optID:b});var d=J(a);v.push(K(d,"dropdown-header"+c,b)),g.push({display:a.label,subtext:a.subtext,type:"optgroup-label",optID:b});for(var h=0,p=o.length;h<p;h++){var u=o[h];0===h&&(l=(r=g.length-1)+p),I(u,{headerIndex:r,lastIndex:l,optID:b,optgroupClass:c,disabled:i.disabled})}n&&w({optID:b})}}for(var s=t.length;e<s;e++){var n=t[e];"OPTGROUP"!==n.tagName?I(n,{}):i(e,t)}this.selectpicker.main.elements=v,this.selectpicker.main.data=g,this.selectpicker.current=this.selectpicker.main},findLis:function(){return this.$menuInner.find(".inner > li")},render:function(){this.setPlaceholder();var e,t=this,i=this.$element[0],s=O(i,this.options.hideDisabled),n=s.length,o=this.$button[0],r=o.querySelector(".filter-option-inner-inner"),l=document.createTextNode(this.options.multipleSeparator),a=_.fragment.cloneNode(!1),c=!1;if(o.classList.toggle("bs-placeholder",t.multiple?!n:!T(i,s)),this.tabIndex(),"static"===this.options.selectedTextFormat)a=Z({text:this.options.title},!0);else if(!1===(this.multiple&&-1!==this.options.selectedTextFormat.indexOf("count")&&1<n&&(1<(e=this.options.selectedTextFormat.split(">")).length&&n>e[1]||1===e.length&&2<=n))){for(var d=0;d<n&&d<50;d++){var h=s[d],p={},u={content:h.getAttribute("data-content"),subtext:h.getAttribute("data-subtext"),icon:h.getAttribute("data-icon")};this.multiple&&0<d&&a.appendChild(l.cloneNode(!1)),h.title?p.text=h.title:u.content&&t.options.showContent?(p.content=u.content.toString(),c=!0):(t.options.showIcon&&(p.icon=u.icon,p.iconBase=this.options.iconBase),t.options.showSubtext&&!t.multiple&&u.subtext&&(p.subtext=" "+u.subtext),p.text=h.textContent.trim()),a.appendChild(Z(p,!0))}49<n&&a.appendChild(document.createTextNode("..."))}else{var f=':not([hidden]):not([data-hidden="true"]):not([data-divider="true"])';this.options.hideDisabled&&(f+=":not(:disabled)");var m=this.$element[0].querySelectorAll("select > option"+f+", optgroup"+f+" option"+f).length,v="function"==typeof this.options.countSelectedText?this.options.countSelectedText(n,m):this.options.countSelectedText;a=Z({text:v.replace("{0}",n.toString()).replace("{1}",m.toString())},!0)}if(null==this.options.title&&(this.options.title=this.$element.attr("title")),a.childNodes.length||(a=Z({text:void 0!==this.options.title?this.options.title:this.options.noneSelectedText},!0)),o.title=a.textContent.replace(/<[^>]*>?/g,"").trim(),this.options.sanitize&&c&&P([a],t.options.whiteList,t.options.sanitizeFn),r.innerHTML="",r.appendChild(a),R.major<4&&this.$newElement[0].classList.contains("bs3-has-addon")){var g=o.querySelector(".filter-expand"),b=r.cloneNode(!0);b.className="filter-expand",g?o.replaceChild(b,g):o.appendChild(b)}this.$element.trigger("rendered"+j)},setStyle:function(e,t){var i,s=this.$button[0],n=this.$newElement[0],o=this.options.style.trim();this.$element.attr("class")&&this.$newElement.addClass(this.$element.attr("class").replace(/selectpicker|mobile-device|bs-select-hidden|validate\[.*\]/gi,"")),R.major<4&&(n.classList.add("bs3"),n.parentNode.classList.contains("input-group")&&(n.previousElementSibling||n.nextElementSibling)&&(n.previousElementSibling||n.nextElementSibling).classList.contains("input-group-addon")&&n.classList.add("bs3-has-addon")),i=e?e.trim():o,"add"==t?i&&s.classList.add.apply(s.classList,i.split(" ")):"remove"==t?i&&s.classList.remove.apply(s.classList,i.split(" ")):(o&&s.classList.remove.apply(s.classList,o.split(" ")),i&&s.classList.add.apply(s.classList,i.split(" ")))},liHeight:function(e){if(e||!1!==this.options.size&&!this.sizeInfo){this.sizeInfo||(this.sizeInfo={});var t=document.createElement("div"),i=document.createElement("div"),s=document.createElement("div"),n=document.createElement("ul"),o=document.createElement("li"),r=document.createElement("li"),l=document.createElement("li"),a=document.createElement("a"),c=document.createElement("span"),d=this.options.header&&0<this.$menu.find("."+V.POPOVERHEADER).length?this.$menu.find("."+V.POPOVERHEADER)[0].cloneNode(!0):null,h=this.options.liveSearch?document.createElement("div"):null,p=this.options.actionsBox&&this.multiple&&0<this.$menu.find(".bs-actionsbox").length?this.$menu.find(".bs-actionsbox")[0].cloneNode(!0):null,u=this.options.doneButton&&this.multiple&&0<this.$menu.find(".bs-donebutton").length?this.$menu.find(".bs-donebutton")[0].cloneNode(!0):null,f=this.$element.find("option")[0];if(this.sizeInfo.selectWidth=this.$newElement[0].offsetWidth,c.className="text",a.className="dropdown-item "+(f?f.className:""),t.className=this.$menu[0].parentNode.className+" "+V.SHOW,t.style.width=0,"auto"===this.options.width&&(i.style.minWidth=0),i.className=V.MENU+" "+V.SHOW,s.className="inner "+V.SHOW,n.className=V.MENU+" inner "+("4"===R.major?V.SHOW:""),o.className=V.DIVIDER,r.className="dropdown-header",c.appendChild(document.createTextNode("\u200b")),a.appendChild(c),l.appendChild(a),r.appendChild(c.cloneNode(!0)),this.selectpicker.view.widestOption&&n.appendChild(this.selectpicker.view.widestOption.cloneNode(!0)),n.appendChild(l),n.appendChild(o),n.appendChild(r),d&&i.appendChild(d),h){var m=document.createElement("input");h.className="bs-searchbox",m.className="form-control",h.appendChild(m),i.appendChild(h)}p&&i.appendChild(p),s.appendChild(n),i.appendChild(s),u&&i.appendChild(u),t.appendChild(i),document.body.appendChild(t);var v,g=l.offsetHeight,b=r?r.offsetHeight:0,w=d?d.offsetHeight:0,I=h?h.offsetHeight:0,x=p?p.offsetHeight:0,k=u?u.offsetHeight:0,$=z(o).outerHeight(!0),y=!!window.getComputedStyle&&window.getComputedStyle(i),S=i.offsetWidth,E=y?null:z(i),C={vert:L(y?y.paddingTop:E.css("paddingTop"))+L(y?y.paddingBottom:E.css("paddingBottom"))+L(y?y.borderTopWidth:E.css("borderTopWidth"))+L(y?y.borderBottomWidth:E.css("borderBottomWidth")),horiz:L(y?y.paddingLeft:E.css("paddingLeft"))+L(y?y.paddingRight:E.css("paddingRight"))+L(y?y.borderLeftWidth:E.css("borderLeftWidth"))+L(y?y.borderRightWidth:E.css("borderRightWidth"))},O={vert:C.vert+L(y?y.marginTop:E.css("marginTop"))+L(y?y.marginBottom:E.css("marginBottom"))+2,horiz:C.horiz+L(y?y.marginLeft:E.css("marginLeft"))+L(y?y.marginRight:E.css("marginRight"))+2};s.style.overflowY="scroll",v=i.offsetWidth-S,document.body.removeChild(t),this.sizeInfo.liHeight=g,this.sizeInfo.dropdownHeaderHeight=b,this.sizeInfo.headerHeight=w,this.sizeInfo.searchHeight=I,this.sizeInfo.actionsHeight=x,this.sizeInfo.doneButtonHeight=k,this.sizeInfo.dividerHeight=$,this.sizeInfo.menuPadding=C,this.sizeInfo.menuExtras=O,this.sizeInfo.menuWidth=S,this.sizeInfo.menuInnerInnerWidth=S-C.horiz,this.sizeInfo.totalMenuWidth=this.sizeInfo.menuWidth,this.sizeInfo.scrollBarWidth=v,this.sizeInfo.selectHeight=this.$newElement[0].offsetHeight,this.setPositionData()}},getSelectPosition:function(){var e,t=z(window),i=this.$newElement.offset(),s=z(this.options.container);this.options.container&&s.length&&!s.is("body")?((e=s.offset()).top+=parseInt(s.css("borderTopWidth")),e.left+=parseInt(s.css("borderLeftWidth"))):e={top:0,left:0};var n=this.options.windowPadding;this.sizeInfo.selectOffsetTop=i.top-e.top-t.scrollTop(),this.sizeInfo.selectOffsetBot=t.height()-this.sizeInfo.selectOffsetTop-this.sizeInfo.selectHeight-e.top-n[2],this.sizeInfo.selectOffsetLeft=i.left-e.left-t.scrollLeft(),this.sizeInfo.selectOffsetRight=t.width()-this.sizeInfo.selectOffsetLeft-this.sizeInfo.selectWidth-e.left-n[1],this.sizeInfo.selectOffsetTop-=n[0],this.sizeInfo.selectOffsetLeft-=n[3]},setMenuSize:function(e){this.getSelectPosition();var t,i,s,n,o,r,l,a=this.sizeInfo.selectWidth,c=this.sizeInfo.liHeight,d=this.sizeInfo.headerHeight,h=this.sizeInfo.searchHeight,p=this.sizeInfo.actionsHeight,u=this.sizeInfo.doneButtonHeight,f=this.sizeInfo.dividerHeight,m=this.sizeInfo.menuPadding,v=0;if(this.options.dropupAuto&&(l=c*this.selectpicker.current.elements.length+m.vert,this.$newElement.toggleClass(V.DROPUP,this.sizeInfo.selectOffsetTop-this.sizeInfo.selectOffsetBot>this.sizeInfo.menuExtras.vert&&l+this.sizeInfo.menuExtras.vert+50>this.sizeInfo.selectOffsetBot)),"auto"===this.options.size)n=3<this.selectpicker.current.elements.length?3*this.sizeInfo.liHeight+this.sizeInfo.menuExtras.vert-2:0,i=this.sizeInfo.selectOffsetBot-this.sizeInfo.menuExtras.vert,s=n+d+h+p+u,r=Math.max(n-m.vert,0),this.$newElement.hasClass(V.DROPUP)&&(i=this.sizeInfo.selectOffsetTop-this.sizeInfo.menuExtras.vert),t=(o=i)-d-h-p-u-m.vert;else if(this.options.size&&"auto"!=this.options.size&&this.selectpicker.current.elements.length>this.options.size){for(var g=0;g<this.options.size;g++)"divider"===this.selectpicker.current.data[g].type&&v++;t=(i=c*this.options.size+v*f+m.vert)-m.vert,o=i+d+h+p+u,s=r=""}this.$menu.css({"max-height":o+"px",overflow:"hidden","min-height":s+"px"}),this.$menuInner.css({"max-height":t+"px","overflow-y":"auto","min-height":r+"px"}),this.sizeInfo.menuInnerHeight=Math.max(t,1),this.selectpicker.current.data.length&&this.selectpicker.current.data[this.selectpicker.current.data.length-1].position>this.sizeInfo.menuInnerHeight&&(this.sizeInfo.hasScrollBar=!0,this.sizeInfo.totalMenuWidth=this.sizeInfo.menuWidth+this.sizeInfo.scrollBarWidth),"auto"===this.options.dropdownAlignRight&&this.$menu.toggleClass(V.MENURIGHT,this.sizeInfo.selectOffsetLeft>this.sizeInfo.selectOffsetRight&&this.sizeInfo.selectOffsetRight<this.sizeInfo.totalMenuWidth-a),this.dropdown&&this.dropdown._popper&&this.dropdown._popper.update()},setSize:function(e){if(this.liHeight(e),this.options.header&&this.$menu.css("padding-top",0),!1!==this.options.size){var t=this,i=z(window);this.setMenuSize(),this.options.liveSearch&&this.$searchbox.off("input.setMenuSize propertychange.setMenuSize").on("input.setMenuSize propertychange.setMenuSize",function(){return t.setMenuSize()}),"auto"===this.options.size?i.off("resize"+j+"."+this.selectId+".setMenuSize scroll"+j+"."+this.selectId+".setMenuSize").on("resize"+j+"."+this.selectId+".setMenuSize scroll"+j+"."+this.selectId+".setMenuSize",function(){return t.setMenuSize()}):this.options.size&&"auto"!=this.options.size&&this.selectpicker.current.elements.length>this.options.size&&i.off("resize"+j+"."+this.selectId+".setMenuSize scroll"+j+"."+this.selectId+".setMenuSize"),t.createView(!1,!0,e)}},setWidth:function(){var i=this;"auto"===this.options.width?requestAnimationFrame(function(){i.$menu.css("min-width","0"),i.$element.on("loaded"+j,function(){i.liHeight(),i.setMenuSize();var e=i.$newElement.clone().appendTo("body"),t=e.css("width","auto").children("button").outerWidth();e.remove(),i.sizeInfo.selectWidth=Math.max(i.sizeInfo.totalMenuWidth,t),i.$newElement.css("width",i.sizeInfo.selectWidth+"px")})}):"fit"===this.options.width?(this.$menu.css("min-width",""),this.$newElement.css("width","").addClass("fit-width")):this.options.width?(this.$menu.css("min-width",""),this.$newElement.css("width",this.options.width)):(this.$menu.css("min-width",""),this.$newElement.css("width","")),this.$newElement.hasClass("fit-width")&&"fit"!==this.options.width&&this.$newElement[0].classList.remove("fit-width")},selectPosition:function(){this.$bsContainer=z('<div class="bs-container" />');function e(e){var t={},i=r.options.display||!!z.fn.dropdown.Constructor.Default&&z.fn.dropdown.Constructor.Default.display;r.$bsContainer.addClass(e.attr("class").replace(/form-control|fit-width/gi,"")).toggleClass(V.DROPUP,e.hasClass(V.DROPUP)),s=e.offset(),l.is("body")?n={top:0,left:0}:((n=l.offset()).top+=parseInt(l.css("borderTopWidth"))-l.scrollTop(),n.left+=parseInt(l.css("borderLeftWidth"))-l.scrollLeft()),o=e.hasClass(V.DROPUP)?0:e[0].offsetHeight,(R.major<4||"static"===i)&&(t.top=s.top-n.top+o,t.left=s.left-n.left),t.width=e[0].offsetWidth,r.$bsContainer.css(t)}var s,n,o,r=this,l=z(this.options.container);this.$button.on("click.bs.dropdown.data-api",function(){r.isDisabled()||(e(r.$newElement),r.$bsContainer.appendTo(r.options.container).toggleClass(V.SHOW,!r.$button.hasClass(V.SHOW)).append(r.$menu))}),z(window).off("resize"+j+"."+this.selectId+" scroll"+j+"."+this.selectId).on("resize"+j+"."+this.selectId+" scroll"+j+"."+this.selectId,function(){r.$newElement.hasClass(V.SHOW)&&e(r.$newElement)}),this.$element.on("hide"+j,function(){r.$menu.data("height",r.$menu.height()),r.$bsContainer.detach()})},setOptionStatus:function(e){var t=this;if(t.noScroll=!1,t.selectpicker.view.visibleElements&&t.selectpicker.view.visibleElements.length)for(var i=0;i<t.selectpicker.view.visibleElements.length;i++){var s=t.selectpicker.current.data[i+t.selectpicker.view.position0],n=s.option;n&&(!0!==e&&t.setDisabled(s.index,s.disabled),t.setSelected(s.index,n.selected))}},setSelected:function(e,t){var i,s,n=this.selectpicker.main.elements[e],o=this.selectpicker.main.data[e],r=void 0!==this.activeIndex,l=this.activeIndex===e||t&&!this.multiple&&!r;o.selected=t,s=n.firstChild,t&&(this.selectedIndex=e),n.classList.toggle("selected",t),l?(this.focusItem(n,o),this.selectpicker.view.currentActive=n,this.activeIndex=e):this.defocusItem(n),s&&(s.classList.toggle("selected",t),t?s.setAttribute("aria-selected",!0):this.multiple?s.setAttribute("aria-selected",!1):s.removeAttribute("aria-selected")),l||r||!t||void 0===this.prevActiveIndex||(i=this.selectpicker.main.elements[this.prevActiveIndex],this.defocusItem(i))},setDisabled:function(e,t){var i,s=this.selectpicker.main.elements[e];this.selectpicker.main.data[e].disabled=t,i=s.firstChild,s.classList.toggle(V.DISABLED,t),i&&("4"===R.major&&i.classList.toggle(V.DISABLED,t),t?(i.setAttribute("aria-disabled",t),i.setAttribute("tabindex",-1)):(i.removeAttribute("aria-disabled"),i.setAttribute("tabindex",0)))},isDisabled:function(){return this.$element[0].disabled},checkDisabled:function(){this.isDisabled()?(this.$newElement[0].classList.add(V.DISABLED),this.$button.addClass(V.DISABLED).attr("tabindex",-1).attr("aria-disabled",!0)):(this.$button[0].classList.contains(V.DISABLED)&&(this.$newElement[0].classList.remove(V.DISABLED),this.$button.removeClass(V.DISABLED).attr("aria-disabled",!1)),-1!=this.$button.attr("tabindex")||this.$element.data("tabindex")||this.$button.removeAttr("tabindex"))},tabIndex:function(){this.$element.data("tabindex")!==this.$element.attr("tabindex")&&-98!==this.$element.attr("tabindex")&&"-98"!==this.$element.attr("tabindex")&&(this.$element.data("tabindex",this.$element.attr("tabindex")),this.$button.attr("tabindex",this.$element.data("tabindex"))),this.$element.attr("tabindex",-98)},clickListener:function(){var C=this,t=z(document);function e(){C.options.liveSearch?C.$searchbox.trigger("focus"):C.$menuInner.trigger("focus")}function i(){C.dropdown&&C.dropdown._popper&&C.dropdown._popper.state.isCreated?e():requestAnimationFrame(i)}t.data("spaceSelect",!1),this.$button.on("keyup",function(e){/(32)/.test(e.keyCode.toString(10))&&t.data("spaceSelect")&&(e.preventDefault(),t.data("spaceSelect",!1))}),this.$newElement.on("show.bs.dropdown",function(){3<R.major&&!C.dropdown&&(C.dropdown=C.$button.data("bs.dropdown"),C.dropdown._menu=C.$menu[0])}),this.$button.on("click.bs.dropdown.data-api",function(){C.$newElement.hasClass(V.SHOW)||C.setSize()}),this.$element.on("shown"+j,function(){C.$menuInner[0].scrollTop!==C.selectpicker.view.scrollTop&&(C.$menuInner[0].scrollTop=C.selectpicker.view.scrollTop),3<R.major?requestAnimationFrame(i):e()}),this.$menuInner.on("mouseenter","li a",function(e){var t=this.parentElement,i=C.isVirtual()?C.selectpicker.view.position0:0,s=Array.prototype.indexOf.call(t.parentElement.children,t),n=C.selectpicker.current.data[s+i];C.focusItem(t,n,!0)}),this.$menuInner.on("click","li a",function(e,t){var i=z(this),s=C.$element[0],n=C.isVirtual()?C.selectpicker.view.position0:0,o=C.selectpicker.current.data[i.parent().index()+n],r=o.index,l=T(s),a=s.selectedIndex,c=s.options[a],d=!0;if(C.multiple&&1!==C.options.maxOptions&&e.stopPropagation(),e.preventDefault(),!C.isDisabled()&&!i.parent().hasClass(V.DISABLED)){var h=o.option,p=z(h),u=h.selected,f=p.parent("optgroup"),m=f.find("option"),v=C.options.maxOptions,g=f.data("maxOptions")||!1;if(r===C.activeIndex&&(t=!0),t||(C.prevActiveIndex=C.activeIndex,C.activeIndex=void 0),C.multiple){if(h.selected=!u,C.setSelected(r,!u),i.trigger("blur"),!1!==v||!1!==g){var b=v<O(s).length,w=g<f.find("option:selected").length;if(v&&b||g&&w)if(v&&1==v)s.selectedIndex=-1,h.selected=!0,C.setOptionStatus(!0);else if(g&&1==g){for(var I=0;I<m.length;I++){var x=m[I];x.selected=!1,C.setSelected(x.liIndex,!1)}h.selected=!0,C.setSelected(r,!0)}else{var k="string"==typeof C.options.maxOptionsText?[C.options.maxOptionsText,C.options.maxOptionsText]:C.options.maxOptionsText,$="function"==typeof k?k(v,g):k,y=$[0].replace("{n}",v),S=$[1].replace("{n}",g),E=z('<div class="notify"></div>');$[2]&&(y=y.replace("{var}",$[2][1<v?0:1]),S=S.replace("{var}",$[2][1<g?0:1])),h.selected=!1,C.$menu.append(E),v&&b&&(E.append(z("<div>"+y+"</div>")),d=!1,C.$element.trigger("maxReached"+j)),g&&w&&(E.append(z("<div>"+S+"</div>")),d=!1,C.$element.trigger("maxReachedGrp"+j)),setTimeout(function(){C.setSelected(r,!1)},10),E[0].classList.add("fadeOut"),setTimeout(function(){E.remove()},1050)}}}else c&&(c.selected=!1),h.selected=!0,C.setSelected(r,!0);!C.multiple||C.multiple&&1===C.options.maxOptions?C.$button.trigger("focus"):C.options.liveSearch&&C.$searchbox.trigger("focus"),d&&(!C.multiple&&a===s.selectedIndex||(A=[h.index,p.prop("selected"),l],C.$element.triggerNative("change")))}}),this.$menu.on("click","li."+V.DISABLED+" a, ."+V.POPOVERHEADER+", ."+V.POPOVERHEADER+" :not(.close)",function(e){e.currentTarget==this&&(e.preventDefault(),e.stopPropagation(),C.options.liveSearch&&!z(e.target).hasClass("close")?C.$searchbox.trigger("focus"):C.$button.trigger("focus"))}),this.$menuInner.on("click",".divider, .dropdown-header",function(e){e.preventDefault(),e.stopPropagation(),C.options.liveSearch?C.$searchbox.trigger("focus"):C.$button.trigger("focus")}),this.$menu.on("click","."+V.POPOVERHEADER+" .close",function(){C.$button.trigger("click")}),this.$searchbox.on("click",function(e){e.stopPropagation()}),this.$menu.on("click",".actions-btn",function(e){C.options.liveSearch?C.$searchbox.trigger("focus"):C.$button.trigger("focus"),e.preventDefault(),e.stopPropagation(),z(this).hasClass("bs-select-all")?C.selectAll():C.deselectAll()}),this.$element.on("change"+j,function(){C.render(),C.$element.trigger("changed"+j,A),A=null}).on("focus"+j,function(){C.options.mobile||C.$button.trigger("focus")})},liveSearchListener:function(){var u=this,f=document.createElement("li");this.$button.on("click.bs.dropdown.data-api",function(){u.$searchbox.val()&&u.$searchbox.val("")}),this.$searchbox.on("click.bs.dropdown.data-api focus.bs.dropdown.data-api touchend.bs.dropdown.data-api",function(e){e.stopPropagation()}),this.$searchbox.on("input propertychange",function(){var e=u.$searchbox.val();if(u.selectpicker.search.elements=[],u.selectpicker.search.data=[],e){var t=[],i=e.toUpperCase(),s={},n=[],o=u._searchStyle(),r=u.options.liveSearchNormalize;r&&(i=w(i)),u._$lisSelected=u.$menuInner.find(".selected");for(var l=0;l<u.selectpicker.main.data.length;l++){var a=u.selectpicker.main.data[l];s[l]||(s[l]=k(a,i,o,r)),s[l]&&void 0!==a.headerIndex&&-1===n.indexOf(a.headerIndex)&&(0<a.headerIndex&&(s[a.headerIndex-1]=!0,n.push(a.headerIndex-1)),s[a.headerIndex]=!0,n.push(a.headerIndex),s[a.lastIndex+1]=!0),s[l]&&"optgroup-label"!==a.type&&n.push(l)}l=0;for(var c=n.length;l<c;l++){var d=n[l],h=n[l-1],p=(a=u.selectpicker.main.data[d],u.selectpicker.main.data[h]);("divider"!==a.type||"divider"===a.type&&p&&"divider"!==p.type&&c-1!==l)&&(u.selectpicker.search.data.push(a),t.push(u.selectpicker.main.elements[d]))}u.activeIndex=void 0,u.noScroll=!0,u.$menuInner.scrollTop(0),u.selectpicker.search.elements=t,u.createView(!0),t.length||(f.className="no-results",f.innerHTML=u.options.noneResultsText.replace("{0}",'"'+S(e)+'"'),u.$menuInner[0].firstChild.appendChild(f))}else u.$menuInner.scrollTop(0),u.createView(!1)})},_searchStyle:function(){return this.options.liveSearchStyle||"contains"},val:function(e){var t=this.$element[0];if(void 0===e)return this.$element.val();var i=T(t);if(A=[null,null,i],this.$element.val(e).trigger("changed"+j,A),this.$newElement.hasClass(V.SHOW))if(this.multiple)this.setOptionStatus(!0);else{var s=(t.options[t.selectedIndex]||{}).liIndex;"number"==typeof s&&(this.setSelected(this.selectedIndex,!1),this.setSelected(s,!0))}return this.render(),A=null,this.$element},changeAll:function(e){if(this.multiple){void 0===e&&(e=!0);var t=this.$element[0],i=0,s=0,n=T(t);t.classList.add("bs-select-hidden");for(var o=0,r=this.selectpicker.current.elements.length;o<r;o++){var l=this.selectpicker.current.data[o],a=l.option;a&&!l.disabled&&"divider"!==l.type&&(l.selected&&i++,(a.selected=e)&&s++)}t.classList.remove("bs-select-hidden"),i!==s&&(this.setOptionStatus(),A=[null,null,n],this.$element.triggerNative("change"))}},selectAll:function(){return this.changeAll(!0)},deselectAll:function(){return this.changeAll(!1)},toggle:function(e){(e=e||window.event)&&e.stopPropagation(),this.$button.trigger("click.bs.dropdown.data-api")},keydown:function(e){var t,i,s,n,o,r=z(this),l=r.hasClass("dropdown-toggle"),a=(l?r.closest(".dropdown"):r.closest(F.MENU)).data("this"),c=a.findLis(),d=!1,h=e.which===W&&!l&&!a.options.selectOnTab,p=G.test(e.which)||h,u=a.$menuInner[0].scrollTop,f=!0===a.isVirtual()?a.selectpicker.view.position0:0;if(!(112<=e.which&&e.which<=123))if(!(i=a.$newElement.hasClass(V.SHOW))&&(p||48<=e.which&&e.which<=57||96<=e.which&&e.which<=105||65<=e.which&&e.which<=90)&&(a.$button.trigger("click.bs.dropdown.data-api"),a.options.liveSearch))a.$searchbox.trigger("focus");else{if(e.which===N&&i&&(e.preventDefault(),a.$button.trigger("click.bs.dropdown.data-api").trigger("focus")),p){if(!c.length)return;-1!==(t=(s=a.selectpicker.main.elements[a.activeIndex])?Array.prototype.indexOf.call(s.parentElement.children,s):-1)&&a.defocusItem(s),e.which===B?(-1!==t&&t--,t+f<0&&(t+=c.length),a.selectpicker.view.canHighlight[t+f]||-1===(t=a.selectpicker.view.canHighlight.slice(0,t+f).lastIndexOf(!0)-f)&&(t=c.length-1)):e.which!==M&&!h||(++t+f>=a.selectpicker.view.canHighlight.length&&(t=0),a.selectpicker.view.canHighlight[t+f]||(t=t+1+a.selectpicker.view.canHighlight.slice(t+f+1).indexOf(!0))),e.preventDefault();var m=f+t;e.which===B?0===f&&t===c.length-1?(a.$menuInner[0].scrollTop=a.$menuInner[0].scrollHeight,m=a.selectpicker.current.elements.length-1):d=(o=(n=a.selectpicker.current.data[m]).position-n.height)<u:e.which!==M&&!h||(0===t?m=a.$menuInner[0].scrollTop=0:d=u<(o=(n=a.selectpicker.current.data[m]).position-a.sizeInfo.menuInnerHeight)),s=a.selectpicker.current.elements[m],a.activeIndex=a.selectpicker.current.data[m].index,a.focusItem(s),a.selectpicker.view.currentActive=s,d&&(a.$menuInner[0].scrollTop=o),a.options.liveSearch?a.$searchbox.trigger("focus"):r.trigger("focus")}else if(!r.is("input")&&!q.test(e.which)||e.which===H&&a.selectpicker.keydown.keyHistory){var v,g,b=[];e.preventDefault(),a.selectpicker.keydown.keyHistory+=C[e.which],a.selectpicker.keydown.resetKeyHistory.cancel&&clearTimeout(a.selectpicker.keydown.resetKeyHistory.cancel),a.selectpicker.keydown.resetKeyHistory.cancel=a.selectpicker.keydown.resetKeyHistory.start(),g=a.selectpicker.keydown.keyHistory,/^(.)\1+$/.test(g)&&(g=g.charAt(0));for(var w=0;w<a.selectpicker.current.data.length;w++){var I=a.selectpicker.current.data[w];k(I,g,"startsWith",!0)&&a.selectpicker.view.canHighlight[w]&&b.push(I.index)}if(b.length){var x=0;c.removeClass("active").find("a").removeClass("active"),1===g.length&&(-1===(x=b.indexOf(a.activeIndex))||x===b.length-1?x=0:x++),v=b[x],d=0<u-(n=a.selectpicker.main.data[v]).position?(o=n.position-n.height,!0):(o=n.position-a.sizeInfo.menuInnerHeight,n.position>u+a.sizeInfo.menuInnerHeight),s=a.selectpicker.main.elements[v],a.activeIndex=b[x],a.focusItem(s),s&&s.firstChild.focus(),d&&(a.$menuInner[0].scrollTop=o),r.trigger("focus")}}i&&(e.which===H&&!a.selectpicker.keydown.keyHistory||e.which===D||e.which===W&&a.options.selectOnTab)&&(e.which!==H&&e.preventDefault(),a.options.liveSearch&&e.which===H||(a.$menuInner.find(".active a").trigger("click",!0),r.trigger("focus"),a.options.liveSearch||(e.preventDefault(),z(document).data("spaceSelect",!0))))}},mobile:function(){this.$element[0].classList.add("mobile-device")},refresh:function(){var e=z.extend({},this.options,this.$element.data());this.options=e,this.checkDisabled(),this.setStyle(),this.render(),this.createLi(),this.setWidth(),this.setSize(!0),this.$element.trigger("refreshed"+j)},hide:function(){this.$newElement.hide()},show:function(){this.$newElement.show()},remove:function(){this.$newElement.remove(),this.$element.remove()},destroy:function(){this.$newElement.before(this.$element).remove(),this.$bsContainer?this.$bsContainer.remove():this.$menu.remove(),this.$element.off(j).removeData("selectpicker").removeClass("bs-select-hidden selectpicker"),z(window).off(j+"."+this.selectId)}};var ee=z.fn.selectpicker;z.fn.selectpicker=X,z.fn.selectpicker.Constructor=Q,z.fn.selectpicker.noConflict=function(){return z.fn.selectpicker=ee,this},z(document).off("keydown.bs.dropdown.data-api",'.bootstrap-select [data-toggle="dropdown"], .bootstrap-select .dropdown-menu').on("keydown"+j,'.bootstrap-select [data-toggle="dropdown"], .bootstrap-select [role="listbox"], .bootstrap-select .bs-searchbox input',Q.prototype.keydown).on("focusin.modal",'.bootstrap-select [data-toggle="dropdown"], .bootstrap-select [role="listbox"], .bootstrap-select .bs-searchbox input',function(e){e.stopPropagation()}),z(window).on("load"+j+".data-api",function(){z(".selectpicker").each(function(){var e=z(this);X.call(e,e.data())})})}(e)});
+//# sourceMappingURL=bootstrap-select.min.js.map
\ No newline at end of file

From 3ea59d5d36d339120332f6885bbbdf9eca4393da Mon Sep 17 00:00:00 2001
From: Th3M3 <the_me@outlook.de>
Date: Sun, 5 Apr 2020 20:49:53 +0200
Subject: [PATCH 07/27] shorter button textes & cleanup

Signed-off-by: Th3M3 <the_me@outlook.de>
---
 scripts/pi-hole/js/groups-adlists.js | 3 +--
 scripts/pi-hole/js/groups-clients.js | 3 +--
 scripts/pi-hole/js/groups-common.js  | 2 ++
 scripts/pi-hole/js/groups-domains.js | 3 +--
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 7415b5529..a961db98b 100644
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/scripts/pi-hole/js/groups-adlists.js
@@ -150,8 +150,7 @@ function initTable() {
         })
         .selectpicker()
         .siblings(".dropdown-menu")
-        .find(".btn-group")
-        .parent()
+        .find(".bs-actionsbox")
         .prepend(
           '<button type="button" id=btn_apply_' +
             data.id +
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 66604d5c1..803c4c3f7 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -188,8 +188,7 @@ function initTable() {
         })
         .selectpicker()
         .siblings(".dropdown-menu")
-        .find(".btn-group")
-        .parent()
+        .find(".bs-actionsbox")
         .prepend(
           '<button type="button" id=btn_apply_' +
             data.id +
diff --git a/scripts/pi-hole/js/groups-common.js b/scripts/pi-hole/js/groups-common.js
index 903d5a432..997569017 100644
--- a/scripts/pi-hole/js/groups-common.js
+++ b/scripts/pi-hole/js/groups-common.js
@@ -138,6 +138,8 @@ function bsSelect_defaults() {
   pickerDEFAULTS.width = "fit";
   pickerDEFAULTS.container = "body";
   pickerDEFAULTS.dropdownAlignRight = "auto";
+  pickerDEFAULTS.selectAllText = "All";
+  pickerDEFAULTS.deselectAllText = "None";
   pickerDEFAULTS.countSelectedText = function(num, total) {
     if (num === total) {
       return "All selected (" + num + ")";
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index 20c22eabb..927172620 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -215,8 +215,7 @@ function initTable() {
           })
           .selectpicker()
           .siblings(".dropdown-menu")
-          .find(".btn-group")
-          .parent()
+          .find(".bs-actionsbox")
           .prepend(
             '<button type="button" id=btn_apply_' +
               data.id +

From ff5e4eec863eb15908bf0bf37ebacc3559cb555e Mon Sep 17 00:00:00 2001
From: TheME <andreas_fl@outlook.com>
Date: Mon, 17 Feb 2020 19:48:20 +0100
Subject: [PATCH 08/27] fix input fields spacing issues

Signed-off-by: Th3M3 <the_me@outlook.de>
---
 custom_dns.php     |  4 ++--
 groups-adlists.php |  8 ++++----
 groups-clients.php |  8 ++++----
 groups.php         |  8 ++++----
 settings.php       | 10 ++++++----
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/custom_dns.php b/custom_dns.php
index 7e639959a..866c3c07a 100644
--- a/custom_dns.php
+++ b/custom_dns.php
@@ -28,11 +28,11 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="form-group col-md-6">
                         <label for="domain">Domain:</label>
                         <input id="domain" type="text" class="form-control" placeholder="Add a domain (example.com or sub.example.com)">
                     </div>
-                    <div class="col-md-6">
+                    <div class="form-group col-md-6">
                         <label for="ip">IP Address:</label>
                         <input id="ip" type="text" class="form-control" placeholder="Associated IP address">
                     </div>
diff --git a/groups-adlists.php b/groups-adlists.php
index 1884c18d0..8fbbc1028 100644
--- a/groups-adlists.php
+++ b/groups-adlists.php
@@ -26,12 +26,12 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Address:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_address">Address:</label>
                         <input id="new_address" type="text" class="form-control" placeholder="http://..., https://..., file://...">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex2">Comment:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="Adlist description (optional)">
                     </div>
                 </div>
diff --git a/groups-clients.php b/groups-clients.php
index 13894102c..8c301ad3b 100644
--- a/groups-clients.php
+++ b/groups-clients.php
@@ -26,15 +26,15 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Known clients:</label>
+                    <div class="form-group col-md-6">
+                        <label for="select">Known clients:</label>
                         <select id="select" class="form-control" placeholder="">
                             <option disabled selected>Loading...</option>
                         </select><br>
                         <input id="ip-custom" type="text" class="form-control" disabled placeholder="Client IP address (IPv4 or IPv6, CIDR subnetting available, optional)">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex3">Comment:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="Client description (optional)">
                     </div>
                 </div>
diff --git a/groups.php b/groups.php
index 69509f643..2dea94d4d 100644
--- a/groups.php
+++ b/groups.php
@@ -26,12 +26,12 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Name:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_name">Name:</label>
                         <input id="new_name" type="text" class="form-control" placeholder="Group name">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex2">Description:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_desc">Description:</label>
                         <input id="new_desc" type="text" class="form-control" placeholder="Group description (optional)">
                     </div>
                 </div>
diff --git a/settings.php b/settings.php
index b7383c964..5ecd51ebb 100644
--- a/settings.php
+++ b/settings.php
@@ -694,6 +694,8 @@ function convertseconds($argument)
                                                         <input type="text" name="custom1val" class="form-control"
                                                                <?php if (isset($custom1)){ ?>value="<?php echo $custom1; ?>"<?php } ?>>
                                                     </div>
+                                                </div>
+                                                <div class="form-group">
                                                     <label>Custom 2 (IPv4)</label>
                                                     <div class="input-group">
                                                         <div class="input-group-addon">
@@ -716,6 +718,8 @@ function convertseconds($argument)
                                                         <input type="text" name="custom3val" class="form-control"
                                                                <?php if (isset($custom3)){ ?>value="<?php echo $custom3; ?>"<?php } ?>>
                                                     </div>
+                                                </div>
+                                                <div class="form-group">
                                                     <label>Custom 4 (IPv6)</label>
                                                     <div class="input-group">
                                                         <div class="input-group-addon">
@@ -975,10 +979,8 @@ function convertseconds($argument)
                                                 </div>
                                                 <h4>Administrator Email Address</h4>
                                                 <div class="form-group">
-                                                    <div class="input-group">
-                                                        <input type="text" class="form-control" name="adminemail"
-                                                               value="<?php echo htmlspecialchars($adminemail); ?>">
-                                                    </div>
+                                                    <input type="text" class="form-control" name="adminemail"
+                                                           value="<?php echo htmlspecialchars($adminemail); ?>">
                                                 </div>
                                                 <input type="hidden" name="field" value="webUI">
                                                 <input type="hidden" name="token" value="<?php echo $token ?>">

From 0f892c9ffc3b6e7976fe5cfb1f175eb564f0c1bc Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 7 Apr 2020 12:30:51 +0200
Subject: [PATCH 09/27] Check for existance and readability of static leases
 file before trying to access it.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/savesettings.php | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/scripts/pi-hole/php/savesettings.php b/scripts/pi-hole/php/savesettings.php
index 6c8b1e893..611cd587d 100644
--- a/scripts/pi-hole/php/savesettings.php
+++ b/scripts/pi-hole/php/savesettings.php
@@ -79,16 +79,10 @@ function readStaticLeasesFile($origin_file="/etc/dnsmasq.d/04-pihole-static-dhcp
 {
 	global $dhcp_static_leases;
 	$dhcp_static_leases = array();
-	try
-	{
-		$dhcpstatic = @fopen($origin_file, 'r');
-	}
-	catch(Exception $e)
-	{
-		echo "Warning: Failed to read ".$origin_file.", this is not an error";
+	if(!file_exists($origin_file) || !is_readable($origin_file))
 		return false;
-	}
-
+	
+	$dhcpstatic = @fopen($origin_file, 'r');
 	if(!is_resource($dhcpstatic))
 		return false;
 

From 0f21f6d26903bd0050854fb86b517f2c708139aa Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Fri, 10 Apr 2020 10:45:26 +0200
Subject: [PATCH 10/27] Release possible previous onClick event handler on
 regex links to avoid multiple tabs being opened on click.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/queries.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 6d6ec97d3..b3470f41b 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -282,6 +282,7 @@ $(document).ready(function() {
             this.style.color = "";
           }
         );
+        $("td:eq(4)", row).unbind(); // Release any possible previous onClick event handlers
         $("td:eq(4)", row).click(function() {
           var new_tab = window.open("groups-domains.php?domainid=" + data[9], "_blank");
           if (new_tab) {

From fadc6073db828ef25bfaf6e7f7de055515c590f5 Mon Sep 17 00:00:00 2001
From: Th3M3 <the_me@outlook.de>
Date: Sun, 12 Apr 2020 15:25:29 +0200
Subject: [PATCH 11/27] tweak chartjs customtooltips...

...and disable 'maintainAspectRatio' for the clients chart to avoid a squeezed display on small screens.

Signed-off-by: Th3M3 <the_me@outlook.de>
---
 scripts/pi-hole/js/index.js | 197 +++++++++++++++++++++++++++---------
 style/pi-hole.css           |  75 +++++++++++---
 2 files changed, 208 insertions(+), 64 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index d41a6d64b..952c93bd4 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -32,16 +32,26 @@ function objectToArray(p) {
   return [idx, arr];
 }
 
-var lastTooltipTime = 0;
-
 var customTooltips = function(tooltip) {
-  // Tooltip Element
-  var tooltipEl = document.getElementById("chartjs-tooltip");
+  var tooltipEl = document.getElementById(this._chart.canvas.id + "-customTooltip");
   if (!tooltipEl) {
+    // Create Tooltip Element once per chart
     tooltipEl = document.createElement("div");
-    tooltipEl.id = "chartjs-tooltip";
-    document.body.appendChild(tooltipEl);
-    $(tooltipEl).html("<table></table>");
+    tooltipEl.id = this._chart.canvas.id + "-customTooltip";
+    tooltipEl.classList.add("chartjs-tooltip");
+    tooltipEl.innerHTML = "<div class='arrow'></div> <table></table>";
+    // avoid browser's font-zoom since we know that <body>'s
+    // font-size was set to 14px by bootstrap's css
+    var fontZoom = parseFloat($("body").css("font-size")) / 14;
+    // set styles and font
+    tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px";
+    tooltipEl.style.borderRadius = tooltip.cornerRadius + "px";
+    tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
+    tooltipEl.style.fontSize = tooltip.bodyFontSize / fontZoom + "px";
+    tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
+    // append Tooltip next to canvas-containing box
+    tooltipEl.ancestor = this._chart.canvas.closest(".box[id]").parentNode;
+    tooltipEl.ancestor.appendChild(tooltipEl);
   }
 
   // Hide if no tooltip
@@ -50,22 +60,9 @@ var customTooltips = function(tooltip) {
     return;
   }
 
-  // Limit rendering to once every 50ms. This gives the DOM time to react,
-  // and avoids "lag" caused by not giving the DOM time to reapply CSS.
-  var now = Date.now();
-  if (now - lastTooltipTime < 50) {
-    return;
-  }
-
-  lastTooltipTime = now;
-
-  // Set caret Position
-  tooltipEl.classList.remove("above", "below", "no-transform");
-  if (tooltip.yAlign) {
-    tooltipEl.classList.add(tooltip.yAlign);
-  } else {
-    tooltipEl.classList.add("above");
-  }
+  // Set caret position
+  tooltipEl.classList.remove("left", "right", "center", "top", "bottom");
+  tooltipEl.classList.add(tooltip.xAlign, tooltip.yAlign);
 
   function getBody(bodyItem) {
     return bodyItem.lines;
@@ -75,22 +72,26 @@ var customTooltips = function(tooltip) {
   if (tooltip.body) {
     var titleLines = tooltip.title || [];
     var bodyLines = tooltip.body.map(getBody);
-    var innerHtml = "<table><thead>";
+    var innerHtml = "<thead>";
+
     titleLines.forEach(function(title) {
       innerHtml += "<tr><th>" + title + "</th></tr>";
     });
     innerHtml += "</thead><tbody>";
     var printed = 0;
+
+    var devicePixel = (1 / window.devicePixelRatio).toFixed(1);
     bodyLines.forEach(function(body, i) {
       var colors = tooltip.labelColors[i];
-      var style = "background:" + colors.backgroundColor;
-      style += "; border-color:" + colors.borderColor;
-      style += "; border-width: 2px";
-      var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+      var style = "background: " + colors.backgroundColor;
+      style += "; outline: 1px solid " + colors.backgroundColor;
+      style += "; border: " + devicePixel + "px solid #fff";
+      var span = "<span class='chartjs-tooltip-key' style='" + style + "'></span>";
+
       var num = body[0].split(": ");
-      // remove percent symbol from amount to allow numeric comparison
-      var number = num[1].replace(/%/i, "");
-      if (number > 0) {
+      // do not display entries with value of 0 (in bar chart),
+      // but pass through entries with "0.0% (in pie charts)
+      if (num[1] !== "0") {
         innerHtml += "<tr><td>" + span + body + "</td></tr>";
         printed++;
       }
@@ -99,30 +100,119 @@ var customTooltips = function(tooltip) {
       innerHtml += "<tr><td>No activity recorded</td></tr>";
     }
 
-    innerHtml += "</tbody></table>";
-    $(tooltipEl).html(innerHtml);
+    innerHtml += "</tbody>";
+
+    var tableRoot = tooltipEl.querySelector("table");
+    tableRoot.innerHTML = innerHtml;
   }
 
-  // Display, position, and set styles for font
-  var position = this._chart.canvas.getBoundingClientRect();
-  var width = tooltip.caretX;
-  // Prevent compression of the tooltip at the right edge of the screen
-  if ($(document).width() - tooltip.caretX < 400) {
-    width = $(document).width() - 400;
+  var canvasPos = this._chart.canvas.getBoundingClientRect();
+  var boxPos = tooltipEl.ancestor.getBoundingClientRect();
+  var offsetX = canvasPos.left - boxPos.left;
+  var offsetY = canvasPos.top - boxPos.top;
+  var tooltipWidth = tooltipEl.offsetWidth;
+  var tooltipHeight = tooltipEl.offsetHeight;
+  var caretX = tooltip.caretX;
+  var caretY = tooltip.caretY;
+  var caretPadding = tooltip.caretPadding;
+  var tooltipX, tooltipY, arrowX;
+  var arrowMinIndent = 2 * tooltip.cornerRadius;
+  var arrowSize = 5;
+
+  // Compute X position
+  if ($(document).width() > 2 * tooltip.width || tooltip.xAlign !== "center") {
+    // If the viewport is wide enough, let the tooltip follow the caret position
+    tooltipX = offsetX + caretX;
+    if (tooltip.yAlign === "top" || tooltip.yAlign === "bottom") {
+      switch (tooltip.xAlign) {
+        case "center":
+          // set a minimal X position to 5px to prevent
+          // the tooltip to stick out left of the viewport
+          var minX = 5;
+          if (2 * tooltipX < tooltipWidth + minX) {
+            arrowX = tooltipX - minX;
+            tooltipX = minX;
+          } else {
+            tooltipX -= tooltipWidth / 2;
+          }
+
+          break;
+        case "left":
+          tooltipX -= arrowMinIndent;
+          arrowX = arrowMinIndent;
+          break;
+        case "right":
+          tooltipX -= tooltipWidth - arrowMinIndent;
+          arrowX = tooltipWidth - arrowMinIndent;
+          break;
+        default:
+          break;
+      }
+    } else if (tooltip.yAlign === "center") {
+      switch (tooltip.xAlign) {
+        case "left":
+          tooltipX += caretPadding;
+          break;
+        case "right":
+          tooltipX -= tooltipWidth - caretPadding;
+          break;
+        case "center":
+          tooltipX -= tooltipWidth / 2;
+          break;
+        default:
+          break;
+      }
+    }
+  } else {
+    // compute the tooltip's center inside ancestor element
+    tooltipX = (tooltipEl.ancestor.offsetWidth - tooltipWidth) / 2;
+    // move the tooltip if the arrow would stick out to the left
+    if (offsetX + caretX - arrowMinIndent < tooltipX) {
+      tooltipX = offsetX + caretX - arrowMinIndent;
+    }
+
+    // move the tooltip if the arrow would stick out to the right
+    if (offsetX + caretX - tooltipWidth + arrowMinIndent > tooltipX) {
+      tooltipX = offsetX + caretX - tooltipWidth + arrowMinIndent;
+    }
+
+    arrowX = offsetX + caretX - tooltipX;
+  }
+
+  // Compute Y position
+  switch (tooltip.yAlign) {
+    case "top":
+      tooltipY = offsetY + caretY + arrowSize + caretPadding;
+      break;
+    case "center":
+      tooltipY = offsetY + caretY - tooltipHeight / 2;
+      if (tooltip.xAlign === "left") {
+        tooltipX += arrowSize;
+      } else if (tooltip.xAlign === "right") {
+        tooltipX -= arrowSize;
+      }
+
+      break;
+    case "bottom":
+      tooltipY = offsetY + caretY - tooltipHeight - arrowSize - caretPadding;
+      break;
+    default:
+      break;
   }
 
-  // Prevent tooltip disapearing behind the sidebar
-  if (tooltip.caretX < 100) {
-    width = 100;
+  // Position tooltip and display
+  tooltipEl.style.top = tooltipY.toFixed(1) + "px";
+  tooltipEl.style.left = tooltipX.toFixed(1) + "px";
+  if (arrowX === undefined) {
+    tooltipEl.querySelector(".arrow").style.left = "";
+  } else {
+    // Calculate percentage X value depending on the tooltip's
+    // width to avoid hanging arrow out on tooltip width changes
+    var arrowXpercent = ((100 / tooltipWidth) * arrowX).toFixed(1);
+    tooltipEl.querySelector(".arrow").style.left = arrowXpercent + "%";
   }
 
   tooltipEl.style.opacity = 1;
-  tooltipEl.style.left = position.left + width + "px";
-  tooltipEl.style.top = position.top + tooltip.caretY + window.pageYOffset + "px";
-  tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
-  tooltipEl.style.fontSize = tooltip.bodyFontSize + "px";
-  tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
-  tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px";
 };
 
 // Functions to update data in page
@@ -862,6 +952,7 @@ $(document).ready(function() {
           enabled: false,
           mode: "x-axis",
           custom: customTooltips,
+          yAlign: "top",
           itemSort: function(a, b) {
             return b.yLabel - a.yLabel;
           },
@@ -906,7 +997,10 @@ $(document).ready(function() {
             }
           ]
         },
-        maintainAspectRatio: true
+        maintainAspectRatio: false,
+        hover: {
+          animationDuration: 0
+        }
       }
     });
 
@@ -1016,3 +1110,8 @@ $(document).ready(function() {
     updateForwardDestinationsPie();
   }
 });
+
+//destroy all chartjs customTooltips on window resize
+window.addEventListener("resize", function() {
+  $(".chartjs-tooltip").remove();
+});
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 08ee7abb0..607963a38 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -158,27 +158,72 @@
     user-select: none
 }
 
-#chartjs-tooltip {
-    opacity: 1;
+.chartjs-tooltip {
+    opacity: 0;
     position: absolute;
-    background: rgba(0, 0, 0, .7);
-    color: #fff;
-    border-radius: 3px;
-    -webkit-transition: all .1s ease;
-    -o-transition: all .1s ease;
-    transition: all .1s ease;
     pointer-events: none;
-    -webkit-transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    -o-transform: translate(-50%, 0);
-    transform: translate(-50%, 0);
+    color: #fff;
+    background-color: rgba(0,0,0,0.8);
+    max-width: 95%;
+    z-index: 900;
+}
+
+.chartjs-tooltip th {
+    padding-bottom: 3px;
+}
+
+.chartjs-tooltip,
+.chartjs-tooltip .arrow {
+    -webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.chartjs-tooltip .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.chartjs-tooltip.bottom .arrow {
+    top: 100%;
+    left: 50%;
+    margin: 0 -5px -5px;
+    border-width: 5px 5px 0;
+    border-top-color: rgba(0, 0, 0, .8);
+}
+
+.chartjs-tooltip.top .arrow {
+    top: 0;
+    left: 50%;
+    border-width: 0 5px 5px;
+    margin: -5px -5px 0;
+    border-bottom-color: rgba(0, 0, 0, .8);
+}
+
+.chartjs-tooltip.right.center .arrow {
+    top: 50%;
+    left: 100%;
+    margin: -5px -5px -5px 0;
+    border-width: 5px 0 5px 5px;
+    border-left-color: rgba(0, 0, 0, .8);
+}
+
+.chartjs-tooltip.left.center .arrow {
+    top: 50%;
+    left: 0;
+    margin: -5px 0 -5px -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: rgba(0, 0, 0, .8);
 }
 
 .chartjs-tooltip-key {
     display: inline-block;
-    width: 20px;
-    height: 10px;
-    margin-right: 10px;
+    width: 12px;
+    height: 12px;
+    margin-right: 3px;
+    vertical-align: text-top;
 }
 
 .chart-legend {

From 8ad3b70f96bbda82865260c39ce97decbed6a318 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Mon, 13 Apr 2020 09:48:08 +0200
Subject: [PATCH 12/27] We should also accept open-ended IPv6 addresses such
 as, e.g., fda2:2001:5555::

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/groups-common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/groups-common.js b/scripts/pi-hole/js/groups-common.js
index 997569017..005ce7d83 100644
--- a/scripts/pi-hole/js/groups-common.js
+++ b/scripts/pi-hole/js/groups-common.js
@@ -116,7 +116,7 @@ function validateIPv6CIDR(ip) {
       ipv6elem +
       "))*::((?:" +
       ipv6elem +
-      "))((?::" +
+      "))*((?::" +
       ipv6elem +
       "))*|((?:" +
       ipv6elem +

From 2e7b9191fca2bbe2e88e8667b3ce2dcafb135d8c Mon Sep 17 00:00:00 2001
From: DL6ER <DL6ER@users.noreply.github.com>
Date: Tue, 14 Apr 2020 19:54:43 +0200
Subject: [PATCH 13/27] Update scripts/pi-hole/js/queries.js

Co-Authored-By: TheME <andreas_fl@outlook.com>
---
 scripts/pi-hole/js/queries.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index b3470f41b..7ea1a6d71 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -282,7 +282,7 @@ $(document).ready(function() {
             this.style.color = "";
           }
         );
-        $("td:eq(4)", row).unbind(); // Release any possible previous onClick event handlers
+        $("td:eq(4)", row).off(); // Release any possible previous onClick event handlers
         $("td:eq(4)", row).click(function() {
           var new_tab = window.open("groups-domains.php?domainid=" + data[9], "_blank");
           if (new_tab) {

From 3f001031a14d5be2bfa7ee82bacd60ce6d8bbd26 Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Thu, 16 Apr 2020 19:17:35 +0100
Subject: [PATCH 14/27] Flip default stae of debug log upload checkbox.
 Resolves #1216

Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 debug.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/debug.php b/debug.php
index 9840331fc..ccb139c7e 100644
--- a/debug.php
+++ b/debug.php
@@ -1,4 +1,4 @@
-<?php /* 
+<?php /*
 *    Pi-hole: A black hole for Internet advertisements
 *    (c) 2017 Pi-hole, LLC (https://pi-hole.net)
 *    Network-wide ad blocking via your own hardware.
@@ -12,7 +12,7 @@
     <h1>Generate debug log</h1>
 </div>
 
-<p><input type="checkbox" id="upload" checked> Upload debug log and provide token once finished</p>
+<p><input type="checkbox" id="upload"> Upload debug log and provide token once finished</p>
 <p>Once you click this button a debug log will be generated and can automatically be uploaded if we detect a working internet connection.</p>
 <button class="btn btn-lg btn-primary btn-block" id="debugBtn">Generate debug log</button>
 <pre id="output" style="width: 100%; height: 100%;" hidden="true"></pre>

From 14dd1350df08cb1cc471a3abf75ebf241c48d192 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 23 Apr 2020 11:27:24 +0200
Subject: [PATCH 15/27] Strip whitespaces from the beginning and end of user
 input to prevent errors getting triggered due to users trying to add "empty"
 domains.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/groups.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/pi-hole/php/groups.php b/scripts/pi-hole/php/groups.php
index 2167295ee..3a7d09d5b 100644
--- a/scripts/pi-hole/php/groups.php
+++ b/scripts/pi-hole/php/groups.php
@@ -54,7 +54,7 @@ function JSON_error($message = null)
 } elseif ($_POST['action'] == 'add_group') {
     // Add new group
     try {
-        $names = explode(' ', $_POST['name']);
+        $names = explode(' ', trim($_POST['name']));
         $stmt = $db->prepare('INSERT INTO "group" (name,description) VALUES (:name,:desc)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -234,7 +234,7 @@ function JSON_error($message = null)
 } elseif ($_POST['action'] == 'add_client') {
     // Add new client
     try {
-        $ips = explode(' ', $_POST['ip']);
+        $ips = explode(' ', trim($_POST['ip']));
         $stmt = $db->prepare('INSERT INTO client (ip,comment) VALUES (:ip,:comment)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -410,7 +410,7 @@ function JSON_error($message = null)
 } elseif ($_POST['action'] == 'add_domain') {
     // Add new domain
     try {
-        $domains = explode(' ', $_POST['domain']);
+        $domains = explode(' ', trim($_POST['domain']));
         $stmt = $db->prepare('INSERT INTO domainlist (domain,type,comment) VALUES (:domain,:type,:comment)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -604,7 +604,7 @@ function JSON_error($message = null)
 } elseif ($_POST['action'] == 'add_adlist') {
     // Add new adlist
     try {
-        $addresses = explode(' ', $_POST['address']);
+        $addresses = explode(' ', trim($_POST['address']));
 
         $stmt = $db->prepare('INSERT INTO adlist (address,comment) VALUES (:address,:comment)');
         if (!$stmt) {

From 7d1163ff9c232361f71e43bf4279c7856efbd891 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 23 Apr 2020 11:38:17 +0200
Subject: [PATCH 16/27] Try to be clearer with the "failed to add domain"
 message by showing the original input when idn_to_ascii() failed and by
 showing both, the original and the converted domain when the conversion
 result itself is invalid.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/groups.php | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/scripts/pi-hole/php/groups.php b/scripts/pi-hole/php/groups.php
index 3a7d09d5b..0363f23bc 100644
--- a/scripts/pi-hole/php/groups.php
+++ b/scripts/pi-hole/php/groups.php
@@ -427,8 +427,10 @@ function JSON_error($message = null)
         }
 
         foreach ($domains as $domain) {
-            // Convert domain name to IDNA ASCII form for international domains
-            $domain = idn_to_ascii($domain);
+            $input = $domain;
+            // Convert domain name to IDNA ASCII form for international domains if intl package is available
+            if (extension_loaded("intl"))
+                $domain = idn_to_ascii($domain);
 
             if(strlen($_POST['type']) === 2 && $_POST['type'][1] === 'W')
             {
@@ -442,7 +444,13 @@ function JSON_error($message = null)
                 $domain = strtolower($domain);
                 if(filter_var($domain, FILTER_VALIDATE_DOMAIN, FILTER_FLAG_HOSTNAME) === false)
                 {
-                    throw new Exception('Domain ' . htmlentities(utf8_encode($domain)) . 'is not a valid domain.');
+                    // This is the case when idn_to_ascii() modified the string
+                if($input !== $domain && strlen($domain) > 0)
+                    throw new Exception('Domain ' . htmlentities($input) . ' (converted to "' . htmlentities(utf8_encode($domain)) . '") is not a valid domain.');
+                elseif($input !== $domain)
+                    throw new Exception('Domain ' . htmlentities($input) . ' is not a valid domain.');
+                else
+                    throw new Exception('Domain ' . htmlentities(utf8_encode($domain)) . ' is not a valid domain.');
                 }
             }
 

From 77b421b1336a0570a3aeae3bfbea2a6498fdffdc Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 23 Apr 2020 13:47:50 +0200
Subject: [PATCH 17/27] Show how many domains have been added in case of an
 error.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/groups.php | 52 ++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/scripts/pi-hole/php/groups.php b/scripts/pi-hole/php/groups.php
index 0363f23bc..6f1dfdd21 100644
--- a/scripts/pi-hole/php/groups.php
+++ b/scripts/pi-hole/php/groups.php
@@ -55,6 +55,8 @@ function JSON_error($message = null)
     // Add new group
     try {
         $names = explode(' ', trim($_POST['name']));
+        $total = count($names);
+        $added = 0;
         $stmt = $db->prepare('INSERT INTO "group" (name,description) VALUES (:name,:desc)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -66,12 +68,15 @@ function JSON_error($message = null)
 
         foreach ($names as $name) {
             if (!$stmt->bindValue(':name', $name, SQLITE3_TEXT)) {
-                throw new Exception('While binding name: ' . $db->lastErrorMsg());
+                throw new Exception('While binding name: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " groups");
             }
 
             if (!$stmt->execute()) {
-                throw new Exception('While executing: ' . $db->lastErrorMsg());
+                throw new Exception('While executing: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " groups");
             }
+            $added++;
         }
 
         $reload = true;
@@ -235,6 +240,8 @@ function JSON_error($message = null)
     // Add new client
     try {
         $ips = explode(' ', trim($_POST['ip']));
+        $total = count($ips);
+        $added = 0;
         $stmt = $db->prepare('INSERT INTO client (ip,comment) VALUES (:ip,:comment)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -251,12 +258,15 @@ function JSON_error($message = null)
                     $comment = null;
             }
             if (!$stmt->bindValue(':comment', $comment, SQLITE3_TEXT)) {
-                throw new Exception('While binding comment: ' . $db->lastErrorMsg());
+                throw new Exception('While binding comment: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " clients");
             }
 
             if (!$stmt->execute()) {
-                throw new Exception('While executing: ' . $db->lastErrorMsg());
+                throw new Exception('While executing: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " clients");
             }
+            $added++;
         }
 
         $reload = true;
@@ -411,6 +421,8 @@ function JSON_error($message = null)
     // Add new domain
     try {
         $domains = explode(' ', trim($_POST['domain']));
+        $total = count($domains);
+        $added = 0;
         $stmt = $db->prepare('INSERT INTO domainlist (domain,type,comment) VALUES (:domain,:type,:comment)');
         if (!$stmt) {
             throw new Exception('While preparing statement: ' . $db->lastErrorMsg());
@@ -445,22 +457,26 @@ function JSON_error($message = null)
                 if(filter_var($domain, FILTER_VALIDATE_DOMAIN, FILTER_FLAG_HOSTNAME) === false)
                 {
                     // This is the case when idn_to_ascii() modified the string
-                if($input !== $domain && strlen($domain) > 0)
-                    throw new Exception('Domain ' . htmlentities($input) . ' (converted to "' . htmlentities(utf8_encode($domain)) . '") is not a valid domain.');
-                elseif($input !== $domain)
-                    throw new Exception('Domain ' . htmlentities($input) . ' is not a valid domain.');
-                else
-                    throw new Exception('Domain ' . htmlentities(utf8_encode($domain)) . ' is not a valid domain.');
+                    if($input !== $domain && strlen($domain) > 0)
+                        $errormsg = 'Domain ' . htmlentities($input) . ' (converted to "' . htmlentities(utf8_encode($domain)) . '") is not a valid domain.';
+                    elseif($input !== $domain)
+                        $errormsg = 'Domain ' . htmlentities($input) . ' is not a valid domain.';
+                    else
+                        $errormsg = 'Domain ' . htmlentities(utf8_encode($domain)) . ' is not a valid domain.';
+                    throw new Exception($errormsg . '<br>'. 'Added ' . $added . " out of ". $total . " domains");
                 }
             }
 
             if (!$stmt->bindValue(':domain', $domain, SQLITE3_TEXT)) {
-                throw new Exception('While binding domain: ' . $db->lastErrorMsg());
+                throw new Exception('While binding domain: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " domains");
             }
 
             if (!$stmt->execute()) {
-                throw new Exception('While executing: ' . $db->lastErrorMsg());
+                throw new Exception('While executing: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " domains");
             }
+            $added++;
         }
 
         $reload = true;
@@ -613,6 +629,8 @@ function JSON_error($message = null)
     // Add new adlist
     try {
         $addresses = explode(' ', trim($_POST['address']));
+        $total = count($addresses);
+        $added = 0;
 
         $stmt = $db->prepare('INSERT INTO adlist (address,comment) VALUES (:address,:comment)');
         if (!$stmt) {
@@ -625,16 +643,20 @@ function JSON_error($message = null)
 
         foreach ($addresses as $address) {
             if(preg_match("/[^a-zA-Z0-9:\/?&%=~._-]/", $address) !== 0) {
-                throw new Exception('Invalid adlist URL');
+                throw new Exception('<strong>Invalid adlist URL ' . htmlentities($address) . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " adlists");
             }
 
             if (!$stmt->bindValue(':address', $address, SQLITE3_TEXT)) {
-                throw new Exception('While binding address: ' . $db->lastErrorMsg());
+                throw new Exception('While binding address: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " adlists");
             }
 
             if (!$stmt->execute()) {
-                throw new Exception('While executing: ' . $db->lastErrorMsg());
+                throw new Exception('While executing: <strong>' . $db->lastErrorMsg() . '</strong><br>'.
+                'Added ' . $added . " out of ". $total . " adlists");
             }
+            $added++;
         }
 
         $reload = true;

From 00040d4372e34b4848cd375a17295bc30d555e37 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 23 Apr 2020 16:24:12 +0200
Subject: [PATCH 18/27] Fill missing time intervals with zero

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 api_db.php | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/api_db.php b/api_db.php
index 33f8728ba..993585894 100644
--- a/api_db.php
+++ b/api_db.php
@@ -368,15 +368,30 @@ function resolveHostname($clientip, $printIP)
 	// Parse the DB result into graph data, filling in missing interval sections with zero
 	function parseDBData($results, $interval, $from, $until) {
 		$data = array();
+		$first_db_timestamp = -1;
 
 		if(!is_bool($results)) {
 			// Read in the data
 			while($row = $results->fetchArray()) {
 				// $data[timestamp] = value_in_this_interval
 				$data[$row[0]] = intval($row[1]);
+				if($first_db_timestamp === -1)
+					$first_db_timestamp = intval($row[0]);
 			}
 		}
 
+		// It is unpredictable what the first timestamp returned by the database
+		// will be. This depends on live data. Hence, we re-align the FROM
+		// timestamp to avoid unaligned holes appearing as additional
+		// (incorrect) data points
+		$aligned_from = $from + (($first_db_timestamp - $from) % $interval);
+
+		// Fill gaps in returned data
+		for($i = $aligned_from; $i < $until; $i += $interval) {
+			if(!array_key_exists($i, $data))
+				$data[$i] = 0;
+		}
+
 		return $data;
 	}
 

From f17b216b6b3975089222bf993dbc9df0e0d678b0 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sat, 25 Apr 2020 07:02:37 +0200
Subject: [PATCH 19/27] As of ICU 55.1 (released 2015-04-01) the IDNA2003 APIs
 are deprecated, because UTS #46 should be preferred over the obsolete IDNA
 2003 variant. Implement this change. Fixes #1223

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/groups.php | 41 ++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/scripts/pi-hole/php/groups.php b/scripts/pi-hole/php/groups.php
index 2167295ee..7d2fdc5fe 100644
--- a/scripts/pi-hole/php/groups.php
+++ b/scripts/pi-hole/php/groups.php
@@ -391,11 +391,31 @@ function JSON_error($message = null)
             if (extension_loaded("intl") &&
                 ($res['type'] === ListType::whitelist ||
                  $res['type'] === ListType::blacklist) ) {
-                $utf8_domain = idn_to_utf8($res['domain']);
+
+                // Try to convert possible IDNA domain to Unicode, we try the UTS #46 standard first
+                // as this is the new default, see https://sourceforge.net/p/icu/mailman/message/32980778/
+                // We know that this fails for some Google domains violating the standard
+                // see https://github.com/pi-hole/AdminLTE/issues/1223
+                $utf8_domain = false;
+                if (defined("INTL_IDNA_VARIANT_UTS46")) {
+                    // We have to use the option IDNA_NONTRANSITIONAL_TO_ASCII here
+                    // to ensure sparkasse-gießen.de is not converted into
+                    // sparkass-giessen.de but into xn--sparkasse-gieen-2ib.de
+                    // as mandated by the UTS #46 standard
+                    $utf8_domain = idn_to_utf8($res['domain'], IDNA_NONTRANSITIONAL_TO_ASCII, INTL_IDNA_VARIANT_UTS46);
+                }
+
+                // If conversion failed, try with the (deprecated!) IDNA 2003 variant
+                // We have to check for its existance as support of this variant is
+                // scheduled for removal with PHP 8.0
+                // see https://wiki.php.net/rfc/deprecate-and-remove-intl_idna_variant_2003
+                if ($utf8_domain === false && defined("INTL_IDNA_VARIANT_2003")) {
+                    $utf8_domain = idn_to_utf8($res['domain'], IDNA_DEFAULT, INTL_IDNA_VARIANT_2003);
+                }
+
                 // Convert domain name to international form
                 // if applicable and extension is available
-                if($res['domain'] !== $utf8_domain)
-                {
+                if ($utf8_domain !== false && $res['domain'] !== $utf8_domain) {
                     $res['domain'] = $utf8_domain.' ('.$res['domain'].')';
                 }
             }
@@ -428,7 +448,20 @@ function JSON_error($message = null)
 
         foreach ($domains as $domain) {
             // Convert domain name to IDNA ASCII form for international domains
-            $domain = idn_to_ascii($domain);
+            if (extension_loaded("intl")) {
+                // Be prepared that this may fail and see our comments above
+                // (search for "idn_to_utf8)
+                $idn_domain = false;
+                if (defined("INTL_IDNA_VARIANT_UTS46")) {
+                    $idn_domain = idn_to_ascii($domain, IDNA_NONTRANSITIONAL_TO_ASCII, INTL_IDNA_VARIANT_UTS46);
+                }
+                if ($idn_domain === false && defined("INTL_IDNA_VARIANT_2003")) {
+                    $idn_domain = idn_to_ascii($domain, IDNA_DEFAULT, INTL_IDNA_VARIANT_2003);
+                }
+                if($idn_domain !== false) {
+                    $domain = $idn_domain;
+                }
+            }
 
             if(strlen($_POST['type']) === 2 && $_POST['type'][1] === 'W')
             {

From 84046528bfc49863ab603b24af3832cfd5e26cfa Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 26 Apr 2020 09:31:45 +0200
Subject: [PATCH 20/27] Allow ( and ) in adlist URLs.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/groups.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pi-hole/php/groups.php b/scripts/pi-hole/php/groups.php
index 7d2fdc5fe..7cab27dc7 100644
--- a/scripts/pi-hole/php/groups.php
+++ b/scripts/pi-hole/php/groups.php
@@ -649,7 +649,7 @@ function JSON_error($message = null)
         }
 
         foreach ($addresses as $address) {
-            if(preg_match("/[^a-zA-Z0-9:\/?&%=~._-]/", $address) !== 0) {
+            if(preg_match("/[^a-zA-Z0-9:\/?&%=~._()-]/", $address) !== 0) {
                 throw new Exception('Invalid adlist URL');
             }
 

From 9cf73959fd0d88e714fa0079dac10e0d283d701a Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 28 Apr 2020 17:24:58 +0000
Subject: [PATCH 21/27] Rename Custom DNS page.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 custom_dns.php => dns_records.php | 6 +++---
 scripts/pi-hole/php/header.php    | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename custom_dns.php => dns_records.php (94%)

diff --git a/custom_dns.php b/dns_records.php
similarity index 94%
rename from custom_dns.php
rename to dns_records.php
index 866c3c07a..91f846184 100644
--- a/custom_dns.php
+++ b/dns_records.php
@@ -11,8 +11,8 @@
 
 <!-- Title -->
 <div class="page-header">
-    <h1>Custom DNS configuration</h1>
-    <small>On this page, you can add domain/IP associations similar to records in <code>/etc/hosts</code>.</small>
+    <h1>Local DNS Records</h1>
+    <small>On this page, you can add domain/IP associations</small>
 </div>
 
 <!-- Domain Input -->
@@ -67,7 +67,7 @@
         <div class="box" id="recent-queries">
             <div class="box-header with-border">
                 <h3 class="box-title">
-                    List of custom DNS domains
+                    List of local DNS domains
                 </h3>
             </div>
             <!-- /.box-header -->
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index 2522ce139..d5ae7f347 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -626,10 +626,10 @@ function pidofFTL()
                         <i class="fa fa-cogs"></i> <span>Settings</span>
                     </a>
                 </li>
-                <!-- Custom DNS -->
-                <li<?php if($scriptname === "custom_dns.php"){ ?> class="active"<?php } ?>>
-                    <a href="custom_dns.php">
-                        <i class="fa fa-address-book"></i> <span>Custom DNS</span>
+                <!-- Local DNS Records -->
+                <li<?php if($scriptname === "dns_records.php"){ ?> class="active"<?php } ?>>
+                    <a href="dns_records.php">
+                        <i class="fa fa-address-book"></i> <span>Local DNS Records</span>
                     </a>
                 </li>
                 <!-- Logout -->

From 2ead771a86ca9626a454bc8834ef9815aa7827d2 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 28 Apr 2020 18:41:14 +0000
Subject: [PATCH 22/27] Allow too long legend lines to break

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 style/pi-hole.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 607963a38..4fae59765 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -237,6 +237,7 @@
 
 .chart-legend li {
     cursor: pointer;
+    word-break: break-all;
 }
 
 .chart-legend li span {

From 6e5bbfb68ae535f8338fa159c7ef30d1e4bd192a Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Sun, 3 May 2020 22:47:33 +0100
Subject: [PATCH 23/27] Check IP addresses read in from dns-server.conf are
 valid before adding them to the array.

Fix for CVE-2020-12620

Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 scripts/pi-hole/php/savesettings.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/scripts/pi-hole/php/savesettings.php b/scripts/pi-hole/php/savesettings.php
index 611cd587d..af4fcb0bb 100644
--- a/scripts/pi-hole/php/savesettings.php
+++ b/scripts/pi-hole/php/savesettings.php
@@ -81,7 +81,7 @@ function readStaticLeasesFile($origin_file="/etc/dnsmasq.d/04-pihole-static-dhcp
 	$dhcp_static_leases = array();
 	if(!file_exists($origin_file) || !is_readable($origin_file))
 		return false;
-	
+
 	$dhcpstatic = @fopen($origin_file, 'r');
 	if(!is_resource($dhcpstatic))
 		return false;
@@ -148,16 +148,16 @@ function readDNSserversList()
 			$line = explode(';', $line);
 			$name = $line[0];
 			$values = [];
-			if (!empty($line[1])) {
+			if (!empty($line[1]) && validIP($line[1])) {
 				$values["v4_1"] = $line[1];
 			}
-			if (!empty($line[2])) {
+			if (!empty($line[2]) && validIP($line[2])) {
 				$values["v4_2"] = $line[2];
 			}
-			if (!empty($line[3])) {
+			if (!empty($line[3]) && validIP($line[3])) {
 				$values["v6_1"] = $line[3];
 			}
-			if (!empty($line[4])) {
+			if (!empty($line[4]) && validIP($line[4])) {
 				$values["v6_2"] = $line[4];
 			}
             $list[$name] = $values;
@@ -202,7 +202,7 @@ function addStaticDHCPLease($mac, $ip, $hostname) {
 
 		// Test if this lease is already included
 		readStaticLeasesFile();
-		
+
 		foreach($dhcp_static_leases as $lease) {
 			if($lease["hwaddr"] === $mac)
 			{

From 68ce56fc56175c69711f9495d02223faf2564c6d Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Wed, 6 May 2020 23:19:50 +0100
Subject: [PATCH 24/27] show a clickable "." when there is a blank domain in
 the top domain lists

Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 scripts/pi-hole/js/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 5fffa248e..177e7554b 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -686,7 +686,8 @@ function updateTopLists() {
         }
 
         domain = escapeHtml(domain);
-        url = '<a href="queries.php?domain=' + domain + '">' + domain + "</a>";
+        var urlText = domain == "" ? "." : domain;
+        url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_queries[domain] / data.dns_queries_today) * 100;
         domaintable.append(
           "<tr> <td>" +
@@ -720,7 +721,8 @@ function updateTopLists() {
         }
 
         domain = escapeHtml(domain);
-        url = '<a href="queries.php?domain=' + domain + '">' + domain + "</a>";
+        var urlText = domain == "" ? "." : domain;
+        url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_ads[domain] / data.ads_blocked_today) * 100;
         adtable.append(
           "<tr> <td>" +

From b86ff763c021e1057b327733a79a36c8c94ce05d Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 7 May 2020 07:52:18 +0200
Subject: [PATCH 25/27] Address xo complaints.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 177e7554b..bb24db6f9 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -676,7 +676,7 @@ function updateTopLists() {
       .remove();
     var domaintable = $("#domain-frequency").find("tbody:last");
     var adtable = $("#ad-frequency").find("tbody:last");
-    var url, domain, percentage;
+    var url, domain, percentage, urlText;
     for (domain in data.top_queries) {
       if (Object.prototype.hasOwnProperty.call(data.top_queries, domain)) {
         // Sanitize domain
@@ -686,7 +686,7 @@ function updateTopLists() {
         }
 
         domain = escapeHtml(domain);
-        var urlText = domain == "" ? "." : domain;
+        urlText = domain === "" ? "." : domain;
         url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_queries[domain] / data.dns_queries_today) * 100;
         domaintable.append(
@@ -721,7 +721,7 @@ function updateTopLists() {
         }
 
         domain = escapeHtml(domain);
-        var urlText = domain == "" ? "." : domain;
+        urlText = domain === "" ? "." : domain;
         url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_ads[domain] / data.ads_blocked_today) * 100;
         adtable.append(

From cc4e3c9a959d3e68d310a7b890387eb20394cd5a Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 7 May 2020 09:16:25 +0200
Subject: [PATCH 26/27] Query Log and long-term data Query Log: Substitute
 empty domains by "."

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/db_queries.js |  8 ++++++++
 scripts/pi-hole/js/queries.js    | 11 +++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/db_queries.js b/scripts/pi-hole/js/db_queries.js
index f8c22119b..0952674a4 100644
--- a/scripts/pi-hole/js/db_queries.js
+++ b/scripts/pi-hole/js/db_queries.js
@@ -346,6 +346,14 @@ $(document).ready(function() {
       $(row).css("color", color);
       $("td:eq(4)", row).html(fieldtext);
       $("td:eq(5)", row).html(buttontext);
+
+      // Substitute domain by "." if empty
+      var domain = data[2];
+      if (domain.length === 0) {
+        domain = ".";
+      }
+
+      $("td:eq(2)", row).text(domain);
     },
     dom:
       "<'row'<'col-sm-12'f>>" +
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 7ea1a6d71..dffcd85e7 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -293,11 +293,18 @@ $(document).ready(function() {
         $("td:eq(4)", row).addClass("pointer");
       }
 
-      // Add domain in CNAME chain causing the query to have been blocked
+      // Substitute domain by "." if empty
       var domain = data[2];
-      var CNAME_domain = data[8];
+      if (domain.length === 0) {
+        domain = ".";
+      }
+
       if (isCNAME) {
+        var CNAME_domain = data[8];
+        // Add domain in CNAME chain causing the query to have been blocked
         $("td:eq(2)", row).text(domain + "\n(blocked " + CNAME_domain + ")");
+      } else {
+        $("td:eq(2)", row).text(domain);
       }
 
       // Check for existence of sixth column and display only if not Pi-holed

From d8706620de8f1d0831d51d4eafa99c2a25778ebe Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Sat, 9 May 2020 12:57:15 +0100
Subject: [PATCH 27/27] Replace paypal link with link to pi-hole.net donate
 page

Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 scripts/pi-hole/php/header.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index d5ae7f347..ca46c3678 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -326,7 +326,7 @@ function pidofFTL()
                                 */ ?>
                                 <!-- PayPal -->
                                 <div class="text-center">
-                                    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3J2L3Z4DHW9UY" rel="noopener" target="_blank" style="background:none">
+                                    <a href="https://pi-hole.net/donate/" rel="noopener" target="_blank" style="background:none">
                                         <img src="img/donate.gif" alt="Donate">
                                     </a>
                                 </div>
@@ -655,7 +655,7 @@ function pidofFTL()
                 <?php } ?>
                 <!-- Donate -->
                 <li>
-                    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3J2L3Z4DHW9UY" rel="noopener" target="_blank">
+                    <a href="https://pi-hole.net/donate/" rel="noopener" target="_blank">
                         <i class="fa-paypal-icon fab fa-paypal"></i> <span>Donate</span>
                     </a>
                 </li>