typo3-typescript-sources 13.4.20

package/filelist/file-delete.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { SeverityEnum } from '@typo3/backend/enum/severity';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DocumentService from '@typo3/core/document-service';
+import Modal from '@typo3/backend/modal';
+
+/**
+ * Module: @typo3/filelist/file-delete
+ * @exports @typo3/filelist/file-delete
+ */
+class FileDelete {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      new RegularEvent('click', (e: Event, eventTarget: HTMLElement): void => {
+        e.preventDefault();
+        let redirectUrl = eventTarget.dataset.redirectUrl;
+        redirectUrl = (redirectUrl)
+          ? encodeURIComponent(redirectUrl)
+          : encodeURIComponent(top.list_frame.document.location.pathname + top.list_frame.document.location.search);
+
+        const identifier = eventTarget.dataset.filelistDeleteIdentifier;
+        const deleteType = eventTarget.dataset.filelistDeleteType;
+        const deleteUrl = eventTarget.dataset.filelistDeleteUrl + '&data[delete][0][data]=' + encodeURIComponent(identifier);
+        const target = deleteUrl + '&data[delete][0][redirect]=' + redirectUrl;
+        if (eventTarget.dataset.filelistDeleteCheck) {
+          const modal = Modal.confirm(eventTarget.dataset.title, eventTarget.dataset.bsContent, SeverityEnum.warning, [
+            {
+              text: TYPO3.lang['buttons.confirm.delete_file.no'] || 'Cancel',
+              active: true,
+              btnClass: 'btn-default',
+              name: 'no',
+            },
+            {
+              text: TYPO3.lang['buttons.confirm.' + deleteType + '.yes'] || 'Yes, delete this file or folder',
+              btnClass: 'btn-warning',
+              name: 'yes',
+            },
+          ]);
+          modal.addEventListener('button.clicked', (evt: Event): void => {
+            const element = evt.target as HTMLButtonElement;
+            const name = element.name;
+            if (name === 'no') {
+              modal.hideModal();
+            } else if (name === 'yes') {
+              modal.hideModal();
+              top.list_frame.location.href = target;
+            }
+          });
+        } else {
+          top.list_frame.location.href = target;
+        }
+      }).delegateTo(document, '[data-filelist-delete="true"]');
+    });
+  }
+}
+
+export default new FileDelete();

package/filelist/file-list-actions.ts

