// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* AJAX helper for the inline editing a value.
*
* This script is automatically included from template core/inplace_editable
* It registers a click-listener on [data-inplaceeditablelink] link (the "inplace edit" icon),
* then replaces the displayed value with an input field. On "Enter" it sends a request
* to web service core_update_inplace_editable, which invokes the specified callback.
* Any exception thrown by the web service (or callback) is displayed as an error popup.
*
* @module core/inplace_editable
* @copyright 2016 Marina Glancy
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @since 3.1
*/
define(
['jquery',
'core/ajax',
'core/templates',
'core/notification',
'core/str',
'core/config',
'core/url',
'core/form-autocomplete',
'core/loadingicon',
'core/pending',
'core/local/inplace_editable/events',
],
function($, ajax, templates, notification, str, cfg, url, autocomplete, LoadingIcon, Pending, Events) {
const removeSpinner = function(element) {
element.find('.loading-icon').hide();
};
/**
* Update an inplace editable value.
*
* @param {Jquery} mainelement the element to update
* @param {string} value the new value
* @param {bool} silent if true the change won't alter the current page focus
* @fires event:core/inplace_editable:updated
* @fires event:core/inplace_editable:updateFailed
*/
const updateValue = function(mainelement, value, silent) {
var pendingId = [
mainelement.attr('data-itemid'),
mainelement.attr('data-component'),
mainelement.attr('data-itemtype'),
].join('-');
var pendingPromise = new Pending(pendingId);
LoadingIcon.addIconToContainerRemoveOnCompletion(mainelement, pendingPromise);
ajax.call([{
methodname: 'core_update_inplace_editable',
args: {
itemid: mainelement.attr('data-itemid'),
component: mainelement.attr('data-component'),
itemtype: mainelement.attr('data-itemtype'),
value: value,
},
}])[0]
.then(function(data) {
return templates.render('core/inplace_editable', data)
.then(function(html, js) {
var oldvalue = mainelement.attr('data-value');
var newelement = $(html);
templates.replaceNode(mainelement, newelement, js);
if (!silent) {
newelement.find('[data-inplaceeditablelink]').focus();
}
// Trigger updated event on the DOM element.
Events.notifyElementUpdated(newelement.get(0), data, oldvalue);
return;
});
})
.then(function() {
return pendingPromise.resolve();
})
.fail(function(ex) {
removeSpinner(mainelement);
M.util.js_complete(pendingId);
// Trigger update failed event on the DOM element.
let updateFailedEvent = Events.notifyElementUpdateFailed(mainelement.get(0), ex, value);
if (!updateFailedEvent.defaultPrevented) {
notification.exception(ex);
}
});
};
$('body').on('click keypress', '[data-inplaceeditable] [data-inplaceeditablelink]', function(e) {
if (e.type === 'keypress' && e.keyCode !== 13) {
return;
}
var editingEnabledPromise = new Pending('autocomplete-start-editing');
e.stopImmediatePropagation();
e.preventDefault();
var target = $(this),
mainelement = target.closest('[data-inplaceeditable]');
var turnEditingOff = function(el) {
el.find('input').off();
el.find('select').off();
el.html(el.attr('data-oldcontent'));
el.removeAttr('data-oldcontent');
el.removeClass('inplaceeditingon');
el.find('[data-inplaceeditablelink]').focus();
// Re-enable any parent draggable attribute.
el.parents(`[data-inplace-in-draggable="true"]`)
.attr('draggable', true)
.attr('data-inplace-in-draggable', false);
};
var turnEditingOffEverywhere = function() {
// Re-enable any disabled draggable attribute.
$(`[data-inplace-in-draggable="true"]`)
.attr('draggable', true)
.attr('data-inplace-in-draggable', false);
$('span.inplaceeditable.inplaceeditingon').each(function() {
turnEditingOff($(this));
});
};
var uniqueId = function(prefix, idlength) {
var uniqid = prefix,
i;
for (i = 0; i < idlength; i++) {
uniqid += String(Math.floor(Math.random() * 10));
}
// Make sure this ID is not already taken by an existing element.
if ($("#" + uniqid).length === 0) {
return uniqid;
}
return uniqueId(prefix, idlength);
};
var turnEditingOnText = function(el) {
str.get_string('edittitleinstructions').done(function(s) {
var instr = $('<span class="editinstructions">' + s + '</span>').
attr('id', uniqueId('id_editinstructions_', 20)),
inputelement = $('<input type="text"/>').
attr('id', uniqueId('id_inplacevalue_', 20)).
attr('value', el.attr('data-value')).
attr('aria-describedby', instr.attr('id')).
addClass('ignoredirty').
addClass('form-control'),
lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>').
attr('for', inputelement.attr('id'));
el.html('').append(instr).append(lbl).append(inputelement);
inputelement.focus();
inputelement.select();
inputelement.on('keyup keypress focusout', function(e) {
if (cfg.behatsiterunning && e.type === 'focusout') {
// Behat triggers focusout too often.
return;
}
if (e.type === 'keypress' && e.keyCode === 13) {
// We need 'keypress' event for Enter because keyup/keydown would catch Enter that was
// pressed in other fields.
var val = inputelement.val();
turnEditingOff(el);
updateValue(el, val);
}
if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
// We need 'keyup' event for Escape because keypress does not work with Escape.
turnEditingOff(el);
}
});
});
};
var turnEditingOnToggle = function(el, newvalue) {
turnEditingOff(el);
updateValue(el, newvalue);
};
var turnEditingOnSelect = function(el, options) {
var i,
inputelement = $('<select></select>').
attr('id', uniqueId('id_inplacevalue_', 20)).
addClass('custom-select'),
lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')
.attr('for', inputelement.attr('id'));
for (i in options) {
inputelement
.append($('<option>')
.attr('value', options[i].key)
.html(options[i].value));
}
inputelement.val(el.attr('data-value'));
el.html('')
.append(lbl)
.append(inputelement);
inputelement.focus();
inputelement.select();
inputelement.on('keyup change focusout', function(e) {
if (cfg.behatsiterunning && e.type === 'focusout') {
// Behat triggers focusout too often.
return;
}
if (e.type === 'change') {
var val = inputelement.val();
turnEditingOff(el);
updateValue(el, val);
}
if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
// We need 'keyup' event for Escape because keypress does not work with Escape.
turnEditingOff(el);
}
});
};
var turnEditingOnAutocomplete = function(el, args) {
var i,
inputelement = $('<select></select>').
attr('id', uniqueId('id_inplacevalue_', 20)).
addClass('form-autocomplete-original-select').
addClass('custom-select'),
lbl = $('<label class="accesshide">' + mainelement.attr('data-editlabel') + '</label>')
.attr('for', inputelement.attr('id')),
options = args.options,
attributes = args.attributes,
saveelement = $('<a href="#"></a>'),
cancelelement = $('<a href="#"></a>');
for (i in options) {
inputelement
.append($('<option>')
.attr('value', options[i].key)
.html(options[i].value));
}
if (attributes.multiple) {
inputelement.attr('multiple', 'true');
}
inputelement.val(JSON.parse(el.attr('data-value')));
str.get_string('savechanges', 'core').then(function(s) {
return templates.renderPix('e/save', 'core', s);
}).then(function(html) {
saveelement.append(html);
return;
}).fail(notification.exception);
str.get_string('cancel', 'core').then(function(s) {
return templates.renderPix('e/cancel', 'core', s);
}).then(function(html) {
cancelelement.append(html);
return;
}).fail(notification.exception);
el.html('')
.append(lbl)
.append(inputelement)
.append(saveelement)
.append(cancelelement);
inputelement.focus();
inputelement.select();
autocomplete.enhance(inputelement,
attributes.tags,
attributes.ajax,
attributes.placeholder,
attributes.caseSensitive,
attributes.showSuggestions,
attributes.noSelectionString)
.then(function() {
// Focus on the enhanced combobox.
el.find('[role=combobox]').focus();
// Stop eslint nagging.
return;
}).fail(notification.exception);
inputelement.on('keyup', function(e) {
if ((e.type === 'keyup' && e.keyCode === 27) || e.type === 'focusout') {
// We need 'keyup' event for Escape because keypress does not work with Escape.
turnEditingOff(el);
}
});
saveelement.on('click', function(e) {
var val = JSON.stringify(inputelement.val());
// We need to empty the node to destroy all event handlers etc.
inputelement.empty();
turnEditingOff(el);
updateValue(el, val);
e.preventDefault();
});
cancelelement.on('click', function(e) {
// We need to empty the node to destroy all event handlers etc.
inputelement.empty();
turnEditingOff(el);
e.preventDefault();
});
};
var turnEditingOn = function(el) {
el.addClass('inplaceeditingon');
el.attr('data-oldcontent', el.html());
var type = el.attr('data-type');
var options = el.attr('data-options');
// Input text inside draggable elements disable text selection in some browsers.
// To prevent this we temporally disable any parent draggables.
el.parents('[draggable="true"]')
.attr('data-inplace-in-draggable', true)
.attr('draggable', false);
if (type === 'toggle') {
turnEditingOnToggle(el, options);
} else if (type === 'select') {
turnEditingOnSelect(el, $.parseJSON(options));
} else if (type === 'autocomplete') {
turnEditingOnAutocomplete(el, $.parseJSON(options));
} else {
turnEditingOnText(el);
}
};
// Turn editing on for the current element and register handler for Enter/Esc keys.
turnEditingOffEverywhere();
turnEditingOn(mainelement);
editingEnabledPromise.resolve();
});
return {
/**
* Return an object to interact with the current inplace editables at a frontend level.
*
* @param {Element} parent the parent element containing a inplace editable
* @returns {Object|undefined} an object to interact with the inplace element, or undefined
* if no inplace editable is found.
*/
getInplaceEditable: function(parent) {
const element = parent.querySelector(`[data-inplaceeditable]`);
if (!element) {
return undefined;
}
// Return an object to interact with the inplace editable.
return {
element,
/**
* Get the value from the inplace editable.
*
* @returns {string} the current inplace value
*/
getValue: function() {
return this.element.dataset.value;
},
/**
* Force a value change.
*
* @param {string} newvalue the new value
* @fires event:core/inplace_editable:updated
* @fires event:core/inplace_editable:updateFailed
*/
setValue: function(newvalue) {
updateValue($(this.element), newvalue, true);
},
/**
* Return the inplace editable itemid.
*
* @returns {string} the current itemid
*/
getItemId: function() {
return this.element.dataset.itemid;
},
};
}
};
});