[TASK] Migrate OnlineMedia to TypeScript 54/55954/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Wed, 28 Feb 2018 20:40:03 +0000 (21:40 +0100)
committerFrank Naegler <frank.naegler@typo3.org>
Thu, 1 Mar 2018 11:49:04 +0000 (12:49 +0100)
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 [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/OnlineMedia.js

diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/OnlineMedia.ts b/typo3/sysext/backend/Resources/Private/TypeScript/OnlineMedia.ts
new file mode 100644 (file)
index 0000000..90b814b
--- /dev/null
@@ -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();
index c9d3051..0ed95dc 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/OnlineMedia
- * Javascript for show the online media dialog
- */
-define(['jquery',
-  'nprogress',
-  'TYPO3/CMS/Backend/Modal',
-  'TYPO3/CMS/Backend/Severity',
-  'TYPO3/CMS/Lang/Lang'
-], function($, NProgress, Modal, Severity) {
-  'use strict';
-
-  /**
-   *
-   * @param element
-   * @constructor
-   * @exports TYPO3/CMS/Backend/OnlineMedia
-   */
-  var OnlineMediaPlugin = function(element) {
-    var me = this;
-    me.$btn = $(element);
-    me.target = me.$btn.data('target-folder');
-    me.irreObjectUid = me.$btn.data('file-irre-object');
-    me.allowed = me.$btn.data('online-media-allowed');
-    me.allowedHelpText = me.$btn.data('online-media-allowed-help-text') || 'Allow to embed from sources:';
-    me.btnSubmit = me.$btn.data('data-btn-submit') || 'Add';
-    me.placeholder = me.$btn.data('placeholder') || 'Paste media url here...';
-
-    /**
-     *
-     * @param {String} url
-     */
-    me.addOnlineMedia = function(url) {
-      NProgress.start();
-      $.post(TYPO3.settings.ajaxUrls['online_media_create'],
-        {
-          url: url,
-          targetFolder: me.target,
-          allowed: me.allowed
-        },
-        function(data) {
-          if (data.file) {
-            inline.delayedImportElement(
-              me.irreObjectUid,
-              'sys_file',
-              data.file,
-              'file'
-            );
-          } else {
-            var $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', function() {
-              $confirm.modal('hide');
-            });
-          }
-          NProgress.done();
-        }
-      );
-    };
-
-    /**
-     * Trigger the modal
-     */
-    me.triggerModal = function() {
-      var allowedExtMarkup = $.map(me.allowed.split(','), function(ext) {
-        return '<span class="label label-success">' + ext.toUpperCase() + '</span>';
-      });
-      var $modal = Modal.show(
-        me.$btn.attr('title'),
-        '<div class="form-control-wrap">' +
-        '<input type="text" class="form-control online-media-url" placeholder="' + me.placeholder + '" />' +
-        '</div><div class="help-block">' + me.allowedHelpText + '<br>' + allowedExtMarkup.join(' ') + '</div>',
-        Severity.notice,
-        [{
-          text: me.btnSubmit,
-          btnClass: 'btn',
-          name: 'ok',
-          trigger: function() {
-            var url = $modal.find('input.online-media-url').val();
-            if (url) {
-              $modal.modal('hide');
-              me.addOnlineMedia(url);
-            }
-          }
-        }]
-      );
-
-      $modal.on('shown.bs.modal', function() {
-        // focus the input field
-        $(this).find('input.online-media-url').first().focus().on('keydown', function(e) {
-          if (e.keyCode === 13) {
-            $modal.find('button[name="ok"]').trigger('click');
-          }
-        });
-      });
-    };
-
-    return {triggerModal: me.triggerModal};
-  };
-
-  $(document).on('click', '.t3js-online-media-add-btn', function(evt) {
-    evt.preventDefault();
-    var $this = $(this),
-      onlineMediaPlugin = $this.data('OnlineMediaPlugin');
-    if (!onlineMediaPlugin) {
-      $this.data('OnlineMediaPlugin', (onlineMediaPlugin = new OnlineMediaPlugin(this)));
-    }
-    onlineMediaPlugin.triggerModal();
-  });
-
-});
+define(["require","exports","./Enum/KeyTypes","jquery","nprogress","./Modal","./Severity"],function(e,t,n,o,i,r,a){"use strict";return new(function(){function e(){var e=this;o(function(){e.registerEvents()})}return e.prototype.registerEvents=function(){var e=this;o(document).on("click",".t3js-online-media-add-btn",function(t){e.triggerModal(o(t.currentTarget))})},e.prototype.addOnlineMedia=function(e,t){var n=e.data("target-folder"),l=e.data("online-media-allowed"),d=e.data("file-irre-object");i.start(),o.post(TYPO3.settings.ajaxUrls.online_media_create,{url:t,targetFolder:n,allowed:l},function(e){if(e.file)window.inline.delayedImportElement(d,"sys_file",e.file,"file");else var t=r.confirm("ERROR",e.error,a.error,[{text:TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+a.getCssClass(a.error),name:"ok",active:!0}]).on("confirm.button.ok",function(){t.modal("hide")});i.done()})},e.prototype.triggerModal=function(e){var t=this,i=e.data("data-btn-submit")||"Add",l=e.data("placeholder")||"Paste media url here...",d=o.map(e.data("online-media-allowed").split(","),function(e){return'<span class="label label-success">'+e.toUpperCase()+"</span>"}),s=e.data("online-media-allowed-help-text")||"Allow to embed from sources:",c=r.show(e.attr("title"),'<div class="form-control-wrap"><input type="text" class="form-control online-media-url" placeholder="'+l+'" /></div><div class="help-block">'+s+"<br>"+d.join(" ")+"</div>",a.notice,[{text:i,btnClass:"btn btn-primary",name:"ok",trigger:function(){var n=c.find("input.online-media-url").val();n&&(c.modal("hide"),t.addOnlineMedia(e,n))}}]);c.on("shown.bs.modal",function(e){o(e.currentTarget).find("input.online-media-url").first().focus().on("keydown",function(e){e.keyCode===n.KeyTypesEnum.ENTER&&c.find('button[name="ok"]').trigger("click")})})},e}())});
\ No newline at end of file