Convert header_dropdown.js to vanilla JavaScript (no jQuery).

2 files changed, 62 insertions, 19 deletions

diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js
index 979d2690..0310ab91 100644
--- a/mediagoblin/static/js/header_dropdown.js
+++ b/mediagoblin/static/js/header_dropdown.js
@@ -16,30 +16,73 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-$(document).ready(function(){
+'use strict';
+
+var panel = {};
+
+(function() {
   // The header drop-down header panel defaults to open until you explicitly
   // close it. After that, the panel open/closed setting will persist across
   // page loads.
+  var panel_elem = document.getElementById('header_dropdown');
+  var up_arrow_elem = document.querySelector('.header_dropdown_up');
+  var down_arrow_elem = document.querySelector('.header_dropdown_down');
 
-  // Initialise the panel status when page is loaded.
-  if (localStorage.getItem("panel_closed")) {
-    $("#header_dropdown").hide();
-    $(".header_dropdown_up").hide();
+  function hide(elem) {
+    elem.style.display = 'none';
   }
-  else {
-    $(".header_dropdown_down").hide();
+
+  function show(elem) {
+    elem.style.display = '';
+  }
+
+  function isDisplayed(elem) {
+    return elem.style.display === '';
   }
 
-  // Toggle and persist the panel status.
-  $(".header_dropdown_down, .header_dropdown_up").click(function() {
-    if (localStorage.getItem("panel_closed")) {
-      localStorage.removeItem("panel_closed");
+  function toggle(elem) {
+    if (isDisplayed(elem)) {
+      hide(elem);
     }
     else {
-      localStorage.setItem("panel_closed", "true");
+      show(elem);
     }
-    $(".header_dropdown_down").toggle();
-    $(".header_dropdown_up").toggle();
-    $("#header_dropdown").slideToggle();
-  });
-});
+  }
+
+  function showPanel() {
+    localStorage.removeItem('panel_closed');
+    show(panel_elem);
+    show(up_arrow_elem);
+    hide(down_arrow_elem);
+  }
+
+  function hidePanel() {
+    localStorage.setItem('panel_closed', 'true');
+    hide(panel_elem);
+    hide(up_arrow_elem);
+    show(down_arrow_elem);
+  }
+
+  function togglePanel() {
+    // Toggle and persist the panel status.
+    if (isDisplayed(panel_elem)) {
+      hidePanel();
+    }
+    else {
+      showPanel()
+    }
+  }
+
+  // Initialise the panel status when page is loaded.
+  up_arrow_elem.addEventListener('click', togglePanel);
+  down_arrow_elem.addEventListener('click', togglePanel);
+  if (localStorage.getItem('panel_closed')) {
+    hidePanel();
+  }
+  else {
+    showPanel();
+  }
+
+  // Export some functionality for use in other modules.
+  panel.show = showPanel;
+})();
diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index 4753f6cf..4b3b9846 100644
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -43,8 +43,6 @@
     <script type="text/javascript"
             src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
     <script type="text/javascript"
-            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
-    <script type="text/javascript"
             src="{{ request.staticdirect('/js/notifications.js') }}"></script>
     <script>
       var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
@@ -185,6 +183,8 @@
       {%- include "mediagoblin/bits/base_footer.html" %}
     </div>
     {%- endblock mediagoblin_body %}
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
     {% include 'mediagoblin/bits/body_end.html' %}
   </body>
 </html>