Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
/* global ns*/
2 
H5PEditor.widgets.select = H5PEditor.Select = (function (E) {
3 
  /**
4 
   * Initialize a new widget.
5 
   *
6 
   * @param {object} parent
7 
   * @param {object} field
8 
   * @param {object} params
9 
   * @param {function} setValue
10 
   * @returns {_L3.C}
11 
   */
12 
  function C(parent, field, params, setValue) {
13 
    this.field = field;
14 
    this.value = params;
15 
    this.setValue = setValue;
16 
 
17 
    // Setup event dispatching on change
18 
    this.changes = [];
19 
    this.triggerListeners = function (value) {
20 
      // Run callbacks
21 
      for (var i = 0; i < this.changes.length; i++) {
22 
        this.changes[i](value);
23 
      }
24 
    };
25 
  }
26 
 
27 
  /**
28 
   * Append widget to the DOM.
29 
   *
30 
   * @param {jQuery} $wrapper
31 
   * @returns {undefined}
32 
   */
33 
  C.prototype.appendTo = function ($wrapper) {
34 
    var that = this;
35 
 
36 
    this.$item = E.$(this.createHtml()).appendTo($wrapper);
37 
    this.$select = this.$item.find('select');
38 
    this.$errors = this.$item.children('.h5p-errors');
39 
 
40 
    this.$select.change(function () {
41 
      var val = that.validate();
42 
      if (val !== false) {
43 
        that.value = val;
44 
        that.setValue(that.field, val);
45 
        that.triggerListeners(val);
46 
      }
47 
    });
48 
  };
49 
 
50 
  /**
51 
   * Generate HTML for the widget.
52 
   *
53 
   * @returns {String} HTML.
54 
   */
55 
  C.prototype.createHtml = function () {
56 
    const id = ns.getNextFieldId(this.field);
57 
 
58 
    let options = '';
59 
    if (this.field.optional === true || this.field.default === undefined) {
60 
      options = E.createOption('-', '-');
61 
    }
62 
    options += C.createOptionsHtml(this.field.options, this.value);
63 
 
64 
    let select = '<select id="' + id + '"';
65 
    if (this.field.description !== undefined) {
66 
      select += ' aria-describedby="' + ns.getDescriptionId(id) + '"';
67 
    }
68 
    select += ' class="h5peditor-select">' + options + '</select>';
69 
 
70 
    return E.createFieldMarkup(this.field, select, id);
71 
  };
72 
 
73 
  /**
74 
   * Generate HTML for select options.
75 
   *
76 
   * @param {Array} options
77 
   * @param {string} selected value
78 
   * @return {string}
79 
   */
80 
  C.createOptionsHtml = function (options, selected) {
81 
    var html = '';
82 
 
83 
    for (var i = 0; i < options.length; i++) {
84 
      if (options[i].type === 'optgroup') {
85 
        html += '<optgroup label="' + options[i].label + '" >';
86 
        html += C.createOptionsHtml(options[i].options, selected);
87 
        html += '</optgroup>';
88 
      }
89 
      else {
90 
        html += E.createOption(options[i].value, options[i].label, options[i].value === selected);
91 
      }
92 
    }
93 
 
94 
    return html;
95 
  };
96 
 
97 
  /**
98 
   * Validate this field.
99 
   *
100 
   * @returns {Boolean}
101 
   */
102 
  C.prototype.validate = function () {
103 
    var value = this.$select.val();
104 
    if (value === '-') {
105 
      value = undefined; // No value selected
106 
    }
107 
 
108 
    if (this.field.optional !== true && value === undefined) {
109 
      // Not optional and no value selected, print required error
110 
      this.$errors.append(ns.createError(ns.t('core', 'requiredProperty', {':property': ns.t('core', 'textField')})));
111 
 
112 
      return false;
113 
    }
114 
 
115 
    // All valid. Remove old errors
116 
    var $errors = this.$errors.children();
117 
    if ($errors.length) {
118 
      $errors.remove();
119 
    }
120 
 
121 
    return value;
122 
  };
123 
 
124 
  /**
125 
   * Remove widget from DOM.
126 
   *
127 
   * @returns {undefined}
128 
   */
129 
  C.prototype.remove = function () {
130 
    this.$item.remove();
131 
  };
132 
 
133 
  return C;
134 
})(H5PEditor);