Your IP : 192.168.165.1
H5PEditor.metadataChangelogWidget = function (semantics, params, $wrapper, parent) {
if (!params.changes) {
params.changes = [];
}
var $ = H5PEditor.$;
// State
var state = {
editing: false,
newLog: false,
currentLog: undefined
};
var widget = $('<div class="field h5p-metadata-changelog"></div>');
H5PEditor.processSemanticsChunk(semantics, {}, widget, parent);
// Get a reference to the fields:
var changeField = H5PEditor.findField('change', parent);
var dateField = H5PEditor.findField('date', changeField);
var authorField = H5PEditor.findField('author', changeField);
var logField = H5PEditor.findField('log', changeField);
var $form = changeField.$content;
var $formFields = dateField.$item.add(authorField.$item).add(logField.$item);
// Add description
var $description = $('<div>', {
'class': 'h5peditor-field-description',
'text': H5PEditor.t('core', 'changelogDescription')
});
$form.append($description);
var $cancelButton = $('<button>', {
'class': 'h5p-metadata-button h5p-cancel',
type: 'button',
text: H5PEditor.t('core', 'cancel'),
click: function () {
resetForm();
state.editing = false;
state.currentLog = undefined;
render();
}
});
var $createLogButton = $('<button>', {
'class': 'h5p-metadata-button inverted h5p-log-change',
type: 'button',
text: H5PEditor.t('core', 'logThisChange'),
click: function () {
var entry = validateForm(false);
if (!entry.date || !entry.author || !entry.log) {
return;
}
if (state.currentLog !== undefined) {
params.changes[state.currentLog] = entry;
}
else {
params.changes.push(entry);
state.newLog = true;
}
state.editing = false;
resetForm();
render();
state.currentLog = undefined;
}
});
var $addLogButton = $('<button>', {
'class': 'h5p-metadata-button inverted h5p-add-author',
type: 'button',
text: H5PEditor.t('core', 'addNewChange'),
click: function () {
state.editing = true;
state.newLog = false;
resetForm();
render();
}
});
var $buttons = $('<div class="h5p-metadata-changelog-buttons"></div>');
$buttons.append($cancelButton);
$buttons.append($createLogButton);
$buttons.append($addLogButton);
$form.append($buttons);
var $newLogMessage = $('<div', {
'class': 'h5p-metadata-new-log-message',
text: H5PEditor.t('core', 'newChangeHasBeenLogged'),
appendTo: $form
});
var $logWrapper = $('<div>', {
'class': "h5p-metadata-logged-changes",
appendTo: $form
});
widget.appendTo($wrapper);
render();
function resetForm() {
dateField.$input.val('');
logField.$input.val('');
validateForm(true);
}
function render() {
$newLogMessage.toggle(state.newLog);
$description.toggle(!state.editing);
$addLogButton.toggle(!state.editing);
$cancelButton.toggle(state.editing);
$createLogButton.toggle(state.editing);
$formFields.toggle(state.editing);
if (state.editing) {
populateForm();
if (!dateField.$input.hasClass('datepicker')) {
dateField.$input.addClass('datepicker');
setupDatePicker(dateField.$input);
}
}
else {
renderLogWrapper();
}
$logWrapper.toggleClass('editing', state.editing);
}
function renderLogWrapper() {
$logWrapper.empty();
$logWrapper.append('<span class="h5peditor-label h5p-metadata-log-wrapper-title">'+ H5PEditor.t('core', 'loggedChanges') + '</span>');
if (params.changes.length == 0) {
$logWrapper.append($('<div class="h5peditor-field-description">' + H5PEditor.t('core', 'noChangesHaveBeenLogged') + '</div>'));
}
else {
var logList = $('<div class="h5p-metadata-log-wrapper"></div>');
$logWrapper.append(logList);
for (var i = 0; i < params.changes.length; i++) {
var log = params.changes[i];
var dateWrapper = $('<div>', {
'class': 'h5p-metadata-log-date',
html: H5PEditor.htmlspecialchars(log.date)
});
var logDescription = $('<div>', {
'class': 'h5p-metadata-log-description',
html: H5PEditor.htmlspecialchars(log.log)
});
var authorWrapper = $('<div>', {
'class': 'h5p-metadata-log-author',
html: 'by ' + H5PEditor.htmlspecialchars(log.author) // TODO - translate
});
var $descriptionWrapper = $('<div class="h5p-metadata-description-wrapper"></div>');
$descriptionWrapper.append(logDescription);
$descriptionWrapper.append(authorWrapper);
var logButtons = $('<div class="h5p-metadata-log-buttons">' +
'<button type="button" class="h5p-metadata-edit h5p-metadata-icon-button"></button>' +
'<button type="button" class="h5p-metadata-delete h5p-metadata-icon-button"></button>' +
'</div>');
logButtons.find('.h5p-metadata-delete').click(function () {
// Ask for confirmation
if (confirm(H5PEditor.t('core', 'confirmDeleteChangeLog'))) {
var wrapper = $(this).closest('.h5p-metadata-log');
var index = $(wrapper).data('index');
deleteLog(index);
}
});
logButtons.find('.h5p-metadata-edit').click(function () {
var wrapper = $(this).closest('.h5p-metadata-log');
var index = $(wrapper).data('index');
editLog(index);
});
var logContent = $('<div>', {
'class': 'h5p-metadata-log',
'data-index': i
});
logContent.append(dateWrapper);
logContent.append($descriptionWrapper);
logContent.append(logButtons);
logList.prepend(logContent);
}
}
}
function editLog(index) {
state.editing = true;
state.currentLog = index;
state.newLog = false;
render();
}
function deleteLog(index) {
params.changes.splice(index, 1);
render();
}
function validateForm(optional) {
dateField.field.optional = optional;
authorField.field.optional = optional;
logField.field.optional = optional;
return {
date: dateField.validate(),
author: authorField.validate(),
log: logField.validate()
};
}
function populateForm() {
if (state.currentLog !== undefined) {
validateForm(true);
var log = params.changes[state.currentLog];
dateField.$input.val(log.date);
// Unescape in case it comes from backend
var unescaper = document.createElement('div');
unescaper.innerHTML = H5PEditor.htmlspecialchars(log.author);
authorField.$input.val(unescaper.textContent);
unescaper.innerHTML = H5PEditor.htmlspecialchars(log.log);
logField.$input.val(unescaper.textContent);
}
}
/**
* Setup the datepicker. Loads the script if not already loaded
*/
function setupDatePicker($dateInput) {
var initDateField = function () {
$dateInput.Zebra_DatePicker({
format: 'd-m-y G:i:s',
onClose: function () {
dateField.validate();
}
});
};
// Make sure datepicker.js is only loaded once
$dateInput.Zebra_DatePicker ? initDateField() : loadDatePickerLib(initDateField);
}
/**
* Load the datepicker JS lib
*
* @param {Function} callback
*/
function loadDatePickerLib(callback) {
$.ajax({
url: H5PEditor.basePath + 'libs/zebra_datepicker.min.js',
dataType: 'script',
success: callback,
error: function (r,e) {
console.warn('error loading libraries: ', e);
},
async: true
});
}
};