@@ -0,0 +1,132 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+
+export interface FileListActionDetail {
+  event: Event;
+  action: string;
+  resources: [ResourceInterface, ...ResourceInterface[]];
+  trigger: HTMLElement | null;
+  url: string | null;
+  originalAction: string | null;
+}
+
+export enum FileListActionEvent {
+  primary = 'typo3:filelist:resource:action:primary',
+  primaryContextmenu = 'typo3:filelist:resource:action:primaryContextmenu',
+  show = 'typo3:filelist:resource:action:show',
+  rename = 'typo3:filelist:resource:action:rename',
+  select = 'typo3:filelist:resource:action:select',
+  download = 'typo3:filelist:resource:action:download',
+  updateOnlineMedia = 'typo3:filelist:resource:action:updateOnlineMedia',
+}
+
+export enum FileListActionSelector {
+  elementSelector = '[data-filelist-element]',
+  actionSelector = '[data-filelist-action]',
+}
+
+export class FileListActionUtility {
+  public static createResourceFromContextDataset(dataset: DOMStringMap): ResourceInterface {
+    const resource: ResourceInterface = {
+      type: dataset.filecontextType,
+      identifier: dataset.filecontextIdentifier,
+      name: dataset.filecontextName,
+      hasPreview: false,
+      uid: dataset.filecontextUid ? parseInt(dataset.filecontextUid, 10) : null,
+      metaUid: dataset.filecontextMetaUid ? parseInt(dataset.filecontextMetaUid, 10) : null,
+      url: dataset.filecontextUid ? dataset.url : null,
+    };
+
+    return resource;
+  }
+
+  public static getResourceForElement(element: HTMLElement): ResourceInterface
+  {
+    const resource: ResourceInterface = {
+      type: element.dataset.filelistType,
+      identifier: element.dataset.filelistIdentifier,
+      name: element.dataset.filelistName,
+      hasPreview: 'filelistPreview' in element.dataset && element.dataset.filelistPreview.trim() === 'true',
+      uid: element.dataset.filelistUid ? parseInt(element.dataset.filelistUid, 10) : null,
+      metaUid: element.dataset.filelistMetaUid ? parseInt(element.dataset.filelistMetaUid, 10) : null,
+      url: element.dataset.filelistUid ? element.dataset.filelistUrl : null,
+    };
+
+    return resource;
+  }
+}
+
+class FileListActions {
+  constructor() {
+    new RegularEvent('contextmenu', (event: Event, target: HTMLElement): void => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+
+      const detail: FileListActionDetail = this.getActionDetail(event, target);
+      switch (detail.action) {
+        case 'primary':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.primaryContextmenu, { detail: detail }));
+          break;
+        default:
+          break;
+      }
+    }).delegateTo(document, FileListActionSelector.actionSelector);
+
+    new RegularEvent('click', (event: Event, target: HTMLElement): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = this.getActionDetail(event, target);
+      switch (detail.action) {
+        case 'primary':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.primary, { detail: detail }));
+          break;
+        case 'show':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.show, { detail: detail }));
+          break;
+        case 'select':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.select, { detail: detail }));
+          break;
+        case 'rename':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.rename, { detail: detail }));
+          break;
+        case 'download':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.download, { detail: detail }));
+          break;
+        case 'updateOnlineMedia':
+          document.dispatchEvent(new CustomEvent(FileListActionEvent.updateOnlineMedia, { detail: detail }));
+          break;
+        default:
+          break;
+      }
+    }).delegateTo(document, FileListActionSelector.actionSelector);
+  }
+
+  private getActionDetail(event: Event, target: HTMLElement): FileListActionDetail {
+    const action = target.dataset.filelistAction;
+    const element = target.closest(FileListActionSelector.elementSelector) as HTMLElement;
+    const resource = FileListActionUtility.getResourceForElement(element);
+    const detail: FileListActionDetail = {
+      event: event,
+      trigger: target,
+      action: action,
+      resources: [resource],
+      url: target.dataset.filelistActionUrl ?? null,
+      originalAction: null
+    };
+    return detail;
+  }
+}
+
+export default new FileListActions();

package/filelist/file-list-dragdrop.ts

