typo3-typescript-sources 13.4.20

package/workspaces/preview.ts

@@ -0,0 +1,232 @@
+/*
+ * 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 type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import DocumentService from '@typo3/core/document-service';
+import Modal from '@typo3/backend/modal';
+import Utility from '@typo3/backend/utility';
+import Workspaces from './workspaces';
+import ThrottleEvent from '@typo3/core/event/throttle-event';
+import '@typo3/workspaces/renderable/send-to-stage-form';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+enum Identifiers {
+  topbar = '.t3js-workspace-topbar',
+  stageSliderContainer = '.t3js-stage-slider-container',
+  stageSlider = '.t3js-stage-slider',
+  liveView = '.t3js-workspace-view-live',
+  workspaceView = '.t3js-workspace-view-workspace',
+  sendToStageAction = '[data-action="send-to-stage"]',
+  discardAction = '[data-action="discard"]',
+  stageButtonsContainer = '.t3js-stage-buttons',
+  previewModeContainer = '.t3js-preview-mode',
+  activePreviewMode = '.t3js-active-preview-mode',
+  workspacePreview = '.t3js-workspace-preview',
+}
+
+/**
+ * Loaded in "Frontend workspace preview". Contains JS for "Send to stage ..." / "Discard"
+ * buttons, preview mode selector, preview slider and so on.
+ */
+class Preview extends Workspaces {
+  private currentSlidePosition: number = 100;
+  private readonly elements: { [key: string]: HTMLElement } = {};
+
+  constructor() {
+    super();
+
+    DocumentService.ready().then((): void => {
+      this.getElements();
+      this.resizeViews();
+      this.registerEvents();
+      this.initStageButtons();
+    });
+  }
+
+  /**
+   * Fetches and stores often required elements
+   */
+  private getElements(): void {
+    this.elements.liveView = document.querySelector(Identifiers.liveView) as HTMLElement;
+    this.elements.stageSliderContainer = document.querySelector(Identifiers.stageSliderContainer) as HTMLElement;
+    this.elements.stageSlider = document.querySelector(Identifiers.stageSlider) as HTMLElement;
+    this.elements.workspaceView = document.querySelector(Identifiers.workspaceView) as HTMLElement;
+    this.elements.stageButtonsContainer = document.querySelector(Identifiers.stageButtonsContainer) as HTMLElement;
+    this.elements.previewModeContainer = document.querySelector(Identifiers.previewModeContainer) as HTMLElement;
+    this.elements.activePreviewMode = document.querySelector(Identifiers.activePreviewMode) as HTMLElement;
+    this.elements.workspacePreview = document.querySelector(Identifiers.workspacePreview) as HTMLElement;
+  }
+
+  /**
+   * Registers the events
+   */
+  private registerEvents(): void {
+    new ThrottleEvent('resize', (): void => {
+      this.resizeViews();
+    }, 50).bindTo(window);
+    new RegularEvent('click', this.renderDiscardWindow.bind(this)).delegateTo(document, Identifiers.discardAction);
+    new RegularEvent('click', this.renderSendPageToStageWindow.bind(this)).delegateTo(document, Identifiers.sendToStageAction);
+    new RegularEvent('click', () => {
+      window.top.document.querySelectorAll('.t3js-workspace-recipient:not([disabled])').forEach((element: HTMLInputElement) => {
+        element.checked = true;
+      });
+    }).delegateTo(document, '.t3js-workspace-recipients-selectall');
+    new RegularEvent('click', () => {
+      window.top.document.querySelectorAll('.t3js-workspace-recipient:not([disabled])').forEach((element: HTMLInputElement) => {
+        element.checked = false;
+      });
+    }).delegateTo(document, '.t3js-workspace-recipients-deselectall');
+
+    new ThrottleEvent('input', this.updateSlidePosition.bind(this), 10).bindTo(document.querySelector(Identifiers.stageSlider));
+    new RegularEvent('click', this.changePreviewMode.bind(this)).delegateTo(this.elements.previewModeContainer, '[data-preview-mode]');
+  }
+
+  private initStageButtons(): void {
+    this.sendRemoteRequest([
+      this.generateRemoteActionsPayload('updateStageChangeButtons', [TYPO3.settings.Workspaces.id]),
+    ], Identifiers.topbar).then(async (response: AjaxResponse): Promise<void> => {
+      this.renderStageButtons((await response.resolve())[0].result);
+    });
+  }
+
+  /**
+   * Renders the staging buttons
+   */
+  private renderStageButtons(buttons: string): void {
+    this.elements.stageButtonsContainer.innerHTML = buttons;
+  }
+
+  /**
+   * Updates the position of the comparison slider
+   */
+  private updateSlidePosition(e: Event): void {
+    this.currentSlidePosition = parseInt((e.target as HTMLInputElement).value, 10);
+    this.resizeViews();
+  }
+
+  /**
+   * Resize the views based on the current viewport height and slider position
+   */
+  private resizeViews(): void {
+    if (this.elements.activePreviewMode.dataset.activePreviewMode === 'slider') {
+      this.elements.liveView.style.height = (100 - this.currentSlidePosition) + '%';
+    }
+  }
+
+  /**
+   * Renders the discard window
+   */
+  private renderDiscardWindow(): void {
+    const modal = Modal.confirm(
+      TYPO3.lang['window.discardAll.title'],
+      TYPO3.lang['window.discardAll.message'],
+      SeverityEnum.warning,
+      [
+        {
+          text: TYPO3.lang.cancel,
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel',
+          trigger: (): void => {
+            modal.hideModal();
+          },
+        },
+        {
+          text: TYPO3.lang.ok,
+          btnClass: 'btn-warning',
+          name: 'ok',
+        },
+      ],
+    );
+    modal.addEventListener('button.clicked', (e: Event): void => {
+      if ((e.target as HTMLButtonElement).name === 'ok') {
+        this.sendRemoteRequest([
+          this.generateRemoteActionsPayload('discardStagesFromPage', [TYPO3.settings.Workspaces.id]),
+          this.generateRemoteActionsPayload('updateStageChangeButtons', [TYPO3.settings.Workspaces.id]),
+        ], Identifiers.topbar).then(async (response: AjaxResponse): Promise<void> => {
+          modal.hideModal();
+          this.renderStageButtons((await response.resolve())[1].result);
+          // Reloading live view IFRAME
+          this.elements.workspaceView.setAttribute('src', this.elements.workspaceView.getAttribute('src'));
+        });
+      }
+    });
+  }
+
+  /**
+   * Renders the "send page to stage" window
+   */
+  private renderSendPageToStageWindow(e: Event, target: HTMLElement): void {
+    const direction = target.dataset.direction;
+    let actionName;
+
+    if (direction === 'prev') {
+      actionName = 'sendPageToPreviousStage';
+    } else if (direction === 'next') {
+      actionName = 'sendPageToNextStage';
+    } else {
+      throw 'Invalid direction ' + direction + ' requested.';
+    }
+
+    this.sendRemoteRequest(
+      this.generateRemoteActionsPayload(actionName, [TYPO3.settings.Workspaces.id]),
+      Identifiers.topbar
+    ).then(async (response: AjaxResponse): Promise<void> => {
+      const resolvedResponse = await response.resolve();
+      const modal = this.renderSendToStageWindow(resolvedResponse);
+      modal.addEventListener('button.clicked', (modalEvent: Event): void => {
+        const modalTarget = modalEvent.target as HTMLButtonElement;
+        if (modalTarget.name === 'ok') {
+          const serializedForm = Utility.convertFormToObject(modal.querySelector('form'));
+          serializedForm.affects = resolvedResponse[0].result.affects;
+          serializedForm.stageId = parseInt(target.dataset.stageId, 10);
+
+          this.sendRemoteRequest([
+            this.generateRemoteActionsPayload('sentCollectionToStage', [serializedForm]),
+            this.generateRemoteActionsPayload('updateStageChangeButtons', [TYPO3.settings.Workspaces.id]),
+          ], Identifiers.topbar).then(async (updateResponse: AjaxResponse): Promise<void> => {
+            modal.hideModal();
+
+            this.renderStageButtons((await updateResponse.resolve())[1].result);
+          });
+        }
+      });
+    });
+  }
+
+  /**
+   * Changes the preview mode
+   */
+  private changePreviewMode(e: Event, target: HTMLElement): void {
+    e.preventDefault();
+
+    const currentPreviewMode = this.elements.activePreviewMode.dataset.activePreviewMode;
+    const newPreviewMode = target.dataset.previewMode;
+
+    this.elements.activePreviewMode.textContent = target.textContent;
+    this.elements.activePreviewMode.dataset.activePreviewMode = newPreviewMode;
+    this.elements.workspacePreview.classList.remove('typo3-workspace-preview-' + currentPreviewMode);
+    this.elements.workspacePreview.classList.add('typo3-workspace-preview-' + newPreviewMode);
+
+    if (newPreviewMode === 'slider') {
+      this.elements.stageSliderContainer.style.display = '';
+      this.resizeViews();
+    } else {
+      this.elements.stageSliderContainer.style.display = 'none';
+      this.elements.liveView.style.height = '';
+    }
+  }
+}
+
+export default new Preview();

