TASK: Adjust function visibility in ts components

Neos.Neos/Resources/Public/JavaScript/Components/Modal.ts

@@ -15,27 +15,27 @@ export default class Modal {
       this.root.querySelectorAll('[data-dismiss="modal"]')
     );
     this.header = _root.querySelector(".neos-header");
-    this._setupEventListeners();
+    this.setupEventListeners();
   }
 
-  _setupEventListeners() {
+  private setupEventListeners(): void {
     this.triggers.forEach((_trigger) => {
-      _trigger.addEventListener("click", this._open.bind(this));
+      _trigger.addEventListener("click", this.open.bind(this));
     });
 
     this.closeButtons.forEach((_closeButton) => {
-      _closeButton.addEventListener("click", this._close.bind(this));
+      _closeButton.addEventListener("click", this.close.bind(this));
     });
 
-    document.addEventListener("keyup", this._onKeyPress.bind(this));
+    document.addEventListener("keyup", this.onKeyPress.bind(this));
   }
 
-  _open(_event: Event) {
+  private open(_event: Event): void {
     _event.preventDefault();
-    const targetElement = <HTMLElement> _event.target;
-    const trigger = this._getTriggerElement(targetElement);
+    const targetElement = <HTMLElement>_event.target;
+    const trigger = this.getTriggerElement(targetElement);
 
-    this._handleDynamicHeader(trigger);
+    this.handleDynamicHeader(trigger);
     this.root.classList.add("open");
     this.root.classList.remove("neos-hide");
 
@@ -52,10 +52,10 @@ export default class Modal {
    * button element. So this function checks for the data-toggle attribute and if this does not
    * exists we try to find the closest matching element.
    *
-   * @param {object} _element
-   * @return {object}
+   * @param {HTMLElement} _element
+   * @return {HTMLElement}
    */
-  _getTriggerElement(_element: HTMLElement) {
+  private getTriggerElement(_element: HTMLElement): HTMLElement {
     if (isNil(_element)) {
       return null;
     }
@@ -66,7 +66,7 @@ export default class Modal {
     return _element;
   }
 
-  _close() {
+  private close(): void {
     this.root.classList.remove("open");
     this.root.classList.add("neos-hide");
 
@@ -77,15 +77,15 @@ export default class Modal {
     );
   }
 
-  _onKeyPress(_event: KeyboardEvent) {
+  private onKeyPress(_event: KeyboardEvent): void {
     if (_event.key === "Escape") {
-      this._close();
+      this.close();
     }
   }
 
-  _handleDynamicHeader(_trigger: HTMLElement) {
+  private handleDynamicHeader(_trigger: HTMLElement): void {
     if (isNil(_trigger) || isNil(this.header)) {
-      return false;
+      return;
     }
 
     const dynamicHeader = _trigger.getAttribute("data-modal-header");

Neos.Neos/Resources/Public/JavaScript/Components/Notification/Message.ts

@@ -13,11 +13,11 @@ export default class Message {
     this.message = null;
     this.container = _container;
     this.options = _options;
-    this._initialize();
-    this._setupEventListeners();
+    this.initialize();
+    this.setupEventListeners();
   }
 
-  _initialize() {
+  private initialize(): void {
     const milliseconds = Date.now();
     const timestamp = Math.floor(milliseconds / 1000);
     const { title, message, type, closeButton } = this.options;
@@ -35,35 +35,35 @@ export default class Message {
     messageElement.id = "neos-notification-message-" + timestamp;
     this.message = messageElement;
     this.container.appendChild(messageElement);
-    this._registerCloseButton(messageElement);
-    this._registerExpandHandling(messageElement);
+    this.registerCloseButton(messageElement);
+    this.registerExpandHandling(messageElement);
   }
 
-  _registerExpandHandling(message: HTMLElement) {
+  private registerExpandHandling(message: HTMLElement): void {
     const contentSection = message.querySelector(".neos-notification-content");
     if (
       !isNil(contentSection) &&
       contentSection.classList.contains("expandable")
     ) {
-      contentSection.addEventListener("click", this._toggle.bind(this));
+      contentSection.addEventListener("click", this.toggle.bind(this));
     }
   }
 
-  _registerCloseButton(message: HTMLElement) {
+  private registerCloseButton(message: HTMLElement): void {
     const closeButton = message.querySelector(".neos-close-button");
     if (!isNil(closeButton)) {
-      closeButton.addEventListener("click", this._close.bind(this));
+      closeButton.addEventListener("click", this.close.bind(this));
     }
   }
 
-  _setupEventListeners() {
+  private setupEventListeners(): void {
     const timeout: number = this.options.timeout;
     if (timeout > 0) {
-      setTimeout(this._close.bind(this), timeout);
+      setTimeout(this.close.bind(this), timeout);
     }
   }
 
-  _close() {
+  private close(): void {
     if (!isNil(this.message)) {
       this.message.classList.add("fade-out");
       setTimeout(() => {
@@ -72,9 +72,9 @@ export default class Message {
     }
   }
 
-  _toggle() {
+  private toggle(): void {
     if (isNil(this.message)) {
-      return false;
+      return;
     }
 
     const contentSection: HTMLElement = this.message.querySelector(

Neos.Neos/Resources/Public/JavaScript/Components/Notification/Toast.ts

@@ -13,10 +13,10 @@ export default class Toast {
 
   constructor() {
     this.container = document.getElementById("neos-notification-container");
-    this._initialize();
+    this.initialize();
   }
 
-  _initialize() {
+  private initialize(): void {
     if (isNil(this.container)) {
       const applicationContainer = document.getElementById("neos-application");
       if (!isNil(applicationContainer)) {
@@ -30,10 +30,10 @@ export default class Toast {
   /**
    * Internal function to creates a Message and adds them to the notification container
    *
-   * @param {Object} options
+   * @param {MessageOptions} options
    * @returns {void}
    */
-  _create(options: MessageOptions) {
+  private create(options: MessageOptions): void {
     const toastOptions: any = { ...defaultOptions, ...options };
     if (!isNil(toastOptions.position)) {
       this.container.classList.add(toastOptions.position);
@@ -45,14 +45,14 @@ export default class Toast {
   /**
    * Creates a new notification as Message
    *
-   * @param {Object} options
+   * @param {MessageOptions} options
    * @returns {void}
    */
-  static create(options: MessageOptions) {
+  public static create(options: MessageOptions): void {
     // @ts-ignore
     if (isNil(this._container)) {
       const toast = new Toast();
-      toast._create(options);
+      toast.create(options);
     } else {
       // @ts-ignore
       this._create(options);
@@ -64,7 +64,7 @@ export default class Toast {
    *
    * @returns {void}
    */
-  static removeAll() {
+  public static removeAll(): void {
     // @ts-ignore
     const messages: Array<HTMLElement> = Array.from(this._container.childNodes);
     messages.forEach((messageElement: HTMLElement) => {

Neos.Neos/Resources/Public/JavaScript/Components/TopBar/DropdownMenu.ts

@@ -5,23 +5,25 @@ export default class DropDownMenu {
 
   constructor(_root: HTMLElement) {
     this.root = _root;
-    this.button = Array.from(this.root.querySelectorAll(".neos-dropdown-toggle"));
+    this.button = Array.from(
+      this.root.querySelectorAll(".neos-dropdown-toggle")
+    );
     this.menu = Array.from(this.root.querySelectorAll(".neos-dropdown-menu"));
-    this._setupEventListeners();
+    this.setupEventListeners();
   }
 
-  _setupEventListeners() {
+  private setupEventListeners(): void {
     this.button.forEach((_toggleButton: HTMLElement) => {
-      _toggleButton.addEventListener("click", this._toggle.bind(this));
+      _toggleButton.addEventListener("click", this.toggle.bind(this));
     });
   }
 
-  _toggle(_event: Event) {
-    this._changeToogleIcon();
+  private toggle(_event: Event): void {
+    this.changeToogleIcon();
     this.root.classList.toggle("neos-dropdown-open");
   }
 
-  _changeToogleIcon() {
+  private changeToogleIcon(): void {
     const openIcon: HTMLElement = this.root.querySelector(".fa-chevron-down");
     const closeIcon: HTMLElement = this.root.querySelector(".fa-chevron-up");
     if (openIcon) {

Neos.Neos/Resources/Public/JavaScript/Components/TopBar/Expandable.ts

@@ -12,34 +12,34 @@ export default class Expandable {
     this.root = _root;
     this.trigger = Array.from(this.root.querySelectorAll(_triggerClassName));
     this.onStateChange = _onStateChange;
-    this._setupEventListeners();
-    this._initialize(initialState);
+    this.setupEventListeners();
+    this.initialize(initialState);
   }
 
-  _setupEventListeners() {
+  private setupEventListeners(): void {
     this.trigger.forEach((_toggleButton) => {
-      _toggleButton.addEventListener("click", this._toggle.bind(this));
+      _toggleButton.addEventListener("click", this.toggle.bind(this));
     });
   }
 
-  _initialize(initialState: Boolean) {
+  private initialize(initialState: Boolean): void {
     const header = this.root.querySelector("[aria-expanded]");
     header.setAttribute("aria-expanded", String(initialState));
 
     if (initialState) {
       // default is closed
       this.root.classList.add("neos-open");
-      this._changeToogleIcon();
+      this.changeToogleIcon();
     }
   }
 
-  _toggle() {
-    this._changeToogleIcon();
+  private toggle(): void {
+    this.changeToogleIcon();
     this.root.classList.toggle("neos-open");
-    this._toogleAriaExpandable();
+    this.toogleAriaExpandable();
   }
 
-  _toogleAriaExpandable() {
+  private toogleAriaExpandable(): void {
     const header = this.root.querySelector("[aria-expanded]");
     const expanded = this.root.classList.contains("neos-open");
     header.setAttribute("aria-expanded", String(expanded));
@@ -49,7 +49,7 @@ export default class Expandable {
     }
   }
 
-  _changeToogleIcon() {
+  private changeToogleIcon(): void {
     const openIcon = this.root.querySelector(".fa-chevron-circle-down");
     const closeIcon = this.root.querySelector(".fa-chevron-circle-up");
     if (openIcon) {

Neos.Neos/Resources/Public/JavaScript/Components/TopBar/MenuPanel.ts

@@ -13,15 +13,15 @@ export default class MenuPanel {
     this.root = _root;
     this.button = Array.from(this.root.querySelectorAll(".neos-menu-button"));
     this.panel = Array.from(this.root.querySelectorAll(".neos-menu-panel"));
-    this.menuSectionStates = this._loadMenuSectionStates();
-    this._setupEventListeners();
+    this.menuSectionStates = this.loadMenuSectionStates();
+    this.setupEventListeners();
 
     if (this.panel) {
-      this._initializeMenuSections();
+      this.initializeMenuSections();
     }
   }
 
-  _initializeMenuSections() {
+  private initializeMenuSections(): void {
     this.panel.forEach((_panel) => {
       const menuSectionElements = _panel.querySelectorAll(".neos-menu-section");
       const sections = this.menuSectionStates;
@@ -31,31 +31,34 @@ export default class MenuPanel {
         new Expandable(
           <HTMLElement>menuSectionElement,
           ".neos-menu-panel-toggle",
-          this._onMenuSectionStateChange.bind(this),
+          this.onMenuSectionStateChange.bind(this),
           sectionState
         );
       });
     });
   }
 
-  _setupEventListeners() {
+  private setupEventListeners(): void {
     this.button.forEach((_toggleButton) => {
-      _toggleButton.addEventListener("click", this._toggle.bind(this));
+      _toggleButton.addEventListener("click", this.toggle.bind(this));
     });
   }
 
-  _loadMenuSectionStates() {
+  private loadMenuSectionStates(): Array<any> {
     const storageData = loadStorageData(VALUE_PATH);
     return Array.isArray(storageData) ? storageData : [];
   }
 
-  _saveMenuSectionStates() {
+  private saveMenuSectionStates(): void {
     if (Array.isArray(this.menuSectionStates)) {
       saveStorageData(VALUE_PATH, this.menuSectionStates);
     }
   }
 
-  _onMenuSectionStateChange(sectionName: string, newValue: Boolean) {
+  private onMenuSectionStateChange(
+    sectionName: string,
+    newValue: Boolean
+  ): void {
     if (this.menuSectionStates.includes(sectionName) && newValue === true) {
       this.menuSectionStates = this.menuSectionStates.filter(
         (item: string) => item !== sectionName
@@ -66,10 +69,10 @@ export default class MenuPanel {
       this.menuSectionStates.push(sectionName);
     }
 
-    this._saveMenuSectionStates();
+    this.saveMenuSectionStates();
   }
 
-  _toggle(_event: Event) {
+  private toggle(_event: Event): void {
     this.button.forEach((_toggleButton) => {
       _toggleButton.classList.toggle("neos-pressed");
     });