e62f974bc5d8e58afa4e1e67336729f9129f7cc9
[Packages/TYPO3.CMS.git] / typo3 / sysext / adminpanel / Resources / Public / JavaScript / AdminPanel.js
1 function sendAdminPanelForm(event) {
2 event.preventDefault();
3 var typo3AdminPanel = document.querySelector('[data-typo3-role=typo3-adminPanel]');
4 var formData = new FormData(typo3AdminPanel);
5 var request = new XMLHttpRequest();
6 request.open("POST", typo3AdminPanel.dataset.typo3AjaxUrl);
7 request.send(formData);
8 request.onload = function () {
9 location.reload();
10 };
11 }
12
13 function toggleAdminPanelState() {
14 var request = new XMLHttpRequest();
15 request.open("GET", this.dataset.typo3AjaxUrl);
16 request.send();
17 request.onload = function () {
18 location.reload();
19 };
20 }
21
22 function renderBackdrop() {
23 var adminPanel = document.querySelector('#TSFE_ADMIN_PANEL_FORM');
24 var backdrop = document.createElement('div');
25 backdrop.classList.add('typo3-adminPanel-backdrop');
26 adminPanel.appendChild(backdrop);
27 addBackdropListener();
28 }
29
30 function removeBackdrop() {
31 var backdrop = document.querySelector('.typo3-adminPanel-backdrop');
32 if (backdrop !== null) {
33 backdrop.remove();
34 }
35 }
36
37 function addBackdropListener() {
38 var allBackdrops = Array.from(document.querySelectorAll('.typo3-adminPanel-backdrop'));
39 allBackdrops.forEach(function (elm) {
40 elm.addEventListener('click', function () {
41 removeBackdrop();
42 var allModules = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-module-trigger]'));
43 allModules.forEach(function (innerElm) {
44 innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
45 });
46 });
47 });
48 }
49
50 function addModuleListener(allModules) {
51 allModules.forEach(function (elm) {
52 elm.addEventListener('click', function () {
53 var parent = this.closest('.typo3-adminPanel-module');
54 if (parent.classList.contains('typo3-adminPanel-module-active')) {
55 removeBackdrop();
56 parent.classList.remove('typo3-adminPanel-module-active');
57 } else {
58 allModules.forEach(function (innerElm) {
59 removeBackdrop();
60 innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
61 });
62 renderBackdrop();
63 parent.classList.add('typo3-adminPanel-module-active');
64 }
65 });
66 });
67 }
68
69 function initializeAdminPanel() {
70 var allModules = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-module-trigger]'));
71 addModuleListener(allModules);
72 initializeTabs();
73
74
75 Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-saveButton]')).forEach(function (elm) {
76 elm.addEventListener('click', sendAdminPanelForm);
77 });
78
79 Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-trigger]')).forEach(function (trigger) {
80 trigger.addEventListener('click', toggleAdminPanelState);
81 });
82
83 var popupTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-popup-trigger]'));
84 popupTriggers.forEach(function (elm) {
85 elm.addEventListener('click', function () {
86 if (this.classList.contains('active')) {
87 this.classList.remove('active');
88 } else {
89 popupTriggers.forEach(function (innerElm) {
90 innerElm.classList.remove('active');
91 });
92 this.classList.add('active');
93 }
94 });
95 });
96
97 var panelTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-panel-trigger]'));
98 panelTriggers.forEach(function (elm) {
99 elm.addEventListener('click', function () {
100 var target = this.closest('.typo3-adminPanel-panel');
101 if (target.classList.contains('active')) {
102 target.classList.remove('active');
103 } else {
104 target.classList.add('active');
105 }
106 });
107 });
108
109 var settingsTriggers = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-settings]'));
110 settingsTriggers.forEach(function (elm) {
111 elm.addEventListener('click', function () {
112 var target = this.closest('.typo3-adminPanel-content').querySelector('.typo3-adminPanel-content-settings');
113 if (target.classList.contains('typo3-adminPanel-content-settings-active')) {
114 target.classList.remove('typo3-adminPanel-content-settings-active');
115 } else {
116 target.classList.add('typo3-adminPanel-content-settings-active');
117 }
118 });
119 });
120
121 var moduleClose = Array.from(document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-close]'));
122 moduleClose.forEach(function (elm) {
123 elm.addEventListener('click', function () {
124 allModules.forEach(function (innerElm) {
125 innerElm.closest('.typo3-adminPanel-module').classList.remove('typo3-adminPanel-module-active');
126 });
127 removeBackdrop();
128 });
129 });
130
131 var dataFields = Array.from(document.querySelectorAll('.typo3-adminPanel-table th, .typo3-adminPanel-table td'));
132 dataFields.forEach(function (elm) {
133 elm.addEventListener('click', function () {
134 elm.focus();
135 // elm.select();
136
137 try {
138 var successful = document.execCommand('copy');
139 var msg = successful ? 'successful' : 'unsuccessful';
140 console.log('Copying text command was ' + msg);
141 } catch (err) {
142 console.log('Oops, unable to copy');
143 }
144 });
145 });
146
147 addBackdropListener();
148 }
149
150 /**
151 * Tabs
152 */
153 function initializeTabs() {
154 var tabs = document.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-tab]');
155
156 function switchTab(event) {
157 event.preventDefault();
158
159 var activeTabClass = 'typo3-adminPanel-content-header-item-active';
160 var activePaneClass = 'typo3-adminPanel-content-panes-item-active';
161 var currentTab = event.currentTarget;
162 var currentContent = currentTab.closest('[data-typo3-role=typo3-adminPanel-content]');
163 var contentTabs = currentContent.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-tab]');
164 var contentPanes = currentContent.querySelectorAll('[data-typo3-role=typo3-adminPanel-content-pane]');
165
166 for (var i = 0; i < contentTabs.length; i++) {
167 contentTabs[i].classList.remove(activeTabClass);
168 }
169 currentTab.classList.add(activeTabClass);
170 for (var j = 0; j < contentPanes.length; j++) {
171 contentPanes[j].classList.remove(activePaneClass);
172 }
173
174 var activePane = document.querySelector('[data-typo3-tab-id=' + currentTab.dataset.typo3TabTarget + ']');
175 activePane.classList.add(activePaneClass);
176 }
177
178 for (var i = 0; i < tabs.length; i++) {
179 tabs[i].addEventListener("click", switchTab)
180 }
181 }
182
183 window.addEventListener('load', initializeAdminPanel, false);