moodle-mod_hvp/editor/scripts/h5peditor-coordinates.js

/* global ns */
/**
 * Creates a coordinates picker for the form.
 *
 * @param {mixed} parent
 * @param {object} field
 * @param {mixed} params
 * @param {function} setValue
 * @returns {ns.Coordinates}
 */
ns.Coordinates = function (parent, field, params, setValue) {
  var that = this;

  this.parent = parent;
  this.field = H5P.cloneObject(field, true); // TODO: Cloning is a quick fix, make sure this field doesn't change semantics!

  // Find image field to get max size from.
  // TODO: Use followField?
  this.findImageField('max', function (field) {
    if (field instanceof ns.File) {
      if (field.params !== undefined) {
        that.setMax(field.params.width, field.params.height);
      }

      field.changes.push(function (file) {
        if (file === undefined) {
          return;
        }
        // TODO: This callback should be removed when this item is removed.
        that.setMax(file.params.width, file.params.height);
      });
    }
    else if (field instanceof ns.Dimensions) {
      if (field.params !== undefined) {
        that.setMax(field.params.width, field.params.height);
      }

      field.changes.push(function (width, height) {
        // TODO: This callback should be removed when this item is removed.
        that.setMax(width, height);
      });
    }
  });

  this.params = params;
  this.setValue = setValue;
};

/**
 * Set max coordinates.
 *
 * @param {string} x
 * @param {string} y
 * @returns {undefined}
 */
ns.Coordinates.prototype.setMax = function (x, y) {
  this.field.max = {
    x: parseInt(x),
    y: parseInt(y)
  };
  if (this.params !== undefined) {
    this.$errors.html('');
    this.validate();
  }
};

/**
 * Find the image field for the given property and then run the callback.
 *
 * @param {string} property
 * @param {function} callback
 * @returns {unresolved}
 */
ns.Coordinates.prototype.findImageField = function (property, callback) {
  var that = this;
  var str = 'string';

  if (typeof this.field[property] !== str) {
    return;
  }

  // Find field when tree is ready.
  this.parent.ready(function () {
    if (typeof that.field[property] !== str) {
      if (that.field[property] !== undefined) {
        callback(that.field[property]);
      }
      return; // We've already found this field before.
    }
    var path = that.field[property];

    that.field[property] = ns.findField(that.field[property], that.parent);
    if (!that.field[property]) {
      throw ns.t('core', 'unknownFieldPath', {':path': path});
    }
    if (that.field[property].field.type !== 'image' && that.field[property].field.widget !== 'dimensions') {
      throw ns.t('core', 'notImageOrDimensionsField', {':path': path});
    }

    callback(that.field[property]);
  });
};

/**
 * Append the field to the wrapper.
 *
 * @param {jQuery} $wrapper
 * @returns {undefined}
 */
ns.Coordinates.prototype.appendTo = function ($wrapper) {
  var that = this;

  this.$item = ns.$(this.createHtml()).appendTo($wrapper);
  this.$inputs = this.$item.find('input');
  this.$errors = this.$item.children('.h5p-errors');

  this.$inputs.change(function () {
    // Validate
    var value = that.validate();

    if (value) {
      // Set param
      that.params = value;
      that.setValue(that.field, value);
    }
  }).click(function () {
    return false;
  }).click(function () {
    return false;
  });
};

/**
 * Create HTML for the coordinates picker.
 */
ns.Coordinates.prototype.createHtml = function () {
  const id = ns.getNextFieldId(this.field);
  const descriptionId = (this.field.description !== undefined ? ns.getDescriptionId(id) : undefined)

  var input =
    ns.createText(this.params !== undefined ? this.params.x : undefined, 15, 'X', id, descriptionId) +
    ' , ' +
    ns.createText(this.params !== undefined ? this.params.y : undefined, 15, 'Y', undefined, descriptionId);

  return ns.createFieldMarkup(this.field, input, id);
};

/**
 * Validate the current values.
 */
ns.Coordinates.prototype.validate = function () {
  var that = this;
  var coordinates = {};

  this.$inputs.each(function (i) {
    var $input = ns.$(this);
    var value = H5P.trim($input.val());
    var property = i ? 'y' : 'x';

    if (that.field.optional && !value.length) {
      return true;
    }

    if ((that.field.optional === undefined || !that.field.optional) && !value.length) {
      that.$errors.append(ns.createError(ns.t('core', 'requiredProperty', {':property': property})));
      return false;
    }

    if (value.length && !value.match(new RegExp('^[0-9]+$'))) {
      that.$errors.append(ns.createError(ns.t('core', 'onlyNumbers', {':property': property})));
      return false;
    }

    value = parseInt(value);
    if (that.field.max !== undefined && value > that.field.max[property]) {
      that.$errors.append(ns.createError(ns.t('core', 'exceedsMax', {':property': property, ':max': that.field.max[property]})));
      return false;
    }

    coordinates[property] = value;
  });

  return ns.checkErrors(this.$errors, this.$inputs, coordinates);
};

/**
 * Remove this item.
 */
ns.Coordinates.prototype.remove = function () {
  this.$item.remove();
};

// Tell the editor what widget we are.
ns.widgets.coordinates = ns.Coordinates;