[TASK] Refactor AdminPanel JavaScript 99/58699/5
authorOliver Hader <oliver@typo3.org>
Fri, 26 Oct 2018 11:13:45 +0000 (13:13 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Sat, 27 Oct 2018 10:26:14 +0000 (12:26 +0200)
- move to namespaced functions
- remove console log on copy

Prerequisite for further bug fixes.

Resolves: #86744
Releases: master
Change-Id: I7647cd7b75bab999680806fc65dddcec9271717f
Reviewed-on: https://review.typo3.org/58699
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Build/tsconfig.json
typo3/sysext/adminpanel/Resources/Private/TypeScript/AdminPanel.ts [new file with mode: 0644]
typo3/sysext/adminpanel/Resources/Public/JavaScript/AdminPanel.js

index 30bf908..f3636f7 100644 (file)
@@ -1,6 +1,12 @@
 {
     "compilerOptions": {
         "target": "es5",
+        "lib": [
+            "DOM",
+            "ES5",
+            "ScriptHost",
+            "ES6"
+        ],
         "module": "amd",
         "sourceMap": false,
         "removeComments": false,
diff --git a/typo3/sysext/adminpanel/Resources/Private/TypeScript/AdminPanel.ts b/typo3/sysext/adminpanel/Resources/Private/TypeScript/AdminPanel.ts
new file mode 100644 (file)
index 0000000..aa9ef1d
--- /dev/null
@@ -0,0 +1,361 @@
+namespace TYPO3 {
+  export const AdminPanelSelectors = {
+    adminPanelRole: 'form[data-typo3-role=typo3-adminPanel]',
+    moduleTriggerRole: '[data-typo3-role=typo3-adminPanel-module-trigger]',
+    moduleParentClass: '.typo3-adminPanel-module',
+    contentTabRole: '[data-typo3-role=typo3-adminPanel-content-tab]',
+    saveButtonRole: '[data-typo3-role=typo3-adminPanel-saveButton]',
+    triggerRole: '[data-typo3-role=typo3-adminPanel-trigger]',
+    popupTriggerRole: '[data-typo3-role=typo3-adminPanel-popup-trigger]',
+    panelTriggerRole: '[data-typo3-role=typo3-adminPanel-panel-trigger]',
+    panelParentClass: '.typo3-adminPanel-panel',
+    contentSettingsTriggerRole: '[data-typo3-role=typo3-adminPanel-content-settings]',
+    contentSettingsParentClass: '.typo3-adminPanel-content-settings',
+    contentParentClass: '.typo3-adminPanel-content',
+    zoomTarget: '[data-typo3-zoom-target]',
+    zoomClose: '[data-typo3-zoom-close]',
+    currentContentRole: '[data-typo3-role=typo3-adminPanel-content]',
+    contentPaneRole: '[data-typo3-role=typo3-adminPanel-content-pane]'
+  };
+
+  export const AdminPanelClasses = {
+    active: 'active',
+    activeModule: 'typo3-adminPanel-module-active',
+    activeContentSetting: 'typo3-adminPanel-content-settings-active',
+    backdrop: 'typo3-adminPanel-backdrop',
+    activeTab: 'typo3-adminPanel-content-header-item-active',
+    activePane: 'typo3-adminPanel-content-panes-item-active',
+    noScroll: 'typo3-adminPanel-noscroll',
+    zoomShow: 'typo3-adminPanel-zoom-show'
+  };
+
+  export class AdminPanel {
+    private readonly adminPanel: HTMLFormElement;
+    private readonly modules: AdminPanelModule[];
+    private readonly popups: AdminPanelPopup[];
+    private readonly panels: AdminPanelPanel[];
+    private readonly contentSettings: AdminPanelContentSetting[];
+    private readonly trigger: HTMLElement;
+
+    constructor() {
+      this.adminPanel = document.querySelector(AdminPanelSelectors.adminPanelRole) as HTMLFormElement;
+      this.modules = (this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole) as Element[]).map(
+        (moduleTrigger: HTMLElement) => {
+          const moduleParent = moduleTrigger.closest(AdminPanelSelectors.moduleParentClass);
+          return new AdminPanelModule(this, moduleParent, moduleTrigger);
+        }
+      );
+      this.popups = this.querySelectorAll(AdminPanelSelectors.popupTriggerRole).map(
+        (popupTrigger: HTMLElement) => new AdminPanelPopup(this, popupTrigger)
+      );
+      this.panels = this.querySelectorAll(AdminPanelSelectors.panelTriggerRole).map(
+        (panelTrigger: HTMLElement) => {
+          const panelParent = panelTrigger.closest(AdminPanelSelectors.panelParentClass);
+          return new AdminPanelPanel(panelParent, panelTrigger);
+        }
+      );
+      this.contentSettings = this.querySelectorAll(AdminPanelSelectors.contentSettingsTriggerRole).map(
+      (contentSettingTrigger: HTMLElement) => {
+          const contentSettingElement = contentSettingTrigger
+            .closest(AdminPanelSelectors.contentParentClass)
+            .querySelector(AdminPanelSelectors.contentSettingsParentClass);
+          return new AdminPanelContentSetting(contentSettingElement, contentSettingTrigger);
+        }
+      );
+      this.trigger = document.querySelector(AdminPanelSelectors.triggerRole) as HTMLElement;
+
+      this.initializeEvents();
+      this.addBackdropListener();
+    }
+
+    disableModules(): void {
+      this.modules.forEach((module: AdminPanelModule) => module.disable());
+    }
+
+    disablePopups(): void {
+      this.popups.forEach((popup: AdminPanelPopup) => popup.disable());
+    }
+
+    renderBackdrop(): void {
+      const adminPanel = document.querySelector('#TSFE_ADMIN_PANEL_FORM');
+      const backdrop = document.createElement('div');
+      const body = document.querySelector('body');
+      body.classList.add(AdminPanelClasses.noScroll);
+      backdrop.classList.add(AdminPanelClasses.backdrop);
+      adminPanel.appendChild(backdrop);
+      this.addBackdropListener();
+    }
+
+    removeBackdrop(): void {
+      const backdrop = document.querySelector('.' + AdminPanelClasses.backdrop);
+      const body = document.querySelector('body');
+      body.classList.remove(AdminPanelClasses.noScroll);
+      if (backdrop !== null) {
+        backdrop.remove();
+      }
+    }
+
+    private querySelectorAll(selectors: string, subject: Element = null): Node[] {
+      if (subject === null) {
+        return Array.from(document.querySelectorAll(selectors));
+      }
+      return Array.from(subject.querySelectorAll(selectors));
+    }
+
+    private initializeEvents(): void {
+      this
+        .querySelectorAll(AdminPanelSelectors.contentTabRole)
+        .forEach((tab: HTMLElement) => tab.addEventListener('click', this.switchTab.bind(this)));
+      this
+        .querySelectorAll(AdminPanelSelectors.zoomTarget)
+        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.openZoom.bind(this)));
+      this
+        .querySelectorAll(AdminPanelSelectors.zoomClose)
+        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.closeZoom.bind(this)));
+      this
+        .querySelectorAll(AdminPanelSelectors.triggerRole)
+        .forEach((trigger: HTMLElement) => trigger.addEventListener('click', this.toggleAdminPanelState.bind(this)));
+      this
+        .querySelectorAll(AdminPanelSelectors.saveButtonRole)
+        .forEach((elm: HTMLElement) => elm.addEventListener('click', this.sendAdminPanelForm.bind(this)));
+
+      this
+        .querySelectorAll('[data-typo3-role=typo3-adminPanel-content-close]')
+        .forEach((elm: HTMLElement) => {
+          elm.addEventListener('click', () => {
+            this.disableModules();
+            this.removeBackdrop();
+          });
+        });
+      this
+        .querySelectorAll('.typo3-adminPanel-table th, .typo3-adminPanel-table td')
+        .forEach((elm: HTMLElement) => {
+          elm.addEventListener('click', ()  => {
+            elm.focus();
+            try {
+              document.execCommand('copy');
+            } catch (err) {
+              // nothing here
+            }
+          });
+        });
+    }
+
+    private switchTab(event: MouseEvent): void {
+      event.preventDefault();
+
+      const activeTabClass = AdminPanelClasses.activeTab;
+      const activePaneClass = AdminPanelClasses.activePane;
+      const currentTab = event.currentTarget as HTMLElement;
+      const currentContent = currentTab.closest(AdminPanelSelectors.currentContentRole);
+      const contentTabs = this.querySelectorAll(AdminPanelSelectors.contentTabRole, currentContent);
+      const contentPanes = this.querySelectorAll(AdminPanelSelectors.contentPaneRole, currentContent);
+
+      contentTabs.forEach((element: HTMLElement) => element.classList.remove(activeTabClass));
+      currentTab.classList.add(activeTabClass);
+      contentPanes.forEach((element: HTMLElement) => element.classList.remove(activePaneClass));
+
+      const activePane = document.querySelector('[data-typo3-tab-id=' + currentTab.dataset.typo3TabTarget + ']');
+      activePane.classList.add(activePaneClass);
+    }
+
+    private openZoom(event: MouseEvent): void {
+      event.preventDefault();
+      const trigger = event.currentTarget as HTMLElement;
+      const targetId = trigger.getAttribute('data-typo3-zoom-target');
+      const target = document.querySelector('[data-typo3-zoom-id=' + targetId + ']');
+      target.classList.add(AdminPanelClasses.zoomShow);
+    }
+
+    private closeZoom(event: MouseEvent): void {
+      event.preventDefault();
+      const trigger = event.currentTarget as HTMLElement;
+      const target = trigger.closest('[data-typo3-zoom-id]');
+      target.classList.remove(AdminPanelClasses.zoomShow);
+    }
+
+    private sendAdminPanelForm(event: MouseEvent): void {
+      event.preventDefault();
+      const formData = new FormData(this.adminPanel);
+      const request = new XMLHttpRequest();
+      request.open('POST', this.adminPanel.dataset.typo3AjaxUrl);
+      request.send(formData);
+      request.onload = () => location.reload();
+    }
+
+    private toggleAdminPanelState(): void {
+      const request = new XMLHttpRequest();
+      request.open('GET', this.trigger.dataset.typo3AjaxUrl);
+      request.send();
+      request.onload = () => location.reload();
+    }
+
+    private addBackdropListener(): void {
+      this.querySelectorAll('.' + AdminPanelClasses.backdrop)
+        .forEach((elm: HTMLElement) =>  {
+        elm.addEventListener('click', () => {
+          this.removeBackdrop();
+          this
+            .querySelectorAll(AdminPanelSelectors.moduleTriggerRole)
+            .forEach((innerElm: HTMLElement) => {
+              innerElm.closest(AdminPanelSelectors.moduleParentClass)
+                .classList.remove(AdminPanelClasses.activeModule);
+            });
+        });
+      });
+    }
+  }
+
+  interface AdminPanelSwitchable {
+    isActive(): boolean;
+    enable(): void;
+    disable(): void;
+  }
+
+  class AdminPanelPopup implements AdminPanelSwitchable {
+    private readonly adminPanel: AdminPanel;
+    private readonly element: Element;
+
+    constructor(adminPanel: AdminPanel, element: Element) {
+      this.adminPanel = adminPanel;
+      this.element = element;
+      this.initializeEvents();
+    }
+
+    isActive(): boolean {
+      return this.element.classList.contains(AdminPanelClasses.active);
+    }
+
+    enable(): void {
+      this.element.classList.add(AdminPanelClasses.active);
+    }
+
+    disable(): void {
+      this.element.classList.remove(AdminPanelClasses.active);
+    }
+
+    private initializeEvents(): void {
+      this.element.addEventListener('click', () => {
+        if (this.isActive()) {
+          this.disable();
+        } else {
+          this.adminPanel.disablePopups();
+          this.enable();
+        }
+
+      });
+    }
+  }
+
+  class AdminPanelPanel implements AdminPanelSwitchable {
+    private readonly element: Element;
+    private readonly trigger: Element;
+
+    constructor(element: Element, trigger: Element) {
+      this.element = element;
+      this.trigger = trigger;
+      this.initializeEvents();
+    }
+
+    isActive(): boolean {
+      return this.element.classList.contains(AdminPanelClasses.active);
+    }
+
+    enable(): void {
+      this.element.classList.add(AdminPanelClasses.active);
+    }
+
+    disable(): void {
+      this.element.classList.remove(AdminPanelClasses.active);
+    }
+
+    private initializeEvents(): void {
+      this.trigger.addEventListener('click', () => {
+        if (this.isActive()) {
+          this.disable();
+        } else {
+          this.enable();
+        }
+      });
+    }
+  }
+
+  class AdminPanelContentSetting implements AdminPanelSwitchable {
+    private readonly element: Element;
+    private readonly trigger: Element;
+
+    constructor(element: Element, trigger: Element) {
+      this.element = element;
+      this.trigger = trigger;
+      this.initializeEvents();
+    }
+
+    isActive(): boolean {
+      return this.element.classList.contains(AdminPanelClasses.activeContentSetting);
+    }
+
+    enable(): void {
+      this.element.classList.add(AdminPanelClasses.activeContentSetting);
+    }
+
+    disable(): void {
+      this.element.classList.remove(AdminPanelClasses.activeContentSetting);
+    }
+
+    private initializeEvents(): void {
+      this.trigger.addEventListener('click', () => {
+        if (this.isActive()) {
+          this.disable();
+        } else {
+          this.enable();
+        }
+      });
+    }
+  }
+
+  class AdminPanelModule implements AdminPanelSwitchable {
+    private readonly adminPanel: AdminPanel;
+    private readonly element: Element;
+    private readonly trigger: Element;
+
+    constructor(adminPanel: AdminPanel, element: Element, trigger: Element) {
+      this.adminPanel = adminPanel;
+      this.element = element;
+      this.trigger = trigger;
+      this.initializeEvents();
+    }
+
+    isActive(): boolean {
+      return this.element.classList.contains(AdminPanelClasses.activeModule);
+    }
+
+    enable(): void {
+      this.element.classList.add(AdminPanelClasses.activeModule);
+    }
+
+    disable(): void {
+      this.element.classList.remove(AdminPanelClasses.activeModule);
+    }
+
+    private initializeEvents(): void {
+      this.trigger.addEventListener('click', (event: MouseEvent) => {
+        this.adminPanel.removeBackdrop();
+        if (this.isActive()) {
+          this.disable();
+        } else {
+          this.adminPanel.disableModules();
+          this.adminPanel.renderBackdrop();
+          this.enable();
+        }
+      });
+    }
+  }
+}
+
+(function(): void {
+  window.addEventListener(
+    'load',
+    () => new TYPO3.AdminPanel(),
+    false
+  );
+})();
index 8242817..6e373d7 100644 (file)
-function sendAdminPanelForm(event) {
-  event.preventDefault();
-  var typo3AdminPanel = document.querySelector('[data-typo3-role=typo3-adminPanel]');
-  var formData = new FormData(typo3AdminPanel);
-  var request = new XMLHttpRequest();
-  request.open("POST", typo3AdminPanel.dataset.typo3AjaxUrl);
-  request.send(formData);
-  request.onload = function () {
-    location.reload();
-  };
-}
-
-function toggleAdminPanelState() {
-  var request = new XMLHttpRequest();
-  request.open("GET", this.dataset.typo3AjaxUrl);
-  request.send();
-  request.onload = function () {
-    location.reload();
-  };
-}
-
-function renderBackdrop() {
-  var adminPanel = document.querySelector('#TSFE_ADMIN_PANEL_FORM');
-  var backdrop = document.createElement('div');
-  var body = document.querySelector('body');
-  body.classList.add('typo3-adminPanel-noscroll');
-  backdrop.classList.add('typo3-adminPanel-backdrop');
-  adminPanel.appendChild(backdrop);
-  addBackdropListener();
-}
-
-function removeBackdrop() {
-  var backdrop = document.querySelector('.typo3-adminPanel-backdrop');
-  var body = document.querySelector('body');
-  body.classList.remove('typo3-adminPanel-noscroll');
-  if (backdrop !== null) {
-    backdrop.remove();
-  }
-}
-
-function addBackdropListener() {
-  var allBackdrops = Array.from(document.querySelectorAll('.typo3-adminPanel-backdrop'));
-  allBackdrops.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      removeBackdrop();
-      var allModules = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-module-trigger]'));
-      allModules.forEach(function (innerElm) {
-        innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
-      });
-    });
-  });
-}
-
-function addModuleListener(allModules) {
-  allModules.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      var parent = this.closest('.typo3-adminPanel-module');
-      if (parent.classList.contains('typo3-adminPanel-module-active')) {
-        removeBackdrop();
-        parent.classList.remove('typo3-adminPanel-module-active');
-      } else {
-        allModules.forEach(function (innerElm) {
-          removeBackdrop();
-          innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
-        });
-        renderBackdrop();
-        parent.classList.add('typo3-adminPanel-module-active');
-      }
-    });
-  });
-}
-
-function initializeAdminPanel() {
-  var allModules = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-module-trigger]'));
-  addModuleListener(allModules);
-  initializeTabs();
-
-
-  Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-saveButton]')).forEach(function (elm) {
-    elm.addEventListener('click', sendAdminPanelForm);
-  });
-
-  Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-trigger]')).forEach(function (trigger) {
-    trigger.addEventListener('click', toggleAdminPanelState);
-  });
-
-  var popupTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-popup-trigger]'));
-  popupTriggers.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      if (this.classList.contains('active')) {
-        this.classList.remove('active');
-      } else {
-        popupTriggers.forEach(function (innerElm) {
-          innerElm.classList.remove('active');
-        });
-        this.classList.add('active');
-      }
-    });
-  });
-
-  var panelTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-panel-trigger]'));
-  panelTriggers.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      var target = this.closest('.typo3-adminPanel-panel');
-      if (target.classList.contains('active')) {
-        target.classList.remove('active');
-      } else {
-        target.classList.add('active');
-      }
-    });
-  });
-
-  var settingsTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-settings]'));
-  settingsTriggers.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      var target = this.closest('.typo3-adminPanel-content').querySelector('.typo3-adminPanel-content-settings');
-      if (target.classList.contains('typo3-adminPanel-content-settings-active')) {
-        target.classList.remove('typo3-adminPanel-content-settings-active');
-      } else {
-        target.classList.add('typo3-adminPanel-content-settings-active');
-      }
-    });
-  });
-
-  var moduleClose = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-close]'));
-  moduleClose.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      allModules.forEach(function (innerElm) {
-        innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
-      });
-      removeBackdrop();
-    });
-  });
-
-  var dataFields = Array.from(document.querySelectorAll('.typo3-adminPanel-table th, .typo3-adminPanel-table td'));
-  dataFields.forEach(function (elm) {
-    elm.addEventListener('click', function () {
-      elm.focus();
-      // elm.select();
-
-      try {
-        var successful = document.execCommand('copy');
-        var msg = successful ? 'successful' : 'unsuccessful';
-        console.log('Copying text command was ' + msg);
-      } catch (err) {
-        console.log('Oops, unable to copy');
-      }
-    });
-  });
-
-  addBackdropListener();
-}
-
-/**
- * Tabs
+/*
+ * 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!
  */
