-
Notifications
You must be signed in to change notification settings - Fork 0
/
AdminInModal.js
246 lines (226 loc) · 12.2 KB
/
AdminInModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
$(document).ready(function ($) {
/*
Not sure why we need to add ' $' as an argument to the function, but it seems to be necessary
See https://stackoverflow.com/questions/40218341/typeerror-magnificpopup-is-not-a-function
*/
var $iframe;
var noClose = false;
/*
Enable magnific popup when clicked
*/
$('.magnific-modal').on('click', function (event) {
event.preventDefault(); // prevent the default action
$(this).addClass('mfp-iframe'); // add the class to the clicked element
$(this).magnificPopup({
// src: '#' + ProcessWire.config.aim.pageId,
type: 'iframe',
iframe: {
markup: '<div id="aim-header" style="position: absolute; top: -20px; color:white;"></div>' +
'<div id="aim-mfp" class="mfp-iframe-scaler">' + //aim-mfd id is set to enable other js to test if we are in AdminInModal context
'<div class="mfp-close"></div>' +
'<iframe class="mfp-iframe" allowfullscreen>' +
'</iframe>' +
'</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
},
closeOnBgClick: false,
closeBtnInside: true,
callbacks: {
open: function () {
// console.log('Popup opened', $.magnificPopup.instance);
// console.log('Contents', $.magnificPopup.instance.content);
// console.log('iframe', $.magnificPopup.instance.content.find('iframe'));
if($.magnificPopup && $.magnificPopup.instance.content) {
$iframe = $.magnificPopup.instance.content.find('iframe');
onLoadIframe();
// onSubmit();
}
sessionStorage.setItem('closeOnSaveReady', 'false'); // reset the closeOnSaveReady flag
// console.log('closeOnSaveReady 0', sessionStorage.getItem('closeOnSaveReady'));
},
},
});
/*
Set popup to size determined by params
*/
$(this).on('mfpOpen', function (event) {
// console.log($(this).data('aim-width'), 'opening');
// console.log('Popup opened', $.magnificPopup.instance);
// console.log('Data in open', $(this).data());
let width = $(this).data('aim-width');
let height = $(this).data('aim-height');
let addSaveHead = $(this).data('save-head-button');
let suppressNotices = $(this).data('suppress-notices');
let headerText = $(this).data('header-text');
let closeButton = $(this).data('close-button');
let closeOnSave = $(this).data('close-on-save');
// console.log('closeOnSave', closeOnSave);
$.magnificPopup.instance.contentContainer.attr({'style': 'width: ' + width + ' !important; height: ' + height + ' !important;'});
$.magnificPopup.instance.content.attr({'save-head-button': addSaveHead});
$.magnificPopup.instance.content.attr({'suppress-notices': suppressNotices});
$.magnificPopup.instance.content.attr({'close-on-save': closeOnSave});
$.magnificPopup.instance.content.prepend("<div>" + headerText + "</div>")
if (closeButton == '0') {
$.magnificPopup.instance.currTemplate.closeBtn.remove();
}
});
/*
Redirect after close
*/
$(this).on('mfpClose', function (event) {
// console.log('Redirect', $(this).data('redirect'));
// console.log('location.href', window.location.href);
// console.log('location.protocol', window.location.protocol);
// console.log('location.hostname', window.location.hostname);
sessionStorage.removeItem('closeOnSaveReady');
if ($(this).data('redirect')) {
if (window.location.href == window.location.protocol + '//' + window.location.hostname + $(this).data('redirect') || $(this).data('redirect') == '.') {
window.location.reload();
} else {
if ($(this).data('redirect').substring(0, 1) == '#') {
// remove any existing hashes before adding the new one
const fullUrl = location.href;
const hashIndex = fullUrl.indexOf(location.hash);
const urlWithoutHash = hashIndex !== -1 ? fullUrl.substring(0, hashIndex) : fullUrl;
// console.log(urlWithoutHash);
window.location.href = urlWithoutHash + $(this).data('redirect');
// below is because it doesn't reload the page if the urlWithoutHash is the same
window.location.reload();
} else {
window.location.href = $(this).data('redirect');
}
}
}
});
});
// Open the popup when an element is clicked
$('.magnific-modal').on('click', function (event) {
event.preventDefault(); // prevent the default action
$(this).magnificPopup('open'); // open the popup
});
/*
If we are loading the iframe, check the parent container to see if we are in AdminInModal context,
then modify the form accordingly.
(NB this is possible because the iframe and parent are in the same domain)
*/
if(parent.document.getElementById('aim-mfp') != null) {
customiseForm();
}
function onLoadIframe() {
// console.log('iframe length', $iframe.length);
// console.log('closeOnSaveReady 1', sessionStorage.getItem('closeOnSaveReady'));
if ($iframe.length > 0) $iframe.on('load', function () {
// console.log('noClose', noClose);
// console.log('closeOnSaveReady 2', sessionStorage.getItem('closeOnSaveReady'));
var $iframeBodyModal = $($iframe[0].contentWindow.document).find('body.modal');
// console.log('iframe body modal', $iframeBodyModal);
// console.log('Saving - check length', $iframeBodyModal.find(".NoticeError, .ui-state-error").length);
let isAdd = $iframeBodyModal.find('#ProcessPageAdd').length > 0;
// console.log('isAdd', isAdd);
let content = parent.document.getElementById('aim-mfp');
if (content != null) {
let closeOnSave = content.getAttribute('close-on-save');
// console.log(closeOnSave, 'closeOnSave');
/*
closeOnSave is a space-separated list of notice types that will allow the popup to close on save, or the word 'no' - in which case the popup will not close
e.g."no": no close-on-save, "": allow, but any error, warning or message will prevent close-on-save, "messages": allow close if there are only messages, "errors warnings messages": always close regardless of notices'
If "add" is included in the list, then the popup will close on save if it is a page add operation
We set findErrors to the corresponding jQuery selector
*/
let findErrors = '';
let includeAdd = false;
if (closeOnSave != 'no') {
let closeArray = closeOnSave.split(" ");
closeArray.forEach(function (el, index, arr) {
let noticeType = el.trim();
if(noticeType === 'add') {
includeAdd = true;
return;
}
if (noticeType.slice(-1) === 's') {
noticeType = noticeType.slice(0, -1); // Remove the final 's'
}
findErrors += '.Notice' + noticeType.charAt(0).toUpperCase() + noticeType.slice(1) + ', ';
});
findErrors = ['.NoticeError', '.NoticeWarning', '.NoticeMessage'].filter(x => !findErrors.split(", ").includes(x)).join(', '); // return the 'complement' of findErrors
if (findErrors.includes('.NoticeError')) {
findErrors += ', .ui-state-error, ';
}
findErrors = findErrors.substring(0, findErrors.length - 2); // remove the final comma
}
// console.log('includeAdd', includeAdd);
// console.log('findErrors', findErrors);
if (!includeAdd && isAdd) {
noClose = true;
}
if (sessionStorage.getItem('closeOnSaveReady') == 'true') {
if (closeOnSave != 'no' && (!findErrors || $iframeBodyModal.find(findErrors).length == 0)) {
if (typeof Notifications != "undefined") {
var messages = [];
$('body.modal').find(".NoticeMessage").each(function () {
messages[messages.length] = $(this).text();
});
if (messages.length > 0) setTimeout(function () {
for (var i = 0; i < messages.length; i++) {
Notifications.message(messages[i]);
}
}, 500);
}
// console.log('Close Popup');
/*
NB The action to close the popup appears to be cached if the conditions are not met and then actioned as soon as the conditions are met
By making it dependent on noClose, we can prevent the popup from closing until noClose is set to false even if the earlier conditions are met
*/
if (!noClose) $.magnificPopup.close();
noClose = false;
// console.log('Popup closed');
// return;
} else {
// console.log('Popup left open');
// sessionStorage.setItem('closeOnSaveReady', 'false');
// errors occurred, so keep it open
}
}
}
});
}
/*
Dim while saving
*/
$submit = $('form button.ui-button[type=submit]');
// console.log('submit', $submit);
$($submit).on('click', function (event) {
sessionStorage.setItem('closeOnSaveReady', 'true');
noClose = true;
// console.log('closeOnSaveReady 3', sessionStorage.getItem('closeOnSaveReady'));
$('body.modal').css("opacity", 0.2);
});
});
/*
Add Save button at top of modal and suppress notices according to param set
*/
function customiseForm() {
let content = parent.document.getElementById('aim-mfp');
if (content != null) {
let addSaveHead = content.getAttribute('save-head-button');
if(addSaveHead == '1') {
$('body.modal.ProcessPageEdit form, body.modal.ProcessPageAdd form').prepend('<div id="pw-content-head-buttons" ' +
'class="uk-visible uk-grid"><span class="pw-button-dropdown-wrap uk-float-left">' +
'<button id="submit_save_copy" class="ui-button ui-widget ui-corner-all pw-head-button pw-button-dropdown-main ui-state-default" ' +
'name="submit_save" value="Save" type="submit" data-from_id="submit_save"><span class="ui-button-text">Save</span></button>' +
'</span></div>');
}
let suppressNotices = content.getAttribute('suppress-notices');
// console.log(suppressNotices, 'suppressNotices');
let suppressArray = suppressNotices.split(" ");
suppressArray.forEach(function (el, index, arr) {
var noticeText = '.Notice' + el.charAt(0).toUpperCase()
+ el.slice(1);
if(noticeText.length > 0) {
noticeText = noticeText.substring(0, noticeText.length - 1); // remove the 's'
let selector = 'body.modal .pw-notices ' + noticeText;
// console.log(selector, 'selector to hide');
$(selector).hide();
}
});
}
}