diff --git a/app/assets/javascripts/app/controllers/navigation.coffee b/app/assets/javascripts/app/controllers/navigation.coffee index e2c0e0cbd..f4acbc780 100644 --- a/app/assets/javascripts/app/controllers/navigation.coffee +++ b/app/assets/javascripts/app/controllers/navigation.coffee @@ -1,6 +1,9 @@ class App.Navigation extends App.ControllerWidgetPermanent className: 'navigation vertical' + events: + 'click .js-toggleNotifications': 'toggleNotifications' + constructor: -> super @render() @@ -202,9 +205,8 @@ class App.Navigation extends App.ControllerWidgetPermanent @emptyAndClose() ) - new App.OnlineNotificationWidget( - el: @el - ) + @notificationWidget = new App.OnlineNotificationWidget() + $('#app').append @notificationWidget.el listNavigate: (e) => if e.keyCode is 27 # close on esc @@ -468,4 +470,8 @@ class App.Navigation extends App.ControllerWidgetPermanent @renderPersonal() App.RecentView.fetchFull(load) + toggleNotifications: (event) -> + event.stopPropagation() + @notificationWidget.toggle() + App.Config.set( 'navigation', App.Navigation, 'Navigations' ) diff --git a/app/assets/javascripts/app/controllers/widget/online_notification.coffee b/app/assets/javascripts/app/controllers/widget/online_notification.coffee index 147d13bf2..a60a73e7f 100644 --- a/app/assets/javascripts/app/controllers/widget/online_notification.coffee +++ b/app/assets/javascripts/app/controllers/widget/online_notification.coffee @@ -1,8 +1,22 @@ class App.OnlineNotificationWidget extends App.Controller alreadyShown: {} + shown: false + className: 'popover popover--notifications right' + attributes: + role: 'tooltip' + + events: + 'click .js-mark': 'markAllAsRead' + 'click .js-item': 'hide' + 'click .js-remove': 'removeItem' + 'click .js-locationVerify': 'onItemClick' + 'keydown': 'listNavigate' elements: - '.js-toggleNotifications': 'toggle' + '.js-notificationsContainer': 'container' + '.js-mark': 'mark' + '.js-item': 'item' + '.js-content': 'content' constructor: -> super @@ -29,27 +43,26 @@ class App.OnlineNotificationWidget extends App.Controller # rebuild widget on auth @bind 'auth', (user) => if !user - @el.find('.js-counter').text('') + @counterUpdate(0) else if !@access() - @el.find('.js-counter').text('') + @counterUpdate(0) return - @createContainer() if @access() - @createContainer() - @subscribeId = App.OnlineNotification.subscribe(@updateContent) + @subscribeId = App.OnlineNotification.subscribe(@show) - @bind('ui:rerender', => - @updateContent() + @bind('ui:reshow', => + @show() 'popover' ) + $(window).on 'click.notifications', @hide + release: -> - @removeContainer() $(window).off 'click.notifications' - $(window).off 'keydown.notifications' App.OnlineNotification.unsubscribe(@subscribeId) + super access: -> return false if !@Session.get() @@ -58,9 +71,8 @@ class App.OnlineNotificationWidget extends App.Controller return false listNavigate: (e) => - if e.keyCode is 27 # close on esc - @hidePopover() + @hide() return else if e.keyCode is 38 # up @nudge(e, -1) @@ -69,25 +81,24 @@ class App.OnlineNotificationWidget extends App.Controller @nudge(e, 1) return else if e.keyCode is 13 # enter - $('.js-notificationsContainer .popover-content .activity-entry.is-hover .js-locationVerify').click() + @item.filter('.is-hover').find('.js-locationVerify').click() nudge: (e, position) -> # get current - navigation = $('.js-notificationsContainer .popover-content') - current = navigation.find('.activity-entry.is-hover') - if !current.get(0) - navigation.find('.activity-entry').first().addClass('is-hover') + current = @item.filter('.is-hover') + if !current.size() + @item.first().addClass('is-hover') return if position is 1 - next = current.next('.activity-entry') - if next.get(0) + next = current.next('.js-item') + if next.size() current.removeClass('is-hover') next.addClass('is-hover') else - prev = current.prev('.activity-entry') - if prev.get(0) + prev = current.prev('.is-item') + if prev.size() current.removeClass('is-hover') prev.addClass('is-hover') @@ -97,13 +108,19 @@ class App.OnlineNotificationWidget extends App.Controller @scrollToIfNeeded(prev, true) counterUpdate: (count) => + count = '' if count is 0 + + $('.js-notificationsCounter').text(count) + @count = count + + # show mark all as read if needed if !count - @$('.js-counter').text('') - return + @mark.addClass('hidden') + else + @mark.removeClass('hidden') - @$('.js-counter').text(count) - - markAllAsRead: => + markAllAsRead: (event) -> + event.preventDefault() @counterUpdate(0) @ajax( id: 'markAllAsRead' @@ -115,80 +132,49 @@ class App.OnlineNotificationWidget extends App.Controller updateHeight: -> # set height of notification popover - notificationsContainer = $('.js-notificationsContainer') heightApp = $('#app').height() heightPopoverSpacer = 22 - heightPopoverHeader = notificationsContainer.find('.popover-notificationsHeader').outerHeight(true) - heightPopoverContent = notificationsContainer.find('.popover-content').prop('scrollHeight') - heightPopoverContentNew = heightPopoverContent + heightPopoverHeader = @header.outerHeight(true) + heightPopoverContent = 0 + @item.each -> heightPopoverContent += @clientHeight + if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp - heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer - notificationsContainer.addClass('is-overflowing') + heightPopoverContent = heightApp - heightPopoverHeader - heightPopoverSpacer + @container.addClass('is-overflowing') else - notificationsContainer.removeClass('is-overflowing') + @container.removeClass('is-overflowing') - notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px") - - onShow: => - @updateContent() - @updateHeight() - - # mark all notifications as read - notificationsContainer = $('.js-notificationsContainer') - notificationsContainer.find('.js-markAllAsRead').on('click', (e) => - e.preventDefault() - @markAllAsRead() - @hidePopover() - ) - - notificationsContainer.on 'click', @stopPropagation - $(window).on 'click.notifications', @hidePopover - $(window).on 'keydown.notifications', @listNavigate - - onHide: -> - $(window).off 'click.notifications' - $(window).off 'keydown.notifications' - - hidePopover: => - @toggle.popover('hide') + @content.css('height', heightPopoverContent) fetch: => load = (items) => @fetchedData = true App.OnlineNotification.refresh(items, { clear: true }) - @updateContent() + @show() App.OnlineNotification.fetchFull(load) - updateContent: => + toggle: => + if @shown + @hide() + else + @show() + + show: => + @shown = true if !@Session.get() - $('.js-notificationsContainer .popover-content').html('') + @content.html('') return items = App.OnlineNotification.search(sortBy: 'created_at', order: 'DESC') - counter = 0 + @count = 0 for item in items if !item.seen - counter = counter + 1 - @counterUpdate(counter) + @count++ - # update title - $('.js-notificationsContainer .popover-title').html( - App.i18n.translateInline('Notifications') + " #{counter}" - ) - - # show mark all as read if needed - if counter is 0 - $('.js-notificationsContainer .js-markAllAsRead').addClass('hidden') - else - $('.js-notificationsContainer .js-markAllAsRead').removeClass('hidden') + @counterUpdate(@count) # update content items = @prepareForObjectList(items) - $('.js-notificationsContainer .popover-content').html( - $( App.view('widget/online_notification_content')(items: items) ) - ) - - notificationsContainer = $('.js-notificationsContainer .popover-content') # generate desktop notifications for item in items @@ -206,54 +192,24 @@ class App.OnlineNotificationWidget extends App.Controller ) App.OnlineNotification.play() - # execute controller again of already open (because hash hasn't changed, we need to do it manually) - notificationsContainer.find('.js-locationVerify').on('click', (e) => - @locationVerify(e) - @hidePopover() - ) + @html App.view('widget/online_notification') + items: items + count: @count - # close notification list on click - notificationsContainer.find('.activity-entry').on('click', (e) => - @hidePopover() - ) + @el.show() - # remove - notificationsContainer.find('.js-remove').on('click', (e) => - e.preventDefault() - e.stopPropagation() - row = $(e.target).closest('.activity-entry') - id = row.data('id') - App.OnlineNotification.destroy(id) - @updateHeight() - ) + hide: => + @shown = false + @el.hide() - createContainer: => - @removeContainer() - - # show popover - waitUntilOldPopoverIsRemoved = => - @toggle.popover - trigger: 'click' - container: 'body' - html: true - placement: 'right' - viewport: { selector: '#app', padding: 10 } - template: App.view('widget/online_notification')() - title: ' ' - content: ' ' - .on - 'shown.bs.popover': @onShow - 'hide.bs.popover': @onHide - - @updateContent() - - @delay( - -> waitUntilOldPopoverIsRemoved() - 600 - 'popover' - ) - - removeContainer: => - @counterUpdate(0) - @toggle.popover('destroy') + onItemClick: (event) -> + @locationVerify(event) + @hide() + removeItem: (event) -> + event.preventDefault() + event.stopPropagation() + row = $(e.target).closest('.js-item') + id = row.data('id') + App.OnlineNotification.destroy(id) + @updateHeight() diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco index 57169411d..ab79576a0 100644 --- a/app/assets/javascripts/app/views/navigation.jst.eco +++ b/app/assets/javascripts/app/views/navigation.jst.eco @@ -8,7 +8,7 @@ diff --git a/app/assets/javascripts/app/views/widget/online_notification.jst.eco b/app/assets/javascripts/app/views/widget/online_notification.jst.eco index 9755c1eca..540c5950f 100644 --- a/app/assets/javascripts/app/views/widget/online_notification.jst.eco +++ b/app/assets/javascripts/app/views/widget/online_notification.jst.eco @@ -1,8 +1,37 @@ -