b2572a941b1c924f5f5510699956c1f2e40351d3
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / PageActions.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Module: TYPO3/CMS/Backend/PageActions
16 * JavaScript implementations for page actions
17 */
18 define(['jquery', 'TYPO3/CMS/Backend/Storage'], function($, Storage) {
19 'use strict';
20
21 /**
22 *
23 * @type {{settings: {pageId: number, language: {pageOverlayId: number}}, identifier: {pageTitle: string, hiddenElements: string}, elements: {$pageTitle: null, $showHiddenElementsCheckbox: null}, documentIsReady: boolean}}
24 * @exports TYPO3/CMS/Backend/PageActions
25 */
26 var PageActions = {
27 settings: {
28 pageId: 0,
29 language: {
30 pageOverlayId: 0
31 }
32 },
33 identifier: {
34 pageTitle: '.t3js-title-inlineedit',
35 hiddenElements: '.t3js-hidden-record'
36 },
37 elements: {
38 $pageTitle: null,
39 $showHiddenElementsCheckbox: null
40 },
41 documentIsReady: false
42 };
43
44 /**
45 * Initialize page title renaming
46 */
47 PageActions.initializePageTitleRenaming = function() {
48 if (!PageActions.documentIsReady) {
49 $(function() {
50 PageActions.initializePageTitleRenaming();
51 });
52 return;
53 }
54 if (PageActions.settings.pageId <= 0) {
55 return;
56 }
57
58 var $editActionLink = $('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>');
59 $editActionLink.on('click', function(e) {
60 e.preventDefault();
61 PageActions.editPageTitle();
62 });
63 PageActions.elements.$pageTitle
64 .on('dblclick', PageActions.editPageTitle)
65 .on('mouseover', function() { $editActionLink.removeClass('hidden'); })
66 .on('mouseout', function() { $editActionLink.addClass('hidden'); })
67 .append($editActionLink);
68 };
69
70 /**
71 * Initialize elements
72 */
73 PageActions.initializeElements = function() {
74 PageActions.elements.$pageTitle = $(PageActions.identifier.pageTitle + ':first');
75 PageActions.elements.$showHiddenElementsCheckbox = $('#checkTt_content_showHidden');
76 };
77
78 /**
79 * Initialize events
80 */
81 PageActions.initializeEvents = function() {
82 PageActions.elements.$showHiddenElementsCheckbox.on('change', PageActions.toggleContentElementVisibility);
83 };
84
85 /**
86 * Toggles the "Show hidden content elements" checkbox
87 */
88 PageActions.toggleContentElementVisibility = function() {
89 var $me = $(this),
90 $hiddenElements = $(PageActions.identifier.hiddenElements);
91
92 // show a spinner to show activity
93 var $spinner = $('<span />', {class: 'checkbox-spinner fa fa-circle-o-notch fa-spin'});
94 $me.hide().after($spinner);
95
96 if ($me.prop('checked')) {
97 $hiddenElements.slideDown();
98 } else {
99 $hiddenElements.slideUp();
100 }
101
102 Storage.Persistent.set('moduleData.web_layout.tt_content_showHidden', $me.prop('checked') ? 1 : 0).done(function() {
103 $spinner.remove();
104 $me.show();
105 });
106 };
107
108 /**
109 * Changes the h1 to an edit form
110 */
111 PageActions.editPageTitle = function() {
112 var $inputFieldWrap = $(
113 '<form>' +
114 '<div class="form-group">' +
115 '<div class="input-group input-group-lg">' +
116 '<input class="form-control">' +
117 '<span class="input-group-btn">' +
118 '<button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> ' +
119 '</span>' +
120 '<span class="input-group-btn">' +
121 '<button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> ' +
122 '</span>' +
123 '</div>' +
124 '</div>' +
125 '</form>'
126 ),
127 $inputField = $inputFieldWrap.find('input');
128
129 $inputFieldWrap.find('[data-action=cancel]').on('click', function() {
130 $inputFieldWrap.replaceWith(PageActions.elements.$pageTitle);
131 PageActions.initializePageTitleRenaming();
132 });
133
134 $inputFieldWrap.find('[data-action=submit]').on('click', function() {
135 var newPageTitle = $.trim($inputField.val());
136 if (newPageTitle !== '' && PageActions.elements.$pageTitle.text() !== newPageTitle) {
137 PageActions.saveChanges($inputField);
138 } else {
139 $inputFieldWrap.find('[data-action=cancel]').trigger('click');
140 }
141 });
142
143 // the form stuff is a wacky workaround to prevent the submission of the docheader form
144 $inputField.parents('form').on('submit', function(e) {
145 e.preventDefault();
146 return false;
147 });
148
149 var $h1 = PageActions.elements.$pageTitle;
150 $h1.children().last().remove();
151 $h1.replaceWith($inputFieldWrap);
152 $inputField.val($h1.text()).focus();
153
154 $inputField.on('keyup', function(e) {
155 switch (e.which) {
156 case 13: // enter
157 $inputFieldWrap.find('[data-action=submit]').trigger('click');
158 break;
159 case 27: // escape
160 $inputFieldWrap.find('[data-action=cancel]').trigger('click');
161 break;
162 }
163 });
164 };
165
166 /**
167 * Set the page id (used in the RequireJS callback)
168 *
169 * @param {Number} pageId
170 */
171 PageActions.setPageId = function(pageId) {
172 PageActions.settings.pageId = pageId;
173 };
174
175 /**
176 * Set the overlay id
177 *
178 * @param {Number} overlayId
179 */
180 PageActions.setLanguageOverlayId = function(overlayId) {
181 PageActions.settings.language.pageOverlayId = overlayId;
182 };
183
184 /**
185 * Save the changes and reload the page tree
186 *
187 * @param {Object} $field
188 */
189 PageActions.saveChanges = function($field) {
190 var $inputFieldWrap = $field.parents('form');
191 $inputFieldWrap.find('button').addClass('disabled');
192 $field.attr('disabled', 'disabled');
193
194 var parameters = {},
195 pagesTable,
196 recordUid;
197
198 if (PageActions.settings.language.pageOverlayId === 0) {
199 pagesTable = 'pages';
200 recordUid = PageActions.settings.pageId;
201 } else {
202 pagesTable = 'pages_language_overlay';
203 recordUid = PageActions.settings.language.pageOverlayId;
204 }
205
206 parameters.data = {};
207 parameters.data[pagesTable] = {};
208 parameters.data[pagesTable][recordUid] = {title: $field.val()};
209
210 require(['TYPO3/CMS/Backend/AjaxDataHandler'], function(DataHandler) {
211 DataHandler.process(parameters).done(function() {
212 $inputFieldWrap.find('[data-action=cancel]').trigger('click');
213 PageActions.elements.$pageTitle.text($field.val());
214 PageActions.initializePageTitleRenaming();
215 top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree();
216 }).fail(function() {
217 $inputFieldWrap.find('[data-action=cancel]').trigger('click');
218 });
219 });
220 };
221
222 $(function() {
223 PageActions.initializeElements();
224 PageActions.initializeEvents();
225 PageActions.documentIsReady = true;
226 });
227
228 return PageActions;
229 });