package/workspaces/renderable/comment-view.ts

@@ -0,0 +1,79 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { nl2br } from '@typo3/core/directive/nl2br';
+
+type Comment = {
+  user_comment: string;
+  previous_stage_title: string;
+  stage_title: string;
+  tstamp: number;
+  user_username: string;
+  user_avatar: string
+};
+
+@customElement('typo3-workspaces-comment-view')
+export class CommentViewElement extends LitElement {
+  @property({ type: Array })
+  public comments: Comment[] = [];
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div>
+        ${repeat(this.comments, (comment) => comment.tstamp, (comment) => this.renderComment(comment))}
+      </div>
+    `;
+  }
+
+  protected renderComment(comment: Comment): TemplateResult {
+    return html`
+      <div class="media">
+        <div class="media-left text-center">
+          <div>
+            ${unsafeHTML(comment.user_avatar)}
+          </div>
+          ${comment.user_username}
+        </div>
+        <div class="panel panel-default">
+          ${comment.user_comment ? html`
+          <div class="panel-body">
+            ${nl2br(comment.user_comment)}
+          </div>
+        ` : nothing}
+          <div class="panel-footer">
+            <span class="badge badge-success me-2">
+              ${comment.previous_stage_title} ⇾ ${comment.stage_title}
+            </span>
+            <span class="badge badge-info">
+              ${comment.tstamp}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-comment-view': CommentViewElement;
+  }
+}

