5de7607462292ce8167bb0ca13c1b12dcf5d5422
[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'],
32         function($, ajax, templates, notification, str, cfg) {
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 update_value = function(mainelement, value) {
44             var promises = ajax.call([{
45                 methodname: 'core_update_inplace_editable',
46                 args: { itemid : mainelement.attr('data-itemid'),
47                     component : mainelement.attr('data-component') ,
48                     itemtype : mainelement.attr('data-itemtype') ,
49                     value : value }
50             }], true);
52             $.when.apply($, promises)
53                 .done( function(data) {
54                     var oldvalue = mainelement.attr('data-value');
55                     templates.render('core/inplace_editable', data).done(function(html, js) {
56                         templates.replaceNode(mainelement, html, js);
57                         mainelement.find('[data-inplaceeditablelink]').focus();
58                     });
59                     mainelement.trigger({type: 'updated', ajaxreturn: data, oldvalue: oldvalue});
60                 }).fail(function(ex) {
61                     var e = $.Event('updatefailed', { exception: ex, newvalue: value });
62                     mainelement.trigger(e);
63                     if (!e.isDefaultPrevented()) {
64                         notification.exception(ex);
65                     }
66                 });
67         };
69         var turn_editing_off = function(el) {
70             var input = el.find('input');
71             input.off();
72             el.html(el.attr('data-oldcontent'));
73             el.removeAttr('data-oldcontent');
74             el.removeClass('inplaceeditingon');
75         };
77         var turn_editing_off_everywhere = function() {
78             $('span.inplaceeditable.inplaceeditingon').each(function() {
79                 turn_editing_off($( this));
80             });
81         };
83         var unique_id = function(prefix, idlength) {
84             var uniqid = prefix;
85             for (var i = 0; i < idlength; i++) {
86                 uniqid += String(Math.floor(Math.random() * 10));
87             }
88             // Make sure this ID is not already taken by an existing element.
89             if ($("#" + uniqid).length === 0) {
90                 return uniqid;
91             }
92             return unique_id(prefix, idlength);
93         };
95         var turn_editing_on = function(el) {
96             el.addClass('inplaceeditingon');
97             el.attr('data-oldcontent', el.html());
99             str.get_string('edittitleinstructions').done(function(s) {
100                 var instr = $('<span class="editinstructions">' + s + '</span>').
101                         attr('id', unique_id('id_editinstructions_', 20)),
102                     inputelement = $('<input type="text"/>').
103                         attr('id', unique_id('id_inplacevalue_', 20)).
104                         attr('value', el.attr('data-value')).
105                         attr('aria-describedby', instr.attr('id')),
106                     lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
107                         attr('for', inputelement.attr('id'));
108                 el.html('').append(instr).append(lbl).append(inputelement);
110                 inputelement.focus();
111                 inputelement.select();
112                 inputelement.on('keyup keypress focusout', function(e) {
113                     if (cfg.behatsiterunning && e.type === 'focusout') {
114                         // Behat triggers focusout too often.
115                         return;
116                     }
117                     if (e.type === 'keypress' && e.keyCode === 13) {
118                         // We need 'keypress' event for Enter because keyup/keydown would catch Enter that was
119                         // pressed in other fields.
120                         update_value(el, inputelement.val());
121                         turn_editing_off(el);
122                     }
123                     if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
124                         // We need 'keyup' event for Escape because keypress does not work with Escape.
125                         turn_editing_off(el);
126                     }
127                 });
128             });
129         };
131         // Turn editing on for the current element and register handler for Enter/Esc keys.
132         turn_editing_off_everywhere();
133         turn_editing_on(mainelement);
135     });
137     return {};
138 });