Source: plot/core/utils/PlotlyNotifier.js

  1. export { PlotlyNotifier }
  3. /**
  4.  * Class to simulate plotly's notification function and write own notification messages.
  5.  * Required because it is not accessible from outside.
  6.  */
  7. class PlotlyNotifier {
  8.     /**
  9.      * Creates the default plotly notification container if it does not already exist and then returns it.
  10.      * @returns {HTMLDivElement} - Notification container.
  11.      */
  12.     static getPlotlyNotificationContainer() {
  13.         let targetNode = document.body.querySelector('.plotly-notifier')
  14.         if (!targetNode) {
  15.             const defaultPlotlyNotifierElement = document.createElement('div');
  16.             defaultPlotlyNotifierElement.classList.add('plotly-notifier');
  17.             document.body.append(defaultPlotlyNotifierElement);
  18.             targetNode = defaultPlotlyNotifierElement;
  19.         }
  20.         return targetNode
  21.     }
  23.     /**
  24.      * Create the default plotly notification element containing the notification message.
  25.      * @param {String} message - Message text.
  26.      * @returns {HTMLDivElement} - Notification element.
  27.      */
  28.     static _createNotification(message) {
  29.         const notifierNote = document.createElement('div');
  30.         notifierNote.classList.add('notifier-note', 'notifier-note-custom', 'open');
  31.         notifierNote.innerHTML = `
  32.             <button class="notifier-close">×</button>
  33.             <p>
  34.                 <span>${message}</span>
  35.             </p>
  36.             `;
  37.         return notifierNote
  38.     }
  40.     /**
  41.      * Displays a custom message in Plotly's default DOM node.
  42.      * @param {String} message - Message text.
  43.      * @param {Number} duration - How long the message should be displayed.
  44.      */
  45.     static displayMessage(message, duration) {
  46.         const notifierContainer = PlotlyNotifier.getPlotlyNotificationContainer();
  47.         const notifierNote = PlotlyNotifier._createNotification(message);
  48.         notifierContainer.appendChild(notifierNote);
  50.         const removeNotification = () => {
  51.             notifierNote.classList.replace('open', 'closed');
  52.             setTimeout(() => {
  53.                 notifierNote.remove();
  54.                 if (notifierContainer.childElementCount == 0 && !notifierContainer.classList.contains('observed')) {
  55.                     notifierContainer.remove()
  56.                 }
  57.             }, 700);
  58.         }
  59.         notifierNote.querySelector(".notifier-close").addEventListener("click", removeNotification);
  60.         setTimeout(removeNotification, duration);
  61.     }
  62. }