package/workspaces/renderable/diff-view.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+
+export type Diff = {
+  field: string,
+  label: string,
+  content: string,
+  html: string
+};
+
+@customElement('typo3-workspaces-diff-view')
+export class DiffViewElement extends LitElement {
+  @property({ type: Array })
+  public diffs: Diff[] = [];
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="diff">
+        ${repeat(this.diffs, (diff) => diff.field, (diff) => this.renderDiffItem(diff))}
+      </div>
+    `;
+  }
+
+  protected renderDiffItem(diff: Diff) {
+    return html`
+      <div class="diff-item">
+        <div class="diff-item-title">${diff.label}</div>
+        <div class="diff-item-result">${unsafeHTML(diff.content)}</div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-diff-view': DiffViewElement;
+  }
+}

package/workspaces/renderable/history-view.ts

@@ -0,0 +1,97 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+import type { Diff } from './diff-view';
+
+type History = {
+  differences: string | Diff[];
+  datetime: string;
+  user: string;
+  user_avatar: string;
+};
+
+@customElement('typo3-workspaces-history-view')
+export class HistoryViewElement extends LitElement {
+  @property({ type: Array })
+  public historyItems: History[] = [];
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div>
+        ${repeat(this.historyItems, (historyItem) => historyItem.datetime, (historyItem) => this.renderHistoryItem(historyItem))}
+      </div>
+    `;
+  }
+
+  protected renderHistoryItem(historyItem: History): TemplateResult|typeof nothing {
+    if (typeof historyItem.differences === 'object' && historyItem.differences.length === 0) {
+      return nothing;
+    }
+
+    return html`
+      <div class="media">
+        <div class="media-left text-center">
+          <div>
+            ${unsafeHTML(historyItem.user_avatar)}
+          </div>
+          ${historyItem.user}
+        </div>
+        <div class="media-body">
+          <div class="panel panel-default">
+            ${typeof historyItem.differences === 'object' ? html`
+          <div>
+            <div class="diff">
+              ${repeat(historyItem.differences, (diff) => diff, (diff) => html`
+              <div class="diff-item">
+                <div class="diff-item-title">
+                  ${diff.label}
+                </div>
+                <div class="diff-item-result diff-item-result-inline">
+                  ${unsafeHTML(diff.html)}
+                </div>
+              </div>
+            `)}
+            </div>
+          </div>
+        ` : html`
+          <div class="panel-body">
+            ${historyItem.differences}
+          </div>
+        `}
+        <div class="panel-footer">
+          <span class="badge badge-info">
+            ${historyItem.datetime}
+          </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-history-view': HistoryViewElement;
+  }
+}
+

