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

docs/source/siteadmin/relnotes.rst

@@ -43,6 +43,7 @@ This chapter has important information about our current and previous releases.
 - Remove plugin for decommissioned Mozilla Persona (Jgart)
 - Remove Debian 10 development Dockerfile (BenSturmfels)
 - Document running multiple MediaGoblin instances on one server (Ben Sturmfels)
+- Begin conversion from jQuery to vanilla JS (Ben Sturmfels)
 
 **Bug fixes:**
 

mediagoblin/notifications/__init__.py

@@ -76,6 +76,7 @@ def mark_comment_notification_seen(comment_id, user):
     if comment == None:
         return
 
+    # TODO: This seems to always return no comments.
     comment_gmr = GenericModelReference.query.filter_by(
         obj_pk=comment.id,
         model_type=comment.__tablename__

mediagoblin/static/js/notifications.js

@@ -1,4 +1,3 @@
-'use strict';
 /**
  * GNU MediaGoblin -- federated, autonomous media hosting
  * Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
@@ -17,33 +16,26 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-var notifications = {};
+'use strict';
 
-(function (n) {
+(function () {
-    n._base = '/';
+  // Small pill/gem indicator showing number of unseen comments. Comments are
-    n._endpoint = 'notifications/json';
+  // shown inside the header panel which may be hidden.
-
+  var notificationGem = document.querySelector('.notification-gem');
-    n.init = function () {
+  notificationGem.addEventListener('click', function() {
-        $('.notification-gem').on('click', function () {
+    panel.show()
-            $('.header_dropdown_down:visible').click();
   });
-    }
-
-})(notifications)
-
-$(document).ready(function () {
-    notifications.init();
 
+  // Mark all comments seen feature.
+  //
+  // TODO: Currently broken due to bug in mark_comment_notification_seen().
   var mark_all_comments_seen = document.getElementById('mark_all_comments_seen');
-
   if (mark_all_comments_seen) {
     mark_all_comments_seen.href = '#';
     mark_all_comments_seen.onclick = function() {
-            $.ajax({
+      fetch(mark_all_comments_seen_url).then(function(response) {
-                type: 'GET',
+        window.location.reload();
-                url: mark_all_comments_seen_url,
-                success: function(res, status, xhr) { window.location.reload(); },
       });
+    };
   }
-    }
+})();
-});

mediagoblin/templates/mediagoblin/base.html

@@ -42,11 +42,6 @@
           href="{{ request.staticdirect('/images/goblin.ico') }}" />
     <script type="text/javascript"
             src="{{ request.staticdirect('/js/extlib/jquery.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') }}"
-    </script>
 
     {# For clarification, the difference between the extra_head.html template
      # and the head template hook is that the former should be used by
@@ -185,6 +180,11 @@
     {%- endblock mediagoblin_body %}
     <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') }}"
+    </script>
     {% include 'mediagoblin/bits/body_end.html' %}
   </body>
 </html>