Proyectos de Subversion Moodle

/* global ns */

/**

 * Construct a form from library semantics.

 */

ns.Form = function (library, startLanguages, defaultLanguage) {

  var self = this;

  this.params = {};

  this.passReadies = false;

  this.commonFields = {};

  this.$form = ns.$('' +

    '<div class="h5peditor-form">' +

      '<div class="tree"></div>' +

      '<div class="common collapsed hidden">' +

        '<div class="fields">' +

          '<p class="desc">' +

            ns.t('core', 'commonFieldsDescription') +

          '</p>' +

          '<div class="h5peditor-language-switcher">' +

            '<label class="language-label" for="h5peditor-language-switcher">' + ns.t('core', 'language') + ':</label>' +

            '<select id="h5peditor-language-switcher">' +

              '<option value="-">' + ns.t('core', 'noLanguagesSupported') + '</option>' +

            '</select>' +

          '</div>' +

          '<div class="h5peditor-language-notice">' +

            '<div class="first"></div>' +

            '<div class="last"></div>' +

          '</div>' +

        '</div>' +

      '</div>' +

    '</div>'

  );

  this.$common = this.$form.find('.common > .fields');

  if (ns.FullscreenBar !== undefined) {

    // Exception from rules

    if (library.indexOf('H5P.CoursePresentation') === -1 &&

        library.indexOf('H5P.BranchingScenario') === -1 &&

        library.indexOf('H5P.InteractiveVideo') === -1) {

      ns.FullscreenBar(this.$form, library);

    }

  }

  // Add title expand/collapse button

  self.$commonButton = ns.$('<div/>', {

    'class': 'h5peditor-label',

    'aria-expanded': 'false',

    title: ns.t('core', 'expandCollapse'),

    role: 'button',

    tabIndex: 0,

    html: '<span class="icon"></span>' + ns.t('core', 'commonFields'),

    on: {

      click: function () {

        toggleCommonFields();

      },

      keypress: function (event) {

        if ((event.charCode || event.keyCode) === 32) {

          toggleCommonFields();

          event.preventDefault();

        }

      }

    },

    prependTo: this.$common.parent()

  });

  // Alternate background colors

  this.zebra = "odd";

  // Locate the language switcher DOM element

  const $switcher = this.$form.find('.h5peditor-language-switcher select');

  const $notice = this.$form.find('.h5peditor-language-notice');

  const loadedLibs = [];

  const languages = {};

  ns.defaultLanguage = ns.contentLanguage;

  if (defaultLanguage) {

    ns.defaultLanguage = defaultLanguage;

  }

  /**

   * Toggle common fields group visibility

   */

  const toggleCommonFields = function () {

    const expandedValue = self.$common.parent().hasClass('collapsed')

      ? 'true' : 'false';

    self.$commonButton.attr('aria-expanded', expandedValue);

    self.$common.parent().toggleClass('collapsed');

  };

  /**

   * Create options DOM elements

   *

   * @private

   * @return {string}

   */

  const createOptions = function () {

    let options = '';

    for (let code in languages) {

      let label = ns.supportedLanguages[code] ? ns.supportedLanguages[code] : code.toLocaleUpperCase();

      options += '<option value="' + code + '"' + (code === ns.defaultLanguage ? ' selected' : '') + '>' + label + '</option>';

    }

    return options;

  };

  /**

   * Figure out if all loaded libraries supports the chosen language code

   *

   * @private

   * @param {string} code

   * @return {boolean}

   */

  const isSupportedByAll = function (code) {

    return (languages[code].length === loadedLibs.length);

  };

  /**

   * This function does something different than the other functions.

   *

   * @private

   * @param {string} lang Global value not used to avoid it changing while loading

   */

  const updateCommonFields = function (lang) {

    const libs = languages[lang];

    for (let lib in ns.libraryCache) {

      // Update common fields

      if (ns.renderableCommonFields[lib] && ns.renderableCommonFields[lib].fields) {

        for (let j = 0; j < ns.renderableCommonFields[lib].fields.length; j++) {

          const field = ns.renderableCommonFields[lib].fields[j];

          // Determine translation to use

          const translation = ns.libraryCache[lib].translation[lang];

          if (field.instance === undefined || translation === undefined) {

            continue; // Skip

          }

          // Find the correct translation for the field

          const fieldTranslation = findFieldDefaultTranslation(field.field, ns.libraryCache[lib].semantics, translation);

          // Extract the default values from the translation

          const defaultValue = getDefaultValue(fieldTranslation, field.field);

          // Update the widget

          field.instance.forceValue(defaultValue);

        }

      }

      if (ns.libraryCache[lib].translation[lang] !== undefined) {

        // Update semantics, so that the next time something is inserted it will get the same language

        ns.updateCommonFieldsDefault(ns.libraryCache[lib].semantics, ns.libraryCache[lib].translation[lang]);

      }

    }

  };

  /**

   * Recursivly search for the field's translations

   *

   * @private

   * @param {Object} field The field we're looking for

   * @param {Array} semantics The fields tree to search amongst

   * @param {Array} translation The translation tree to search and return from

   * @return {Object} The translation if found

   */

  const findFieldDefaultTranslation = function (field, semantics, translation) {

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

      if (semantics[i] === field) {

        return translation[i];

      }

      if (semantics[i].fields !== undefined && semantics[i].fields.length &&

          translation[i].fields !== undefined && translation[i].fields.length) {

        const found1 = findFieldDefaultTranslation(field, semantics[i].fields, translation[i].fields);

        if (found1 !== undefined) {

          return found1;

        }

      }

      if (semantics[i].field !== undefined && translation[i].field !== undefined) {

        const found2 = findFieldDefaultTranslation(field, [semantics[i].field], [translation[i].field]);

        if (found2 !== undefined) {

          return found2;

        }

      }

    }

  };

  /**

   * Recursivly format a default value for a field.

   *

   * @private

   * @param {Object} translation The translation field to extract the default values from

   * @param {Object} field Needed for field naming

   * @return {Object} The default value

   */

  const getDefaultValue = function (translation, field) {

    if (translation.default !== undefined) {

      return translation.default;

    }

    if (translation.fields !== undefined && translation.fields.length) {

      if (translation.fields.length === 1) {

        return getDefaultValue(translation.fields[0], field.fields[0]);

      }

      const values = {};

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

        values[field.fields[i].name] = getDefaultValue(translation.fields[i], field.fields[i]);

      }

      return values;

    }

    if (translation.field !== undefined) {

      return getDefaultValue(translation.field, field.field);

    }

  };

  /**

   * Prepares and loads all the missing translations from the server.

   *

   * @param {string} lang Global value not used to avoid it changing while loading

   * @param {function} done Callback

   */

  const loadTranslations = function (lang, done) {

    // Figure out what we actually need to load

    const loadLibs = [];

    for (let li in ns.libraryCache) {

      if (ns.libraryCache[li] === 0 || ns.libraryCache[li].translation[lang] === undefined) {

        loadLibs.push(li);

      }

    }

    if (loadLibs.length) {

      ns.$.post(

        ns.getAjaxUrl('translations', { language: lang }),

        { libraries: loadLibs },

        function (res) {

          for (let lib in res.data) {

            ns.libraryCache[lib].translation[lang] = JSON.parse(res.data[lib]).semantics;

          }

          done();

        }

      );

    }

    else {

      done(); // Continue without loading anything

    }

  }

  /**

   * Add new languages for content type.

   *

   * @param {string} lib uberName

   * @param {Array} langs

   */

  self.addLanguages = function (lib, langs) {

    // Update language counters

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

      const code = langs[i];

      if (languages[code] === undefined) {

        languages[code] = [lib];

      }

      else {

        languages[code].push(lib);

      }

    }

    loadedLibs.push(lib);

    // Update

    $switcher.html(createOptions());

  };

  /**

   * Remove languages for content type.

   *

   * @param {string} lib uberName

   * @param {Array} langs

   */

  self.removeLanguages = function (lib, langs) {

    // Update language counters

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

      const code = langs[i];

      if (languages[code] !== undefined) {

        if (languages[code].length === 1) {

          delete languages[code];

        }

        else {

          languages[code].splice(languages[code].indexOf(lib), 1);

        }

      }

    }

    loadedLibs.splice(loadedLibs.indexOf(lib), 1);

    // Update

    $switcher.html(createOptions());

  };

  // Handle switching language and loading new translations

  $switcher.change(function (e) {

    // Create confirmation dialog

    const confirmDialog = new H5P.ConfirmationDialog({

      headerText: ns.t('core', 'changeLanguage', {':language': (ns.supportedLanguages[this.value] ? ns.supportedLanguages[this.value] : this.value.toLocaleUpperCase())}),

      dialogText: ns.t('core', 'thisWillPotentially'),

    }).appendTo(document.body);

    confirmDialog.on('confirmed', function () {

      const lang = ns.defaultLanguage = $switcher.val();

      const humanLang = (ns.supportedLanguages[lang] ? ns.supportedLanguages[lang] : lang.toLocaleUpperCase());

      // Update chosen default language for main content and sub-content

      self.metadata.defaultLanguage = lang;

      self.params = self.setSubContentDefaultLanguage(self.params, lang);

      // Figure out if all libraries were supported

      if (!isSupportedByAll(lang)) {

        // Show a warning message

        $notice.children('.first').html(ns.t('core', 'notAllTextsChanged', {':language': humanLang}));

        $notice.children('.last').html(ns.t('core', 'contributeTranslations', {':language': humanLang, ':url': 'https://h5p.org/contributing#translating'}));

        $notice.addClass('show');

      }

      else {

        // Hide a warning message

        $notice.removeClass('show');

      }

      $switcher.prop('disabled', 'disabled');

      loadTranslations(lang, function () {

        // Do the actualy update of the field values

        updateCommonFields(lang);

        $switcher.prop('disabled', false);

      });

    });

    confirmDialog.on('canceled', function () {

      $switcher.val(ns.defaultLanguage);

    });

    // Show

    confirmDialog.show($switcher.offset().top);

  });

  // Add initial langauges for content type

  self.addLanguages(library, startLanguages);

};

