1 // https://civicrm.org/licensing
3 // TODO: We'll need a way to clear this cache if options are edited.
4 // Maybe it should be stored in the CRM object so other parts of the app can use it.
5 // Note that if we do move it, we should also change the format of option lists to our standard sequential arrays
9 * Helper fn to retrieve semantic data from markup
11 $.fn
.crmEditableEntity = function() {
15 $row
= this.first().closest('.crm-entity');
16 ret
.entity
= $row
.data('entity') || $row
[0].id
.split('-')[0];
17 ret
.id
= $row
.data('id') || $row
[0].id
.split('-')[1];
18 ret
.action
= $row
.data('action') || 'setvalue';
20 if (!ret
.entity
|| !ret
.id
) {
23 $('.crm-editable, [data-field]', $row
).each(function() {
24 var fieldName
= $(this).data('field') || this.className
.match(/crmf-(\S*)/)[1];
26 ret
[fieldName
] = $(this).text();
28 ret
.field
= fieldName
;
36 * @see http://wiki.civicrm.org/confluence/display/CRMDOC/Structure+convention+for+automagic+edit+in+place
38 $.fn
.crmEditable = function(options
) {
39 function checkable() {
40 $(this).off('.crmEditable').on('change.crmEditable', function() {
42 info
= $el
.crmEditableEntity();
50 value
: $el
.is(':checked') ? 1 : 0
52 CRM
.api3(info
.entity
, info
.action
, params
, true);
56 return this.each(function() {
60 error: function(entity
, field
, value
, data
) {
62 $(this).html(originalValue
|| settings
.placeholder
).click();
63 var msg
= $.isPlainObject(data
) && data
.error_message
;
64 errorMsg
= $(':input', this).first().crmError(msg
|| ts('Sorry an error occurred and your information was not saved'), ts('Error'));
66 success: function(entity
, field
, value
, data
, settings
) {
68 if ($i
.data('refresh')) {
69 CRM
.refreshParent($i
);
71 value
= value
=== '' ? settings
.placeholder
: value
;
78 editableSettings
= $.extend({}, defaults
, options
);
80 if ($(this).hasClass('crm-editable-enabled')) {
84 if (this.nodeName
== "INPUT" && this.type
== "checkbox") {
85 checkable
.call(this, this);
89 // Table cell needs something inside it to look right
90 if ($(this).is('td')) {
92 .removeClass('crm-editable')
93 .wrapInner('<div class="crm-editable" />');
94 $i
= $('div.crm-editable', this)
95 .data($(this).data());
96 var field
= this.className
.match(/crmf-(\S*)/);
98 $i
.data('field', field
[1]);
106 tooltip
: $i
.data('tooltip') || ts('Click to edit'),
107 placeholder
: $i
.data('placeholder') || '<span class="crm-editable-placeholder">' + ts('Click to edit') + '</span>',
109 cancel
: '<button type="cancel"><span class="ui-icon ui-icon-closethick"></span></button>',
110 submit
: '<button type="submit"><span class="ui-icon ui-icon-check"></span></button>',
111 cssclass
: 'crm-editable-form',
113 onreset
: restoreContainer
115 if ($i
.data('type')) {
116 settings
.type
= $i
.data('type');
117 if (settings
.type
== 'boolean') {
118 settings
.type
= 'select';
119 $i
.data('options', {'0': ts('No'), '1': ts('Yes')});
122 if (settings
.type
== 'textarea') {
123 $i
.addClass('crm-editable-textarea-enabled');
125 $i
.addClass('crm-editable-enabled');
127 $i
.editable(function(value
, settings
) {
128 $i
.addClass('crm-editable-saving');
130 info
= $i
.crmEditableEntity(),
133 action
= $i
.data('action') || info
.action
;
137 if (info
.id
&& info
.id
!== 'new') {
140 if (action
=== 'setvalue') {
141 params
.field
= info
.field
;
142 params
.value
= value
;
145 params
[info
.field
] = value
;
147 CRM
.api3(info
.entity
, action
, params
, {error
: null})
148 .done(function(data
) {
150 return editableSettings
.error
.call($el
[0], info
.entity
, info
.field
, value
, data
);
152 if ($el
.data('options')) {
153 value
= $el
.data('options')[value
] || '';
155 else if ($el
.data('optionsHashKey')) {
156 var options
= optionsCache
[$el
.data('optionsHashKey')];
157 value
= options
&& options
[value
] ? options
[value
] : '';
159 $el
.trigger('crmFormSuccess');
160 editableSettings
.success
.call($el
[0], info
.entity
, info
.field
, value
, data
, settings
);
162 .fail(function(data
) {
163 editableSettings
.error
.call($el
[0], info
.entity
, info
.field
, value
, data
);
167 // CRM-15759 - Workaround broken textarea handling in jeditable 1.7.1
168 $i
.click(function() {
169 $('textarea', this).off()
170 // Fix cancel-on-blur
171 .on('blur', function(e
) {
172 if (!e
.relatedTarget
|| !$(e
.relatedTarget
).is('.crm-editable-form button')) {
173 $i
.find('button[type=cancel]').click();
176 // Add support for ctrl-enter shortcut key
177 .on('keydown', function (e
) {
178 if (e
.ctrlKey
&& e
.keyCode
== 13) {
179 $i
.find('button[type=submit]').click();
185 function getData(value
, settings
) {
186 // Add css class to wrapper
187 // 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 :(
188 $i
.addClass('crm-editable-editing');
190 originalValue
= value
;
192 if ($i
.data('type') == 'select' || $i
.data('type') == 'boolean') {
193 if ($i
.data('options')) {
194 return formatOptions($i
.data('options'));
197 info
= $i
.crmEditableEntity(),
198 hash
= info
.entity
+ '.' + info
.field
,
203 $i
.data('optionsHashKey', hash
);
204 if (!optionsCache
[hash
]) {
206 url
: CRM
.url('civicrm/ajax/rest'),
207 data
: {entity
: info
.entity
, action
: 'getoptions', json
: JSON
.stringify(params
)},
208 async
: false, // jeditable lacks support for async options lookup
209 success: function(data
) {optionsCache
[hash
] = data
.values
;}
212 return formatOptions(optionsCache
[hash
]);
215 return value
.replace(/<(?:.|\n)*?>/gm, '');
218 function formatOptions(options
) {
219 if (typeof $i
.data('emptyOption') === 'string') {
220 // Using 'null' because '' is broken in jeditable 1.7.1
221 return $.extend({'null': $i
.data('emptyOption')}, options
);
226 function restoreContainer() {
227 errorMsg
&& errorMsg
.close
&& errorMsg
.close();
228 $i
.removeClass('crm-editable-saving crm-editable-editing');
234 $(document
).on('crmLoad', function(e
) {
235 $('.crm-editable', e
.target
).crmEditable();