@@ -0,0 +1,139 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+import { MultiRecordSelectionSelectors } from '@typo3/backend/multi-record-selection';
+import { FileListActionSelector, FileListActionUtility } from '@typo3/filelist/file-list-actions';
+import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';
+import type { DragTooltipMetadata, DragDropThumbnail } from '@typo3/backend/drag-tooltip';
+
+export interface FileListDragDropDetail {
+  action: string;
+  resources: ResourceInterface[];
+  target: ResourceInterface;
+}
+
+export enum FileListDragDropEvent {
+  transfer = 'typo3:filelist:resource:dragdrop:transfer',
+}
+
+class FileListDragDrop {
+  private readonly previewSize: number = 32;
+
+  constructor() {
+    const selector = FileListActionSelector.elementSelector + '[draggable="true"]';
+
+    new RegularEvent('dragstart', (event: DragEvent, target: HTMLElement): void => {
+      const selectedItems: ResourceInterface[] = [];
+      let icon = '';
+      let label = '';
+
+      const checkedItems = document.querySelectorAll(MultiRecordSelectionSelectors.checkboxSelector + ':checked') as NodeListOf<HTMLInputElement>;
+      if (checkedItems.length) {
+        checkedItems.forEach((checkbox: HTMLInputElement) => {
+          if (checkbox.checked) {
+            const element = checkbox.closest(FileListActionSelector.elementSelector) as HTMLInputElement;
+            element.dataset.filelistDragdropTransferItem = 'true';
+            const resource = FileListActionUtility.getResourceForElement(element);
+            selectedItems.push(resource);
+            label = element.dataset.filelistName;
+            icon = element.dataset.filelistIcon;
+          }
+        });
+      } else {
+        const element = target.closest(FileListActionSelector.elementSelector) as HTMLElement;
+        element.dataset.filelistDragdropTransferItem = 'true';
+        const resource = FileListActionUtility.getResourceForElement(element);
+        selectedItems.push(resource);
+        label = element.dataset.filelistName;
+        icon = element.dataset.filelistIcon;
+      }
+
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData(DataTransferTypes.falResources, JSON.stringify(selectedItems));
+
+      const metadata: DragTooltipMetadata = {
+        tooltipIconIdentifier: selectedItems.length > 1 ? 'apps-clipboard-images' : icon,
+        tooltipLabel: selectedItems.length > 1 ? this.getPreviewLabel(selectedItems) : label,
+        thumbnails: this.getPreviewItems(selectedItems),
+      };
+      event.dataTransfer.setData(DataTransferTypes.dragTooltip, JSON.stringify(metadata));
+    }).delegateTo(document, selector);
+
+    new RegularEvent('dragover', (event: DragEvent, target: HTMLElement): void => {
+      const resource = FileListActionUtility.getResourceForElement(target);
+      if (this.isDropAllowedOnResoruce(resource)) {
+        event.dataTransfer.dropEffect = 'move';
+        event.preventDefault();
+        target.classList.add('success');
+      }
+    }, { capture: true }).delegateTo(document, selector);
+
+    new RegularEvent('drop', (event: DragEvent, target: HTMLElement): void => {
+      const detail: FileListDragDropDetail = {
+        action: 'transfer',
+        resources: JSON.parse(event.dataTransfer.getData(DataTransferTypes.falResources) ?? '{}'),
+        target: FileListActionUtility.getResourceForElement(target),
+      };
+      top.document.dispatchEvent(new CustomEvent(FileListDragDropEvent.transfer, { detail: detail }));
+    }, { capture: true, passive: true }).delegateTo(document, selector);
+
+    new RegularEvent('dragend', (/*event: DragEvent*/): void => {
+      this.reset();
+    }, { capture: true, passive: true }).delegateTo(document, selector);
+
+    new RegularEvent('dragleave', (event: DragEvent, target: HTMLElement): void => {
+      target.classList.remove('success');
+    }, { capture: true, passive: true }).delegateTo(document, selector);
+  }
+
+  private getPreviewItems(selectedItems: ResourceInterface[]): DragDropThumbnail[] {
+    return selectedItems
+      .filter((item: ResourceInterface): boolean => item.hasPreview)
+      .map((item: ResourceInterface) => {
+        const thumbnailUrl = new URL(top.TYPO3.settings.Resource.thumbnailUrl, window.origin);
+        thumbnailUrl.searchParams.set('identifier', item.uid.toString(10));
+
+        return {
+          src: thumbnailUrl.toString(),
+          width: this.previewSize,
+          height: this.previewSize,
+        };
+      });
+  }
+
+  private getPreviewLabel(selectedItems: ResourceInterface[]): string {
+    // Counter
+    const previewItems = selectedItems.filter((item: ResourceInterface): boolean => item.hasPreview);
+    const count = selectedItems.length - previewItems.length;
+    if (count > 0) {
+      return (previewItems.length > 0 ? '+' : '') + count.toString();
+    }
+    return '';
+  }
+
+  private reset(): void {
+    document.querySelectorAll(FileListActionSelector.elementSelector).forEach((element: HTMLElement) => {
+      delete element.dataset.filelistDragdropTransferItem;
+      element.classList.remove('success');
+    });
+  }
+
+  private isDropAllowedOnResoruce(resource: ResourceInterface): boolean {
+    const element = document.querySelector(FileListActionSelector.elementSelector + '[data-filelist-identifier="' + resource.identifier + '"]') as HTMLElement;
+    return !('filelistDragdropTransferItem' in element.dataset) && resource.type === 'folder';
+  }
+}
+
+export default new FileListDragDrop();

