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, settings) {
  72         var $i = $(this);
  73         CRM.status(ts('Saved'));
  74         $i.removeClass('crm-editable-saving crm-error');
  75         value = value === '' ? settings.placeholder : value;
  76         $i.html(value);
  77       }
  78     };
  79
  80     var editableSettings = $.extend({}, defaults, options);
  81     return this.each(function() {
  82       var $i = $(this);
  83       var fieldName = "";
  84
  85       if (this.nodeName == "INPUT" && this.type == "checkbox") {
  86         checkable.call(this, this);
  87         return;
  88       }
  89
  90       var settings = {
  91         tooltip: 'Click to edit...',
  92         placeholder: '<span class="crm-editable-placeholder">Click to edit</span>',
  93         data: function(value, settings) {
  94           return value.replace(/<(?:.|\n)*?>/gm, '');
  95         }
  96       };
  97       if ($i.data('placeholder')) {
  98         settings.placeholder = $i.data('placeholder');
  99       } else {
 100         settings.placeholder = '<span class="crm-editable-placeholder">Click to edit</span>';
 101       }
 102       if ($i.data('tooltip')) {
 103         settings.placeholder = $i.data('tooltip')
 104       } else {
 105         settings.tooltip = 'Click to edit...';
 106       }
 107       if ($i.data('type')) {
 108         settings.type = $i.data('type');
 109         settings.onblur = 'submit';
 110       }
 111       if ($i.data('options')) {
 112         settings.data = $i.data('options');
 113       }
 114       if (settings.type == 'textarea') {
 115         $i.addClass('crm-editable-textarea-enabled');
 116       }
 117       else {
 118         $i.addClass('crm-editable-enabled');
 119       }
 120
 121       $i.editable(function(value, settings) {
 122         $i.addClass('crm-editable-saving');
 123         var
 124           info = $i.crmEditableEntity(),
 125           params = {},
 126           action = $i.data('action') || info.action;
 127         if (!info.field) {
 128           return false;
 129         }
 130         if (info.id && info.id !== 'new') {
 131           params.id = info.id;
 132         }
 133         if (action === 'setvalue') {
 134           params.field = info.field;
 135           params.value = value;
 136         }
 137         else {
 138           params[info.field] = value;
 139         }
 140         CRM.api(info.entity, action, params, {
 141           context: this,
 142           error: function(data) {
 143             editableSettings.error.call(this, info.entity, info.field, value, data);
 144           },
 145           success: function(data) {
 146             if ($i.data('options')) {
 147               value = $i.data('options')[value];
 148             }
 149             $i.trigger('crmFormSuccess');
 150             editableSettings.success.call(this, info.entity, info.field, value, data, settings);
 151           }
 152         });
 153       }, settings);
 154     });
 155   };
 156
 157 })(jQuery);