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/>.
  15
  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) {
  33
  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]');
  42
  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         };
  54
  55         var remove_spinner = function(element) {
  56             element.removeClass('updating');
  57             element.find('img.spinner').hide();
  58         };
  59
  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);
  69
  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         };
  88
  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         };
  97
  98         var turn_editing_off_everywhere = function() {
  99             $('span.inplaceeditable.inplaceeditingon').each(function() {
 100                 turn_editing_off($( this));
 101             });
 102         };
 103
 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         };
 115
 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);
 127
 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         };
 149
 150         var turn_editing_on_toggle = function(el, newvalue) {
 151             turn_editing_off(el);
 152             update_value(el, newvalue);
 153         };
 154
 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);
 165
 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         };
 184
 185         var turn_editing_on = function(el) {
 186             el.addClass('inplaceeditingon');
 187             el.attr('data-oldcontent', el.html());
 188
 189             var type = el.attr('data-type');
 190             var options = el.attr('data-options');
 191
 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         };
 200
 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);
 204
 205     });
 206
 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 });