package/filelist/file-list-rename-handler.ts

@@ -0,0 +1,128 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+import { html, type TemplateResult } from 'lit';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+import { FileListActionEvent, type FileListActionDetail } from '@typo3/filelist/file-list-actions';
+import { default as Modal, type ModalElement } from '@typo3/backend/modal';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+import Viewport from '@typo3/backend/viewport';
+
+interface Message {
+  title: string;
+  message: string;
+}
+
+class FileListRenameHandler {
+  constructor() {
+
+    new RegularEvent(FileListActionEvent.rename, (event: CustomEvent): void => {
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      const modal = Modal.advanced({
+        title: TYPO3.lang['file_rename.title'] || 'Rename',
+        type: Modal.types.default,
+        size: Modal.sizes.small,
+        content: this.composeEditForm(resource),
+        buttons: [
+          {
+            text: TYPO3.lang['file_rename.button.cancel'] || 'Cancel',
+            btnClass: 'btn-default',
+            name: 'cancel',
+            trigger: (): void => {
+              modal.hideModal();
+            }
+          },
+          {
+            text: TYPO3.lang['file_rename.button.rename'] || 'Rename',
+            btnClass: 'btn-primary',
+            name: 'rename',
+            trigger: (): void => {
+              const form: HTMLFormElement = modal.querySelector('form');
+              form?.requestSubmit();
+            },
+          },
+        ],
+        callback: function (modal: ModalElement) {
+          const form = modal.querySelector('form');
+          form.addEventListener('submit', (event: SubmitEvent): void => {
+            event.preventDefault();
+            const formData = new FormData(event.target as HTMLFormElement);
+            const submittedData = Object.fromEntries(formData);
+            const resourceName = submittedData.name.toString();
+            if (detail.resources[0].name !== resourceName) {
+
+              const request = new AjaxRequest(TYPO3.settings.ajaxUrls.resource_rename);
+              request.post({
+                identifier: detail.resources[0].identifier,
+                resourceName: resourceName,
+              }).then(async (success: AjaxResponse): Promise<void> => {
+
+                const data = await success.resolve();
+                if (data.status.length > 0) {
+                  data.status.forEach((message: Message): void => {
+                    if (data.success) {
+                      Notification.success(message.title, message.message);
+                    } else {
+                      Notification.error(message.title, message.message);
+                    }
+                  });
+                }
+
+                if (data.resource?.type === 'folder') {
+                  const currentUrl = Viewport.ContentContainer.getUrl();
+                  const params = (new URL(currentUrl, window.location.origin)).searchParams;
+                  if (params.get('id') === data.origin.identifier) {
+                    Viewport.ContentContainer.setUrl(currentUrl + '&id=' + data.resource.identifier);
+                  } else {
+                    Viewport.ContentContainer.refresh();
+                  }
+                } else {
+                  Viewport.ContentContainer.refresh();
+                }
+
+                top.document.dispatchEvent(new CustomEvent('typo3:filestoragetree:refresh'));
+                modal.hideModal();
+
+              });
+            }
+          });
+
+          modal.addEventListener('typo3-modal-shown', (): void => {
+            form.querySelector('input')?.focus();
+          });
+        }
+      });
+
+    }).bindTo(document);
+  }
+
+  private composeEditForm(resource: ResourceInterface): TemplateResult {
+    const label = resource?.type === 'folder' ?
+      TYPO3.lang['folder_rename.label'] ?? 'New folder name' :
+      TYPO3.lang['file_rename.label'] ?? 'New filename';
+    return html`
+      <form>
+        <label class="form-label" for="rename_target">
+          ${label}
+        </label>
+        <input id="rename_target" name="name" class="form-control" value="${resource.name}" required>
+      </form>
+    `;
+  }
+}
+
+export default new FileListRenameHandler();

