toolbar_entry.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /**
  6. * @api
  7. */
  8. define([
  9. 'jquery',
  10. 'jquery/ui',
  11. 'domReady!'
  12. ], function ($) {
  13. 'use strict';
  14. /**
  15. * Mark notification as read via AJAX call.
  16. *
  17. * @param {String} notificationId
  18. */
  19. var markNotificationAsRead = function (notificationId) {
  20. var requestUrl = $('.notifications-wrapper .admin__action-dropdown-menu').attr('data-mark-as-read-url');
  21. $.ajax({
  22. url: requestUrl,
  23. type: 'POST',
  24. dataType: 'json',
  25. data: {
  26. id: notificationId
  27. },
  28. showLoader: false
  29. });
  30. },
  31. notificationCount = $('.notifications-wrapper').attr('data-notification-count'),
  32. /**
  33. * Remove notification from the list.
  34. *
  35. * @param {jQuery} notificationEntry
  36. */
  37. removeNotificationFromList = function (notificationEntry) {
  38. var notificationIcon, actionElement;
  39. notificationEntry.remove();
  40. notificationCount--;
  41. $('.notifications-wrapper').attr('data-notification-count', notificationCount);
  42. if (notificationCount == 0) {// eslint-disable-line eqeqeq
  43. // Change appearance of the bubble and its behavior when the last notification is removed
  44. $('.notifications-wrapper .admin__action-dropdown-menu').remove();
  45. notificationIcon = $('.notifications-wrapper .notifications-icon');
  46. notificationIcon.removeAttr('data-toggle');
  47. notificationIcon.off('click.dropdown');
  48. $('.notifications-action .notifications-counter').text('').hide();
  49. } else {
  50. // Change top counter only for allowable range
  51. if (notificationCount <= 99) {
  52. $('.notifications-action .notifications-counter').text(notificationCount);
  53. }
  54. $('.notifications-entry-last .notifications-counter').text(notificationCount);
  55. // Modify caption of the 'See All' link
  56. actionElement = $('.notifications-wrapper .admin__action-dropdown-menu .last .action-more');
  57. actionElement.text(actionElement.text().replace(/\d+/, notificationCount));
  58. }
  59. },
  60. /**
  61. * Show notification details.
  62. *
  63. * @param {jQuery} notificationEntry
  64. */
  65. showNotificationDetails = function (notificationEntry) {
  66. var notificationDescription = notificationEntry.find('.notifications-entry-description'),
  67. notificationDescriptionEnd = notificationEntry.find('.notifications-entry-description-end');
  68. if (notificationDescriptionEnd.length > 0) {
  69. notificationDescriptionEnd.addClass('_show');
  70. }
  71. if (notificationDescription.hasClass('_cutted')) {
  72. notificationDescription.removeClass('_cutted');
  73. }
  74. };
  75. // Show notification description when corresponding item is clicked
  76. $('.notifications-wrapper .admin__action-dropdown-menu .notifications-entry').on(
  77. 'click.showNotification',
  78. function (event) {
  79. // hide notification dropdown
  80. $('.notifications-wrapper .notifications-icon').trigger('click.dropdown');
  81. showNotificationDetails($(this));
  82. event.stopPropagation();
  83. }
  84. );
  85. // Remove corresponding notification from the list and mark it as read
  86. $('.notifications-close').on('click.removeNotification', function (event) {
  87. var notificationEntry = $(this).closest('.notifications-entry'),
  88. notificationId = notificationEntry.attr('data-notification-id');
  89. markNotificationAsRead(notificationId);
  90. removeNotificationFromList(notificationEntry);
  91. // Checking for last unread notification to hide dropdown
  92. if (notificationCount == 0) {// eslint-disable-line eqeqeq
  93. $('.notifications-wrapper').removeClass('active')
  94. .find('.notifications-action')
  95. .removeAttr('data-toggle')
  96. .off('click.dropdown');
  97. }
  98. event.stopPropagation();
  99. });
  100. // Hide notifications bubble
  101. if (notificationCount == 0) {// eslint-disable-line eqeqeq
  102. $('.notifications-action .notifications-counter').hide();
  103. } else {
  104. $('.notifications-action .notifications-counter').show();
  105. }
  106. });