From c7806eef633de919742643d930945863ac2ea057 Mon Sep 17 00:00:00 2001 From: Andreas Fernandez Date: Wed, 28 Feb 2018 21:40:03 +0100 Subject: [PATCH] [TASK] Migrate OnlineMedia to TypeScript Resolves: #82600 Releases: master Change-Id: Ie7b86399f0a75706b1072a3c41e162ab2992a8b0 Reviewed-on: https://review.typo3.org/55954 Tested-by: TYPO3com Reviewed-by: Frank Naegler Tested-by: Frank Naegler Reviewed-by: Christian Kuhn Tested-by: Christian Kuhn --- .../Private/TypeScript/OnlineMedia.ts | 124 ++++++++++++++++++ .../Public/JavaScript/OnlineMedia.js | 121 +---------------- 2 files changed, 125 insertions(+), 120 deletions(-) create mode 100644 typo3/sysext/backend/Resources/Private/TypeScript/OnlineMedia.ts diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/OnlineMedia.ts b/typo3/sysext/backend/Resources/Private/TypeScript/OnlineMedia.ts new file mode 100644 index 000000000000..90b814bde0f5 --- /dev/null +++ b/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 '' + ext.toUpperCase() + ''; + }); + const allowedHelpText = $currentTarget.data('online-media-allowed-help-text') || 'Allow to embed from sources:'; + const $modal = Modal.show( + $currentTarget.attr('title'), + '
' + + '' + + '
' + allowedHelpText + '
' + allowedExtMarkup.join(' ') + '
', + 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(); diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/OnlineMedia.js b/typo3/sysext/backend/Resources/Public/JavaScript/OnlineMedia.js index c9d305139116..0ed95dca9146 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/OnlineMedia.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/OnlineMedia.js @@ -10,123 +10,4 @@ * * 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 '' + ext.toUpperCase() + ''; - }); - var $modal = Modal.show( - me.$btn.attr('title'), - '
' + - '' + - '
' + me.allowedHelpText + '
' + allowedExtMarkup.join(' ') + '
', - 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''+e.toUpperCase()+""}),s=e.data("online-media-allowed-help-text")||"Allow to embed from sources:",c=r.show(e.attr("title"),'
'+s+"
"+d.join(" ")+"
",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