package/workspaces/renderable/record-information.ts

@@ -0,0 +1,118 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing } from 'lit';
+import type { Diff } from './diff-view';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+import '@typo3/workspaces/renderable/diff-view';
+import '@typo3/workspaces/renderable/comment-view';
+import '@typo3/workspaces/renderable/history-view';
+
+type RecordInformation = {
+  path_Live: string,
+  label_Stage: string,
+  label_NextStage: {
+    title: string
+  },
+  label_PrevStage: {
+    title: string
+  },
+  diff: Diff[],
+  comments: Comment[],
+  history: {
+    data: History[]
+  },
+  stage_position: string,
+  stage_count: string
+};
+
+@customElement('typo3-workspaces-record-information')
+export class RecordInformationElement extends LitElement {
+  @property({ type: Object })
+  public record: RecordInformation;
+
+  @property({ type: Object })
+  public TYPO3lang: typeof TYPO3.lang | null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render() {
+    return html`
+      <div>
+        <p>${unsafeHTML(this.TYPO3lang.path.replace('{0}', this.record.path_Live))}</p>
+        <p>${unsafeHTML(this.TYPO3lang.current_step.replace('{0}', this.record.label_Stage).replace('{1}', this.record.stage_position).replace('{2}', this.record.stage_count))}</p>
+        <ul class="nav nav-tabs" role="tablist">
+          ${ this.record.diff.length > 0 ? this.renderNavLink(this.TYPO3lang['window.recordChanges.tabs.changeSummary'], '#workspace-changes') : nothing}
+          ${ this.record.comments.length > 0 ? this.renderNavLink(this.TYPO3lang['window.recordChanges.tabs.changeSummary'], '#workspace-comments', this.record.comments.length) : nothing}
+          ${ this.record.history.data.length > 0 ? this.renderNavLink(this.TYPO3lang['window.recordChanges.tabs.history'], '#workspace-history') : nothing}
+        </ul>
+        <div class="tab-content">
+          ${ this.record.diff.length > 0 ? html`
+            <div class="tab-pane" id="workspace-changes" role="tabpanel">
+              <div class="form-section">
+                <typo3-workspaces-diff-view .diffs=${this.record.diff}></typo3-workspaces-diff-view>
+              </div>
+            </div>
+          ` : nothing}
+          ${ this.record.comments.length > 0 ? html`
+            <div class="tab-pane" id="workspace-comments" role="tabpanel">
+              <div class="form-section">
+                <typo3-workspaces-comment-view .comments=${this.record.comments}></typo3-workspaces-comment-view>
+              </div>
+            </div>
+          ` : nothing}
+          ${ this.record.history.data.length > 0 ? html`
+            <div class="tab-pane" id="workspace-history" role="tabpanel">
+              <div class="form-section">
+                <typo3-workspaces-history-view .historyItems=${this.record.history.data}></typo3-workspaces-history-view>
+              </div>
+            </div>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+  }
+
+  protected renderNavLink(text: string, target: string, count: number = 0) {
+    return html`
+      <li class="nav-item" role="presentation">
+        <button
+          type="button"
+          class="nav-link"
+          data-bs-toggle="tab"
+          data-bs-target="${target}"
+          aria-controls="${target}"
+          role="tab"
+        >
+          ${text}
+          ${count > 0 ? html`<span class="badge">${count}</span>` : nothing}
+        </button>
+      </li>
+    `;
+  }
+
+  protected override firstUpdated(): void {
+    this.renderRoot.querySelector('.nav-link').classList.add('active');
+    this.renderRoot.querySelector('.tab-pane').classList.add('active');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-record-information': RecordInformationElement;
+  }
+}