1 // https://civicrm.org/licensing
4 /* jshint validthis: true */
6 // TODO: We'll need a way to clear this cache if options are edited.
7 // Maybe it should be stored in the CRM object so other parts of the app can use it.
8 // Note that if we do move it, we should also change the format of option lists to our standard sequential arrays
12 * Helper fn to retrieve semantic data from markup
14 $.fn
.crmEditableEntity = function() {
18 $row
= this.first().closest('.crm-entity');
19 ret
.entity
= $row
.data('entity') || $row
[0].id
.split('-')[0];
20 ret
.id
= $row
.data('id') || $row
[0].id
.split('-')[1];
21 ret
.action
= $row
.data('action') || 'create';
23 if (!ret
.entity
|| !ret
.id
) {
26 $('.crm-editable, [data-field]', $row
).each(function() {
27 var fieldName
= $(this).data('field') || this.className
.match(/crmf-(\S*)/)[1];
29 ret
[fieldName
] = $(this).text();
31 ret
.field
= fieldName
;
39 * @see http://wiki.civicrm.org/confluence/display/CRMDOC/Structure+convention+for+automagic+edit+in+place
41 $.fn
.crmEditable = function(options
) {
42 function checkable() {
43 $(this).off('.crmEditable').on('change.crmEditable', function() {
45 info
= $el
.crmEditableEntity();
53 value
: $el
.is(':checked') ? 1 : 0
55 CRM
.api3(info
.entity
, info
.action
, params
, true);
59 return this.each(function() {
63 error: function(entity
, field
, value
, data
) {
65 $(this).html(originalValue
|| settings
.placeholder
).click();
66 var msg
= $.isPlainObject(data
) && data
.error_message
;
67 errorMsg
= $(':input', this).first().crmError(msg
|| ts('Sorry an error occurred and your information was not saved'), ts('Error'));
69 success: function(entity
, field
, value
, data
, settings
) {
71 if ($i
.data('refresh')) {
72 CRM
.refreshParent($i
);
74 value
= value
=== '' ? settings
.placeholder
: _
.escape(value
);
81 editableSettings
= $.extend({}, defaults
, options
);
83 if ($(this).hasClass('crm-editable-enabled')) {
87 if (this.nodeName
== "INPUT" && this.type
== "checkbox") {
88 checkable
.call(this, this);
92 // Table cell needs something inside it to look right
93 if ($(this).is('td')) {
95 .removeClass('crm-editable')
96 .wrapInner('<div class="crm-editable" />');
97 $i
= $('div.crm-editable', this)
98 .data($(this).data());
99 var field
= this.className
.match(/crmf-(\S*)/);
101 $i
.data('field', field
[1]);
109 tooltip
: $i
.data('tooltip') || ts('Click to edit'),
110 placeholder
: $i
.data('placeholder') || '<span class="crm-editable-placeholder">' + ts('Click to edit') + '</span>',
112 cancel
: '<button type="cancel"><span class="ui-icon ui-icon-closethick"></span></button>',
113 submit
: '<button type="submit"><span class="ui-icon ui-icon-check"></span></button>',
114 cssclass
: 'crm-editable-form',
116 onreset
: restoreContainer
118 if ($i
.data('type')) {
119 settings
.type
= $i
.data('type');
120 if (settings
.type
== 'boolean') {
121 settings
.type
= 'select';
122 $i
.data('options', {'0': ts('No'), '1': ts('Yes')});
125 if (settings
.type
== 'textarea') {
126 $i
.addClass('crm-editable-textarea-enabled');
128 $i
.addClass('crm-editable-enabled');
130 $i
.editable(function(value
, settings
) {
131 $i
.addClass('crm-editable-saving');
133 info
= $i
.crmEditableEntity(),
136 action
= $i
.data('action') || info
.action
;
140 if (info
.id
&& info
.id
!== 'new') {
143 if (action
=== 'setvalue') {
144 params
.field
= info
.field
;
145 params
.value
= value
;
148 params
[info
.field
] = value
;
150 CRM
.api3(info
.entity
, action
, params
, {error
: null})
151 .done(function(data
) {
153 return editableSettings
.error
.call($el
[0], info
.entity
, info
.field
, value
, data
);
155 if ($el
.data('options')) {
156 value
= $el
.data('options')[value
] || '';
158 else if ($el
.data('optionsHashKey')) {
159 var options
= optionsCache
[$el
.data('optionsHashKey')];
160 value
= options
&& options
[value
] ? options
[value
] : '';
162 $el
.trigger('crmFormSuccess');
163 editableSettings
.success
.call($el
[0], info
.entity
, info
.field
, value
, data
, settings
);
165 .fail(function(data
) {
166 editableSettings
.error
.call($el
[0], info
.entity
, info
.field
, value
, data
);
170 // CRM-15759 - Workaround broken textarea handling in jeditable 1.7.1
171 $i
.click(function() {
172 $('textarea', this).off()
173 // Fix cancel-on-blur
174 .on('blur', function(e
) {
175 if (!e
.relatedTarget
|| !$(e
.relatedTarget
).is('.crm-editable-form button')) {
176 $i
.find('button[type=cancel]').click();
179 // Add support for ctrl-enter shortcut key
180 .on('keydown', function (e
) {
181 if (e
.ctrlKey
&& e
.keyCode
== 13) {
182 $i
.find('button[type=submit]').click();
188 function getData(value
, settings
) {
189 // Add css class to wrapper
190 // FIXME: This should be a response to an event instead of coupled with this function but jeditable 1.7.1 doesn't trigger any events :(
191 $i
.addClass('crm-editable-editing');
193 originalValue
= value
;
195 if ($i
.data('type') == 'select' || $i
.data('type') == 'boolean') {
196 if ($i
.data('options')) {
197 return formatOptions($i
.data('options'));
200 info
= $i
.crmEditableEntity(),
201 // Strip extra id from multivalued custom fields
202 custom
= info
.field
.match(/(custom_\d+)_\d+/),
203 field
= custom
? custom
[1] : info
.field
,
204 hash
= info
.entity
+ '.' + field
,
209 $i
.data('optionsHashKey', hash
);
210 if (!optionsCache
[hash
]) {
212 url
: CRM
.url('civicrm/ajax/rest'),
213 data
: {entity
: info
.entity
, action
: 'getoptions', json
: JSON
.stringify(params
)},
214 async
: false, // jeditable lacks support for async options lookup
215 success: function(data
) {optionsCache
[hash
] = data
.values
;}
218 return formatOptions(optionsCache
[hash
]);
220 // Unwrap contents then replace html special characters with plain text
221 return _
.unescape(value
.replace(/<(?:.|\n)*?>/gm, ''));
224 function formatOptions(options
) {
225 if (typeof $i
.data('emptyOption') === 'string') {
226 // Using 'null' because '' is broken in jeditable 1.7.1
227 return $.extend({'null': $i
.data('emptyOption')}, options
);
232 function restoreContainer() {
233 if (errorMsg
&& errorMsg
.close
) errorMsg
.close();
234 $i
.removeClass('crm-editable-saving crm-editable-editing');
240 $(document
).on('crmLoad', function(e
) {
241 $('.crm-editable', e
.target
).not('thead *').crmEditable();