[TASK] Migrate OnlineMedia to TypeScript

Resolves: #82600
Releases: master
Change-Id: Ie7b86399f0a75706b1072a3c41e162ab2992a8b0
Reviewed-on: https://review.typo3.org/55954
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

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

@@ -0,0 +1,124 @@
+/*
+ * 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 {KeyTypesEnum} from './Enum/KeyTypes';
+import * as $ from 'jquery';
+import NProgress = require('nprogress');
+import Modal = require('./Modal');
+import Severity = require('./Severity');
+
+interface Response {
+  file?: number;
+  error?: string;
+}
+
+/**
+ * Module: TYPO3/CMS/Backend/OnlineMedia
+ * Javascript for show the online media dialog
+ */
+class OnlineMedia {
+  constructor() {
+    $((): void => {
+      this.registerEvents();
+    });
+  }
+
+  private registerEvents(): void {
+    const me = this;
+    $(document).on('click', '.t3js-online-media-add-btn', (e: JQueryEventObject): void => {
+      me.triggerModal($(e.currentTarget));
+    });
+  }
+
+  /**
+   * @param {JQuery} $trigger
+   * @param {string} url
+   */
+  private addOnlineMedia($trigger: JQuery, url: string): void {
+    const target = $trigger.data('target-folder');
+    const allowed = $trigger.data('online-media-allowed');
+    const irreObjectUid = $trigger.data('file-irre-object');
+
+    NProgress.start();
+    $.post(
+      TYPO3.settings.ajaxUrls.online_media_create,
+      {
+        url: url,
+        targetFolder: target,
+        allowed: allowed
+      },
+      (data: Response): void => {
+        if (data.file) {
+          window.inline.delayedImportElement(irreObjectUid, 'sys_file', data.file, 'file');
+        } else {
+          const $confirm = Modal.confirm(
+            'ERROR',
+            data.error,
+            Severity.error,
+            [{
+              text: TYPO3.lang['button.ok'] || 'OK',
+              btnClass: 'btn-' + Severity.getCssClass(Severity.error),
+              name: 'ok',
+              active: true
+            }]
+          ).on('confirm.button.ok', (): void => {
+            $confirm.modal('hide');
+          });
+        }
+        NProgress.done();
+      }
+    );
+  }
+
+  /**
+   * @param {JQuery} $currentTarget
+   */
+  private triggerModal($currentTarget: JQuery): void {
+    const btnSubmit = $currentTarget.data('data-btn-submit') || 'Add';
+    const placeholder = $currentTarget.data('placeholder') || 'Paste media url here...';
+    const allowedExtMarkup = $.map($currentTarget.data('online-media-allowed').split(','), (ext: string): string => {
+      return '<span class="label label-success">' + ext.toUpperCase() + '</span>';
+    });
+    const allowedHelpText = $currentTarget.data('online-media-allowed-help-text') || 'Allow to embed from sources:';
+    const $modal = Modal.show(
+      $currentTarget.attr('title'),
+      '<div class="form-control-wrap">' +
+      '<input type="text" class="form-control online-media-url" placeholder="' + placeholder + '" />' +
+      '</div><div class="help-block">' + allowedHelpText + '<br>' + allowedExtMarkup.join(' ') + '</div>',
+      Severity.notice,
+      [{
+        text: btnSubmit,
+        btnClass: 'btn btn-primary',
+        name: 'ok',
+        trigger: (): void => {
+          const url = $modal.find('input.online-media-url').val();
+          if (url) {
+            $modal.modal('hide');
+            this.addOnlineMedia($currentTarget, url);
+          }
+        }
+      }]
+    );
+
+    $modal.on('shown.bs.modal', (e: JQueryEventObject): void => {
+      // focus the input field
+      $(e.currentTarget).find('input.online-media-url').first().focus().on('keydown', (kdEvt: JQueryEventObject): void => {
+        if (kdEvt.keyCode === KeyTypesEnum.ENTER) {
+          $modal.find('button[name="ok"]').trigger('click');
+        }
+      });
+    });
+  }
+}
+
+export = new OnlineMedia();