[TASK] Migrate Notification to TypeScript

Change-Id: I71cbf24dc540b5a5659be8848d08be7dc2e84b22
Resolves: #82599
Releases: master
Reviewed-on: https://review.typo3.org/55792
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

Build/types/TYPO3/index.d.ts

@@ -8,6 +8,7 @@ declare namespace TYPO3 {
   export let DebugConsole: any;
   export let Icons: any;
   export let InfoWindow: any;
+  export let Notification: any;
   export let Popover: any;
   export let ShortcutMenu: any;
   export let Storage: any;
@@ -32,21 +33,6 @@ declare namespace TYPO3 {
         public show(title: string, content: any, severity: number, buttons: any[], additionalCssClasses?: string[]): JQuery; // tslint:disable-line:max-line-length
         public dismiss(): void;
       }
-      export class Notification {
-        public readonly Notification: {
-          NOTICE: -2,
-          INFO: -1,
-          OK: 0,
-          WARNING: 1,
-          ERROR: 2
-        };
-        public notice(title: string, message: string, duration: Number): string;
-        public info(title: string, message: string, duration: Number): string;
-        public success(title: string, message: string, duration: Number): string;
-        public warning(title: string, message: string, duration: Number): string;
-        public error(title: string, message: string, duration: Number): string;
-        public showMessage(title: string, message: string, severity: Number, duration?: Number): string;
-      }
     }
   }
 }
@@ -67,10 +53,6 @@ declare module 'TYPO3/CMS/Backend/Modal' {
   export = new TYPO3.CMS.Backend.Modal();
 }
 
