Commit 2055afda authored by Frank Nägler's avatar Frank Nägler Committed by Anja Leichsenring
Browse files

[TASK] Migrate TYPO3/CMS/Opendocs/OpendocsMenu to TypeScript

Resolves: #87703
Releases: master
Change-Id: Ie44d5feae31b8c4cf64c621d12a42d6f7e6d574e
Reviewed-on: https://review.typo3.org/c/59692


Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
parent 5fc2a238
......@@ -13,6 +13,7 @@ declare namespace TYPO3 {
export let ModuleMenu: any;
export let Notification: any;
export let Modal: any;
export let OpendocsMenu: any;
export let Popover: any;
export let Severity: any;
export let ShortcutMenu: any;
......
......@@ -185,7 +185,8 @@ class OpendocsToolbarItem implements ToolbarItemInterface
$pid = (int)$document[3]['uid'];
}
$result['onClickCode'] = 'jump(' . GeneralUtility::quoteJSvalue($uri) . ', \'web_list\', \'web\', ' . $pid . '); TYPO3.OpendocsMenu.toggleMenu(); return false;';
$result['pid'] = $pid;
$result['uri'] = $uri;
$result['md5sum'] = $identifier;
return $result;
......
......@@ -24,8 +24,7 @@
<core:iconForRecord table="{openDocument.table}" row="{openDocument.record}"/>
</div>
<div class="dropdown-table-column dropdown-table-title">
<a class="dropdown-table-title-ellipsis" href="#" onclick="{openDocument.onClickCode}"
target="contentIframe">
<a class="dropdown-table-title-ellipsis t3js-open-doc" data-pid="{openDocument.pid}" href="{openDocument.uri}">
{openDocument.label}
</a>
</div>
......@@ -52,8 +51,7 @@
<core:iconForRecord table="{recentDocument.table}" row="{recentDocument.record}"/>
</div>
<div class="dropdown-table-column dropdown-table-title">
<a class="dropdown-table-title-ellipsis" href="#" onclick="{recentDocument.onClickCode}"
target="contentIframe">
<a class="dropdown-table-title-ellipsis t3js-open-doc" data-pid="{recentDocument.pid}" href="{recentDocument.uri}" >
{recentDocument.label}
</a>
</div>
......
/*
* 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';
import Icons = require('TYPO3/CMS/Backend/Icons');
import Viewport = require('TYPO3/CMS/Backend/Viewport');
enum Selectors {
containerSelector = '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
closeSelector = '.t3js-topbar-opendocs-close',
menuContainerSelector = '.dropdown-menu',
toolbarIconSelector = '.toolbar-item-icon .t3js-icon',
openDocumentsItemsSelector = '.t3js-topbar-opendocs-item',
counterSelector = '#tx-opendocs-counter',
entrySelector = '.t3js-open-doc',
}
/**
* Module: TYPO3/CMS/Opendocs/OpendocsMenu
* main JS part taking care of
* - navigating to the documents
* - updating the menu
*/
class OpendocsMenu {
private readonly hashDataAttributeName: string = 'opendocsidentifier';
/**
* Updates the number of open documents in the toolbar according to the
* number of items in the menu bar.
*/
private static updateNumberOfDocs(): void {
const num: number = $(Selectors.containerSelector).find(Selectors.openDocumentsItemsSelector).length;
$(Selectors.counterSelector).text(num).toggle(num > 0);
}
constructor() {
Viewport.Topbar.Toolbar.registerEvent((): void => {
this.initializeEvents();
this.updateMenu();
});
}
/**
* Displays the menu and does the AJAX call to the TYPO3 backend
*/
public updateMenu(): void {
let $toolbarItemIcon = $(Selectors.toolbarIconSelector, Selectors.containerSelector);
let $existingIcon = $toolbarItemIcon.clone();
Icons.getIcon('spinner-circle-light', Icons.sizes.small).done((spinner: string): void => {
$toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
url: TYPO3.settings.ajaxUrls.opendocs_menu,
type: 'post',
cache: false,
success: (data: string) => {
$(Selectors.containerSelector).find(Selectors.menuContainerSelector).html(data);
OpendocsMenu.updateNumberOfDocs();
$(Selectors.toolbarIconSelector, Selectors.containerSelector).replaceWith($existingIcon);
}
});
}
private initializeEvents(): void {
// send a request when removing an opendoc
$(Selectors.containerSelector).on('click', Selectors.closeSelector, (evt: JQueryEventObject): void => {
evt.preventDefault();
const md5 = $(evt.currentTarget).data(this.hashDataAttributeName);
if (md5) {
this.closeDocument(md5);
}
}).on('click', Selectors.entrySelector, (evt: JQueryEventObject): void => {
evt.preventDefault();
const $entry = $(evt.currentTarget);
this.toggleMenu();
window.jump($entry.attr('href'), 'web_list', 'web', $entry.data('pid'));
});
}
/**
* Closes an open document
*/
private closeDocument(md5sum: string): void {
$.ajax({
url: TYPO3.settings.ajaxUrls.opendocs_closedoc,
type: 'post',
cache: false,
data: {
md5sum: md5sum
},
success: (data: string): void => {
$(Selectors.menuContainerSelector, Selectors.containerSelector).html(data);
OpendocsMenu.updateNumberOfDocs();
// Re-open the menu after closing a document
$(Selectors.containerSelector).toggleClass('open');
}
});
}
/**
* closes the menu (e.g. when clicked on an item)
*/
private toggleMenu = (): void => {
$('.scaffold').removeClass('scaffold-toolbar-expanded');
$(Selectors.containerSelector).toggleClass('open');
}
}
let opendocsMenuObject: OpendocsMenu;
opendocsMenuObject = new OpendocsMenu();
if (typeof TYPO3 !== 'undefined') {
TYPO3.OpendocsMenu = opendocsMenuObject;
}
export = opendocsMenuObject;
......@@ -10,120 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
/**
* Module: TYPO3/CMS/Opendocs/OpendocsMenu
* main JS part taking care of
* - navigating to the documents
* - updating the menu
*/
define([
'jquery',
'TYPO3/CMS/Backend/Icons',
'TYPO3/CMS/Backend/Viewport'
], function($, Icons, Viewport) {
'use strict';
/**
*
* @type {{options: {containerSelector: string, hashDataAttributeName: string, closeSelector: string, menuContainerSelector: string, toolbarIconSelector: string, openDocumentsItemsSelector: string, counterSelector: string}}}
* @exports TYPO3/CMS/Opendocs/OpendocsMenu
*/
var OpendocsMenu = {
options: {
containerSelector: '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
hashDataAttributeName: 'opendocsidentifier',
closeSelector: '.t3js-topbar-opendocs-close',
menuContainerSelector: '.dropdown-menu',
toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
openDocumentsItemsSelector: '.t3js-topbar-opendocs-item',
counterSelector: '#tx-opendocs-counter'
}
};
/**
* register event handlers
*/
OpendocsMenu.initializeEvents = function() {
// send a request when removing an opendoc
$(OpendocsMenu.options.containerSelector).on('click', OpendocsMenu.options.closeSelector, function(evt) {
evt.preventDefault();
var md5 = $(this).data(OpendocsMenu.options.hashDataAttributeName);
if (md5) {
OpendocsMenu.closeDocument(md5);
}
});
};
/**
* Displays the menu and does the AJAX call to the TYPO3 backend
*/
OpendocsMenu.updateMenu = function() {
var $toolbarItemIcon = $(OpendocsMenu.options.toolbarIconSelector, OpendocsMenu.options.containerSelector),
$existingIcon = $toolbarItemIcon.clone();
Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
$toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
url: TYPO3.settings.ajaxUrls['opendocs_menu'],
type: 'post',
cache: false,
success: function(data) {
$(OpendocsMenu.options.containerSelector).find(OpendocsMenu.options.menuContainerSelector).html(data);
OpendocsMenu.updateNumberOfDocs();
$(OpendocsMenu.options.toolbarIconSelector, OpendocsMenu.options.containerSelector).replaceWith($existingIcon);
}
});
};
/**
* Updates the number of open documents in the toolbar according to the
* number of items in the menu bar.
*/
OpendocsMenu.updateNumberOfDocs = function() {
var num = $(OpendocsMenu.options.containerSelector).find(OpendocsMenu.options.openDocumentsItemsSelector).length;
$(OpendocsMenu.options.counterSelector).text(num).toggle(num > 0);
};
/**
* Closes an open document
*
* @param {String} md5sum
*/
OpendocsMenu.closeDocument = function(md5sum) {
$.ajax({
url: TYPO3.settings.ajaxUrls['opendocs_closedoc'],
type: 'post',
cache: false,
data: {
md5sum: md5sum
},
success: function(data) {
$(OpendocsMenu.options.menuContainerSelector, OpendocsMenu.options.containerSelector).html(data);
OpendocsMenu.updateNumberOfDocs();
// Re-open the menu after closing a document
$(OpendocsMenu.options.containerSelector).toggleClass('open');
}
});
};
/**
* closes the menu (e.g. when clicked on an item)
*/
OpendocsMenu.toggleMenu = function() {
$('.scaffold').removeClass('scaffold-toolbar-expanded');
$(OpendocsMenu.options.containerSelector).toggleClass('open');
};
Viewport.Topbar.Toolbar.registerEvent(function() {
OpendocsMenu.initializeEvents();
OpendocsMenu.updateMenu();
});
// expose to global
TYPO3.OpendocsMenu = OpendocsMenu;
return OpendocsMenu;
});
define(["require","exports","jquery","TYPO3/CMS/Backend/Icons","TYPO3/CMS/Backend/Viewport"],function(e,t,o,n,c){"use strict";var r,a,i;return(a=r||(r={})).containerSelector="#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem",a.closeSelector=".t3js-topbar-opendocs-close",a.menuContainerSelector=".dropdown-menu",a.toolbarIconSelector=".toolbar-item-icon .t3js-icon",a.openDocumentsItemsSelector=".t3js-topbar-opendocs-item",a.counterSelector="#tx-opendocs-counter",a.entrySelector=".t3js-open-doc",i=new(function(){function e(){var e=this;this.hashDataAttributeName="opendocsidentifier",this.toggleMenu=function(){o(".scaffold").removeClass("scaffold-toolbar-expanded"),o(r.containerSelector).toggleClass("open")},c.Topbar.Toolbar.registerEvent(function(){e.initializeEvents(),e.updateMenu()})}return e.updateNumberOfDocs=function(){var e=o(r.containerSelector).find(r.openDocumentsItemsSelector).length;o(r.counterSelector).text(e).toggle(e>0)},e.prototype.updateMenu=function(){var t=o(r.toolbarIconSelector,r.containerSelector),c=t.clone();n.getIcon("spinner-circle-light",n.sizes.small).done(function(e){t.replaceWith(e)}),o.ajax({url:TYPO3.settings.ajaxUrls.opendocs_menu,type:"post",cache:!1,success:function(t){o(r.containerSelector).find(r.menuContainerSelector).html(t),e.updateNumberOfDocs(),o(r.toolbarIconSelector,r.containerSelector).replaceWith(c)}})},e.prototype.initializeEvents=function(){var e=this;o(r.containerSelector).on("click",r.closeSelector,function(t){t.preventDefault();var n=o(t.currentTarget).data(e.hashDataAttributeName);n&&e.closeDocument(n)}).on("click",r.entrySelector,function(t){t.preventDefault();var n=o(t.currentTarget);e.toggleMenu(),window.jump(n.attr("href"),"web_list","web",n.data("pid"))})},e.prototype.closeDocument=function(t){o.ajax({url:TYPO3.settings.ajaxUrls.opendocs_closedoc,type:"post",cache:!1,data:{md5sum:t},success:function(t){o(r.menuContainerSelector,r.containerSelector).html(t),e.updateNumberOfDocs(),o(r.containerSelector).toggleClass("open")}})},e}()),"undefined"!=typeof TYPO3&&(TYPO3.OpendocsMenu=i),i});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment