Proyectos de Subversion Moodle

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

    });

  }

};