From 99d24adf7dca3f79154e5e694367ad77d38dbdb5 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Tue, 11 Mar 2014 21:11:49 -0400 Subject: [PATCH] crmeditable - code cleanup and remove crmForm fn $.crmForm is supplanted by CRM.loadForm --- js/jquery/jquery.crmeditable.js | 342 +++++++++++--------------------- 1 file changed, 111 insertions(+), 231 deletions(-) diff --git a/js/jquery/jquery.crmeditable.js b/js/jquery/jquery.crmeditable.js index 3c1bf0fb1f..f563f6d174 100644 --- a/js/jquery/jquery.crmeditable.js +++ b/js/jquery/jquery.crmeditable.js @@ -1,23 +1,10 @@ /** -* Copyright (C) 2012 Xavier Dutoit -* Licensed to CiviCRM under the Academic Free License version 3.0. -* -* -* This offers two features: -* - crmEditable() edit in place of a single field -* (mostly a wrapper that binds jeditable features with the ajax api and replies on crm-entity crmf-{field} html conventions) -* if you want to add an edit in place on a template: -* - add a class crm-entity and id {EntityName}-{Entityid} higher in the dom -* - add a class crm-editable and crmf-{FieldName} around the field (you can add a span if needed) -* - add data-action=create if you need to specify the api action to call (default setvalue) -* crmf- stands for crm field -* - crmForm() -* this embed a civicrm form and make it in place (load+ajaxForm) -* to make it easier to customize the form (eg. hide a button...) it triggers a 'load' event on the form. you can then catch the load on your code (using the $('#id_of_the_form').on(function(){//do something -*/ - + * Copyright (C) 2012 Xavier Dutoit + * Licensed to CiviCRM under the Academic Free License version 3.0. + * + * @see http://wiki.civicrm.org/confluence/display/CRMDOC/Structure+convention+for+automagic+edit+in+place + */ (function($) { - $.fn.crmEditableEntity = function() { var el = this[0], @@ -40,234 +27,127 @@ return ret; }; - $.fn.crmEditable = function (options) { - var checkable = function () { - $(this).change (function() { - var info = $(this).crmEditableEntity(); - if (!info.field) { - return false; + $.fn.crmEditable = function(options) { + var checkable = function() { + $(this).change(function() { + var info = $(this).crmEditableEntity(); + if (!info.field) { + return false; + } + var checked = $(this).is(':checked'); + var params = { + sequential: 1, + id: info.id, + field: info.field, + value: checked ? 1 : 0 + }; + CRM.api(info.entity, 'setvalue', params, { + context: this, + error: function(data) { + editableSettings.error.call(this, info.entity, info.field, checked, data); + }, + success: function(data) { + editableSettings.success.call(this, info.entity, info.field, checked, data); } - var checked = $(this).is(':checked'); - var params = { - sequential: 1, - id: info.id, - field: info.field, - value: checked ? 1 : 0 - }; - CRM.api(info.entity, 'setvalue', params, { - context: this, - error: function (data) { - editableSettings.error.call(this, info.entity, info.field, checked, data); - }, - success: function (data) { - editableSettings.success.call(this, info.entity, info.field, checked, data); - } - }); }); - }; - - var defaults = { - form:{}, - callBack:function(data){ - if (data.is_error) { - editableSettings.error.call (this,data); - } else { - return editableSettings.success.call (this,data); - } - }, - error: function(entity,field,value,data) { - $(this).crmError(data.error_message, ts('Error')); - $(this).removeClass('crm-editable-saving'); - }, - success: function(entity,field,value,data) { - var $i = $(this); - CRM.alert('', ts('Saved'), 'success'); - $i.removeClass ('crm-editable-saving crm-error'); - $i.html(value); + }); + }; + + var defaults = { + form: {}, + callBack: function(data) { + if (data.is_error) { + editableSettings.error.call(this, data); + } else { + return editableSettings.success.call(this, data); } - } - - var editableSettings = $.extend({}, defaults, options); - return this.each(function() { + }, + error: function(entity, field, value, data) { + $(this).crmError(data.error_message, ts('Error')); + $(this).removeClass('crm-editable-saving'); + }, + success: function(entity, field, value, data) { var $i = $(this); - var fieldName = ""; - - if (this.nodeName == "INPUT" && this.type=="checkbox") { - checkable.call(this,this); - return; - } + CRM.alert('', ts('Saved'), 'success'); + $i.removeClass('crm-editable-saving crm-error'); + $i.html(value); + } + }; - if (this.nodeName == 'A') { - if (this.className.indexOf('crmf-') == -1) { // it isn't a jeditable field - var formSettings= $.extend({}, editableSettings.form , - {source: $i.attr('href') - ,success: function (result) { - if ($i.hasClass('crm-dialog')) { - $('.ui-dialog').dialog('close').remove(); - } else - $i.next().slideUp().remove(); - $i.trigger('success',result); - } - }); - var id= $i.closest('.crm-entity').attr('id'); - if (id) { - var e=id.match(/(\S*)-(\S*)/); - if (!e) - console && console.log && console.log("Couldn't get the entity id. You need to set class='crm-entity' id='{entityName}-{id}'"); - formSettings.entity=e[1]; - formSettings.id=e[2]; - } - if ($i.hasClass('crm-dialog')) { - $i.click (function () { - var $n=$('
Loading
').appendTo('body'); - $n.dialog ({modal:true,width:500}); - $n.crmForm (formSettings); - return false; - }); - } else { - $i.click (function () { - var $n=$i.next(); - if (!$n.hasClass('crm-target')) { - $n=$i.after('
').next(); - } else { - $n.slideToggle(); - return false; - }; - $n.crmForm (formSettings); - return false; - }); - } - return; - } - } + var editableSettings = $.extend({}, defaults, options); + return this.each(function() { + var $i = $(this); + var fieldName = ""; + if (this.nodeName == "INPUT" && this.type == "checkbox") { + checkable.call(this, this); + return; + } - var settings = { - tooltip : 'Click to edit...', - placeholder : 'Click to edit', - data: function(value, settings) { - return value.replace(/<(?:.|\n)*?>/gm, ''); - } - }; - if ($i.data('placeholder')) { - settings.placeholder = $i.data('placeholder'); - } else { - settings.placeholder = 'Click to edit'; - } - if ($i.data('tooltip')) { - settings.placeholder = $i.data('tooltip') - } else { - settings.tooltip = 'Click to edit...'; + var settings = { + tooltip: 'Click to edit...', + placeholder: 'Click to edit', + data: function(value, settings) { + return value.replace(/<(?:.|\n)*?>/gm, ''); } - if ($i.data('type')) { - settings.type = $i.data('type'); - settings.onblur = 'submit'; + }; + if ($i.data('placeholder')) { + settings.placeholder = $i.data('placeholder'); + } else { + settings.placeholder = 'Click to edit'; + } + if ($i.data('tooltip')) { + settings.placeholder = $i.data('tooltip') + } else { + settings.tooltip = 'Click to edit...'; + } + if ($i.data('type')) { + settings.type = $i.data('type'); + settings.onblur = 'submit'; + } + if ($i.data('options')) { + settings.data = $i.data('options'); + } + if (settings.type == 'textarea') { + $i.addClass('crm-editable-textarea-enabled'); + } + else { + $i.addClass('crm-editable-enabled'); + } + + $i.editable(function(value, settings) { + $i.addClass('crm-editable-saving'); + var + info = $i.crmEditableEntity(), + params = {}, + action = $i.data('action') || 'setvalue'; + if (!info.field) { + return false; } - if ($i.data('options')){ - settings.data = $i.data('options'); + if (info.id && info.id !== 'new') { + params.id = info.id; } - if(settings.type == 'textarea'){ - $i.addClass ('crm-editable-textarea-enabled'); + if (action === 'setvalue') { + params.field = info.field; + params.value = value; } - else{ - $i.addClass ('crm-editable-enabled'); + else { + params[info.field] = value; } - - $i.editable(function(value,settings) { - $i.addClass ('crm-editable-saving'); - var - info = $i.crmEditableEntity(), - params= {}, - action = $i.data('action') || 'setvalue'; - if (!info.field) { - return false; - } - if (info.id && info.id !== 'new') { - params.id = info.id; - } - if (action === 'setvalue') { - params.field = info.field; - params.value = value; - } - else { - params[info.field] = value; - } - CRM.api(info.entity, action, params, { - context: this, - error: function (data) { - editableSettings.error.call(this, info.entity, info.field, value, data); - }, - success: function (data) { - if ($i.data('options')){ - value = $i.data('options')[value]; - } - editableSettings.success.call(this, info.entity, info.field, value, data); - } - }); - },settings); - }); - } - - $.fn.crmForm = function (options ) { - var settings = $.extend( { - 'title':'', - 'entity':'', - 'action':'get', - 'id':0, - 'sequential':1, - 'dialog': false, - 'load' : function (target){}, - 'success' : function (result) { - $(this).html(ts('Saved')); - } - }, options); - - - return this.each(function() { - var formLoaded = function (target) { - var $this =$(target); - var destination=""; - $this.find('form').ajaxForm({ - beforeSubmit :function () { - $this.html("
Saving...
"); - return true; + CRM.api(info.entity, action, params, { + context: this, + error: function(data) { + editableSettings.error.call(this, info.entity, info.field, value, data); }, - success:function(response) { - if (response.indexOf('crm-error') >= 0) { // we got an error, re-display the page - $this.html(response); - formLoaded(target); - } else { - if (response[0] == '{') - settings.success($.parseJSON (response)); - else - settings.success(response); + success: function(data) { + if ($i.data('options')) { + value = $i.data('options')[value]; } + $i.trigger('crmFormSuccess'); + editableSettings.success.call(this, info.entity, info.field, value, data); } - }).append(''+destination).trigger('load'); - - settings.load(target); - }; - - var $this = $(this); - if (settings.source && settings.source.indexOf('snippet') == -1) { - if (settings.source.indexOf('?') >= 0) - settings.source = settings.source + "&snippet=1"; - else - settings.source = settings.source + "?snippet=1"; - } - - - $this.html ("Loading..."); - if (settings.dialog) - $this.dialog({width:'auto',minWidth:600}); - $this.load (settings.source ,function (){formLoaded(this)}); - + }); + }, settings); }); }; -- 2.25.1