js/jquery/jquery.crmeditable.js

   1 /**
   2  * Copyright (C) 2012 Xavier Dutoit
   3  * Licensed to CiviCRM under the Academic Free License version 3.0.
   4  *
   5  * @see http://wiki.civicrm.org/confluence/display/CRMDOC/Structure+convention+for+automagic+edit+in+place
   6  */
   7 (function($) {
   8   $.fn.crmEditableEntity = function() {
   9     var
  10       el = this[0],
  11       ret = {},
  12       $row = this.first().closest('.crm-entity');
  13       ret.entity = $row.data('entity') || $row[0].id.split('-')[0];
  14       ret.id = $row.data('id') || $row[0].id.split('-')[1];
  15       ret.action = $row.data('action') || 'setvalue';
  16
  17     if (!ret.entity || !ret.id) {
  18       return false;
  19     }
  20     $('.crm-editable, [data-field]', $row).each(function() {
  21       var fieldName = $(this).data('field') || this.className.match(/crmf-(\S*)/)[1];
  22       if (fieldName) {
  23         ret[fieldName] = $(this).text();
  24         if (this === el) {
  25           ret.field = fieldName;
  26         }
  27       }
  28     });
  29     return ret;
  30   };
  31
  32   $.fn.crmEditable = function(options) {
  33     var checkable = function() {
  34       $(this).change(function() {
  35         var info = $(this).crmEditableEntity();
  36         if (!info.field) {
  37           return false;
  38         }
  39         var checked = $(this).is(':checked');
  40         var params = {
  41           sequential: 1,
  42           id: info.id,
  43           field: info.field,
  44           value: checked ? 1 : 0
  45         };
  46         CRM.api(info.entity, info.action, params, {
  47           context: this,
  48           error: function(data) {
  49             editableSettings.error.call(this, info.entity, info.field, checked, data);
  50           },
  51           success: function(data) {
  52             editableSettings.success.call(this, info.entity, info.field, checked, data);
  53           }
  54         });
  55       });
  56     };
  57
  58     var defaults = {
  59       form: {},
  60       callBack: function(data) {
  61         if (data.is_error) {
  62           editableSettings.error.call(this, data);
  63         } else {
  64           return editableSettings.success.call(this, data);
  65         }
  66       },
  67       error: function(entity, field, value, data) {
  68         $(this).crmError(data.error_message, ts('Error'));
  69         $(this).removeClass('crm-editable-saving');
  70       },
  71       success: function(entity, field, value, data) {
  72         var $i = $(this);
  73         CRM.status(ts('Saved'));
  74         $i.removeClass('crm-editable-saving crm-error');
  75         $i.html(value);
  76       }
  77     };
  78
  79     var editableSettings = $.extend({}, defaults, options);
  80     return this.each(function() {
  81       var $i = $(this);
  82       var fieldName = "";
  83
  84       if (this.nodeName == "INPUT" && this.type == "checkbox") {
  85         checkable.call(this, this);
  86         return;
  87       }
  88
  89       var settings = {
  90         tooltip: 'Click to edit...',
  91         placeholder: '<span class="crm-editable-placeholder">Click to edit</span>',
  92         data: function(value, settings) {
  93           return value.replace(/<(?:.|\n)*?>/gm, '');
  94         }
  95       };
  96       if ($i.data('placeholder')) {
  97         settings.placeholder = $i.data('placeholder');
  98       } else {
  99         settings.placeholder = '<span class="crm-editable-placeholder">Click to edit</span>';
 100       }
 101       if ($i.data('tooltip')) {
 102         settings.placeholder = $i.data('tooltip')
 103       } else {
 104         settings.tooltip = 'Click to edit...';
 105       }
 106       if ($i.data('type')) {
 107         settings.type = $i.data('type');
 108         settings.onblur = 'submit';
 109       }
 110       if ($i.data('options')) {
 111         settings.data = $i.data('options');
 112       }
 113       if (settings.type == 'textarea') {
 114         $i.addClass('crm-editable-textarea-enabled');
 115       }
 116       else {
 117         $i.addClass('crm-editable-enabled');
 118       }
 119
 120       $i.editable(function(value, settings) {
 121         $i.addClass('crm-editable-saving');
 122         var
 123           info = $i.crmEditableEntity(),
 124           params = {},
 125           action = $i.data('action') || info.action;
 126         if (!info.field) {
 127           return false;
 128         }
 129         if (info.id && info.id !== 'new') {
 130           params.id = info.id;
 131         }
 132         if (action === 'setvalue') {
 133           params.field = info.field;
 134           params.value = value;
 135         }
 136         else {
 137           params[info.field] = value;
 138         }
 139         CRM.api(info.entity, action, params, {
 140           context: this,
 141           error: function(data) {
 142             editableSettings.error.call(this, info.entity, info.field, value, data);
 143           },
 144           success: function(data) {
 145             if ($i.data('options')) {
 146               value = $i.data('options')[value];
 147             }
 148             $i.trigger('crmFormSuccess');
 149             editableSettings.success.call(this, info.entity, info.field, value, data);
 150           }
 151         });
 152       }, settings);
 153     });
 154   };
 155
 156 })(jQuery);