Proyectos de Subversion Moodle

H5PEditor.MetadataForm = (function (EventDispatcher, $, metadataSemantics) {

  /**

   * Create a metadata form popup that attaches to other fields

   *

   * @class

   * @param {Object} parent

   * @param {Object} params

   * @param {$} $container

   * @param {boolean} [hasExtraTitleField=true]

   * @param {boolean} [populateTitleField=false]

   */

  function MetadataForm(parent, params, $container, hasExtraTitleField, populateTitleField) {

    var self = this;

    // Initialize event inheritance

    EventDispatcher.call(self);

    // We're a parent, so we must handle readies callbacks

    self.passReadies = true;

    // (but in a special way since we process multiple semantics chunks)

    // Set current author as default in semantics

    const currentUserName = (H5PIntegration.user && H5PIntegration.user.name) ? H5PIntegration.user.name : undefined;

    if (currentUserName) {

      // Set current user as default for "changed by":

      findField('changes').field.fields[1].default = currentUserName;

      findField('authors').field.fields[0].default = currentUserName;

    }

    /**

     * Open the popup

     * @param {Object} event

     */

    const openPopup = function (event) {

      var offset = event.clientY - 150;

      $('html,body').css('height', '100%');

      $('.h5peditor').append($overlay);

      $wrapper.css('margin-top', (offset > 20 ? offset : 20) + 'px');

      // Focus title field

      titleField.$input.focus();

    };

    /**

     * Close the popup

     */

    const closePopup = function () {

      $('html,body').css('height', '');

      $overlay.detach();

    };

    /**

     * @private

     */

    const handleSaveButtonClick = function () {

      // If license selected, and there's no authors, add the current one

      if (params.license !== 'U' && params.authors.length === 0) {

        metadataAuthorWidget.addDefaultAuthor(currentUserName, 'Author');

      }

      closePopup();

    };

    /**

     * @private

     */

    const setupTitleField = function () {

      // Select title field text on click

      titleField.$input.click(function () {

        if (this.selectionStart === 0 && this.selectionEnd === this.value.length) {

          return;

        }

        this.select();

        this.setSelectionRange(0, this.value.length); // Safari mobile fix

      });

      // Set the default title

      if (!params.title && populateTitleField) {

        titleField.$input.val(H5PEditor.LibraryListCache.getDefaultTitle(parent.currentLibrary)).change();

      }

      titleField.$input.change(function () {

        self.trigger('titlechange');

      });

    };

    /**

     * @private

     */

    const setupLicenseField = function () {

      // Locate license and version selectors

      var licenseField = H5PEditor.findField('license', self);

      var versionField = H5PEditor.findField('licenseVersion', self);

      versionField.field.optional = true; // Avoid any error messages

      // Listen for changes to license

      licenseField.changes.push(function (value) {

        // Find versions for selected value

        function getNestedOptions(options) {

          var flattenedOptions = [];

          options.forEach(function (option) {

            if (option.type === 'optgroup') {

              flattenedOptions = flattenedOptions.concat(getNestedOptions(option.options));

            }

            else {

              flattenedOptions.push(option);

            }

          });

          return flattenedOptions;

        }

        var nestedOptions = getNestedOptions(licenseField.field.options);

        var option = find(nestedOptions, 'value', value);

        var versions = (option) ? option.versions : undefined;

        versionField.$select.prop('disabled', versions === undefined);

        if (versions === undefined) {

          // If no versions add default

          versions = [{

            value: '-',

            label: '-'

          }];

        }

        // Find default selected version

        var selected = (params.license === value && params ? params.licenseVersion : versions[0].value);

        // Update versions selector

        versionField.$select.html(H5PEditor.Select.createOptionsHtml(versions, selected)).change();

      });

      // Trigger update straight away

      licenseField.changes[licenseField.changes.length - 1](params.license);

    };

    /**

     * Toggle visibility of accessibility title field

     */

    const toggleA11yTitle = function () {

      const a11yTitleField = H5PEditor.findField('a11yTitle', self);

      const wrapper = a11yTitleField.$item[0];

      self.isA11yExpanded = !self.isA11yExpanded;

      if (self.isA11yExpanded) {

        wrapper.classList.remove('hidden');

      }

      wrapper.classList[self.isA11yExpanded ? 'remove' : 'add']('hide');

      self.a11yTitleText.innerHTML = self.isA11yExpanded

        ? t('a11yTitleHideLabel') : t('a11yTitleShowLabel');

      wrapper.setAttribute('aria-hidden', !self.isA11yExpanded);

    }

    /**

     * Setup functionality of accessibility title field and button

     */

    const setupA11yTitleField = function () {

      const titleField = H5PEditor.findField('title', self);

      const a11yTitleField = H5PEditor.findField('a11yTitle', self);

      const label = titleField.$item[0].querySelector('label.h5peditor-label-wrapper');

      const toggleA11yTitleButton = document.createElement('button');

      const a11yTitleText = document.createElement('span');

      a11yTitleText.classList.add('h5p-a11y-title-text');

      a11yTitleText.innerHTML = t('a11yTitleShowLabel');

      self.a11yTitleText = a11yTitleText;

      toggleA11yTitleButton.classList.add('a11y-title-toggle');

      toggleA11yTitleButton.appendChild(a11yTitleText);

      a11yTitleField.$item[0].classList.add('hide');

      a11yTitleField.$item[0].setAttribute('aria-hidden', true);

      a11yTitleField.$item[0].addEventListener('transitionend', function () {

        // Hide when transition is done

        if (!self.isA11yExpanded) {

          a11yTitleField.$item[0].classList.add('hidden');

        }

      });

      toggleA11yTitleButton.addEventListener('click', toggleA11yTitle);

      self.togglea11yTitleButton = toggleA11yTitleButton;

      self.isA11yExpanded = false;

      label.appendChild(toggleA11yTitleButton);

    }

    /**

     * @private

     */

    const setupSourceField = function () {

      // Make sure the source field is empty or starts with a protocol

      const sourceField = H5PEditor.findField('source', self);

      sourceField.$item.on('change', function () {

        const sourceInput = $(this).find('input.h5peditor-text');

        if (sourceInput.val().trim() !== '' &&

          sourceInput.val().indexOf('https://') !== 0 &&

          sourceInput.val().indexOf('http://') !== 0

        ) {

          sourceInput.val('http://' + sourceInput.val()).trigger('change');

        }

      });

    };

    const $overlay = $('<div>', {

      'class': 'overlay h5p-metadata-popup-overlay'

    });

    const $wrapper = $(

      '<div class="h5p-metadata-wrapper">' +

        '<div class="h5p-metadata-header">' +

          '<div class="h5p-title-container">' +

            '<h2>' + t('metadataSharingAndLicensingInfo') + '</h2>' +

            '<p>' + t('fillInTheFieldsBelow') + '</p>' +

          '</div>' +

          '<div class="metadata-button-wrapper">' +

            '<button href="#" class="h5p-metadata-button h5p-save">' + t('saveMetadata') + '</button>' +

          '</div>' +

        '</div>' +

      '</div>');

    // Handle click on save button

    $wrapper.find('.h5p-save').click(handleSaveButtonClick);

    const $fieldsWrapper = $('<div/>', {

      'class': 'h5p-metadata-fields-wrapper',

      appendTo: $wrapper

    });

    $wrapper.appendTo($overlay);

    const $button = $(

      '<div role="button" tabindex="0" class="h5p-metadata-button-wrapper">' +

        '<div class="h5p-metadata-button-tip"></div>' +

        '<div class="h5p-metadata-toggler">' + t('metadata') + '</div>' +

      '</div>')

      .click(openPopup)

      .keydown(function (event) {

        if (event.which == 13 || event.which == 32) {

          openPopup(event);

        }

      });

    /**

     * Handle ready callbacks from children

     * @param {function} callback

     */

    self.ready = function (callback) {

      if (parent.passReadies) {

        parent.ready(callback); // Pass to parent, run when all editor fields are ready

      }

      else {

        readies.push(callback); // Run by processSemanticsChunk when all fields are done

      }

    };

    /**

     * @param {$} $container

     */

    self.appendTo = function ($container) {

      $wrapper.appendTo($container);

    };

    /**

     * @param {$} $element

     */

    self.appendButtonTo = function ($item) {

      $button.appendTo($item.children('.h5peditor-label-wrapper').wrap('<div class="h5p-editor-flex-wrapper"/>').parent());

    };

    /**

     * @return {Object} The extra title field instance

     */

    self.getExtraTitleField = function () {

      return hasExtraTitleField ? extraTitle : undefined;

    };

    // Prepare semantics

    const semantics = [];

    if (hasExtraTitleField) {

      semantics.push(getExtraTitleFieldSemantics());

    }

    semantics.push(findField('title'));

    semantics.push(findField('a11yTitle'));

    semantics.push(findField('license'));

    semantics.push(findField('licenseVersion'));

    semantics.push(findField('yearFrom'));

    semantics.push(findField('yearTo'));

    semantics.push(findField('source'));

    // Collect readies callbacks

    const readies = [];

    // Generate the form

    H5PEditor.processSemanticsChunk(semantics, params, $fieldsWrapper, self);

    // Keep track of children between generating

    let children = self.children;

    // Extra processing of fields

    const titleField = H5PEditor.findField('title', self);

    setupTitleField();

    setupLicenseField();

    setupSourceField();

    setupA11yTitleField();

    // Append the metadata author list widget (Not the same type of widgets as the rest of editor fields)

    const metadataAuthorWidget = H5PEditor.metadataAuthorWidget(findField('authors').field.fields, params, $fieldsWrapper, self);

    children = children.concat(self.children);

    // TODO: Ideally these widgets should behave the same way as the reset of

    // the editor widgets and be created through a single call to processSemanticsChunk().

    // Append the License Extras field

    H5PEditor.processSemanticsChunk([findField('licenseExtras')], params, $fieldsWrapper, self);

    children = children.concat(self.children);

    // Append the metadata changelog widget (Not the same type of widgets as the rest of editor fields)

    H5PEditor.metadataChangelogWidget([findField('changes').field], params, $fieldsWrapper, self);

    children = children.concat(self.children);

    // Append the Additional information group

    var additionals = new H5PEditor.widgets.group(self, {

      name: 'additionals',

      label: 'Additional information', // TODO: l10n ?

      fields: [

        findField('authorComments')

      ]

    }, params.authorComments, function (field, value) {

      params.authorComments = value;

    });

    additionals.appendTo($fieldsWrapper);

    // Add the final child

    self.children = children.concat([additionals]);

    let extraTitle;

    if (hasExtraTitleField) {

      // Append to correct place in DOM

      extraTitle = H5PEditor.findField('extraTitle', self);

      extraTitle.$item.appendTo($container);

      self.appendButtonTo(extraTitle.$item);

      linkFields(titleField, extraTitle);

    }

    if (!parent.passReadies) {

      // Run readies callbacks

      for (let i = 0; i < readies.length; i++) {

        readies[i]();

      }

    }

  }

  // Extends the event dispatcher

  MetadataForm.prototype = Object.create(EventDispatcher.prototype);

  MetadataForm.prototype.constructor = MetadataForm;

  MetadataForm.createLegacyForm = function (params, $container) {

    const legacyForm = {

      passReadies: false,

      getExtraTitleField: function () {

        return H5PEditor.findField('title', legacyForm);

      }

    };

    // Generate the form

    const field = getExtraTitleFieldSemantics();

    field.name = 'title';

    H5PEditor.processSemanticsChunk([field], params, $container, legacyForm);

    return legacyForm;

  };

  /**

   * @return {Object}

   */

  const getExtraTitleFieldSemantics = function () {

    const extraTitle = JSON.parse(JSON.stringify(findField('title'))); // Clone

    extraTitle.name = 'extraTitle'; // Change name to avoid conflicts

    extraTitle.description = t('usedForSearchingReportsAndCopyrightInformation');

    delete extraTitle.placeholder;

    return extraTitle;

  };

  /**

   * @param {string} key

   * @return {string}

   */

  const t = function (key) {

    return H5PEditor.t('core', key);

  };

  /**

   * Find metdata semantics field.

   * @param {string} name

   * @return {Object}

   */

  const findField = function (name) {

    for (let i = 0; i < metadataSemantics.length; i++) {

      if (metadataSemantics[i].name === name) {

        return metadataSemantics[i];

      }

    }

  };

  /**

   * Help find object in list with the given property value.

   *

   * @param {Object[]} list of objects to search through

   * @param {string} property to look for

   * @param {string} value to match property value against

   * @return {Object}

   */

  const find = function (list, property, value) {

    var properties = property.split('.');

    for (var i = 0; i < list.length; i++) {

      var objProp = list[i];

      for (var j = 0; j < properties.length; j++) {

        objProp = objProp[properties[j]];

      }

      if (objProp === value) {

        return list[i];

      }

    }

  };

  /**

   * Automatically sync all the given fields when one value changes.

   * Note: Currently only supports H5PEditor.Text field widgets.

   *

   * @private

   * @param {...*} var_args

   */

  const linkFields = function (var_args) {

    const fields = arguments;

    let preventLoop;

    /**

     * Change event handler for all fields

     * @private

     * @param {*} value

     */

    const updateAllFields = function (value) {

      if (preventLoop || value === undefined) {

        return;

      }

      // Do not run updates for this update

      preventLoop = true;

      // Apply value to all fields

      for (let i = 0; i < fields.length; i++) {

        fields[i].$input.val(value).change();

      }

      // Done

      preventLoop = false;

    };

    // Add change event listeners

    for (let i = 0; i < fields.length; i++) {

      fields[i].change(updateAllFields);

    }

    // Use initial value from first field

    if (fields[0].value !== undefined) {

      const escaper = document.createElement('div');

      escaper.innerHTML = fields[0].value;

      updateAllFields(escaper.innerText);

    }

  };

  return MetadataForm;

})(H5P.EventDispatcher, H5P.jQuery, H5PEditor.metadataSemantics);