From 8de58c2e3eb80d0bebb7c7f633eeab810b14552a Mon Sep 17 00:00:00 2001
From: Matt Love <mtt.lov@gmail.com>
Date: Tue, 9 Jul 2019 23:44:51 -0700
Subject: [PATCH] :recycle: Remove legacy onclick html tags

---
 hyperglass/render/templates/index.html.j2 | 10 +++---
 hyperglass/static/js/hyperglass.js        | 42 +++++++++++------------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/hyperglass/render/templates/index.html.j2 b/hyperglass/render/templates/index.html.j2
index 48dfb17..8c492c6 100644
--- a/hyperglass/render/templates/index.html.j2
+++ b/hyperglass/render/templates/index.html.j2
@@ -25,26 +25,26 @@
   </div>
   {% if features.bgp_aspath.enable == true %}
   <div class="modal" id="help_bgp_aspath">
-    <div class="modal-background" onclick="closeModal()"></div>
+    <div class="modal-background"></div>
     <div class="modal-content is-clipped">
       <div class="box">
         <p class="title">{{ details["bgp_aspath"]["title"] }}</p>
         {{ details["bgp_aspath"]["content"] }}
       </div>
     </div>
-    <button class="modal-close is-large" aria-label="close" onclick="closeModal()"></button>
+    <button class="modal-close is-large" aria-label="close"></button>
   </div>
   {% endif %}
   {% if features.bgp_community.enable == true %}
   <div class="modal" id="help_bgp_community">
-    <div class="modal-background" onclick="closeModal()"></div>
+    <div class="modal-background"></div>
     <div class="modal-content">
       <div class="box">
         <p class="title">{{ details["bgp_community"]["title"] }}</p>
         {{ details["bgp_community"]["content"] }}
       </div>
     </div>
-    <button class="modal-close is-large" aria-label="close" onclick="closeModal()"></button>
+    <button class="modal-close is-large" aria-label="close"></button>
   </div>
   {% endif %}
   <nav class="navbar">
@@ -135,7 +135,7 @@
             <div class="control">
               <div class="dropdown is-right" id="help-dropdown">
                 <div class="dropdown-trigger">
-                  <button type="button" class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2" onclick="adjustHeight()">
+                  <button type="button" class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2" id="help-dropdown-button">
                     <span class="icon is-size-6 lg-icon-help">
                       <i class="icofont-info-circle" aria-hidden="true"></i>
                     </span>
diff --git a/hyperglass/static/js/hyperglass.js b/hyperglass/static/js/hyperglass.js
index 79437bf..206b837 100644
--- a/hyperglass/static/js/hyperglass.js
+++ b/hyperglass/static/js/hyperglass.js
@@ -8,10 +8,12 @@ adjustDropdowns();
 clearPage();
 
 // Bulma Toggable Dropdown - help text
-$('#help-dropdown').click(function(event) {
-    event.stopPropagation();
-    $(this).toggleClass('is-active');
-});
+$('#help-dropdown').click(
+    function(event) {
+        event.stopPropagation();
+        $(this).toggleClass('is-active');
+    }
+);
 
 // ClipboardJS Elements
 var btn_copy = document.getElementById('btn-copy');
@@ -29,26 +31,22 @@ clipboard.on('error', function(e) {
     console.log(e);
 });
 
-function bgpHelpASPath() {
-  $("#help_bgp_aspath").addClass("is-active");
-}
-
-function bgpHelpCommunity() {
-  $("#help_bgp_community").addClass("is-active");
-}
-
-function closeModal() {
-  $(".modal").removeClass("is-active");
-}
+$('.modal-background, .modal-close').click(
+    function(event) {
+        event.stopPropagation();
+        $('.modal').removeClass("is-active");
+    }
+);
 
 // Adjust behavior of help text dropdown based on device screen size
-function adjustHeight() {
-  var actual_width = window.innerWidth;
-  if (actual_width < 1024) {
-    $('#help-dropdown').removeClass('is-right');
-    $('.lg-help').addClass('lg-help-mobile').removeClass('lg-help');
-  }
-}
+$('#help-dropdown-button').click(
+    function(event) {
+        if (window.innerWidth < 1024) {
+          $('#help-dropdown').removeClass('is-right');
+          $('.lg-help').addClass('lg-help-mobile').removeClass('lg-help');
+      }
+    }
+);
 
 function adjustDropdowns() {
   var actual_width = window.innerWidth;