-declare module 'TYPO3/CMS/Backend/Notification' {
-  export = new TYPO3.CMS.Backend.Notification();
-}
-
 // type definition for global namespace object
 interface Window {
   TYPO3: any;

typo3/sysext/backend/Resources/Private/TypeScript/DragUploader.ts

@@ -19,7 +19,7 @@ import * as $ from 'jquery';
 import moment = require('moment');
 import NProgress = require('nprogress');
 import Modal = require('TYPO3/CMS/Backend/Modal');
-import Notification = require('TYPO3/CMS/Backend/Notification');
+import Notification = require('./Notification');
 import Severity = require('./Severity');
 
 /**

typo3/sysext/backend/Resources/Private/TypeScript/Enum/Severity.ts

@@ -0,0 +1,20 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+export enum SeverityEnum {
+  notice = -2,
+  info = -1,
+  ok = 0,
+  warning = 1,
+  error = 2
+}

typo3/sysext/backend/Resources/Private/TypeScript/Notification.ts

@@ -0,0 +1,201 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import {SeverityEnum} from './Enum/Severity';
+import Severity = require('./Severity');
+
+/**
+ * Module: TYPO3/CMS/Backend/Notification
+ * Notification API for the TYPO3 backend
+ */
+class Notification {
+  private static duration: number = 5;
+  private static messageContainer: JQuery = null;
+
+  /**
+   * Show a notice notification
+   *
+   * @param {string} title
+   * @param {string} message
+   * @param {number} duration
+   */
+  public static notice(title: string, message: string, duration: number): void {
+    Notification.showMessage(title, message, SeverityEnum.notice, duration);
+  }
+
+  /**
+   * Show a info notification
+   *
+   * @param {string} title
+   * @param {string} message
+   * @param {number} duration
+   */
+  public static info(title: string, message: string, duration: number): void {
+    Notification.showMessage(title, message, SeverityEnum.info, duration);
+  }
+
+  /**
+   * Show a success notification
+   *
+   * @param {string} title
+   * @param {string} message
+   * @param {number} duration
+   */
+  public static success(title: string, message: string, duration: number): void {
+    Notification.showMessage(title, message, SeverityEnum.ok, duration);
+  }
+
+  /**
+   * Show a warning notification
+   *
+   * @param {string} title
+   * @param {string} message
+   * @param {number} duration
+   */
+  public static warning(title: string, message: string, duration: number): void {
+    Notification.showMessage(title, message, SeverityEnum.warning, duration);
+  }
+
+  /**
+   * Show a error notification
+   *
+   * @param {string} title
+   * @param {string} message
+   * @param {number} duration
+   */
+  public static error(title: string, message: string, duration: number = 0): void {
+    Notification.showMessage(title, message, SeverityEnum.error, duration);
+  }
+
+  /**
+   * @param {string} title
+   * @param {string} message
+   * @param {SeverityEnum} severity
+   * @param {number} duration
+   */
+  public static showMessage(title: string,
+                            message: string,
+                            severity: SeverityEnum,
+                            duration: number | string = this.duration): void {
+    const className = Severity.getCssClass(severity);
+    let icon = '';
+    switch (severity) {
+      case SeverityEnum.notice:
+        icon = 'lightbulb-o';
+        break;
+      case SeverityEnum.ok:
+        icon = 'check';
+        break;
+      case SeverityEnum.warning:
+        icon = 'exclamation';
+        break;
+      case SeverityEnum.error:
+        icon = 'times';
+        break;
+      case SeverityEnum.info:
+      default:
+        icon = 'info';
+    }
+
+    duration = (typeof duration === 'undefined')
+      ? this.duration
+      : (
+        typeof duration === 'string'
+          ? parseFloat(duration)
+          : duration
+      );
+
+    if (this.messageContainer === null) {
+      this.messageContainer = $('<div id="alert-container"></div>').appendTo('body');
+    }
+    const $box = $(
+      '<div class="alert alert-' + className + ' alert-dismissible fade" role="alert">' +
+      '<button type="button" class="close" data-dismiss="alert">' +
+      '<span aria-hidden="true"><i class="fa fa-times-circle"></i></span>' +
+      '<span class="sr-only">Close</span>' +
+      '</button>' +
+      '<div class="media">' +
+      '<div class="media-left">' +
+      '<span class="fa-stack fa-lg">' +
+      '<i class="fa fa-circle fa-stack-2x"></i>' +
+      '<i class="fa fa-' + icon + ' fa-stack-1x"></i>' +
+      '</span>' +
+      '</div>' +
+      '<div class="media-body">' +
+      '<h4 class="alert-title"></h4>' +
+      '<p class="alert-message text-pre-wrap"></p>' +
+      '</div>' +
+      '</div>' +
+      '</div>'
+    );
+    $box.find('.alert-title').text(title);
+    $box.find('.alert-message').text(message);
+    $box.on('close.bs.alert', (e: Event) => {
+      e.preventDefault();
+      const $me = $(e.currentTarget);
+      $me
+        .clearQueue()
+        .queue((next: any): void => {
+          $me.removeClass('in');
+          next();
+        })
+        .slideUp(() => {
+          $me.remove();
+        });
+    });
+    $box.appendTo(this.messageContainer);
+    $box.delay(200)
+      .queue((next: any): void => {
+        $box.addClass('in');
+        next();
+      });
+
+    if (duration > 0) {
+      // if duration > 0 dismiss alert
+      $box.delay(duration * 1000)
+        .queue((next: any): void => {
+          $box.alert('close');
+          next();
+        });
+    }
+  }
+}
+
+let notificationObject;
+
+try {
+  // fetch from parent
+  if (parent && parent.window.TYPO3 && parent.window.TYPO3.Notification) {
+    notificationObject = parent.window.TYPO3.Notification;
+  }
+
+  // fetch object from outer frame
+  if (top && top.TYPO3.Notification) {
+    notificationObject = top.TYPO3.Notification;
+  }
+} catch (e) {
+  // This only happens if the opener, parent or top is some other url (eg a local file)
+  // which loaded the current window. Then the browser's cross domain policy jumps in
+  // and raises an exception.
+  // For this case we are safe and we can create our global object below.
+}
+
+if (!notificationObject) {
+  notificationObject = Notification;
+
+  // attach to global frame
+  if (typeof TYPO3 !== 'undefined') {
+    TYPO3.Notification = notificationObject;
+  }
+}
+export = notificationObject;

typo3/sysext/backend/Resources/Private/TypeScript/Severity.ts

@@ -11,13 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-enum SeverityEnum {
-  notice = -2,
-  info = -1,
-  ok = 0,
-  warning = 1,
-  error = 2
-}
+import {SeverityEnum} from './Enum/Severity';
 
 /**
  * Module: TYPO3/CMS/Backend/Severity