diff --git a/Build/types/TYPO3/index.d.ts b/Build/types/TYPO3/index.d.ts index fa9e06afdbe8..bbf3a4976161 100644 --- a/Build/types/TYPO3/index.d.ts +++ b/Build/types/TYPO3/index.d.ts @@ -6,6 +6,7 @@ */ declare namespace TYPO3 { export let DebugConsole: any; + export let Icons: any; export let InfoWindow: any; export let Popover: any; export let ShortcutMenu: any; diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/Icons.ts b/typo3/sysext/backend/Resources/Private/TypeScript/Icons.ts new file mode 100644 index 000000000000..675772cdd8f1 --- /dev/null +++ b/typo3/sysext/backend/Resources/Private/TypeScript/Icons.ts @@ -0,0 +1,170 @@ +/* + * 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 * as $ from 'jquery'; + +enum Sizes { + small = 'small', + default = 'default', + large = 'large', + overlay = 'overlay' +} + +enum States { + default = 'default', + disabled = 'disabled' +} + +enum MarkupIdentifiers { + default = 'default', + inline = 'inline' +} + +interface Cache { + [key: string]: JQueryPromise; +} + +/** + * Module: TYPO3/CMS/Backend/Icons + * Uses the icon API of the core to fetch icons via AJAX. + */ +class Icons { + public readonly sizes: any = Sizes; + public readonly states: any = States; + public readonly markupIdentifiers: any = MarkupIdentifiers; + private readonly cache: Cache = {}; + + /** + * Get the icon by its identifier + * + * @param {string} identifier + * @param {Sizes} size + * @param {string} overlayIdentifier + * @param {string} state + * @param {MarkupIdentifiers} markupIdentifier + * @returns {JQueryPromise} + */ + public getIcon(identifier: string, + size: Sizes, + overlayIdentifier: string, + state: string, + markupIdentifier: MarkupIdentifiers): JQueryPromise { + return $.when(this.fetch(identifier, size, overlayIdentifier, state, markupIdentifier)); + } + + /** + * Performs the AJAX request to fetch the icon + * + * @param {string} identifier + * @param {Sizes} size + * @param {string} overlayIdentifier + * @param {string} state + * @param {MarkupIdentifiers} markupIdentifier + * @returns {JQueryPromise} + */ + public fetch(identifier: string, + size: Sizes, + overlayIdentifier: string, + state: string, + markupIdentifier: MarkupIdentifiers): JQueryPromise { + /** + * Icon keys: + * + * 0: identifier + * 1: size + * 2: overlayIdentifier + * 3: state + * 4: markupIdentifier + */ + size = size || Sizes.default; + state = state || States.default; + markupIdentifier = markupIdentifier || MarkupIdentifiers.default; + + const icon = [identifier, size, overlayIdentifier, state, markupIdentifier]; + const cacheIdentifier = icon.join('_'); + + if (!this.isCached(cacheIdentifier)) { + this.putInCache(cacheIdentifier, $.ajax({ + url: TYPO3.settings.ajaxUrls.icons, + dataType: 'html', + data: { + icon: JSON.stringify(icon) + }, + success: (markup: string) => { + return markup; + } + }).promise()); + } + return this.getFromCache(cacheIdentifier).done(); + } + + /** + * Check whether icon was fetched already + * + * @param {string} cacheIdentifier + * @returns {boolean} + */ + private isCached(cacheIdentifier: string): boolean { + return typeof this.cache[cacheIdentifier] !== 'undefined'; + } + + /** + * Get icon from cache + * + * @param {string} cacheIdentifier + * @returns {JQueryPromise} + */ + private getFromCache(cacheIdentifier: string): JQueryPromise { + return this.cache[cacheIdentifier]; + } + + /** + * Put icon into cache + * + * @param {string} cacheIdentifier + * @param {JQueryPromise} markup + */ + private putInCache(cacheIdentifier: string, markup: JQueryPromise): void { + this.cache[cacheIdentifier] = markup; + } +} + +let iconsObject: Icons; +try { + // fetch from opening window + if (window.opener && window.opener.TYPO3 && window.opener.TYPO3.Icons) { + iconsObject = window.opener.TYPO3.Icons; + } + + // fetch from parent + if (parent && parent.window.TYPO3 && parent.window.TYPO3.Icons) { + iconsObject = parent.window.TYPO3.Icons; + } + + // fetch object from outer frame + if (top && top.TYPO3.Icons) { + iconsObject = top.TYPO3.Icons; + } +} 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 (!iconsObject) { + iconsObject = new Icons(); + TYPO3.Icons = iconsObject; +} + +export = iconsObject; diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js b/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js index 5df4ef5b271c..83f131b11762 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js @@ -6,155 +6,8 @@ * of the License, or any later version. * * For the full copyright and license information, please read the - * LICENSE.txt file that was distributed with DocumentHeader source code. + * LICENSE.txt file that was distributed with this source code. * * The TYPO3 project - inspiring people to share! */ - -/** - * Module: TYPO3/CMS/Backend/Icons - * Uses the icon API of the core to fetch icons via AJAX. - */ -define(['jquery'], function($) { - 'use strict'; - - try { - // fetch from opening window - if (window.opener && window.opener.TYPO3 && window.opener.TYPO3.Icons) { - return window.opener.TYPO3.Icons; - } - - // fetch from parent - if (parent && parent.window.TYPO3 && parent.window.TYPO3.Icons) { - return parent.window.TYPO3.Icons; - } - - // fetch object from outer frame - if (top && top.TYPO3.Icons) { - return top.TYPO3.Icons; - } - } 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. - } - - /** - * - * @type {{cache: {}, sizes: {small: string, default: string, large: string, overlay: string}, states: {default: string, disabled: string}}} - * @exports TYPO3/CMS/Backend/Icons - */ - var Icons = { - cache: {}, - sizes: { - small: 'small', - default: 'default', - large: 'large', - overlay: 'overlay' - }, - states: { - default: 'default', - disabled: 'disabled' - }, - markupIdentifiers: { - default: 'default', - inline: 'inline' - } - }; - - /** - * Get the icon by its identifier. - * - * @param {String} identifier - * @param {String} size - * @param {String} overlayIdentifier - * @param {String} state - * @param {String} markupIdentifier - * @return {Promise} - */ - Icons.getIcon = function(identifier, size, overlayIdentifier, state, markupIdentifier) { - return $.when(Icons.fetch(identifier, size, overlayIdentifier, state, markupIdentifier)); - }; - - /** - * Performs the AJAX request to fetch the icon. - * - * @param {string} identifier - * @param {string} size - * @param {string} overlayIdentifier - * @param {string} state - * @param {string} markupIdentifier - * @return {String|Promise} - * @private - */ - Icons.fetch = function(identifier, size, overlayIdentifier, state, markupIdentifier) { - /** - * Icon keys: - * - * 0: identifier - * 1: size - * 2: overlayIdentifier - * 3: state - * 4: markupIdentifier - */ - size = size || Icons.sizes.default; - state = state || Icons.states.default; - markupIdentifier = markupIdentifier || Icons.markupIdentifiers.default; - - var icon = [identifier, size, overlayIdentifier, state, markupIdentifier], - cacheIdentifier = icon.join('_'); - - if (!Icons.isCached(cacheIdentifier)) { - Icons.putInCache(cacheIdentifier, $.ajax({ - url: TYPO3.settings.ajaxUrls['icons'], - dataType: 'html', - data: { - icon: JSON.stringify(icon) - }, - success: function(markup) { - return markup; - } - }).promise()); - } - return Icons.getFromCache(cacheIdentifier).done(); - }; - - /** - * Check whether icon was fetched already - * - * @param {String} cacheIdentifier - * @returns {Boolean} - * @private - */ - Icons.isCached = function(cacheIdentifier) { - return typeof Icons.cache[cacheIdentifier] !== 'undefined'; - }; - - /** - * Get icon from cache - * - * @param {String} cacheIdentifier - * @returns {String} - * @private - */ - Icons.getFromCache = function(cacheIdentifier) { - return Icons.cache[cacheIdentifier]; - }; - - /** - * Put icon into cache - * - * @param {String} cacheIdentifier - * @param {Object} markup - * @private - */ - Icons.putInCache = function(cacheIdentifier, markup) { - Icons.cache[cacheIdentifier] = markup; - }; - - // attach to global frame - TYPO3.Icons = Icons; - - return Icons; -}); +define(["require","exports","jquery"],function(a,b,c){"use strict";var d;!function(a){a.small="small",a.default="default",a.large="large",a.overlay="overlay"}(d||(d={}));var e;!function(a){a.default="default",a.disabled="disabled"}(e||(e={}));var f;!function(a){a.default="default",a.inline="inline"}(f||(f={}));var g,h=function(){function a(){this.sizes=d,this.states=e,this.markupIdentifiers=f,this.cache={}}return a.prototype.getIcon=function(a,b,d,e,f){return c.when(this.fetch(a,b,d,e,f))},a.prototype.fetch=function(a,b,g,h,i){b=b||d.default,h=h||e.default,i=i||f.default;var j=[a,b,g,h,i],k=j.join("_");return this.isCached(k)||this.putInCache(k,c.ajax({url:TYPO3.settings.ajaxUrls.icons,dataType:"html",data:{icon:JSON.stringify(j)},success:function(a){return a}}).promise()),this.getFromCache(k).done()},a.prototype.isCached=function(a){return"undefined"!=typeof this.cache[a]},a.prototype.getFromCache=function(a){return this.cache[a]},a.prototype.putInCache=function(a,b){this.cache[a]=b},a}();try{window.opener&&window.opener.TYPO3&&window.opener.TYPO3.Icons&&(g=window.opener.TYPO3.Icons),parent&&parent.window.TYPO3&&parent.window.TYPO3.Icons&&(g=parent.window.TYPO3.Icons),top&&top.TYPO3.Icons&&(g=top.TYPO3.Icons)}catch(a){}return g||(g=new h,TYPO3.Icons=g),g}); \ No newline at end of file