-function initializeTabs() {
-  var tabs = document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-tab]');
-
-  function switchTab(event) {
-    event.preventDefault();
-
-    var activeTabClass = 'typo3-adminPanel-content-header-item-active';
-    var activePaneClass = 'typo3-adminPanel-content-panes-item-active';
-    var currentTab = event.currentTarget;
-    var currentContent = currentTab.closest('[data-typo3-role=typo3-adminPanel-content]');
-    var contentTabs = currentContent.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-tab]');
-    var contentPanes = currentContent.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-pane]');
-
-    for (var i = 0; i < contentTabs.length; i++) {
-      contentTabs[i].classList.remove(activeTabClass);
-    }
-    currentTab.classList.add(activeTabClass);
-    for (var j = 0; j < contentPanes.length; j++) {
-      contentPanes[j].classList.remove(activePaneClass);
-    }
-
-    var activePane = document.querySelector('[data-typo3-tab-id=' + currentTab.dataset.typo3TabTarget + ']');
-    activePane.classList.add(activePaneClass);
-  }
-
-  for (var i = 0; i < tabs.length; i++) {
-    tabs[i].addEventListener("click", switchTab)
-  }
-}
-
-window.addEventListener('load', initializeAdminPanel, false);
-
-/**
- * Zoom
- */
-function initializeZooms() {
-  var zoomOpenTrigger = document.querySelectorAll('[data-typo3-zoom-target]');
-  var zoomCloseTrigger = document.querySelectorAll('[data-typo3-zoom-close]');
-
-  function openZoom(event) {
-    event.preventDefault();
-    var trigger = event.currentTarget;
-    var targetId = trigger.getAttribute('data-typo3-zoom-target');
-    var target = document.querySelector('[data-typo3-zoom-id=' + targetId + ']');
-    target.classList.add('typo3-adminPanel-zoom-show');
-  }
-
-  for (var i = 0; i < zoomOpenTrigger.length; i++) {
-    zoomOpenTrigger[i].addEventListener("click", openZoom)
-  }
-
-  function closeZoom(event) {
-    event.preventDefault();
-    var trigger = event.currentTarget;
-    var target = trigger.closest('[data-typo3-zoom-id]');
-    target.classList.remove('typo3-adminPanel-zoom-show');
-  }
-
-  for (var i = 0; i < zoomCloseTrigger.length; i++) {
-    zoomCloseTrigger[i].addEventListener("click", closeZoom)
-  }
-}
-window.addEventListener('load', initializeZooms, false);
+"use strict";var TYPO3;!function(e){e.AdminPanelSelectors={adminPanelRole:"form[data-typo3-role=typo3-adminPanel]",moduleTriggerRole:"[data-typo3-role=typo3-adminPanel-module-trigger]",moduleParentClass:".typo3-adminPanel-module",contentTabRole:"[data-typo3-role=typo3-adminPanel-content-tab]",saveButtonRole:"[data-typo3-role=typo3-adminPanel-saveButton]",triggerRole:"[data-typo3-role=typo3-adminPanel-trigger]",popupTriggerRole:"[data-typo3-role=typo3-adminPanel-popup-trigger]",panelTriggerRole:"[data-typo3-role=typo3-adminPanel-panel-trigger]",panelParentClass:".typo3-adminPanel-panel",contentSettingsTriggerRole:"[data-typo3-role=typo3-adminPanel-content-settings]",contentSettingsParentClass:".typo3-adminPanel-content-settings",contentParentClass:".typo3-adminPanel-content",zoomTarget:"[data-typo3-zoom-target]",zoomClose:"[data-typo3-zoom-close]",currentContentRole:"[data-typo3-role=typo3-adminPanel-content]",contentPaneRole:"[data-typo3-role=typo3-adminPanel-content-pane]"},e.AdminPanelClasses={active:"active",activeModule:"typo3-adminPanel-module-active",activeContentSetting:"typo3-adminPanel-content-settings-active",backdrop:"typo3-adminPanel-backdrop",activeTab:"typo3-adminPanel-content-header-item-active",activePane:"typo3-adminPanel-content-panes-item-active",noScroll:"typo3-adminPanel-noscroll",zoomShow:"typo3-adminPanel-zoom-show"};var t=function(){function t(){var t=this;this.adminPanel=document.querySelector(e.AdminPanelSelectors.adminPanelRole),this.modules=this.querySelectorAll(e.AdminPanelSelectors.moduleTriggerRole).map(function(n){var o=n.closest(e.AdminPanelSelectors.moduleParentClass);return new a(t,o,n)}),this.popups=this.querySelectorAll(e.AdminPanelSelectors.popupTriggerRole).map(function(e){return new n(t,e)}),this.panels=this.querySelectorAll(e.AdminPanelSelectors.panelTriggerRole).map(function(t){var n=t.closest(e.AdminPanelSelectors.panelParentClass);return new o(n,t)}),this.contentSettings=this.querySelectorAll(e.AdminPanelSelectors.contentSettingsTriggerRole).map(function(t){var n=t.closest(e.AdminPanelSelectors.contentParentClass).querySelector(e.AdminPanelSelectors.contentSettingsParentClass);return new i(n,t)}),this.trigger=document.querySelector(e.AdminPanelSelectors.triggerRole),this.initializeEvents(),this.addBackdropListener()}return t.prototype.disableModules=function(){this.modules.forEach(function(e){return e.disable()})},t.prototype.disablePopups=function(){this.popups.forEach(function(e){return e.disable()})},t.prototype.renderBackdrop=function(){var t=document.querySelector("#TSFE_ADMIN_PANEL_FORM"),n=document.createElement("div");document.querySelector("body").classList.add(e.AdminPanelClasses.noScroll),n.classList.add(e.AdminPanelClasses.backdrop),t.appendChild(n),this.addBackdropListener()},t.prototype.removeBackdrop=function(){var t=document.querySelector("."+e.AdminPanelClasses.backdrop);document.querySelector("body").classList.remove(e.AdminPanelClasses.noScroll),null!==t&&t.remove()},t.prototype.querySelectorAll=function(e,t){return void 0===t&&(t=null),null===t?Array.from(document.querySelectorAll(e)):Array.from(t.querySelectorAll(e))},t.prototype.initializeEvents=function(){var t=this;this.querySelectorAll(e.AdminPanelSelectors.contentTabRole).forEach(function(e){return e.addEventListener("click",t.switchTab.bind(t))}),this.querySelectorAll(e.AdminPanelSelectors.zoomTarget).forEach(function(e){return e.addEventListener("click",t.openZoom.bind(t))}),this.querySelectorAll(e.AdminPanelSelectors.zoomClose).forEach(function(e){return e.addEventListener("click",t.closeZoom.bind(t))}),this.querySelectorAll(e.AdminPanelSelectors.triggerRole).forEach(function(e){return e.addEventListener("click",t.toggleAdminPanelState.bind(t))}),this.querySelectorAll(e.AdminPanelSelectors.saveButtonRole).forEach(function(e){return e.addEventListener("click",t.sendAdminPanelForm.bind(t))}),this.querySelectorAll("[data-typo3-role=typo3-adminPanel-content-close]").forEach(function(e){e.addEventListener("click",function(){t.disableModules(),t.removeBackdrop()})}),this.querySelectorAll(".typo3-adminPanel-table th, .typo3-adminPanel-table td").forEach(function(e){e.addEventListener("click",function(){e.focus();try{document.execCommand("copy")}catch(e){}})})},t.prototype.switchTab=function(t){t.preventDefault();var n=e.AdminPanelClasses.activeTab,o=e.AdminPanelClasses.activePane,i=t.currentTarget,a=i.closest(e.AdminPanelSelectors.currentContentRole),l=this.querySelectorAll(e.AdminPanelSelectors.contentTabRole,a),s=this.querySelectorAll(e.AdminPanelSelectors.contentPaneRole,a);l.forEach(function(e){return e.classList.remove(n)}),i.classList.add(n),s.forEach(function(e){return e.classList.remove(o)}),document.querySelector("[data-typo3-tab-id="+i.dataset.typo3TabTarget+"]").classList.add(o)},t.prototype.openZoom=function(t){t.preventDefault();var n=t.currentTarget.getAttribute("data-typo3-zoom-target");document.querySelector("[data-typo3-zoom-id="+n+"]").classList.add(e.AdminPanelClasses.zoomShow)},t.prototype.closeZoom=function(t){t.preventDefault(),t.currentTarget.closest("[data-typo3-zoom-id]").classList.remove(e.AdminPanelClasses.zoomShow)},t.prototype.sendAdminPanelForm=function(e){e.preventDefault();var t=new FormData(this.adminPanel),n=new XMLHttpRequest;n.open("POST",this.adminPanel.dataset.typo3AjaxUrl),n.send(t),n.onload=function(){return location.reload()}},t.prototype.toggleAdminPanelState=function(){var e=new XMLHttpRequest;e.open("GET",this.trigger.dataset.typo3AjaxUrl),e.send(),e.onload=function(){return location.reload()}},t.prototype.addBackdropListener=function(){var t=this;this.querySelectorAll("."+e.AdminPanelClasses.backdrop).forEach(function(n){n.addEventListener("click",function(){t.removeBackdrop(),t.querySelectorAll(e.AdminPanelSelectors.moduleTriggerRole).forEach(function(t){t.closest(e.AdminPanelSelectors.moduleParentClass).classList.remove(e.AdminPanelClasses.activeModule)})})})},t}();e.AdminPanel=t;var n=function(){function t(e,t){this.adminPanel=e,this.element=t,this.initializeEvents()}return t.prototype.isActive=function(){return this.element.classList.contains(e.AdminPanelClasses.active)},t.prototype.enable=function(){this.element.classList.add(e.AdminPanelClasses.active)},t.prototype.disable=function(){this.element.classList.remove(e.AdminPanelClasses.active)},t.prototype.initializeEvents=function(){var e=this;this.element.addEventListener("click",function(){e.isActive()?e.disable():(e.adminPanel.disablePopups(),e.enable())})},t}(),o=function(){function t(e,t){this.element=e,this.trigger=t,this.initializeEvents()}return t.prototype.isActive=function(){return this.element.classList.contains(e.AdminPanelClasses.active)},t.prototype.enable=function(){this.element.classList.add(e.AdminPanelClasses.active)},t.prototype.disable=function(){this.element.classList.remove(e.AdminPanelClasses.active)},t.prototype.initializeEvents=function(){var e=this;this.trigger.addEventListener("click",function(){e.isActive()?e.disable():e.enable()})},t}(),i=function(){function t(e,t){this.element=e,this.trigger=t,this.initializeEvents()}return t.prototype.isActive=function(){return this.element.classList.contains(e.AdminPanelClasses.activeContentSetting)},t.prototype.enable=function(){this.element.classList.add(e.AdminPanelClasses.activeContentSetting)},t.prototype.disable=function(){this.element.classList.remove(e.AdminPanelClasses.activeContentSetting)},t.prototype.initializeEvents=function(){var e=this;this.trigger.addEventListener("click",function(){e.isActive()?e.disable():e.enable()})},t}(),a=function(){function t(e,t,n){this.adminPanel=e,this.element=t,this.trigger=n,this.initializeEvents()}return t.prototype.isActive=function(){return this.element.classList.contains(e.AdminPanelClasses.activeModule)},t.prototype.enable=function(){this.element.classList.add(e.AdminPanelClasses.activeModule)},t.prototype.disable=function(){this.element.classList.remove(e.AdminPanelClasses.activeModule)},t.prototype.initializeEvents=function(){var e=this;this.trigger.addEventListener("click",function(t){e.adminPanel.removeBackdrop(),e.isActive()?e.disable():(e.adminPanel.disableModules(),e.adminPanel.renderBackdrop(),e.enable())})},t}()}(TYPO3||(TYPO3={})),window.addEventListener("load",function(){return new TYPO3.AdminPanel},!1);
\ No newline at end of file