From 205bb8ae5494e975a7f22e4675a1856ebd27a10f Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Wed, 27 Nov 2013 17:01:48 -0800 Subject: [PATCH] CRM-10693 - crmSnippet - Convert clientside helpers to use $.widget; standardize events. --- js/Common.js | 196 ++++++++++++++++++++++++++-------------- js/view/crm.designer.js | 7 +- 2 files changed, 128 insertions(+), 75 deletions(-) diff --git a/js/Common.js b/js/Common.js index 7387bb3724..a3e0b5a343 100644 --- a/js/Common.js +++ b/js/Common.js @@ -820,9 +820,52 @@ CRM.validate = CRM.validate || { }); } + $.widget('civicrm.crmSnippet', { + options: { + url: document.location.href, + block: true, + crmForm: null + }, + _create: function() { + this.refresh(); + this.element.addClass('crm-ajax-container'); + if (!this.element.is('.crm-container *')) { + this.element.addClass('crm-container'); + } + }, + _onFailure: function(data) { + this.options.block && this.element.unblock(); + this.element.trigger('crmAjaxFail', data); + CRM.alert(ts('Unable to reach the server. Please refresh this page in your browser and try again.'), ts('Network Error'), 'error'); + }, + _formatUrl: function(url) { + // Add snippet argument to url + if (url.search(/[&?]snippet=/) < 0) { + url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=6'; + } + return url; + }, + refresh: function() { + var that = this; + var url = this._formatUrl(this.options.url); + this.options.block && this.element.block(); + $.getJSON(url, function(data) { + if (typeof(data) != 'object' || typeof(data.content) != 'string') { + that._onFailure(data); + return; + } + data.url = url; + that.element.html(data.content).trigger('crmLoad', data); + // This will also trigger crmFormLoad for forms + that.options.crmForm && that.element.trigger('crmFormLoad', data); + }).fail(function() { + that._onFailure(); + }); + } + }); + var dialogCount = 0; CRM.loadPage = function(url, options) { - options = options || {}; var settings = { target: '#crm-ajax-dialog-' + (dialogCount++), dialog: { @@ -833,104 +876,114 @@ CRM.validate = CRM.validate || { $(this).dialog('destroy'); $(this).remove(); } - }, - autoClose: true, - onFailure: function(data, settings) { - if (settings.dialog !== false && settings.autoClose) { - $(this).dialog('close'); - } - CRM.alert(ts('Unable to reach the server. Please refresh this page in your browser and try again.'), ts('Network Error'), 'error'); - }, - type: 'Page' + } }; - $.extend(true, settings, options); - // Add snippet argument to url - if (url.search(/[&?]snippet=/) < 0) { - url += (url.indexOf('?') < 0 ? '?' : '&') + 'snippet=6'; - } + options && $.extend(true, settings, options); settings.url = url; // Create new dialog if (settings.dialog !== false && settings.target[0] == '#') { - $('
' + ts('Loading') + '...
').dialog(settings.dialog); + $('
' + ts('Loading') + '...
').dialog(settings.dialog); } - $.getJSON(url, function(data) { - if (typeof(data) != 'object' || typeof(data.content) != 'string') { - settings.onFailure.call($(settings.target), data, settings); - return; - } - if (settings.dialog && !settings.dialog.title && data.title) { - $(settings.target).dialog('option', 'title', data.title); - } - settings.content = data.content; - $(settings.target).html(data.content).trigger('crm' + settings.type + 'Load', data); - if (typeof(settings.onLoad) == 'function') { - settings.onLoad.call($(settings.target),data, settings); - } + if (settings.dialog && !settings.dialog.title) { + $(settings.target).on('crmLoad', function(event, data) { + data.title && $(this).dialog('option', 'title', data.title); + }); + } + // Automatically open form links as new popups + settings.formLinks && $(settings.target).on('click', settings.formLinks, function() { + CRM.loadForm(this.href, { + dialog: { + width: '60%', + height: parseInt($(window).height() * .8) + } + }).on('crmFormSuccess', function() { + $(settings.target).crmSnippet('refresh'); + }); + return false; }); - return $(settings.target); + return $(settings.target).crmSnippet(settings); }; CRM.loadForm = function(url, options) { - options = options || {}; var settings = { - validate: true, - onCancel: function(event, settings) { - return false; - }, - onError: function(data, settings) { - $(this).html(data.content).trigger('crmFormReload', data); - if (typeof(data.errors) == 'object') { - $.each(data.errors, function(formElement, msg) { - $('[name="'+formElement+'"]').crmError(msg); - }); + crmForm: { + ajaxForm: {}, + block: true, + autoClose: true, + validate: true, + refreshAction: ['next_new', 'submit_savenext'], + cancelButton: '.cancel.form-submit', + openInline: 'a.button', + onCancel: function(event) {}, + onError: function(data) { + var $el = $(this); + $el.html(data.content).trigger('crmLoad', data).trigger('crmFormLoad', data); + if (typeof(data.errors) == 'object') { + $.each(data.errors, function(formElement, msg) { + $('[name="'+formElement+'"]', $el).crmError(msg); + }); + } } - settings.onLoad.call($(settings.target), data, settings); } }; - $.extend(settings, options, {type: 'Form'}); - settings.onLoad = function(data, settings) { - $(".cancel.form-submit", this).click(function(event) { - var returnVal = settings.onCancel.call($(settings.target), event, settings); - if (settings.dialog !== false && settings.autoClose && returnVal !== true) { - $(settings.target).dialog('close'); + // Move options that belong to crmForm. Others will be passed through to crmSnippet + options && $.each(options, function(key, value) { + if (typeof(settings.crmForm[key]) !== 'undefined') { + settings.crmForm[key] = value; + } + else { + settings[key] = value; + } + }); + settings.type = 'Form'; + + var widget = CRM.loadPage(url, settings); + + widget.on('crmFormLoad', function(event, data) { + var $el = $(this); + var settings = $el.data('crmSnippet').options.crmForm; + var dialog = $el.data('dialog'); + settings.cancelButton && $(settings.cancelButton, this).click(function(event) { + var returnVal = settings.onCancel.call($el, event); + if (returnVal !== false) { + $el.trigger('crmFormCancel', event); + dialog && settings.autoClose && $el.dialog('close'); } - return returnVal === true ? returnVal : false; + return returnVal === false; + }); + settings.openInline && $(settings.openInline, this).click(function(event) { + $el.crmSnippet('option', 'url', this.href).crmSnippet('refresh'); + return false; }); if (settings.validate) { $("form", this).validate(typeof(settings.validate) == 'object' ? settings.validate : CRM.validate.params); } - $("form", this).ajaxForm({ - url: settings.url, + $("form", this).ajaxForm($.extend({ + url: data.url, dataType: 'json', success: function(response) { if (response.status == 'success') { - if (typeof(settings.onSuccess) === 'function') { - settings.onSuccess.call($(settings.target), response, settings); - } - $(settings.target).unblock().trigger('crmFormSuccess', data); + settings.block && $el.unblock(); + $el.trigger('crmFormSuccess', response); // Reset form for e.g. "save and new" - if (settings.resetButton && response.buttonName == settings.resetButton) { - $(settings.target).html(settings.content).trigger('crmFormLoad', data); - settings.onLoad.call($(settings.target), data, settings); + if (settings.refreshAction && $.inArray(response.buttonName, settings.refreshAction) >= 0) { + $el.crmSnippet('option', 'url', response.userContext).crmSnippet('refresh'); } - else if (settings.dialog !== false && settings.autoClose) { - $(settings.target).dialog('close'); + else if (dialog && settings.autoClose) { + $el.dialog('close'); } } else { - settings.onError.call($(settings.target), response, settings); + settings.onError.call($el, response); } }, - beforeSubmit: function() { - $(settings.target).block().trigger('crmFormSubmit', data); + beforeSubmit: function(submission) { + settings.block && $el.block(); + $el.trigger('crmFormSubmit', submission); } - }); - // Call original onLoad fn - if (typeof(options.onLoad) == 'function') { - options.onLoad.call($(settings.target), data, settings); - } - }; - return CRM.loadPage(url, settings); + }, settings.ajaxForm)); + }); + return widget; }; // Preprocess all cj ajax calls to display messages @@ -950,6 +1003,9 @@ CRM.validate = CRM.validate || { }); $(function () { + // Trigger crmLoad on initial content for consistency. It will also be triggered for ajax-loaded content. + $('#crm-container').trigger('crmLoad'); + if ($('#crm-notification-container').length) { // Initialize notifications $('#crm-notification-container').notify(); diff --git a/js/view/crm.designer.js b/js/view/crm.designer.js index f35d60b0b6..3c56019bc2 100644 --- a/js/view/crm.designer.js +++ b/js/view/crm.designer.js @@ -411,11 +411,8 @@ action: 'add', gid: sections[sectionKey].custom_group_id }); - CRM.loadForm(url, { - resetButton: 'next_new', - onSuccess: function(data, settings) { - paletteView.doRefresh('custom_' + data.id); - } + CRM.loadForm(url).on('crmFormSuccess', function(e, data) { + paletteView.doRefresh('custom_' + data.id); }); return false; }, -- 2.25.1