Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 1160x 1160x 1160x 3669x 3669x 3669x 3669x 3826x 3826x 3826x 444x 444x 444x 444x 444x 3669x 3669x 3669x 3669x 7495x 7495x 6385x 7495x 7495x 3816x 3810x 3810x 16x 16x 7338x 7338x 7338x 7338x 7814x 7814x | define(
    [
        'backbone',
        'jquery',
        'underscore',
        'routing',
        'pim/notification-list',
        'pim/indicator',
        'pim/template/notification/notification',
        'pim/template/notification/notification-footer'
    ],
    function (Backbone, $, _, Routing, NotificationList, Indicator, notificationTpl, notificationFooterTpl) {
        'use strict';
 
        const NOTIFICATION_TIMEOUT_ID = 'notifications_timeout_ids';
 
        return Backbone.View.extend({
            options: {
                imgUrl:                 '',
                loadingText:            null,
                noNotificationsMessage: null,
                markAsReadMessage:      null,
                indicatorBaseClass:     'AknNotificationMenu-count',
                indicatorEmptyClass:    'AknNotificationMenu-count--hidden',
                refreshInterval:        30000
            },
 
            freezeCount: false,
 
            template: _.template(notificationTpl),
 
            footerTemplate: _.template(notificationFooterTpl),
 
            events: {
                'click .notification-link': 'onOpen',
                'click .mark-as-read': 'markAllAsRead'
            },
 
            markAllAsRead: function (e) {
                e.stopPropagation();
                e.preventDefault();
 
                $.ajax({
                    type: 'POST',
                    url: Routing.generate('pim_notification_notification_mark_viewed'),
                    async: true
                });
 
                this.collection.trigger('mark_as_read', null);
                _.each(this.collection.models, function (model) {
                    model.set('viewed', true);
                });
            },
 
            initialize: function (opts) {
                this.options = _.extend({}, this.options, opts);
                this.collection = new NotificationList();
                this.indicator  = new Indicator({
                    el: this.$('.AknNotificationMenu-countContainer'),
                    value: 0,
                    className: this.options.indicatorBaseClass,
                    emptyClass: this.options.indicatorEmptyClass
                });
 
                this.collection.on('load:unreadCount', function (count, reset) {
                    this.scheduleRefresh();
                    Iif (this.freezeCount) {
                        this.freezeCount = false;
 
                        return;
                    }
                    if (this.indicator.get('value') !== count) {
                        this.indicator.set('value', count);
                        Eif (reset) {
                            this.collection.hasMore = true;
                            this.collection.reset();
                            this.renderFooter();
                        }
                    }
                }, this);
 
                this.collection.on('mark_as_read', function (id) {
                    var value = null === id ? 0 : this.indicator.get('value') - 1;
                    this.indicator.set('value', value);
                    if (0 === value) {
                        this.renderFooter();
                    }
                    if (null !== id) {
                        this.freezeCount = true;
                    }
                }, this);
 
                this.collection.on('loading:start loading:finish remove', this.renderFooter, this);
 
                this.render();
 
                this.scheduleRefresh();
            },
 
            scheduleRefresh: function () {
                const timeoutId = sessionStorage.getItem(NOTIFICATION_TIMEOUT_ID);
                if (timeoutId !== null && timeoutId !== '') {
                    clearTimeout(parseInt(timeoutId));
                }
 
                const newTimeoutId = setTimeout(this.refresh.bind(this), this.options.refreshInterval);
                sessionStorage.setItem(NOTIFICATION_TIMEOUT_ID, newTimeoutId + '');
            },
 
            refresh: function () {
                $.getJSON(Routing.generate('pim_notification_notification_count_unread'))
                    .then(_.bind(function (count) {
                        sessionStorage.setItem('notificationRefreshLocked', 'available');
                        this.collection.trigger('load:unreadCount', count, true);
                    }, this));
            },
 
            onOpen: function () {
                Eif (!this.collection.length) {
                    this.collection.loadNotifications();
                }
            },
 
            render: function () {
                this.$el.html(this.template());
                this.collection.setElement(this.$('ul'));
                this.indicator.setElement(this.$('.AknNotificationMenu-countContainer'));
                this.renderFooter();
            },
 
            renderFooter: function () {
                this.$('p').remove();
 
                this.$('ul').append(
                    this.footerTemplate({
                        options:          this.options,
                        loading:          this.collection.loading,
                        hasNotifications: this.collection.length > 0,
                        hasMore:          this.collection.hasMore,
                        hasUnread:        this.indicator.get('value') > 0
                    })
                );
            }
        });
    }
);
  |