| 1 |
efrain |
1 |
/* global ns */
|
|
|
2 |
/**
|
|
|
3 |
* Adds a dimensions field to the form.
|
|
|
4 |
*
|
|
|
5 |
* TODO: Make it possible to lock width/height ratio.
|
|
|
6 |
*
|
|
|
7 |
* @param {mixed} parent
|
|
|
8 |
* @param {object} field
|
|
|
9 |
* @param {mixed} params
|
|
|
10 |
* @param {function} setValue
|
|
|
11 |
* @returns {ns.Dimensions}
|
|
|
12 |
*/
|
|
|
13 |
ns.Dimensions = function (parent, field, params, setValue) {
|
|
|
14 |
var that = this;
|
|
|
15 |
|
|
|
16 |
this.parent = parent;
|
|
|
17 |
this.field = field;
|
|
|
18 |
this.changes = [];
|
|
|
19 |
|
|
|
20 |
// Find image field to get max size from.
|
|
|
21 |
H5PEditor.followField(parent, field.max, function (file) {
|
|
|
22 |
that.setMax(file);
|
|
|
23 |
});
|
|
|
24 |
|
|
|
25 |
// Find image field to get default size from.
|
|
|
26 |
H5PEditor.followField(parent, field['default'], function (file) {
|
|
|
27 |
// Make sure we don't set size if we have one in the default params.
|
|
|
28 |
if (params.width === undefined) {
|
|
|
29 |
that.setSize(file);
|
|
|
30 |
}
|
|
|
31 |
});
|
|
|
32 |
|
|
|
33 |
this.params = params;
|
|
|
34 |
this.setValue = setValue;
|
|
|
35 |
|
|
|
36 |
// Remove default field from params to avoid saving it.
|
|
|
37 |
if (this.params.field) {
|
|
|
38 |
this.params.field = undefined;
|
|
|
39 |
}
|
|
|
40 |
};
|
|
|
41 |
|
|
|
42 |
/**
|
|
|
43 |
* Set max dimensions.
|
|
|
44 |
*
|
|
|
45 |
* @param {Object} file
|
|
|
46 |
* @returns {unresolved}
|
|
|
47 |
*/
|
|
|
48 |
ns.Dimensions.prototype.setMax = function (file) {
|
|
|
49 |
if (file === undefined) {
|
|
|
50 |
return;
|
|
|
51 |
}
|
|
|
52 |
|
|
|
53 |
this.max = {
|
|
|
54 |
width: parseInt(file.width),
|
|
|
55 |
height: parseInt(file.height)
|
|
|
56 |
};
|
|
|
57 |
};
|
|
|
58 |
|
|
|
59 |
/**
|
|
|
60 |
* Set current dimensions.
|
|
|
61 |
*
|
|
|
62 |
* @param {string} width
|
|
|
63 |
* @param {string} height
|
|
|
64 |
* @returns {undefined}
|
|
|
65 |
*/
|
|
|
66 |
ns.Dimensions.prototype.setSize = function (file) {
|
|
|
67 |
if (file === undefined) {
|
|
|
68 |
return;
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
this.params = {
|
|
|
72 |
width: parseInt(file.width),
|
|
|
73 |
height: parseInt(file.height)
|
|
|
74 |
};
|
|
|
75 |
this.setValue(this.field, this.params);
|
|
|
76 |
|
|
|
77 |
this.$inputs.filter(':eq(0)').val(file.width).next().val(file.height);
|
|
|
78 |
|
|
|
79 |
for (var i = 0; i < this.changes.length; i++) {
|
|
|
80 |
this.changes[i](file.width, file.height);
|
|
|
81 |
}
|
|
|
82 |
};
|
|
|
83 |
|
|
|
84 |
/**
|
|
|
85 |
* Append the field to the given wrapper.
|
|
|
86 |
*
|
|
|
87 |
* @param {jQuery} $wrapper
|
|
|
88 |
* @returns {undefined}
|
|
|
89 |
*/
|
|
|
90 |
ns.Dimensions.prototype.appendTo = function ($wrapper) {
|
|
|
91 |
var that = this;
|
|
|
92 |
|
|
|
93 |
this.$item = ns.$(this.createHtml()).appendTo($wrapper);
|
|
|
94 |
this.$inputs = this.$item.find('input');
|
|
|
95 |
this.$errors = this.$item.children('.h5p-errors');
|
|
|
96 |
|
|
|
97 |
this.$inputs.change(function () {
|
|
|
98 |
// Validate
|
|
|
99 |
var value = that.validate();
|
|
|
100 |
|
|
|
101 |
if (value) {
|
|
|
102 |
// Set param
|
|
|
103 |
that.params = value;
|
|
|
104 |
that.setValue(that.field, value);
|
|
|
105 |
|
|
|
106 |
for (var i = 0; i < that.changes.length; i++) {
|
|
|
107 |
that.changes[i](value.width, value.height);
|
|
|
108 |
}
|
|
|
109 |
}
|
|
|
110 |
}).click(function () {
|
|
|
111 |
return false;
|
|
|
112 |
});
|
|
|
113 |
};
|
|
|
114 |
|
|
|
115 |
/**
|
|
|
116 |
* Create HTML for the field.
|
|
|
117 |
*/
|
|
|
118 |
ns.Dimensions.prototype.createHtml = function () {
|
|
|
119 |
const id = ns.getNextFieldId(this.field);
|
|
|
120 |
const descriptionId = (this.field.description !== undefined ? ns.getDescriptionId(id) : undefined)
|
|
|
121 |
|
|
|
122 |
var input =
|
|
|
123 |
ns.createText(this.params !== undefined ? this.params.width : undefined, 15, ns.t('core', 'width'), id, descriptionId) +
|
|
|
124 |
' x ' +
|
|
|
125 |
ns.createText(this.params !== undefined ? this.params.height : undefined, 15, ns.t('core', 'height'), undefined, descriptionId);
|
|
|
126 |
|
|
|
127 |
return ns.createFieldMarkup(this.field, input, id);
|
|
|
128 |
};
|
|
|
129 |
|
|
|
130 |
/**
|
|
|
131 |
* Validate the current text field.
|
|
|
132 |
*/
|
|
|
133 |
ns.Dimensions.prototype.validate = function () {
|
|
|
134 |
var that = this;
|
|
|
135 |
var size = {};
|
|
|
136 |
|
|
|
137 |
this.$errors.html('');
|
|
|
138 |
|
|
|
139 |
this.$inputs.each(function (i) {
|
|
|
140 |
var $input = ns.$(this);
|
|
|
141 |
var value = H5P.trim($input.val());
|
|
|
142 |
var property = i ? 'height' : 'width';
|
|
|
143 |
var propertyTranslated = ns.t('core', property);
|
|
|
144 |
|
|
|
145 |
if ((that.field.optional === undefined || !that.field.optional) && !value.length) {
|
|
|
146 |
that.$errors.append(ns.createError(ns.t('core', 'requiredProperty', {':property': propertyTranslated})));
|
|
|
147 |
return false;
|
|
|
148 |
}
|
|
|
149 |
else if (!value.match(new RegExp('^[0-9]+$'))) {
|
|
|
150 |
that.$errors.append(ns.createError(ns.t('core', 'onlyNumbers', {':property': propertyTranslated})));
|
|
|
151 |
return false;
|
|
|
152 |
}
|
|
|
153 |
|
|
|
154 |
value = parseInt(value);
|
|
|
155 |
if (that.max !== undefined && value > that.max[property]) {
|
|
|
156 |
that.$errors.append(ns.createError(ns.t('core', 'exceedsMax', {':property': propertyTranslated, ':max': that.max[property]})));
|
|
|
157 |
return false;
|
|
|
158 |
}
|
|
|
159 |
|
|
|
160 |
size[property] = value;
|
|
|
161 |
});
|
|
|
162 |
|
|
|
163 |
return ns.checkErrors(this.$errors, this.$inputs, size);
|
|
|
164 |
};
|
|
|
165 |
|
|
|
166 |
/**
|
|
|
167 |
* Remove this item.
|
|
|
168 |
*/
|
|
|
169 |
ns.Dimensions.prototype.remove = function () {
|
|
|
170 |
this.$item.remove();
|
|
|
171 |
};
|
|
|
172 |
|
|
|
173 |
// Tell the editor what widget we are.
|
|
|
174 |
ns.widgets.dimensions = ns.Dimensions;
|