41708258af3840a350473238ecdf3055e3fa6e34
[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 addSpinner = 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/>')
50                         .attr('src', url.imageUrl('i/loading_small'))
51                         .addClass('spinner').addClass('smallicon')
52                     ;
53                 element.append(spinner);
54             }
55         };
57         var removeSpinner = function(element) {
58             element.removeClass('updating');
59             element.find('img.spinner').hide();
60         };
62         var updateValue = function(mainelement, value) {
63             addSpinner(mainelement);
64             ajax
65                 .call([{
66                     methodname: 'core_update_inplace_editable',
67                     args: {
68                         itemid: mainelement.attr('data-itemid'),
69                         component: mainelement.attr('data-component'),
70                         itemtype: mainelement.attr('data-itemtype'),
71                         value: value
72                     },
73                     done: function(data) {
74                         var oldvalue = mainelement.attr('data-value');
75                         templates.render('core/inplace_editable', data).done(function(html, js) {
76                             var newelement = $(html);
77                             templates.replaceNode(mainelement, newelement, js);
78                             newelement.find('[data-inplaceeditablelink]').focus();
79                             newelement.trigger({type: 'updated', ajaxreturn: data, oldvalue: oldvalue});
80                         });
81                     },
82                     fail: function(ex) {
83                         var e = $.Event('updatefailed', {
84                                 exception: ex,
85                                 newvalue: value
86                             });
87                         removeSpinner(mainelement);
88                         mainelement.trigger(e);
89                         if (!e.isDefaultPrevented()) {
90                             notification.exception(ex);
91                         }
92                     }
93                 }], true);
94         };
96         var turnEditingOff = function(el) {
97             el.find('input').off();
98             el.find('select').off();
99             el.html(el.attr('data-oldcontent'));
100             el.removeAttr('data-oldcontent');
101             el.removeClass('inplaceeditingon');
102             el.find('[data-inplaceeditablelink]').focus();
103         };
105         var turnEditingOffEverywhere = function() {
106             $('span.inplaceeditable.inplaceeditingon').each(function() {
107                 turnEditingOff($(this));
108             });
109         };
111         var uniqueId = function(prefix, idlength) {
112             var uniqid = prefix,
113                 i;
114             for (i = 0; i < idlength; i++) {
115                 uniqid += String(Math.floor(Math.random() * 10));
116             }
117             // Make sure this ID is not already taken by an existing element.
118             if ($("#" + uniqid).length === 0) {
119                 return uniqid;
120             }
121             return uniqueId(prefix, idlength);
122         };
124         var turnEditingOnText = function(el) {
125             str.get_string('edittitleinstructions').done(function(s) {
126                 var instr = $('<span class="editinstructions">' + s + '</span>').
127                         attr('id', uniqueId('id_editinstructions_', 20)),
128                     inputelement = $('<input type="text"/>').
129                         attr('id', uniqueId('id_inplacevalue_', 20)).
130                         attr('value', el.attr('data-value')).
131                         attr('aria-describedby', instr.attr('id')).
132                         addClass('ignoredirty'),
133                     lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
134                         attr('for', inputelement.attr('id'));
135                 el.html('').append(instr).append(lbl).append(inputelement);
137                 inputelement.focus();
138                 inputelement.select();
139                 inputelement.on('keyup keypress focusout', function(e) {
140                     if (cfg.behatsiterunning && e.type === 'focusout') {
141                         // Behat triggers focusout too often.
142                         return;
143                     }
144                     if (e.type === 'keypress' && e.keyCode === 13) {
145                         // We need 'keypress' event for Enter because keyup/keydown would catch Enter that was
146                         // pressed in other fields.
147                         var val = inputelement.val();
148                         turnEditingOff(el);
149                         updateValue(el, val);
150                     }
151                     if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
152                         // We need 'keyup' event for Escape because keypress does not work with Escape.
153                         turnEditingOff(el);
154                     }
155                 });
156             });
157         };
159         var turnEditingOnToggle = function(el, newvalue) {
160             turnEditingOff(el);
161             updateValue(el, newvalue);
162         };
164         var turnEditingOnSelect = function(el, options) {
165             var i,
166                 inputelement = $('<select></select>')
167                     .attr('id', uniqueId('id_inplacevalue_', 20)),
168                 lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')
169                     .attr('for', inputelement.attr('id'));
170             for (i in options) {
171                 inputelement
172                     .append($('<option>')
173                     .attr('value', options[i].key)
174                     .html(options[i].value));
175             }
176             inputelement.val(el.attr('data-value'));
177             el.html('')
178                 .append(lbl)
179                 .append(inputelement);
181             inputelement.focus();
182             inputelement.select();
183             inputelement.on('keyup change focusout', function(e) {
184                 if (cfg.behatsiterunning && e.type === 'focusout') {
185                     // Behat triggers focusout too often.
186                     return;
187                 }
188                 if (e.type === 'change') {
189                     var val = inputelement.val();
190                     turnEditingOff(el);
191                     updateValue(el, val);
192                 }
193                 if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
194                     // We need 'keyup' event for Escape because keypress does not work with Escape.
195                     turnEditingOff(el);
196                 }
197             });
198         };
200         var turnEditingOn = function(el) {
201             el.addClass('inplaceeditingon');
202             el.attr('data-oldcontent', el.html());
204             var type = el.attr('data-type');
205             var options = el.attr('data-options');
207             if (type === 'toggle') {
208                 turnEditingOnToggle(el, options);
209             } else if (type === 'select') {
210                 turnEditingOnSelect(el, $.parseJSON(options));
211             } else {
212                 turnEditingOnText(el);
213             }
214         };
216         // Turn editing on for the current element and register handler for Enter/Esc keys.
217         turnEditingOffEverywhere();
218         turnEditingOn(mainelement);
220     });
222     return {};
223 });