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