Merge pull request #1996 from paul-man/feat/avoid-window-open

Avoid window.open and add more visible eye icon
pi-hole · Dec 21, 2021 · 2b594d6 · 2b594d6
2 parents 9d04f85 + fc1b2c5
commit 2b594d6
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 42 deletions.
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -321,33 +321,64 @@ function updateQueryTypesPie() {
     queryTypePieChart.options.animation.duration = 0;
     // Generate legend in separate div
     $("#query-types-legend").html(queryTypePieChart.generateLegend());
-    $("#query-types-legend > ul > li").on("mousedown", function (e) {
-      if (e.which === 2) {
-        // which == 2 is middle mouse button
-        $(this).toggleClass("strike");
-        var index = $(this).index();
-        var ci = e.view.queryTypePieChart;
-        var mobj = ci.data.datasets[0]._meta;
-        var metas = Object.keys(mobj).map(function (e) {
-          return mobj[e];
-        });
-        metas.forEach(function (meta) {
-          var curr = meta.data[index];
-          curr.hidden = !curr.hidden;
-        });
-
-        ci.update();
-      } else if (e.which === 1) {
-        // which == 1 is left mouse button
-        window.open("queries.php?querytype=" + querytypeids[$(this).index()], "_self");
+    $("#query-types-legend > ul > li").prepend(createEyeConElement());
+    $("#query-types-legend > ul > li").click(function (e) {
+      if (isEyeCon(e.target)) {
+        return false;
       }
+
+      window.location.href = "queries.php?querytype=" + querytypeids[$(this).index()];
     });
   }).done(function () {
     // Reload graph after minute
     setTimeout(updateQueryTypesPie, 60000);
   });
 }
 
+function hidePieSlice(event) {
+  toggleEyeCon(event.target);
+
+  var legendID = $(event.target).closest(".chart-legend").attr("id");
+  var ci =
+    legendID === "query-types-legend"
+      ? event.view.queryTypePieChart
+      : event.view.forwardDestinationPieChart;
+
+  var listItemParent = $(event.target).closest("li");
+  $(listItemParent).toggleClass("strike");
+
+  var index = $(listItemParent).index();
+  var mobj = ci.data.datasets[0]._meta;
+  var metas = Object.keys(mobj).map(function (e) {
+    return mobj[e];
+  });
+  metas.forEach(function (meta) {
+    var curr = meta.data[index];
+    curr.hidden = !curr.hidden;
+  });
+
+  ci.update();
+}
+
+function toggleEyeCon(target) {
+  var parentListItem = $(target).closest("li");
+  var eyeCon = $(parentListItem).find(".fa-eye, .fa-eye-slash");
+
+  if (eyeCon) {
+    $(eyeCon).toggleClass("fa-eye");
+    $(eyeCon).toggleClass("fa-eye-slash");
+  }
+}
+
+function isEyeCon(target) {
+  // See if click happened on eyeConWrapper or child SVG
+  if ($(target).closest(".eyeConWrapper")[0]) {
+    return true;
+  }
+
+  return false;
+}
+
 function updateClientsOverTime() {
   $.getJSON("api.php?overTimeDataClients&getClientNames", function (data) {
     if ("FTLnotrunning" in data) {
@@ -437,6 +468,16 @@ function updateClientsOverTime() {
     });
 }
 
+function createEyeConElement() {
+  var eyeConWrapper = $("<span></span>")
+    .addClass("eyeConWrapper")
+    .click(function (e) {
+      hidePieSlice(e);
+    });
+  eyeConWrapper.append($("<i class='fa fa-eye'></i>"));
+  return eyeConWrapper;
+}
+
 function updateForwardDestinationsPie() {
   $.getJSON("api.php?getForwardDestinations", function (data) {
     if ("FTLnotrunning" in data) {
@@ -480,28 +521,15 @@ function updateForwardDestinationsPie() {
     forwardDestinationPieChart.options.animation.duration = 0;
     // Generate legend in separate div
     $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
-    $("#forward-destinations-legend > ul > li").on("mousedown", function (e) {
-      if (e.which === 2) {
-        // which == 2 is middle mouse button
-        $(this).toggleClass("strike");
-        var index = $(this).index();
-        var ci = e.view.forwardDestinationPieChart;
-        var mobj = ci.data.datasets[0]._meta;
-        var metas = Object.keys(mobj).map(function (e) {
-          return mobj[e];
-        });
-        metas.forEach(function (meta) {
-          var curr = meta.data[index];
-          curr.hidden = !curr.hidden;
-        });
-
-        ci.update();
-      } else if (e.which === 1) {
-        // which == 1 is left mouse button
-        var obj = encodeURIComponent(e.target.textContent);
-        if (obj.length > 0) {
-          window.open("queries.php?forwarddest=" + obj, "_self");
-        }
+    $("#forward-destinations-legend > ul > li").prepend(createEyeConElement());
+    $("#forward-destinations-legend > ul > li").click(function (e) {
+      if (isEyeCon(e.target)) {
+        return false;
+      }
+
+      var obj = encodeURIComponent(e.target.textContent);
+      if (obj.length > 0) {
+        window.location.href = "queries.php?forwarddest=" + obj;
       }
     });
   }).done(function () {

diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
@@ -169,7 +169,7 @@ $(".api-token").confirm({
   text: "Make sure that nobody else can scan this code around you. They will have full access to the API without having to know the password. Note that the generation of the QR code will take some time.",
   title: "Confirmation required",
   confirm: function () {
-    window.open("scripts/pi-hole/php/api_token.php");
+    $("#apiTokenModal").modal("show");
   },
   cancel: function () {
     // nothing to do
@@ -182,6 +182,18 @@ $(".api-token").confirm({
   dialogClass: "modal-dialog",
 });
 
+$("#apiTokenModal").on("show.bs.modal", function () {
+  var bodyStyle = {
+    "font-family": $("body").css("font-family"),
+    "background-color": "white",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("body").css(bodyStyle);
+  var qrCodeStyle = {
+    margin: "auto",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("table").css(qrCodeStyle);
+});
+
 $("#DHCPchk").click(function () {
   $("input.DHCPgroup").prop("disabled", !this.checked);
   $("#dhcpnotice").prop("hidden", !this.checked).addClass("lookatme");

diff --git a/settings.php b/settings.php
@@ -1064,6 +1064,22 @@ function convertseconds($argument)
                                     </div>
                                 </div>
                             </form>
+                            <div class="modal fade" id="apiTokenModal" role="dialog" data-keyboard="false"
+                                tabindex="-1" data-backdrop="static" aria-labelledby="apiTokenModal">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h4 class="modal-title" id="apiTokenModalHeaderLabel">API Token</h4>
+                                        </div>
+                                        <div class="modal-body">
+                                        <pre><iframe id="apiTokenIframe" name="apiToken_iframe" src="scripts/pi-hole/php/api_token.php"></iframe></pre>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-md-6">
                             <form role="form" method="post">

diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -442,6 +442,20 @@ td.details-control {
   height: 50px;
 }
 
+.eyeConWrapper {
+  font-size: 17px;
+}
+
+#apiTokenIframe {
+  width: 100%;
+  border: 0;
+  height: 500px;
+}
+
+#apiTokenModal pre {
+  background: #fff;
+}
+
 .no-danger-area {
   margin: 0.5em 0 1em;
   border-left: 2px solid green;