MDL-53172 core: toggle and select in inplace_editable
[moodle.git] / lib / amd / src / inplace_editable.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * AJAX helper for the inline editing a value.
18  *
19  * This script is automatically included from template core/inplace_editable
20  * It registers a click-listener on [data-inplaceeditablelink] link (the "inplace edit" icon),
21  * then replaces the displayed value with an input field. On "Enter" it sends a request
22  * to web service core_update_inplace_editable, which invokes the specified callback.
23  * Any exception thrown by the web service (or callback) is displayed as an error popup.
24  *
25  * @module     core/inplace_editable
26  * @package    core
27  * @copyright  2016 Marina Glancy
28  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
29  * @since      3.1
30  */
31 define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str', 'core/config', 'core/url'],
32         function($, ajax, templates, notification, str, cfg, url) {
34     $('body').on('click keypress', '[data-inplaceeditable] [data-inplaceeditablelink]', function(e) {
35         if (e.type === 'keypress' && e.keyCode !== 13) {
36             return;
37         }
38         e.stopImmediatePropagation();
39         e.preventDefault();
40         var target = $(this),
41             mainelement = target.closest('[data-inplaceeditable]');
43         var add_spinner = function(element) {
44             element.addClass('updating');
45             var spinner = element.find('img.spinner');
46             if (spinner.length) {
47                 spinner.show();
48             } else {
49                 spinner = $('<img/>').attr('src', url.imageUrl('i/loading_small')).
50                         addClass('spinner').addClass('iconsmall');
51                 element.append(spinner);
52             }
53         };
55         var remove_spinner = function(element) {
56             element.removeClass('updating');
57             element.find('img.spinner').hide();
58         };
60         var update_value = function(mainelement, value) {
61             add_spinner(mainelement);
62             var promises = ajax.call([{
63                 methodname: 'core_update_inplace_editable',
64                 args: { itemid : mainelement.attr('data-itemid'),
65                     component : mainelement.attr('data-component') ,
66                     itemtype : mainelement.attr('data-itemtype') ,
67                     value : value }
68             }], true);
70             $.when.apply($, promises)
71                 .done( function(data) {
72                     var oldvalue = mainelement.attr('data-value');
73                     templates.render('core/inplace_editable', data).done(function(html, js) {
74                         var newelement = $(html);
75                         templates.replaceNode(mainelement, newelement, js);
76                         newelement.find('[data-inplaceeditablelink]').focus();
77                         newelement.trigger({type: 'updated', ajaxreturn: data, oldvalue: oldvalue});
78                     });
79                 }).fail(function(ex) {
80                     var e = $.Event('updatefailed', { exception: ex, newvalue: value });
81                     remove_spinner(mainelement);
82                     mainelement.trigger(e);
83                     if (!e.isDefaultPrevented()) {
84                         notification.exception(ex);
85                     }
86                 });
87         };
89         var turn_editing_off = function(el) {
90             el.find('input').off();
91             el.find('select').off();
92             el.html(el.attr('data-oldcontent'));
93             el.removeAttr('data-oldcontent');
94             el.removeClass('inplaceeditingon');
95             el.find('[data-inplaceeditablelink]').focus();
96         };
98         var turn_editing_off_everywhere = function() {
99             $('span.inplaceeditable.inplaceeditingon').each(function() {
100                 turn_editing_off($( this));
101             });
102         };
104         var unique_id = function(prefix, idlength) {
105             var uniqid = prefix;
106             for (var i = 0; i < idlength; i++) {
107                 uniqid += String(Math.floor(Math.random() * 10));
108             }
109             // Make sure this ID is not already taken by an existing element.
110             if ($("#" + uniqid).length === 0) {
111                 return uniqid;
112             }
113             return unique_id(prefix, idlength);
114         };
116         var turn_editing_on_text = function(el) {
117             str.get_string('edittitleinstructions').done(function(s) {
118                 var instr = $('<span class="editinstructions">' + s + '</span>').
119                         attr('id', unique_id('id_editinstructions_', 20)),
120                     inputelement = $('<input type="text"/>').
121                         attr('id', unique_id('id_inplacevalue_', 20)).
122                         attr('value', el.attr('data-value')).
123                         attr('aria-describedby', instr.attr('id')),
124                     lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
125                         attr('for', inputelement.attr('id'));
126                 el.html('').append(instr).append(lbl).append(inputelement);
128                 inputelement.focus();
129                 inputelement.select();
130                 inputelement.on('keyup keypress focusout', function(e) {
131                     if (cfg.behatsiterunning && e.type === 'focusout') {
132                         // Behat triggers focusout too often.
133                         return;
134                     }
135                     if (e.type === 'keypress' && e.keyCode === 13) {
136                         // We need 'keypress' event for Enter because keyup/keydown would catch Enter that was
137                         // pressed in other fields.
138                         var val = inputelement.val();
139                         turn_editing_off(el);
140                         update_value(el, val);
141                     }
142                     if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
143                         // We need 'keyup' event for Escape because keypress does not work with Escape.
144                         turn_editing_off(el);
145                     }
146                 });
147             });
148         };
150         var turn_editing_on_toggle = function(el, newvalue) {
151             turn_editing_off(el);
152             update_value(el, newvalue);
153         };
155         var turn_editing_on_select = function(el, options) {
156             var inputelement = $('<select></select>').
157                     attr('id', unique_id('id_inplacevalue_', 20)),
158                 lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
159                     attr('for', inputelement.attr('id'));
160             for (var i in options) {
161                 inputelement.append($('<option>').attr('value', i).html(options[i]));
162             }
163             inputelement.val(el.attr('data-value'));
164             el.html('').append(lbl).append(inputelement);
166             inputelement.focus();
167             inputelement.select();
168             inputelement.on('keyup change focusout', function(e) {
169                 if (cfg.behatsiterunning && e.type === 'focusout') {
170                     // Behat triggers focusout too often.
171                     return;
172                 }
173                 if (e.type === 'change') {
174                     var val = inputelement.val();
175                     turn_editing_off(el);
176                     update_value(el, val);
177                 }
178                 if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
179                     // We need 'keyup' event for Escape because keypress does not work with Escape.
180                     turn_editing_off(el);
181                 }
182             });
183         };
185         var turn_editing_on = function(el) {
186             el.addClass('inplaceeditingon');
187             el.attr('data-oldcontent', el.html());
189             var type = el.attr('data-type');
190             var options = el.attr('data-options');
192             if (type === 'toggle') {
193                 turn_editing_on_toggle(el, options);
194             } else if (type === 'select') {
195                 turn_editing_on_select(el, $.parseJSON(options));
196             } else {
197                 turn_editing_on_text(el);
198             }
199         };
201         // Turn editing on for the current element and register handler for Enter/Esc keys.
202         turn_editing_off_everywhere();
203         turn_editing_on(mainelement);
205     });
207     return {
208         init_inplace_editable : function() {
209             $('[data-inplaceeditable]:not([data-loaded])').each(function() {
210                 var el = $(this), link = el.find('[data-inplaceeditablelink]');
211                 if (el.attr('data-type') === 'toggle') {
212                     // For toggle elements wrap the displayvalue in the link instead of
213                     // displaying edit link after the displayvalue.
214                     link.remove();
215                     link.html(el.html());
216                     el.html(link);
217                 } else if (el.find('a').length === 1) {
218                     // For non-toggle elements that do not have links in the displayvalue
219                     // wrap displayvalue in the edit link.
220                     link.remove();
221                     link.html(el.html() + link.html());
222                     el.html(link);
223                 }
224                 el.attr('data-loaded', 1);
225             });
226         }
227     };
228 });