package/filelist/file-list-transfer-handler.ts

@@ -0,0 +1,138 @@
+/*
+ * 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 { SeverityEnum } from '@typo3/backend/enum/severity';
+import Modal from '@typo3/backend/modal';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Notification from '@typo3/backend/notification';
+import Viewport from '@typo3/backend/viewport';
+import { type FileListDragDropDetail, FileListDragDropEvent } from '@typo3/filelist/file-list-dragdrop';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+
+interface Message {
+  title: string;
+  message: string;
+  severity: number;
+}
+
+enum FileListTransferType {
+  move = 'move',
+  copy = 'copy',
+}
+
+interface FileListTransferOperation {
+  data: string;
+  target: string
+}
+
+class FileListTransferHandler {
+  constructor() {
+
+    new RegularEvent(FileListDragDropEvent.transfer, (event: CustomEvent): void => {
+      const detail: FileListDragDropDetail = event.detail;
+      const target = detail.target;
+      const resources = detail.resources;
+
+      let modalTitle;
+      let modalText;
+      if (detail.resources.length === 1) {
+        const resource = detail.resources[0];
+        modalTitle = TYPO3.lang['message.transfer_resource.title'];
+        modalText = TYPO3.lang['message.transfer_resource.text']
+          .replace('%s', resource.name)
+          .replace('%s', target.name);
+      } else {
+        modalTitle = TYPO3.lang['message.transfer_resources.title'];
+        modalText = TYPO3.lang['message.transfer_resources.text']
+          .replace('%d', resources.length.toString(10))
+          .replace('%s', target.name);
+      }
+
+      const modal = Modal.confirm(
+        modalTitle,
+        modalText,
+        SeverityEnum.notice,
+        [
+          {
+            text: TYPO3.lang['message.button.cancel'],
+            active: true,
+            btnClass: 'btn-default',
+            name: 'cancel',
+            trigger: (): void => {
+              modal.hideModal();
+            }
+          },
+          {
+            text: TYPO3.lang['message.button.copy'],
+            btnClass: 'btn-primary',
+            name: 'copy',
+            trigger: (): void => {
+              this.transfer(FileListTransferType.copy, resources, target);
+              modal.hideModal();
+            }
+          },
+          {
+            text: TYPO3.lang['message.button.move'],
+            btnClass: 'btn-primary',
+            name: 'move',
+            trigger: (): void => {
+              this.transfer(FileListTransferType.move, resources, target);
+              modal.hideModal();
+            }
+          }
+        ]
+      );
+    }).bindTo(top.document);
+  }
+
+  private transfer(type: FileListTransferType, resources: ResourceInterface[], target: ResourceInterface): void {
+    const payload: FileListTransferOperation[] = [];
+    resources.forEach((resource: ResourceInterface) => {
+      const operation: FileListTransferOperation = {
+        data: resource.identifier,
+        target: target.identifier,
+      };
+      payload.push(operation);
+    });
+    const params = { data: { [type]: payload } };
+
+    (new AjaxRequest(top.TYPO3.settings.ajaxUrls.file_process))
+      .post(params)
+      .then(async (response: AjaxResponse): Promise<void> => {
+        const data = await response.resolve();
+        this.handleMessages(data.messages ?? []);
+        Viewport.ContentContainer.refresh();
+        top.document.dispatchEvent(new CustomEvent('typo3:filestoragetree:refresh'));
+      })
+      .catch(async (response: AjaxResponse): Promise<void> => {
+        const data = await response.resolve();
+        this.handleMessages(data.messages ?? []);
+        Viewport.ContentContainer.refresh();
+        top.document.dispatchEvent(new CustomEvent('typo3:filestoragetree:refresh'));
+      });
+  }
+
+  private handleMessages(messages: Message[]): void {
+    messages.forEach((message: Message): void => {
+      Notification.showMessage(
+        message.title || '',
+        message.message || '',
+        message.severity
+      );
+    });
+  }
+}
+
+export default new FileListTransferHandler();