/**

 * Recursively traverse params and sets default language for each sub-content

 *

 * @param {Object|Array} params Parameters

 * @param {string} lang Default language that will be set

 *

 * @return {Object|Array} Parameters with default language set for sub-content

 */

ns.Form.prototype.setSubContentDefaultLanguage = function (params, lang) {

  if (!params) {

    return params;

  }

  const self = this;

  if (Array.isArray(params)) {

    for (let i; i < params.length; i++) {

      params[i] = self.setSubContentDefaultLanguage(params[i], lang);

    }

  }

  else if (typeof params === 'object') {

    if (params.metadata) {

      params.metadata.defaultLanguage = lang;

    }

    for (let parameter in params) {

      if (!params.hasOwnProperty(parameter)) {

        continue;

      }

      params[parameter] = this.setSubContentDefaultLanguage(

        params[parameter],

        lang

      );

    }

  }

  return params;

};

/**

 * Replace the given element with our form.

 *

 * @param {jQuery} $element

 * @returns {undefined}

 */

ns.Form.prototype.replace = function ($element) {

  $element.replaceWith(this.$form);

  this.offset = this.$form.offset();

  // Prevent inputs and selects in an h5peditor form from submitting the main

  // framework form.

  this.$form.on('keydown', 'input,select', function (event) {

    if (event.keyCode === 13) {

      // Prevent enter key from submitting form.

      return false;

    }

  });

};

