8
0

notification.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/notification/notification
  7. */
  8. /* globals window */
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. /**
  11. * The Notification plugin.
  12. *
  13. * This plugin sends few base types of notifications: `success`, `info` and `warning`. This notifications need to be
  14. * handled and displayed by plugin responsible for showing UI of the notifications. Using this plugin for dispatching
  15. * notifications makes possible to switch the notifications UI.
  16. *
  17. * Note that every unhandled and not stopped `warning` notification will be displayed as system alert.
  18. * See {@link module:ui/notification/notification~Notification#showWarning}.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class Notification extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get pluginName() {
  27. return 'ui/notification';
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. init() {
  33. // Each unhandled and not stopped `show:warning` event is displayed as system alert.
  34. this.on( 'show:warning', ( evt, data ) => {
  35. window.alert( data.message );
  36. }, { priority: 'lowest' } );
  37. }
  38. /**
  39. * Shows success notification.
  40. *
  41. * At default it fires `show:success` event with given data but event namespace can be extended
  42. * by `data.namespace` option e.g.
  43. *
  44. * showSuccess( 'Image is uploaded.', {
  45. * namespace: 'upload:image'
  46. * } );
  47. *
  48. * will fire `show:success:upload:image` event.
  49. *
  50. * @param {String} message Content of the notification.
  51. * @param {Object} [data={}] Additional data.
  52. * @param {String} [data.namespace] Additional event namespace.
  53. */
  54. showSuccess( message, data = {} ) {
  55. this._showNotification( {
  56. message: message,
  57. type: 'success',
  58. namespace: data.namespace
  59. } );
  60. }
  61. /**
  62. * Shows info notification.
  63. *
  64. * At default it fires `show:info` event with given data but event namespace can be extended
  65. * by `data.namespace` option e.g.
  66. *
  67. * showInfo( 'Editor is offline.', {
  68. * namespace: 'editor:status'
  69. * } );
  70. *
  71. * will fire `show:info:editor:status` event.
  72. *
  73. * @param {String} message Content of the notification.
  74. * @param {Object} [data={}] Additional data.
  75. * @param {String} [data.namespace] Additional event namespace.
  76. */
  77. showInfo( message, data = {} ) {
  78. this._showNotification( {
  79. message: message,
  80. type: 'info',
  81. namespace: data.namespace
  82. } );
  83. }
  84. /**
  85. * Shows warning notification.
  86. *
  87. * At default it fires `show:warning` event with given data but event namespace can be extended
  88. * by `data.namespace` option e.g.
  89. *
  90. * showWarning( 'Image upload error.', {
  91. * namespace: 'upload:image'
  92. * } );
  93. *
  94. * will fire `show:warning:upload:image` event.
  95. *
  96. * Note that each unhandled and not stopped `warning` notification will be displayed as system alert.
  97. * Plugin responsible for displaying warnings should `stop()` the event to prevent of displaying it as alert:
  98. *
  99. * notifications.on( 'show:warning', ( evt, data ) => {
  100. * // Do something with data.
  101. *
  102. * // Stop this event to prevent of displaying as alert.
  103. * evt.stop();
  104. * } );
  105. *
  106. * You can attach many listeners to the same event and `stop()` this event in the listener with the low priority:
  107. *
  108. * notifications.on( 'show:warning', ( evt, data ) => {
  109. * // Show warning in the UI, but not stop it.
  110. * } );
  111. *
  112. * notifications.on( 'show:warning', ( evt, data ) => {
  113. * // Log warning to some error tracker.
  114. *
  115. * // Stop this event to prevent of displaying as alert.
  116. * evt.stop();
  117. * }, { priority: 'low' } );
  118. *
  119. * @param {String} message Content of the notification.
  120. * @param {Object} [data={}] Additional data.
  121. * @param {String} [data.namespace] Additional event namespace.
  122. */
  123. showWarning( message, data = {} ) {
  124. this._showNotification( {
  125. message: message,
  126. type: 'warning',
  127. namespace: data.namespace
  128. } );
  129. }
  130. /**
  131. * Fires `show` event with specified type, namespace and message.
  132. *
  133. * @private
  134. * @param {Object} data Message data.
  135. * @param {String} data.message Content of the notification.
  136. * @param {'success'|'info'|'warning'} data.type Type of message.
  137. * @param {String} [data.namespace] Additional event namespace.
  138. */
  139. _showNotification( data ) {
  140. const event = `show:${ data.type }` + ( data.namespace ? `:${ data.namespace }` : '' );
  141. this.fire( event, {
  142. message: data.message,
  143. type: data.type
  144. } );
  145. }
  146. /**
  147. * Fired when one of `showSuccess`, `showInfo`, `showWarning` methods is called.
  148. *
  149. * @event show
  150. * @param {Object} data Notification data.
  151. * @param {String} data.message Content of the notification.
  152. * @param {'success'|'info'|'warning'} data.type Type of notification.
  153. */
  154. /**
  155. * Fired when `showSuccess` method is called.
  156. *
  157. * @event show:success
  158. * @param {Object} data Notification data.
  159. * @param {String} data.message Content of the notification.
  160. * @param {'success'} data.type Type of notification.
  161. */
  162. /**
  163. * Fired when `showInfo` method is called.
  164. *
  165. * @event show:info
  166. * @param {Object} data Notification data.
  167. * @param {String} data.message Content of the notification.
  168. * @param {'info'} data.type Type of notification.
  169. */
  170. /**
  171. * Fired when `showWarning` method is called.
  172. *
  173. * When this event won't be handled and stopped by `event.stop()` then data.message of this event will
  174. * be automatically displayed as system alert.
  175. *
  176. * @event show:warning
  177. * @param {Object} data Notification data.
  178. * @param {String} data.message Content of the notification.
  179. * @param {'warning'} data.type Type of notification.
  180. */
  181. }