Source: js/system_banner.js

  1. 'use strict';
  2. (function(exports) {
  3. /**
  4. * SystemBanner displays a type of notification to the user in certain cases.
  5. * It is a type of temporary notification that does not live in the
  6. * notifications tray. Examples of the SystemBanner implementation include
  7. * application installation, crash reporter, and low storage notices.
  8. * @class SystemBanner
  9. */
  10. function SystemBanner() {}
  11. SystemBanner.prototype = {
  12. /**
  13. * A reference to the SystemBanner element
  14. * @memberof SystemBanner.prototype
  15. * @type {Element}
  16. */
  17. _banner: null,
  18. /**
  19. * Set when the clicked callback called. Bypasses dismiss.
  20. * @memberof SystemBanner.prototype
  21. * @type {Boolean}
  22. */
  23. _clicked: false,
  24. /**
  25. * Callback when the user clicks on the system banner button.
  26. * @memberof SystemBanner.prototype
  27. * @type {Function}
  28. */
  29. _clickCallback: null,
  30. /**
  31. * Generates and returns the banner if it does not exist
  32. * @memberof SystemBanner.prototype
  33. * @type {Function}
  34. */
  35. get banner() {
  36. if (!this._banner) {
  37. this._banner = document.createElement('section');
  38. this._banner.className = 'banner generic-dialog';
  39. this._banner.setAttribute('role', 'dialog');
  40. this._banner.dataset.zIndexLevel = 'system-notification-banner';
  41. this._banner.dataset.button = 'false';
  42. this._banner.innerHTML = '<p></p><button></button>';
  43. document.getElementById('screen').appendChild(this._banner);
  44. }
  45. return this._banner;
  46. },
  47. /**
  48. * Shows a banner with a given message.
  49. * Optionally shows a button with a given label/callback/dismiss.
  50. * 'dismiss' is called when the banner is dismissed and button
  51. * has not been clicked. It is optional.
  52. * @memberof SystemBanner.prototype
  53. * @param {String|Array} message The message to display
  54. * @param {Object} buttonParams
  55. * { label: l10nAttrs, callback: ..., dismiss: ... }
  56. */
  57. show: function(message, buttonParams) {
  58. var banner = this.banner;
  59. var p = banner.querySelector('p');
  60. p.innerHTML = '';
  61. if (Array.isArray(message)) {
  62. message.forEach(function(chunk) {
  63. var span = document.createElement('span');
  64. setElementL10n(span, chunk);
  65. p.appendChild(span);
  66. });
  67. } else {
  68. var span = document.createElement('span');
  69. setElementL10n(span, message);
  70. p.appendChild(span);
  71. }
  72. var button = banner.querySelector('button');
  73. if (buttonParams) {
  74. banner.dataset.button = true;
  75. setElementL10n(button, buttonParams.label);
  76. this._clickCallback = function() {
  77. this._clicked = true;
  78. buttonParams.callback();
  79. }.bind(this);
  80. button.addEventListener('click', this._clickCallback);
  81. }
  82. banner.addEventListener('animationend', function animationend() {
  83. banner.removeEventListener('animationend', animationend);
  84. banner.classList.remove('visible');
  85. if (buttonParams) {
  86. if (buttonParams.dismiss && !this._clicked) {
  87. buttonParams.dismiss();
  88. }
  89. banner.dataset.button = false;
  90. button.removeEventListener('click', this._clickCallback);
  91. button.classList.remove('visible');
  92. this.banner.parentNode.removeChild(this.banner);
  93. this._banner = undefined;
  94. }
  95. }.bind(this));
  96. banner.classList.add('visible');
  97. }
  98. };
  99. function setElementL10n(element, l10nAttrs) {
  100. if (typeof(l10nAttrs) === 'string') {
  101. element.setAttribute('data-l10n-id', l10nAttrs);
  102. } else {
  103. navigator.mozL10n.setAttributes(
  104. element, l10nAttrs.id, l10nAttrs.args);
  105. }
  106. }
  107. exports.SystemBanner = SystemBanner;
  108. }(window));