907f80a04d7942b9297c1cf172a87048d7a9acfc
[Packages/TYPO3.CMS.git] / typo3 / sysext / viewpage / Resources / Public / JavaScript / Main.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 * Module: TYPO3/CMS/Viewpage/Main
15 * Main logic for resizing the view of the frame
16 */
17 define([
18 'jquery',
19 'TYPO3/CMS/Backend/Storage',
20 'jquery-ui/resizable'
21 ], function($, Storage) {
22 'use strict';
23
24 /**
25 * @type {{<resizableContainerIdentifier: string, sizeIdentifier: string, moduleBodySelector: string, storagePrefix: string, $iframe: null, $resizableContainer: null, $sizeSelector: null}}
26 * @exports TYPO3/CMS/Viewpage/Main
27 */
28 var ViewPage = {
29
30 resizableContainerIdentifier: '.t3js-viewpage-resizeable',
31 sizeIdentifier: ' .t3js-viewpage-size',
32 moduleBodySelector: '.t3js-module-body',
33
34 defaultLabel: $('.t3js-preset-custom-label').html().trim(),
35 minimalHeight: 300,
36 minimalWidth: 300,
37
38 storagePrefix: 'moduleData.web_view.States.',
39 $iframe: null,
40 $resizableContainer: null,
41 $sizeSelector: null,
42
43 customSelector: '.t3js-preset-custom',
44 customWidthSelector: '.t3js-preset-custom-width',
45 customHeightSelector: '.t3js-preset-custom-height',
46
47 changeOrientationSelector: '.t3js-change-orientation',
48 changePresetSelector: '.t3js-change-preset',
49
50 inputWidthSelector: '.t3js-viewpage-input-width',
51 inputHeightSelector: '.t3js-viewpage-input-height',
52
53 currentLabelSelector: '.t3js-viewpage-current-label',
54 topbarContainerSelector: '.t3js-viewpage-topbar',
55
56 queue: [],
57 queueIsRunning: false,
58 queueDelayTimer: null
59
60 };
61
62 ViewPage.persistQueue = function() {
63 if (ViewPage.queueIsRunning === false && ViewPage.queue.length >= 1) {
64 ViewPage.queueIsRunning = true;
65 var item = ViewPage.queue.shift();
66 Storage.Persistent.set(item.storageIdentifier, item.data).done(function() {
67 ViewPage.queueIsRunning = false;
68 ViewPage.persistQueue();
69 });
70 }
71 }
72
73 ViewPage.addToQueue = function(storageIdentifier, data) {
74 var item = {
75 'storageIdentifier': storageIdentifier,
76 'data': data
77 };
78 ViewPage.queue.push(item);
79 if (ViewPage.queue.length >= 1) {
80 ViewPage.persistQueue();
81 }
82 }
83
84 ViewPage.setSize = function(width, height) {
85 if (isNaN(height)) {
86 height = ViewPage.calculateContainerMaxHeight();
87 }
88 if (height < ViewPage.minimalHeight) {
89 height = ViewPage.minimalHeight;
90 }
91 if (isNaN(width)) {
92 width = ViewPage.calculateContainerMaxWidth();
93 }
94 if (width < ViewPage.minimalWidth) {
95 width = ViewPage.minimalWidth;
96 }
97
98 $(ViewPage.inputWidthSelector).val(width);
99 $(ViewPage.inputHeightSelector).val(height);
100
101 ViewPage.$resizableContainer.css({
102 width: width,
103 height: height,
104 left: 0
105 });
106 }
107
108 ViewPage.getCurrentWidth = function() {
109 return $(ViewPage.inputWidthSelector).val();
110 }
111
112 ViewPage.getCurrentHeight = function() {
113 return $(ViewPage.inputHeightSelector).val();
114 }
115
116 ViewPage.setLabel = function(label) {
117 $(ViewPage.currentLabelSelector).html(label);
118 }
119
120 ViewPage.getCurrentLabel = function() {
121 return $(ViewPage.currentLabelSelector).html().trim();
122 }
123
124 ViewPage.persistCurrentPreset = function() {
125 var data = {
126 width: ViewPage.getCurrentWidth(),
127 height: ViewPage.getCurrentHeight(),
128 label: ViewPage.getCurrentLabel()
129 }
130 ViewPage.addToQueue(ViewPage.storagePrefix + 'current', data);
131 }
132
133 ViewPage.persistCustomPreset = function() {
134 var data = {
135 width: ViewPage.getCurrentWidth(),
136 height: ViewPage.getCurrentHeight()
137 }
138 $(ViewPage.customSelector).data("width", data.width);
139 $(ViewPage.customSelector).data("height", data.height);
140 $(ViewPage.customWidthSelector).html(data.width);
141 $(ViewPage.customHeightSelector).html(data.height);
142 ViewPage.addToQueue(ViewPage.storagePrefix + 'custom', data);
143 }
144
145 ViewPage.persistCustomPresetAfterChange = function() {
146 clearTimeout(ViewPage.queueDelayTimer);
147 ViewPage.queueDelayTimer = setTimeout(function() {
148 ViewPage.persistCustomPreset();
149 }, 1000);
150 };
151
152 /**
153 * Initialize
154 */
155 ViewPage.initialize = function() {
156
157 ViewPage.$iframe = $('#tx_viewpage_iframe');
158 ViewPage.$resizableContainer = $(ViewPage.resizableContainerIdentifier);
159 ViewPage.$sizeSelector = $(ViewPage.sizeIdentifier);
160
161 // Change orientation
162 $(document).on('click', ViewPage.changeOrientationSelector, function() {
163 var width = $(ViewPage.inputHeightSelector).val();
164 var height = $(ViewPage.inputWidthSelector).val();
165 ViewPage.setSize(width, height);
166 ViewPage.persistCurrentPreset();
167 });
168
169 // On change
170 $(document).on('change', ViewPage.inputWidthSelector, function() {
171 var width = $(ViewPage.inputWidthSelector).val();
172 var height = $(ViewPage.inputHeightSelector).val();
173 ViewPage.setSize(width, height);
174 ViewPage.setLabel(ViewPage.defaultLabel);
175 ViewPage.persistCustomPresetAfterChange();
176 });
177 $(document).on('change', ViewPage.inputHeightSelector, function() {
178 var width = $(ViewPage.inputWidthSelector).val();
179 var height = $(ViewPage.inputHeightSelector).val();
180 ViewPage.setSize(width, height);
181 ViewPage.setLabel(ViewPage.defaultLabel);
182 ViewPage.persistCustomPresetAfterChange();
183 });
184
185 // Add event to width selector so the container is resized
186 $(document).on('click', ViewPage.changePresetSelector, function() {
187 var data = $(this).data();
188 ViewPage.setSize(parseInt(data.width), parseInt(data.height));
189 ViewPage.setLabel(data.label);
190 ViewPage.persistCurrentPreset();
191 });
192
193 // Initialize the jQuery UI Resizable plugin
194 ViewPage.$resizableContainer.resizable({
195 handles: 'w, sw, s, se, e'
196 });
197
198 ViewPage.$resizableContainer.on('resizestart', function() {
199 // Add iframe overlay to prevent losing the mouse focus to the iframe while resizing fast
200 $(this).append('<div id="viewpage-iframe-cover" style="z-index:99;position:absolute;width:100%;top:0;left:0;height:100%;"></div>');
201 });
202
203 ViewPage.$resizableContainer.on('resize', function(evt, ui) {
204 ui.size.width = ui.originalSize.width + ((ui.size.width - ui.originalSize.width) * 2);
205 if (ui.size.height < ViewPage.minimalHeight) {
206 ui.size.height = ViewPage.minimalHeight;
207 }
208 if (ui.size.width < ViewPage.minimalWidth) {
209 ui.size.width = ViewPage.minimalWidth;
210 }
211 $(ViewPage.inputWidthSelector).val(ui.size.width);
212 $(ViewPage.inputHeightSelector).val(ui.size.height);
213 ViewPage.$resizableContainer.css({
214 left: 0
215 });
216 ViewPage.setLabel(ViewPage.defaultLabel);
217 });
218
219 ViewPage.$resizableContainer.on('resizestop', function() {
220 $('#viewpage-iframe-cover').remove();
221 ViewPage.persistCurrentPreset();
222 ViewPage.persistCustomPreset();
223 });
224 };
225
226 /**
227 * @returns {Number}
228 */
229 ViewPage.calculateContainerMaxHeight = function() {
230 ViewPage.$resizableContainer.hide();
231 var $moduleBody = $(ViewPage.moduleBodySelector);
232 var padding = $moduleBody.outerHeight() - $moduleBody.height(),
233 documentHeight = $(document).height(),
234 topbarHeight = $(ViewPage.topbarContainerSelector).outerHeight();
235 ViewPage.$resizableContainer.show();
236 return documentHeight - padding - topbarHeight - 8;
237 };
238
239 /**
240 * @returns {Number}
241 */
242 ViewPage.calculateContainerMaxWidth = function() {
243 ViewPage.$resizableContainer.hide();
244 var $moduleBody = $(ViewPage.moduleBodySelector);
245 var padding = $moduleBody.outerWidth() - $moduleBody.width(),
246 documentWidth = $(document).width();
247 ViewPage.$resizableContainer.show();
248 return parseInt(documentWidth - padding);
249 };
250
251 /**
252 * @param {String} url
253 * @returns {{}}
254 */
255 ViewPage.getUrlVars = function(url) {
256 var vars = {};
257 var hash;
258 var hashes = url.slice(url.indexOf('?') + 1).split('&');
259 for (var i = 0; i < hashes.length; i ++) {
260 hash = hashes[i].split('=');
261 vars[hash[0]] = hash[1];
262 }
263 return vars;
264 };
265
266 $(ViewPage.initialize);
267
268 return ViewPage;
269 });