Rewrote JS to use new single-ajax-call feeds for notification/blog posts

themes/grav/app/updates/feed.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import { config } from 'grav-config';
 import request from '../utils/request';
 
-const URI = `${config.base_url_relative}/ajax.json/task${config.param_sep}getnewsfeed`;
+const URI = `${config.base_url_relative}/ajax.json/task${config.param_sep}getNewsFeed`;
 
 class Feed {
     constructor() {
@@ -53,9 +53,7 @@ class Feed {
         }
 
         if (this.data && this.data.feed_data) {
-            this.data.feed_data.forEach((data) => {
+            content.append(this.data.feed_data);
-                content.append(data);
-            });
         }
     }
 }

themes/grav/app/updates/notifications.js

@@ -2,11 +2,16 @@ import $ from 'jquery';
 import { config } from 'grav-config';
 import request from '../utils/request';
 
-const canFetchNotifications = () => config.notifications;
+const canFetchNotifications = () => config.notifications.enabled;
+const notificationsFilters = () => config.notifications.filters;
 
 class Notifications {
 
-    showNotificationInFeed(notification, index) {
+    static addShowAllInFeed() {
+        $('#notifications ul').append('<li class="show-all" data-notification-action="show-all-notifications">Show all</li>');
+    }
+
+    static showNotificationInFeed(notification) {
         let notifications = $('#notifications').removeClass('hidden');
 
         let loader = notifications.find('.widget-loader').hide();
@@ -14,168 +19,81 @@ class Notifications {
         loader.find('div').remove();
         loader.find('.fa-warning').removeClass('fa-warning').addClass('fa-refresh fa-spin');
 
-        if (!notification.type) {
+        content
-            notification.type = 'note';
+            .append(notification)
-        }
+            .find('li:nth-child(n+11)').addClass('hidden'); // hide all items > 10
 
-        switch (notification.type) {
+        if (content.find('li.hidden').length) {
-            case 'note':
+            Notifications.addShowAllInFeed();
-                notification.intro_text = 'Note';
-                break;
-            case 'info':
-                notification.intro_text = 'Info';
-                break;
-            case 'warning':
-                notification.intro_text = 'Warning';
-                break;
-        }
-
-        let hidden = '';
-        if (index > 9) {
-            hidden = ' hidden ';
-        }
-
-        if (notification.link) {
-            const title = document.createElement('div');
-            title.innerHTML = notification.message;
-            content.append(`
-                <li class="single-notification ${hidden}">
-                    <span class="badge alert ${notification.type}">${notification.intro_text}</span>
-                    <a target="_blank" href="${notification.link}" title="${(title.textContent || title.innerText || '')}">${notification.message}</a>
-                </li>
-            `);
-        } else {
-            let clean_text = $('<p>' + notification.message + '</p>').text();
-            content.append(`
-                <li class="single-notification ${hidden}">
-                    <span class="badge alert ${notification.type}">${notification.intro_text}</span>
-                    <span title="${clean_text}">${notification.message}</span>
-                </li>
-            `);
         }
     }
 
-    addShowAllInFeed() {
+    static showNotificationInTop(notification) {
-        $('#notifications ul').append(`
+        const container = $('.top-notifications-container');
-            <li class="show-all" data-notification-action="show-all-notifications">Show all</li>
+        const dummy = $('<div />').html(notification);
-        `);
+
+        container.removeClass('hidden').addClass('default-box-shadow').append(dummy.children());
+        dummy.children().slideDown(150);
     }
 
-    showNotificationInTop(notification) {
+    static showNotificationInDashboard(notification) {
-        let element;
+        const container = $('.dashboard-notifications-container');
+        const dummy = $('<div />').html(notification);
 
-        if (notification.link) {
+        container.removeClass('hidden').append(dummy.children());
-            element = $(`<div class="single-notification ${notification.type} alert">
+        dummy.children().slideDown(150);
-                <a target="_blank" href="${notification.link}">${notification.message}</a>
-                ${notification.closeButton}
-                </div>`);
-
-        } else {
-            element = $(`<div class="single-notification ${notification.type} alert">
-                ${notification.message}
-                ${notification.closeButton}
-                </div>`);
     }
 
-        element.hide();
+    static showNotificationInPlugins(notification) {
-        $('.top-notifications-container').removeClass('hidden').addClass('default-box-shadow').append(element);
+        const container = $('.plugins-notifications-container');
-        element.slideDown(150);
+        const dummy = $('<div />').html(notification);
+
+        container.removeClass('hidden').append(dummy.children());
+        dummy.children().slideDown(150);
     }
 
-    showNotificationInDashboard(notification) {
+    static showNotificationInThemes(notification) {
-        let element;
+        const container = $('.themes-notifications-container');
+        const dummy = $('<div />').html(notification);
 
-        if (notification.link) {
+        container.removeClass('hidden').append(dummy.children());
-            element = $(`<div class="single-notification alert ${notification.type}">
+        dummy.children().slideDown(150);
-                <a target="_blank" href="${notification.link}">${notification.message}</a>
-                ${notification.closeButton}
-                </div>`);
-        } else {
-            element = $(`<div class="single-notification alert ${notification.type}">
-                ${notification.message}
-                ${notification.closeButton}
-                </div>`);
     }
 
-        element.hide();
+    processLocation(location, notification) {
-        $('.dashboard-notifications-container').removeClass('hidden').append(element);
-        element.slideDown(150);
-    }
-
-    showNotificationInPlugins(notification) {
-        let element;
-
-        if (notification.link) {
-            element = $(`<div class="single-notification alert ${notification.type}">
-                <a target="_blank" href="${notification.link}">${notification.message}</a>
-                ${notification.closeButton}
-                </div>`);
-        } else {
-            element = $(`<div class="single-notification alert ${notification.type}">
-                ${notification.message} ${notification.closeButton}
-                </div>`);
-        }
-
-        element.hide();
-        $('.plugins-notifications-container').removeClass('hidden').append(element);
-        element.slideDown(150);
-    }
-
-    showNotificationInThemes(notification) {
-        let element;
-
-        if (notification.link) {
-            element = $(`<div class="single-notification alert ${notification.type}">
-                <a target="_blank" href="${notification.link}">${notification.message}</a>
-                ${notification.closeButton}
-                </div>`);
-        } else {
-            element = $(`<div class="single-notification alert ${notification.type}">
-                ${notification.message}
-                ${notification.closeButton}
-                </div>`);
-        }
-
-        element.hide();
-        $('.themes-notifications-container').removeClass('hidden').append(element);
-        element.slideDown(150);
-    }
-
-    processLocation(location, notification, index = 0) {
         switch (location) {
             case 'feed':
-                this.showNotificationInFeed(notification, index);
+                Notifications.showNotificationInFeed(notification);
                 break;
             case 'top':
                 if (!notification.read) {
-                    this.showNotificationInTop(notification);
+                    Notifications.showNotificationInTop(notification);
                 }
                 break;
             case 'dashboard':
                 if (!notification.read) {
-                    this.showNotificationInDashboard(notification);
+                    Notifications.showNotificationInDashboard(notification);
                 }
                 break;
             case 'plugins':
                 if (!notification.read) {
-                    this.showNotificationInPlugins(notification);
+                    Notifications.showNotificationInPlugins(notification);
                 }
                 break;
             case 'themes':
                 if (!notification.read) {
-                    this.showNotificationInThemes(notification);
+                    Notifications.showNotificationInThemes(notification);
                 }
                 break;
         }
     }
 
     // Grav.default.Notifications.fetch()
-    fetch({ locations = [], refresh = false } = {}) {
+    fetch({ locations = notificationsFilters(), refresh = false } = {}) {
         if (!canFetchNotifications()) {
             return false;
         }
 
-        let that = this;
         let feed = $('#notifications');
         let loader = feed.find('.widget-loader');
         let content = feed.find('.widget-content > ul');
@@ -184,63 +102,22 @@ class Notifications {
         loader.show();
         content.hide();
 
-        let processNotifications = function processNotifications(response) {
+        let processNotifications = (response) => {
             let notifications = response.notifications;
 
             $('#notifications').find('.widget-content > ul').empty();
 
             if (notifications) {
-                let index = 0;
+                Object.keys(notifications).forEach((location) => this.processLocation(location, notifications[location]));
-
-                notifications.forEach(function(notification, i) {
-                    notification.closeButton = `<a href="#" data-notification-action="hide-notification" data-notification-id="${notification.id}" class="close hide-notification"><i class="fa fa-close"></i></a>`;
-                    if (notification.options && notification.options.indexOf('sticky') !== -1) {
-                        notification.closeButton = '';
-                    }
-
-                    if (Array.isArray(notification.location)) {
-                        notification.location.forEach(function(location) {
-                            if (locations.length && locations.indexOf(location) === -1) {
-                                return;
-                            }
-
-                            if (location === 'feed') {
-                                that.processLocation(location, notification, index);
-                                index++;
-                            } else {
-                                that.processLocation(location, notification);
-                            }
-
-                        });
-                    } else {
-                        if (locations.length && locations.indexOf(notification.location) === -1) {
-                            return;
-                        }
-
-                        that.processLocation(notification.location, notification);
-                    }
-                });
-
-                if (index > 10) {
-                    that.addShowAllInFeed();
-                }
             }
         };
 
-        request(`${config.base_url_relative}/notifications.json/task${config.param_sep}getNotifications`, {
+        request(`${config.base_url_relative}/task${config.param_sep}getNotifications`, {
-            method: 'post'
-        }, (response) => {
-            if (response.need_update === true || refresh) {
-                $.get((config.local_notifications ? 'http://localhost' : 'https://getgrav.org') + '/notifications.json?' + Date.now()).then(function(response) {
-                    request(`${config.base_url_relative}/notifications.json/task${config.param_sep}processNotifications`, {
             method: 'post',
-                        body: { 'notifications': JSON.stringify(response) }
+            body: { refresh, filters: notificationsFilters() }
         }, (response) => {
-                        if (response.show_immediately === true) {
             processNotifications(response);
-                        }
+        }).catch(() => {
-                    });
-                }).fail(function() {
             let widget = $('#notifications .widget-content');
             widget
                 .find('.widget-loader')
@@ -253,10 +130,6 @@ class Notifications {
                 .removeClass('fa-spin fa-refresh').addClass('fa-warning');
         });
     }
-
-            processNotifications(response);
-        });
-    }
 }
 
 let notifications = new Notifications();
@@ -265,6 +138,8 @@ export default notifications;
 if (canFetchNotifications()) {
     notifications.fetch();
 
+    /* Hide a notification and store it hidden
+    // <a href="#" data-notification-action="hide-notification" data-notification-id="${notification.id}" class="close hide-notification"><i class="fa fa-close"></i></a>
     $(document).on('click', '[data-notification-action="hide-notification"]', (event) => {
         let notification_id = $(event.target).parents('.hide-notification').data('notification-id');
 
@@ -274,6 +149,7 @@ if (canFetchNotifications()) {
 
         $(event.target).parents('.single-notification').hide();
     });
+    */
 
     $(document).on('click', '[data-notification-action="show-all-notifications"]', (event) => {
         $('#notifications .show-all').hide();
@@ -282,6 +158,6 @@ if (canFetchNotifications()) {
 
     $(document).on('click', '[data-refresh="notifications"]', (event) => {
         event.preventDefault();
-        notifications.fetch({ locations: ['feed'], refresh: true });
+        notifications.fetch({ filter: ['feed'], refresh: true });
     });
 }

themes/grav/templates/partials/javascript-config.html.twig

@@ -2,13 +2,13 @@
 {% set notifications = (config.plugins.admin.widgets['dashboard-notifications'] or config.plugins.admin.notifications.dashboard or config.plugins.admin.notifications.plugins or config.plugins.admin.notifications.themes) ? 1 : 0 %}
 {% switch template_route %}
     {% case 'dashboard' %}
-        {% set notifications_filters = 'feed,dashboard,top' %}
+        {% set notifications_filters = "['feed', 'dashboard', 'top']" %}
     {% case 'plugins' %}
-        {% set notifications_filters = 'plugins,top' %}
+        {% set notifications_filters = "['plugins', 'top']" %}
     {% case 'themes' %}
-        {% set notifications_filters = 'themes,top' %}
+        {% set notifications_filters = "['themes', 'top']" %}
     {% default %}
-        {% set notifications_filters = 'top' %}
+        {% set notifications_filters = "['top']" %}
 {% endswitch %}
 <script type="text/javascript">
     window.GravAdmin = window.GravAdmin || {};
@@ -27,7 +27,7 @@
         pro_enabled: '{{ config.plugins["admin-pro"].enabled }}',
         notifications: {
             enabled: {{ notifications }},
-            filters: '{{ notifications_filters }}'
+            filters: {{ notifications_filters|raw }}
         },
         local_notifications: '{{ config.system.local_notifications|default(false) }}',
         site: {