/**

 * Remove the current form.

 */

ns.Form.prototype.remove = function () {

  ns.removeChildren(this.metadataForm.children);

  ns.removeChildren(this.children);

  ns.renderableCommonFields = {}; // Reset all common fields

  this.$form.remove();

};

/**

 * Wrapper for processing the semantics.

 *

 * @param {Array} semantics

 * @param {Object} defaultParams

 * @returns {undefined}

 */

ns.Form.prototype.processSemantics = function (semantics, defaultParams, metadata) {

  this.metadata = (metadata ? metadata : defaultParams.metadata || {});

  // Set language initially used

  if (!this.metadata.defaultLanguage) {

    this.metadata.defaultLanguage = ns.defaultLanguage;

  }

  if (ns.enableMetadata(this.currentLibrary)) {

    this.metadataForm = new ns.MetadataForm(this, this.metadata, this.$form.children('.tree'), true);

  }

  else {

    this.metadataForm = H5PEditor.MetadataForm.createLegacyForm(this.metadata, this.$form.children('.tree'));

    // This fixes CSS overrides done by some old custom editors

    switch (this.currentLibrary.split(' ')[0]) {

      case 'H5P.InteractiveVideo':

      case 'H5P.DragQuestion':

      case 'H5P.ImageHotspotQuestion':

        this.metadataForm.getExtraTitleField().$item.css('padding', '20px 20px 0 20px');

        break;

      case 'H5P.CoursePresentation':

        this.metadataForm.getExtraTitleField().$item.css('padding-bottom', '1em');

        break;

    }

  }

  // Overriding this.params with {} will lead to old content not being editable for now

  this.params = (defaultParams.params ? defaultParams.params : defaultParams);

  // Create real children

  ns.processSemanticsChunk(semantics, this.params, this.$form.children('.tree'), this);

};

/**

 * Collect functions to execute once the tree is complete.

 *

 * @param {function} ready

 * @returns {undefined}

 */

ns.Form.prototype.ready = function (ready) {

  this.readies.push(ready);

};