Merge pull request #20471 from eileenmcnaughton/schema
[civicrm-core.git] / js / crm.ajax.js
1 // https://civicrm.org/licensing
2 /**
3 * @see https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
4 * @see https://docs.civicrm.org/dev/en/latest/framework/ajax/
5 */
6 (function($, CRM, _, undefined) {
7 /**
8 * @param string path
9 * @param string|object query
10 * @param string mode - optionally specify "front" or "back"
11 */
12 var tplURL;
13 CRM.url = function (path, query, mode) {
14 if (typeof path === 'object') {
15 tplURL = path;
16 return path;
17 }
18 if (!tplURL) {
19 CRM.console('error', 'Error: CRM.url called before initialization');
20 }
21 if (!mode) {
22 mode = CRM.config && CRM.config.isFrontend ? 'front' : 'back';
23 }
24 query = query || '';
25 var url,
26 frag = path.split('?');
27 // Encode url path only if slashes in placeholder were also encoded
28 if (tplURL[mode].indexOf('civicrm/placeholder-url-path') >= 0) {
29 url = tplURL[mode].replace('civicrm/placeholder-url-path', frag[0]);
30 } else {
31 url = tplURL[mode].replace('civicrm%2Fplaceholder-url-path', encodeURIComponent(frag[0]));
32 }
33
34 if (_.isEmpty(query)) {
35 url = url.replace(/[?&]civicrm-placeholder-url-query=1/, '');
36 } else {
37 url = url.replace('civicrm-placeholder-url-query=1', typeof query === 'string' ? query : $.param(query));
38 }
39 if (frag[1]) {
40 url += (url.indexOf('?') < 0 ? '?' : '&') + frag[1];
41 }
42 return url;
43 };
44
45 $.fn.crmURL = function () {
46 return this.each(function() {
47 if (this.href) {
48 this.href = CRM.url(this.href);
49 }
50 });
51 };
52
53 // result is an array, but in js, an array is also an object
54 // Assign all the metadata properties to it, mirroring the results arrayObject in php
55 function arrayObject(data) {
56 var result = data.values || [];
57 if (_.isArray(result)) {
58 delete(data.values);
59 _.assign(result, data);
60 }
61 return result;
62 }
63
64 // https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
65 CRM.api4 = function(entity, action, params, index) {
66 return new Promise(function(resolve, reject) {
67 if (typeof entity === 'string') {
68 $.post(CRM.url('civicrm/ajax/api4/' + entity + '/' + action), {
69 params: JSON.stringify(params),
70 index: index
71 })
72 .done(function (data) {
73 resolve(arrayObject(data));
74 })
75 .fail(function (data) {
76 reject(data.responseJSON);
77 });
78 } else {
79 $.post(CRM.url('civicrm/ajax/api4'), {
80 calls: JSON.stringify(entity)
81 })
82 .done(function(data) {
83 _.each(data, function(item, key) {
84 data[key] = arrayObject(item);
85 });
86 resolve(data);
87 })
88 .fail(function (data) {
89 reject(data.responseJSON);
90 });
91 }
92 });
93 };
94
95 /**
96 * AJAX api
97 * @link https://docs.civicrm.org/dev/en/latest/api/interfaces/#ajax
98 */
99 CRM.api3 = function(entity, action, params, status) {
100 if (typeof(entity) === 'string') {
101 params = {
102 entity: entity,
103 action: action.toLowerCase(),
104 json: JSON.stringify(params || {})
105 };
106 } else {
107 params = {
108 entity: 'api3',
109 action: 'call',
110 json: JSON.stringify(entity)
111 };
112 status = action;
113 }
114 var ajax = $.ajax({
115 url: CRM.url('civicrm/ajax/rest'),
116 dataType: 'json',
117 data: params,
118 type: params.action.indexOf('get') === 0 ? 'GET' : 'POST'
119 });
120 if (status) {
121 // Default status messages
122 if (status === true) {
123 status = {success: params.action === 'delete' ? ts('Removed') : ts('Saved')};
124 if (params.action.indexOf('get') === 0) {
125 status.start = ts('Loading...');
126 status.success = null;
127 }
128 }
129 var messages = status === true ? {} : status;
130 CRM.status(status, ajax);
131 }
132 return ajax;
133 };
134
135 /**
136 * @deprecated
137 * AJAX api
138 */
139 CRM.api = function(entity, action, params, options) {
140 // Default settings
141 var settings = {
142 context: null,
143 success: function(result, settings) {
144 return true;
145 },
146 error: function(result, settings) {
147 $().crmError(result.error_message, ts('Error'));
148 return false;
149 },
150 callBack: function(result, settings) {
151 if (result.is_error == 1) {
152 return settings.error.call(this, result, settings);
153 }
154 return settings.success.call(this, result, settings);
155 },
156 ajaxURL: 'civicrm/ajax/rest'
157 };
158 action = action.toLowerCase();
159 // Default success handler
160 switch (action) {
161 case "update":
162 case "create":
163 case "setvalue":
164 case "replace":
165 settings.success = function() {
166 CRM.status(ts('Saved'));
167 return true;
168 };
169 break;
170 case "delete":
171 settings.success = function() {
172 CRM.status(ts('Removed'));
173 return true;
174 };
175 }
176 params = {
177 entity: entity,
178 action: action,
179 json: JSON.stringify(params)
180 };
181 // Pass copy of settings into closure to preserve its value during multiple requests
182 (function(stg) {
183 $.ajax({
184 url: stg.ajaxURL.indexOf('http') === 0 ? stg.ajaxURL : CRM.url(stg.ajaxURL),
185 dataType: 'json',
186 data: params,
187 type: action.indexOf('get') < 0 ? 'POST' : 'GET',
188 success: function(result) {
189 stg.callBack.call(stg.context, result, stg);
190 }
191 });
192 })($.extend({}, settings, options));
193 };
194
195 $.widget('civi.crmSnippet', {
196 options: {
197 url: null,
198 block: true,
199 crmForm: null
200 },
201 _originalContent: null,
202 _originalUrl: null,
203 isOriginalUrl: function() {
204 var
205 args = {},
206 same = true,
207 newUrl = this._formatUrl(this.options.url),
208 oldUrl = this._formatUrl(this._originalUrl);
209 // Compare path
210 if (newUrl.split('?')[0] !== oldUrl.split('?')[0]) {
211 return false;
212 }
213 // Compare arguments
214 $.each((newUrl.split('?')[1] || '').split('&'), function(k, v) {
215 var arg = v.split('=');
216 args[arg[0]] = arg[1];
217 });
218 $.each((oldUrl.split('?')[1] || '').split('&'), function(k, v) {
219 var arg = v.split('=');
220 if (args[arg[0]] !== undefined && arg[1] !== args[arg[0]]) {
221 same = false;
222 }
223 });
224 return same;
225 },
226 resetUrl: function() {
227 this.options.url = this._originalUrl;
228 },
229 _create: function() {
230 this.element.addClass('crm-ajax-container');
231 if (!this.element.is('.crm-container *')) {
232 this.element.addClass('crm-container');
233 }
234 this._handleOrderLinks();
235 // Set default if not supplied
236 this.options.url = this.options.url || document.location.href;
237 this._originalUrl = this.options.url;
238 },
239 _onFailure: function(data, status) {
240 var msg, title = ts('Network Error');
241 if (this.options.block) this.element.unblock();
242 this.element.trigger('crmAjaxFail', data);
243 switch (status) {
244 case 'Forbidden':
245 title = ts('Access Denied');
246 msg = ts('Ensure you are still logged in and have permission to access this feature.');
247 break;
248 default:
249 msg = ts('Unable to reach the server. Please refresh this page in your browser and try again.');
250 }
251 CRM.alert(msg, title, 'error');
252 },
253 _onError: function(data) {
254 this.element.attr('data-unsaved-changes', 'false').trigger('crmAjaxError', data);
255 if (this.options.crmForm && this.options.crmForm.autoClose && this.element.data('uiDialog')) {
256 this.element.dialog('close');
257 }
258 },
259 _formatUrl: function(url, snippetType) {
260 // Strip hash
261 url = url.split('#')[0];
262 // Add snippet argument to url
263 if (snippetType) {
264 if (url.search(/[&?]snippet=/) < 0) {
265 url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=' + snippetType;
266 } else {
267 url = url.replace(/snippet=[^&]*/, 'snippet=' + snippetType);
268 }
269 }
270 return url;
271 },
272 // Hack to deal with civicrm legacy sort functionality
273 _handleOrderLinks: function() {
274 var that = this;
275 $('a.crm-weight-arrow', that.element).click(function(e) {
276 if (that.options.block) that.element.block();
277 $.getJSON(that._formatUrl(this.href, 'json')).done(function() {
278 that.refresh();
279 });
280 e.stopImmediatePropagation();
281 return false;
282 });
283 },
284 refresh: function() {
285 var that = this;
286 var url = this._formatUrl(this.options.url, 'json');
287 if (this.options.crmForm) $('form', this.element).ajaxFormUnbind();
288 if (this.options.block) this.element.block();
289 $.getJSON(url, function(data) {
290 if (data.status === 'redirect') {
291 that.options.url = data.userContext;
292 return that.refresh();
293 }
294 if (that.options.block) that.element.unblock();
295 if (!$.isPlainObject(data)) {
296 that._onFailure(data);
297 return;
298 }
299 if (data.status === 'error') {
300 that._onError(data);
301 return;
302 }
303 data.url = url;
304 that.element.trigger('crmUnload').trigger('crmBeforeLoad', data);
305 that._beforeRemovingContent();
306 that.element.html(data.content);
307 that._handleOrderLinks();
308 that.element.trigger('crmLoad', data);
309 if (that.options.crmForm) that.element.trigger('crmFormLoad', data);
310 // This is only needed by forms that load via ajax but submit without ajax, e.g. configure contribution page tabs
311 // TODO: remove this when those forms have been converted to use ajax submit
312 if (data.status === 'form_error' && $.isPlainObject(data.errors)) {
313 that.element.trigger('crmFormError', data);
314 $.each(data.errors, function(formElement, msg) {
315 $('[name="'+formElement+'"]', that.element).crmError(msg);
316 });
317 }
318 }).fail(function(data, msg, status) {
319 that._onFailure(data, status);
320 });
321 },
322 // Perform any cleanup needed before removing/replacing content
323 _beforeRemovingContent: function() {
324 var that = this;
325 // Save original content to be restored if widget is destroyed
326 if (this._originalContent === null) {
327 $('.blockUI', this.element).remove();
328 this._originalContent = this.element.contents().detach();
329 }
330 if (this.options.crmForm) $('form', this.element).ajaxFormUnbind();
331 },
332 _destroy: function() {
333 this.element.removeClass('crm-ajax-container').trigger('crmUnload');
334 this._beforeRemovingContent();
335 if (this._originalContent !== null) {
336 this.element.empty().append(this._originalContent);
337 }
338 }
339 });
340
341 var dialogCount = 0,
342 exclude = '[href^=#], [href^=javascript], [onclick], .no-popup, .cancel';
343
344 CRM.loadPage = function(url, options) {
345 var settings = {
346 target: '#crm-ajax-dialog-' + (dialogCount++),
347 dialog: (options && options.target) ? false : {}
348 };
349 if (options) $.extend(true, settings, options);
350 settings.url = url;
351 // Create new dialog
352 if (settings.dialog) {
353 settings.dialog = CRM.utils.adjustDialogDefaults(settings.dialog);
354 $('<div id="' + settings.target.substring(1) + '"></div>')
355 .dialog(settings.dialog)
356 .parent().find('.ui-dialog-titlebar')
357 .append($('<a class="crm-dialog-titlebar-print ui-dialog-titlebar-close" title="'+ts('Print window')+'" target="_blank" style="right:3.8em;"/>')
358 .button({icons: {primary: 'fa-print'}, text: false}));
359 }
360 // Add handlers to new or existing dialog
361 if ($(settings.target).data('uiDialog')) {
362 $(settings.target)
363 .on('dialogclose', function() {
364 if (settings.dialog && $(this).attr('data-unsaved-changes') !== 'true') {
365 $(this).crmSnippet('destroy').dialog('destroy').remove();
366 }
367 })
368 .on('crmLoad', function(e, data) {
369 // Set title
370 if (e.target === $(settings.target)[0] && data && !settings.dialog.title && data.title) {
371 $(this).dialog('option', 'title', data.title);
372 }
373 // Update print url
374 $(this).parent().find('a.crm-dialog-titlebar-print').attr('href', $(this).data('civiCrmSnippet')._formatUrl($(this).crmSnippet('option', 'url'), '2'));
375 });
376 }
377 $(settings.target).crmSnippet(settings).crmSnippet('refresh');
378 return $(settings.target);
379 };
380 CRM.loadForm = function(url, options) {
381 var formErrors = [], settings = {
382 crmForm: {
383 ajaxForm: {},
384 autoClose: true,
385 validate: true,
386 refreshAction: ['next_new', 'submit_savenext', 'upload_new'],
387 cancelButton: '.cancel',
388 openInline: 'a.open-inline, a.button, a.action-item, a.open-inline-noreturn',
389 onCancel: function(event) {}
390 }
391 };
392 // Move options that belong to crmForm. Others will be passed through to crmSnippet
393 if (options) $.each(options, function(key, value) {
394 if (typeof(settings.crmForm[key]) !== 'undefined') {
395 settings.crmForm[key] = value;
396 }
397 else {
398 settings[key] = value;
399 }
400 });
401
402 var widget = CRM.loadPage(url, settings).off('.crmForm');
403
404 // CRM-14353 - Warn of unsaved changes for all forms except those which have opted out
405 function cancelAction() {
406 var dirty = CRM.utils.initialValueChanged($('form:not([data-warn-changes=false])', widget));
407 widget.attr('data-unsaved-changes', dirty ? 'true' : 'false');
408 if (dirty) {
409 var id = widget.attr('id') + '-unsaved-alert',
410 title = widget.dialog('option', 'title'),
411 alert = CRM.alert('<p>' + ts('%1 has not been saved.', {1: title}) + '</p><p><a href="#" id="' + id + '">' + ts('Restore') + '</a></p>', ts('Unsaved Changes'), 'alert unsaved-dialog', {expires: 60000});
412 $('#' + id).button({icons: {primary: 'fa-undo'}}).click(function(e) {
413 widget.attr('data-unsaved-changes', 'false').dialog('open');
414 e.preventDefault();
415 });
416 }
417 }
418
419 if (widget.data('uiDialog')) widget.on('dialogbeforeclose', function(e) {
420 // CRM-14353 - Warn unsaved changes if user clicks close button or presses "esc"
421 if (e.originalEvent) {
422 cancelAction();
423 }
424 });
425
426 widget.on('crmFormLoad.crmForm', function(event, data) {
427 var $el = $(this).attr('data-unsaved-changes', 'false'),
428 settings = $el.crmSnippet('option', 'crmForm');
429 if (settings.cancelButton) $(settings.cancelButton, this).click(function(e) {
430 e.preventDefault();
431 var returnVal = settings.onCancel.call($el, e);
432 if (returnVal !== false) {
433 $el.trigger('crmFormCancel', e);
434 if ($el.data('uiDialog') && settings.autoClose) {
435 cancelAction();
436 $el.dialog('close');
437 }
438 else if (!settings.autoClose) {
439 $el.crmSnippet('resetUrl').crmSnippet('refresh');
440 }
441 }
442 });
443 if (settings.validate) {
444 $("form", this).crmValidate();
445 }
446 $("form:not('[data-no-ajax-submit=true]')", this).ajaxForm($.extend({
447 url: data.url.replace(/reset=1[&]?/, ''),
448 dataType: 'json',
449 success: function(response) {
450 if (response.content === undefined) {
451 $el.trigger('crmFormSuccess', response);
452 // Reset form for e.g. "save and new"
453 if (response.userContext && (response.status === 'redirect' || (settings.refreshAction && $.inArray(response.buttonName, settings.refreshAction) >= 0))) {
454 // Force reset of original url
455 $el.data('civiCrmSnippet')._originalUrl = response.userContext;
456 $el.crmSnippet('resetUrl').crmSnippet('refresh');
457 }
458 // Close if we are on the original url or the action was "delete" (in which case returning to view may be inappropriate)
459 else if ($el.data('uiDialog') && (settings.autoClose || response.action === 8)) {
460 $el.dialog('close');
461 }
462 else if (settings.autoClose === false) {
463 $el.crmSnippet('resetUrl').crmSnippet('refresh');
464 }
465 }
466 else {
467 if ($el.crmSnippet('option', 'block')) $el.unblock();
468 response.url = data.url;
469 $el.html(response.content).trigger('crmLoad', response).trigger('crmFormLoad', response);
470 if (response.status === 'form_error') {
471 formErrors = [];
472 $el.trigger('crmFormError', response);
473 $.each(response.errors || [], function(formElement, msg) {
474 formErrors.push($('[name="'+formElement+'"]', $el).crmError(msg));
475 });
476 }
477 }
478 },
479 beforeSubmit: function(submission) {
480 $.each(formErrors, function() {
481 if (this && this.close) this.close();
482 });
483 if ($el.crmSnippet('option', 'block')) $el.block();
484 $el.trigger('crmFormSubmit', submission);
485 }
486 }, settings.ajaxForm));
487 if (settings.openInline) {
488 settings.autoClose = $el.crmSnippet('isOriginalUrl');
489 $(this).off('.openInline').on('click.openInline', settings.openInline, function(e) {
490 if ($(this).is(exclude + ', .crm-popup, [target=crm-popup]')) {
491 return;
492 }
493 if ($(this).hasClass('open-inline-noreturn')) {
494 // Force reset of original url
495 $el.data('civiCrmSnippet')._originalUrl = $(this).attr('href');
496 }
497 $el.crmSnippet('option', 'url', $(this).attr('href')).crmSnippet('refresh');
498 e.preventDefault();
499 });
500 }
501 if ($el.data('uiDialog')) {
502 // Show form buttons as part of the dialog
503 var buttonContainers = '.crm-submit-buttons, .action-link',
504 buttons = [],
505 added = [];
506 $(buttonContainers, $el).find('.crm-form-submit, .crm-form-xbutton, a.button, button').each(function() {
507 var $el = $(this),
508 label = $el.is('input') ? $el.attr('value') : $el.text(),
509 identifier = $el.attr('name') || $el.attr('href');
510 if (!identifier || identifier === '#' || $.inArray(identifier, added) < 0) {
511 var $icon = $el.find('.icon, .crm-i'),
512 button = {'data-identifier': identifier, text: label, click: function() {
513 $el[0].click();
514 }};
515 if ($icon.length) {
516 button.icons = {primary: $icon.attr('class')};
517 } else {
518 var action = $el.attr('crm-icon') || ($el.hasClass('cancel') ? 'fa-times' : 'fa-check');
519 button.icons = {primary: action};
520 }
521 buttons.push(button);
522 added.push(identifier);
523 }
524 // display:none causes the form to not submit when pressing "enter"
525 $el.parents(buttonContainers).css({height: 0, padding: 0, margin: 0, overflow: 'hidden'});
526 });
527 $el.dialog('option', 'buttons', buttons);
528 }
529 // Allow a button to prevent ajax submit
530 $('input[data-no-ajax-submit=true], button[data-no-ajax-submit=true]').click(function() {
531 $(this).closest('form').ajaxFormUnbind();
532 });
533 // For convenience, focus the first field
534 $('input[type=text], textarea, select', this).filter(':visible').first().not('.dateplugin').focus();
535 });
536 return widget;
537 };
538 /**
539 * Handler for jQuery click event e.g. $('a').click(CRM.popup);
540 */
541 CRM.popup = function(e) {
542 var $el = $(this).first(),
543 url = $el.attr('href'),
544 popup = $el.data('popup-type') === 'page' ? CRM.loadPage : CRM.loadForm,
545 settings = $el.data('popup-settings') || {},
546 formData = false;
547 settings.dialog = settings.dialog || {};
548 if (e.isDefaultPrevented() || !CRM.config.ajaxPopupsEnabled || !url || $el.is(exclude + ', .open-inline, .open-inline-noreturn')) {
549 return;
550 }
551 // Sized based on css class
552 if ($el.hasClass('small-popup')) {
553 settings.dialog.width = 400;
554 settings.dialog.height = 300;
555 }
556 else if ($el.hasClass('medium-popup')) {
557 settings.dialog.width = settings.dialog.height = '50%';
558 }
559 var dialog = popup(url, settings);
560 // Trigger events from the dialog on the original link element
561 $el.trigger('crmPopupOpen', [dialog]);
562 // Listen for success events and buffer them so we only trigger once
563 dialog.on('crmFormSuccess.crmPopup crmPopupFormSuccess.crmPopup', function(e, data) {
564 formData = data;
565 });
566 dialog.on('dialogclose.crmPopup', function(e, data) {
567 if (formData) {
568 $el.trigger('crmPopupFormSuccess', [dialog, formData]);
569 }
570 $el.trigger('crmPopupClose', [dialog, data]);
571 });
572 e.preventDefault();
573 };
574 /**
575 * An event callback for CRM.popup or a standalone function to refresh the content around a given element
576 * @param e {event|selector}
577 */
578 CRM.refreshParent = function(e) {
579 // Use e.target if input smells like an event, otherwise assume it's a jQuery selector
580 var $el = (e.stopPropagation && e.target) ? $(e.target) : $(e),
581 $table = $el.closest('.dataTable');
582 // Call native refresh method on ajax datatables
583 if ($table.length && $.fn.DataTable.fnIsDataTable($table[0]) && $table.dataTable().fnSettings().sAjaxSource) {
584 // Refresh ALL datatables - needed for contact relationship tab
585 $.each($.fn.dataTable.fnTables(), function() {
586 if ($(this).dataTable().fnSettings().sAjaxSource) $(this).unblock().dataTable().fnDraw();
587 });
588 }
589 // Otherwise refresh the nearest crmSnippet
590 else {
591 $el.closest('.crm-ajax-container, #crm-main-content-wrapper').crmSnippet().crmSnippet('refresh');
592 }
593 };
594
595 $(function($) {
596 $('body')
597 .on('click', 'a.crm-popup, a[target=crm-popup]', CRM.popup)
598 // Close unsaved dialog messages
599 .on('dialogopen', function(e) {
600 $('.alert.unsaved-dialog .ui-notify-cross', '#crm-notification-container').click();
601 })
602 // Destroy old unsaved dialog
603 .on('dialogcreate', function(e) {
604 $('.ui-dialog-content.crm-ajax-container:hidden[data-unsaved-changes=true]').crmSnippet('destroy').dialog('destroy').remove();
605 })
606 // Ensure wysiwyg content is updated prior to ajax submit
607 .on('form-pre-serialize', function(e) {
608 $('.crm-wysiwyg-enabled', e.target).each(function() {
609 CRM.wysiwyg.updateElement(this);
610 });
611 })
612 // Auto-resize dialogs when loading content
613 .on('crmLoad dialogopen', 'div.ui-dialog.ui-resizable.crm-container', function(e) {
614 var
615 $wrapper = $(this),
616 $dialog = $wrapper.children('.ui-dialog-content');
617 // small delay to allow contents to render
618 window.setTimeout(function() {
619 var currentHeight = $wrapper.outerHeight(),
620 padding = currentHeight - $dialog.height(),
621 newHeight = $dialog.prop('scrollHeight') + padding,
622 menuHeight = $('#civicrm-menu').outerHeight();
623 if ($('body').hasClass('crm-menubar-below-cms-menu')) {
624 menuHeight += $('#civicrm-menu').offset().top;
625 }
626 var maxHeight = $(window).height() - menuHeight;
627 newHeight = newHeight > maxHeight ? maxHeight : newHeight;
628 if (newHeight > (currentHeight + 15)) {
629 $dialog.dialog('option', {
630 position: {my: 'center', at: 'center center+' + (menuHeight / 2), of: window},
631 height: newHeight
632 });
633 }
634 }, 500);
635 });
636 });
637
638 }(jQuery, CRM, _));