be377bfbfae659eaf242616aad2f290479ad2404
[Packages/TYPO3.CMS.git] / typo3 / sysext / viewpage / Resources / Public / JavaScript / common.js
1 // IIFE for faster access to $ and save $ use
2 (function ($, Ext) {
3
4 // make sure $ and ExtDirect is loaded
5 var extReady = false;
6 var $Ready = false;
7
8 $(document).ready(function ($) {
9 $Ready = true;
10 librariesReady();
11 });
12 Ext.onReady(function () {
13 extReady = true;
14 librariesReady();
15 });
16
17 var librariesReady = function () {
18 if (!$Ready || !extReady) {
19 return
20 }
21
22 var resizableContainer = $('#resizeable');
23 var widthSelector = $('#width');
24
25 //save states in BE_USER->uc
26 Ext.state.Manager.setProvider(new TYPO3.state.ExtDirectProvider({
27 key: 'moduleData.web_view.States',
28 autoRead: false
29 }));
30 // load states
31 if (Ext.isObject(TYPO3.settings.web_view.States)) {
32 Ext.state.Manager.getProvider().initState(TYPO3.settings.web_view.States);
33 }
34
35 // Add event to width selector
36 widthSelector.on('change', function () {
37 var jsonObject = JSON.parse(widthSelector.val());
38 var height = jsonObject['height'] ? jsonObject['height'] : '100%';
39 resizableContainer.animate({
40 'width': jsonObject['width'],
41 'height': height
42 });
43 Ext.state.Manager.set('widthSelectorValue', widthSelector.val());
44 });
45
46 // use stored states
47 // restore custom selector
48 var storedCustomWidth = Ext.state.Manager.get('widthSelectorCustomValue', false);
49 if (storedCustomWidth) {
50 // add custom selector if stored value is not there
51 if (widthSelector.find('option[value="' + storedCustomWidth + '"]').length === 0) {
52 addCustomWidthOption(storedCustomWidth);
53 }
54 }
55
56 // select stored value
57 var storedWidth = Ext.state.Manager.get('widthSelectorValue', false);
58 if (storedWidth) {
59 // select it
60 widthSelector.val(storedWidth).change();
61 }
62
63
64 // $ UI Resizable plugin
65 // initialize
66 resizableContainer.resizable({
67 handles: 'e, se, s'
68 });
69
70 // create and select custom option
71 resizableContainer.on('resizestart', function (event, ui) {
72
73 // check custom option is there and add
74 if (widthSelector.find('#custom').length === 0) {
75 addCustomWidthOption('{}');
76 }
77 // select it
78 widthSelector.find('#custom').prop('selected', true);
79
80 // add iframe overlay to prevent loosing the mouse focus to the iframe while resizing fast
81 $(this).append('<div id="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:100%;"></div>');
82
83 });
84
85 resizableContainer.on('resize', function (event, ui) {
86 // update custom option
87 var value = JSON.stringify({
88 width: ui.size.width,
89 height: ui.size.height
90 });
91 var label = getOptionLabel(value);
92 widthSelector.find('#custom').text(label).val(value);
93 });
94
95 resizableContainer.on('resizestop', function (event, ui) {
96 Ext.state.Manager.set('widthSelectorCustomValue', widthSelector.val());
97 // TODO: remove setTimeout workaround after bug #51998 in
98 // TYPO3\CMS\Backend\InterfaceState\ExtDirect\DataProvider->setState() was fixed
99 setTimeout(function () {
100 Ext.state.Manager.set('widthSelectorValue', widthSelector.val())
101 },
102 1000);
103
104 // remove iframe overlay
105 $('#iframeCover').remove();
106 });
107
108 function addCustomWidthOption(value) {
109 label = getOptionLabel(value);
110
111 var customOption = "<option id='custom' value='" + value + "'>" + label + "</option>";
112 widthSelector.prepend(customOption);
113 }
114
115 function getOptionLabel(data) {
116 var jsonObject = JSON.parse(data);
117 var height = jsonObject['height'] ? ' × ' + jsonObject['height'] + 'px ' : '';
118 return jsonObject['width'] + 'px ' + height + TYPO3.lang['customWidth'];
119 }
120 };
121 }(jQuery, Ext));