| 1 |
efrain |
1 |
/* global ns */
|
|
|
2 |
window.ns = window.H5PEditor = window.H5PEditor || {};
|
|
|
3 |
|
|
|
4 |
/**
|
|
|
5 |
* Construct the editor.
|
|
|
6 |
*
|
|
|
7 |
* @class H5PEditor.Editor
|
|
|
8 |
* @param {string} library
|
|
|
9 |
* @param {string} defaultParams
|
|
|
10 |
* @param {Element} replace
|
|
|
11 |
* @param {Function} iframeLoaded
|
|
|
12 |
*/
|
|
|
13 |
ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
|
|
|
14 |
var self = this;
|
|
|
15 |
|
|
|
16 |
// Library may return "0", make sure this doesn't return true in checks
|
|
|
17 |
library = library && library != 0 ? library : '';
|
|
|
18 |
|
|
|
19 |
let parsedParams = {};
|
|
|
20 |
try {
|
|
|
21 |
parsedParams = JSON.parse(defaultParams);
|
|
|
22 |
}
|
|
|
23 |
catch (e) {
|
|
|
24 |
// Ignore failed parses, this should be handled elsewhere
|
|
|
25 |
}
|
|
|
26 |
|
|
|
27 |
// Define iframe DOM Element through jQuery
|
|
|
28 |
var $iframe = ns.$('<iframe/>', {
|
|
|
29 |
'css': {
|
|
|
30 |
display: 'block',
|
|
|
31 |
width: '100%',
|
|
|
32 |
height: '3em',
|
|
|
33 |
border: 'none',
|
|
|
34 |
zIndex: 101,
|
|
|
35 |
top: 0,
|
|
|
36 |
left: 0
|
|
|
37 |
},
|
|
|
38 |
'class': 'h5p-editor-iframe',
|
|
|
39 |
'frameBorder': '0',
|
|
|
40 |
'allowfullscreen': 'allowfullscreen',
|
|
|
41 |
'allow': "fullscreen"
|
|
|
42 |
});
|
|
|
43 |
const metadata = parsedParams.metadata;
|
|
|
44 |
let title = ''
|
|
|
45 |
if (metadata) {
|
|
|
46 |
if (metadata.a11yTitle) {
|
|
|
47 |
title = metadata.a11yTitle;
|
|
|
48 |
}
|
|
|
49 |
else if (metadata.title) {
|
|
|
50 |
title = metadata.title;
|
|
|
51 |
}
|
|
|
52 |
}
|
|
|
53 |
$iframe.attr('title', title);
|
|
|
54 |
|
|
|
55 |
|
|
|
56 |
// The DOM element is often used directly
|
|
|
57 |
var iframe = $iframe.get(0);
|
|
|
58 |
|
|
|
59 |
/**
|
|
|
60 |
* Set the iframe content and start loading the necessary assets
|
|
|
61 |
*
|
|
|
62 |
* @private
|
|
|
63 |
*/
|
|
|
64 |
var populateIframe = function () {
|
|
|
65 |
if (!iframe.contentDocument) {
|
|
|
66 |
return; // Not possible, iframe 'load' hasn't been triggered yet
|
|
|
67 |
}
|
|
|
68 |
const language = metadata && metadata.defaultLanguage
|
|
|
69 |
? metadata.defaultLanguage : ns.contentLanguage;
|
|
|
70 |
iframe.contentDocument.open();
|
|
|
71 |
iframe.contentDocument.write(
|
|
|
72 |
'<!doctype html><html lang="' + language + '">' +
|
|
|
73 |
'<head>' +
|
|
|
74 |
ns.wrap('<link rel="stylesheet" href="', ns.assets.css, '">') +
|
|
|
75 |
ns.wrap('<script src="', ns.assets.js, '"></script>') +
|
|
|
76 |
'</head><body>' +
|
|
|
77 |
'<div class="h5p-editor h5peditor">' + ns.t('core', 'loading') + '</div>' +
|
|
|
78 |
'</body></html>');
|
|
|
79 |
iframe.contentDocument.close();
|
|
|
80 |
iframe.contentDocument.documentElement.style.overflow = 'hidden';
|
|
|
81 |
};
|
|
|
82 |
|
|
|
83 |
/**
|
|
|
84 |
* Wrapper for binding iframe unload event to a callback for multiple
|
|
|
85 |
* devices.
|
|
|
86 |
*
|
|
|
87 |
* @private
|
|
|
88 |
* @param {jQuery} $window of iframe
|
|
|
89 |
* @param {function} action callback on unload
|
|
|
90 |
*/
|
|
|
91 |
var onUnload = function ($window, action) {
|
|
|
92 |
$window.one('beforeunload unload', function () {
|
|
|
93 |
$window.off('pagehide beforeunload unload');
|
|
|
94 |
action();
|
|
|
95 |
});
|
|
|
96 |
$window.on('pagehide', action);
|
|
|
97 |
};
|
|
|
98 |
|
|
|
99 |
/**
|
|
|
100 |
* Object for keeping the scrollHeight + clientHeight used when the previous resize occurred
|
|
|
101 |
* This is used to skip handling resize when nothing actually is resized.
|
|
|
102 |
*/
|
|
|
103 |
const previousHeight = {
|
|
|
104 |
scroll: 0,
|
|
|
105 |
client: 0
|
|
|
106 |
};
|
|
|
107 |
|
|
|
108 |
/**
|
|
|
109 |
* Checks if iframe needs resizing, and then resize it.
|
|
|
110 |
*
|
|
|
111 |
* @public
|
|
|
112 |
* @param {bool} force If true, force resizing
|
|
|
113 |
*/
|
|
|
114 |
self.resize = function (force) {
|
|
|
115 |
force = (force === undefined ? false : force);
|
|
|
116 |
|
|
|
117 |
if (!iframe.contentDocument || !iframe.contentDocument.body || self.preventResize) {
|
|
|
118 |
return; // Prevent crashing when iframe is unloaded
|
|
|
119 |
}
|
|
|
120 |
|
|
|
121 |
// Has height changed?
|
|
|
122 |
const heightNotChanged =
|
|
|
123 |
previousHeight.scroll === iframe.contentDocument.body.scrollHeight &&
|
|
|
124 |
previousHeight.client === iframe.contentWindow.document.body.clientHeight;
|
|
|
125 |
|
|
|
126 |
if (!force && (heightNotChanged || (
|
|
|
127 |
iframe.clientHeight === iframe.contentDocument.body.scrollHeight &&
|
|
|
128 |
Math.abs(iframe.contentDocument.body.scrollHeight - iframe.contentWindow.document.body.clientHeight) <= 1
|
|
|
129 |
))) {
|
|
|
130 |
return; // Do not resize unless page and scrolling differs
|
|
|
131 |
// Note: ScrollHeight may be 1px larger in some cases(Edge) where the actual height is a fraction.
|
|
|
132 |
}
|
|
|
133 |
|
|
|
134 |
// Save the current scrollHeight/clientHeight
|
|
|
135 |
previousHeight.scroll = iframe.contentDocument.body.scrollHeight;
|
|
|
136 |
previousHeight.client = iframe.contentWindow.document.body.clientHeight;
|
|
|
137 |
|
|
|
138 |
// Retain parent size to avoid jumping/scrolling
|
|
|
139 |
var parentHeight = iframe.parentElement.style.height;
|
|
|
140 |
iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px';
|
|
|
141 |
|
|
|
142 |
// Reset iframe height, in case content has shrinked.
|
|
|
143 |
iframe.style.height = iframe.contentWindow.document.body.clientHeight + 'px';
|
|
|
144 |
|
|
|
145 |
// Resize iframe so all content is visible. Use scrollHeight to make sure we get everything
|
|
|
146 |
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
|
|
|
147 |
|
|
|
148 |
// Free parent
|
|
|
149 |
iframe.parentElement.style.height = parentHeight;
|
|
|
150 |
};
|
|
|
151 |
|
|
|
152 |
// Register loaded event handler for iframe
|
|
|
153 |
var load = function () {
|
|
|
154 |
if (!iframe.contentWindow.H5P) {
|
|
|
155 |
// The iframe has probably been reloaded, losing its content
|
|
|
156 |
setTimeout(function () {
|
|
|
157 |
// Wait for next tick as a new 'load' can't be triggered recursivly
|
|
|
158 |
populateIframe();
|
|
|
159 |
}, 0);
|
|
|
160 |
return;
|
|
|
161 |
}
|
|
|
162 |
|
|
|
163 |
// Trigger loaded callback. Could this have been an event?
|
|
|
164 |
if (iframeLoaded) {
|
|
|
165 |
iframeLoaded.call(this.contentWindow);
|
|
|
166 |
}
|
|
|
167 |
|
|
|
168 |
// Used for accessing resources inside iframe
|
|
|
169 |
self.iframeWindow = this.contentWindow;
|
|
|
170 |
|
|
|
171 |
var LibrarySelector = this.contentWindow.H5PEditor.LibrarySelector;
|
|
|
172 |
var $ = this.contentWindow.H5P.jQuery;
|
|
|
173 |
var $container = $('body > .h5p-editor');
|
|
|
174 |
|
|
|
175 |
this.contentWindow.H5P.$body = $(this.contentDocument.body);
|
|
|
176 |
|
|
|
177 |
/**
|
|
|
178 |
* Trigger semi-fullscreen for $element.
|
|
|
179 |
*
|
|
|
180 |
* @param {jQuery} $element Element to put in semi-fullscreen
|
|
|
181 |
* @param {function} before Callback that runs after entering
|
|
|
182 |
* semi-fullscreen
|
|
|
183 |
* @param {function} done Callback that runs after exiting semi-fullscreen
|
|
|
184 |
* @return {function} Exit trigger
|
|
|
185 |
*/
|
|
|
186 |
this.contentWindow.H5PEditor.semiFullscreen = function ($element, after, done) {
|
|
|
187 |
const exit = self.semiFullscreen($iframe, $element, done);
|
|
|
188 |
after();
|
|
|
189 |
return exit;
|
|
|
190 |
};
|
|
|
191 |
|
|
|
192 |
// Load libraries data
|
|
|
193 |
$.ajax({
|
|
|
194 |
url: this.contentWindow.H5PEditor.getAjaxUrl(H5PIntegration.hubIsEnabled ? 'content-type-cache' : 'libraries')
|
|
|
195 |
}).fail(function () {
|
|
|
196 |
$container.html('Error, unable to load libraries.');
|
|
|
197 |
}).done(function (data) {
|
|
|
198 |
if (data.success === false) {
|
|
|
199 |
$container.html(data.message + ' (' + data.errorCode + ')');
|
|
|
200 |
return;
|
|
|
201 |
}
|
|
|
202 |
|
|
|
203 |
// Create library selector
|
|
|
204 |
self.selector = new LibrarySelector(data, library, defaultParams);
|
|
|
205 |
self.selector.appendTo($container.html(''));
|
|
|
206 |
|
|
|
207 |
// Resize iframe when selector resizes
|
|
|
208 |
self.selector.on('resize', self.resize.bind(self));
|
|
|
209 |
|
|
|
210 |
/**
|
|
|
211 |
* Event handler for exposing events
|
|
|
212 |
*
|
|
|
213 |
* @private
|
|
|
214 |
* @param {H5P.Event} event
|
|
|
215 |
*/
|
|
|
216 |
var relayEvent = function (event) {
|
|
|
217 |
H5P.externalDispatcher.trigger(event);
|
|
|
218 |
};
|
|
|
219 |
self.selector.on('editorload', relayEvent);
|
|
|
220 |
self.selector.on('editorloaded', relayEvent);
|
|
|
221 |
|
|
|
222 |
// Set library if editing
|
|
|
223 |
if (library) {
|
|
|
224 |
self.selector.setLibrary(library);
|
|
|
225 |
}
|
|
|
226 |
});
|
|
|
227 |
|
|
|
228 |
// Start resizing the iframe
|
|
|
229 |
if (iframe.contentWindow.MutationObserver !== undefined) {
|
|
|
230 |
// If supported look for changes to DOM elements. This saves resources.
|
|
|
231 |
var running;
|
|
|
232 |
var limitedResize = function () {
|
|
|
233 |
if (!running) {
|
|
|
234 |
running = setTimeout(function () {
|
|
|
235 |
self.resize();
|
|
|
236 |
running = null;
|
|
|
237 |
}, 40); // 25 fps cap
|
|
|
238 |
}
|
|
|
239 |
};
|
|
|
240 |
|
|
|
241 |
new iframe.contentWindow.MutationObserver(limitedResize).observe(iframe.contentWindow.document.body, {
|
|
|
242 |
childList: true,
|
|
|
243 |
attributes: true,
|
|
|
244 |
characterData: true,
|
|
|
245 |
subtree: true,
|
|
|
246 |
attributeOldValue: false,
|
|
|
247 |
characterDataOldValue: false
|
|
|
248 |
});
|
|
|
249 |
|
|
|
250 |
H5P.$window.resize(limitedResize);
|
|
|
251 |
self.resize();
|
|
|
252 |
}
|
|
|
253 |
else {
|
|
|
254 |
// Use an interval for resizing the iframe
|
|
|
255 |
(function resizeInterval() {
|
|
|
256 |
self.resize();
|
|
|
257 |
setTimeout(resizeInterval, 40); // No more than 25 times per second
|
|
|
258 |
})();
|
|
|
259 |
}
|
|
|
260 |
|
|
|
261 |
// Handle iframe being reloaded
|
|
|
262 |
onUnload($(iframe.contentWindow), function () {
|
|
|
263 |
if (self.formSubmitted) {
|
|
|
264 |
return;
|
|
|
265 |
}
|
|
|
266 |
|
|
|
267 |
// Keep track of previous state
|
|
|
268 |
library = self.getLibrary();
|
|
|
269 |
defaultParams = JSON.stringify(self.getParams(true));
|
|
|
270 |
});
|
|
|
271 |
};
|
|
|
272 |
|
|
|
273 |
// Insert iframe into DOM
|
|
|
274 |
$iframe.replaceAll(replace);
|
|
|
275 |
|
|
|
276 |
// Need to put this after the above replaceAll(), since that one makes Safari
|
|
|
277 |
// 11 trigger a load event for the iframe
|
|
|
278 |
$iframe.on('load', load);
|
|
|
279 |
|
|
|
280 |
// Populate iframe with the H5P Editor
|
|
|
281 |
// (should not really be done until 'load', but might be here in case the iframe is reloaded?)
|
|
|
282 |
populateIframe();
|
|
|
283 |
};
|
|
|
284 |
|
|
|
285 |
/**
|
|
|
286 |
* Find out which library is used/selected.
|
|
|
287 |
*
|
|
|
288 |
* @alias H5PEditor.Editor#getLibrary
|
|
|
289 |
* @returns {string} Library name
|
|
|
290 |
*/
|
|
|
291 |
ns.Editor.prototype.getLibrary = function () {
|
|
|
292 |
if (this.selector !== undefined) {
|
|
|
293 |
return this.selector.getCurrentLibrary();
|
|
|
294 |
}
|
|
|
295 |
else if (this.selectedContentTypeId) {
|
|
|
296 |
return this.selectedContentTypeId;
|
|
|
297 |
}
|
|
|
298 |
else {
|
|
|
299 |
console.warn('no selector defined for "getLibrary"');
|
|
|
300 |
}
|
|
|
301 |
};
|
|
|
302 |
|
|
|
303 |
/**
|
|
|
304 |
* Get parameters needed to start library.
|
|
|
305 |
*
|
|
|
306 |
* @alias H5PEditor.Editor#getParams
|
|
|
307 |
* @returns {Object} Library parameters
|
|
|
308 |
*/
|
|
|
309 |
ns.Editor.prototype.getParams = function (notFormSubmit) {
|
|
|
310 |
if (!notFormSubmit) {
|
|
|
311 |
this.formSubmitted = true;
|
|
|
312 |
}
|
|
|
313 |
if (this.selector !== undefined) {
|
|
|
314 |
return {
|
|
|
315 |
params: this.selector.getParams(),
|
|
|
316 |
metadata: this.selector.getMetadata()
|
|
|
317 |
};
|
|
|
318 |
}
|
|
|
319 |
else {
|
|
|
320 |
console.warn('no selector defined for "getParams"');
|
|
|
321 |
}
|
|
|
322 |
};
|
|
|
323 |
|
|
|
324 |
/**
|
|
|
325 |
* Validate editor data and submit content using callback.
|
|
|
326 |
*
|
|
|
327 |
* @alias H5PEditor.Editor#getContent
|
|
|
328 |
* @param {Function} submit Callback to submit the content data
|
|
|
329 |
* @param {Function} [error] Callback on failure
|
|
|
330 |
*/
|
|
|
331 |
ns.Editor.prototype.getContent = function (submit, error) {
|
|
|
332 |
const iframeEditor = this.iframeWindow.H5PEditor;
|
|
|
333 |
|
|
|
334 |
if (!this.selector.form) {
|
|
|
335 |
if (error) {
|
|
|
336 |
error('content-not-selected');
|
|
|
337 |
}
|
|
|
338 |
return;
|
|
|
339 |
}
|
|
|
340 |
|
|
|
341 |
const content = {
|
|
|
342 |
title: this.isMainTitleSet(),
|
|
|
343 |
library: this.getLibrary(),
|
|
|
344 |
params: this.getParams()
|
|
|
345 |
};
|
|
|
346 |
|
|
|
347 |
if (!content.title) {
|
|
|
348 |
if (error) {
|
|
|
349 |
error('missing-title');
|
|
|
350 |
}
|
|
|
351 |
return;
|
|
|
352 |
}
|
|
|
353 |
if (!content.library) {
|
|
|
354 |
if (error) {
|
|
|
355 |
error('missing-library');
|
|
|
356 |
}
|
|
|
357 |
return;
|
|
|
358 |
}
|
|
|
359 |
if (!content.params) {
|
|
|
360 |
if (error) {
|
|
|
361 |
error('missing-params');
|
|
|
362 |
}
|
|
|
363 |
return;
|
|
|
364 |
}
|
|
|
365 |
if (!content.params.params) {
|
|
|
366 |
if (error) {
|
|
|
367 |
error('missing-params-params');
|
|
|
368 |
}
|
|
|
369 |
return;
|
|
|
370 |
}
|
|
|
371 |
|
|
|
372 |
library = new iframeEditor.ContentType(content.library);
|
|
|
373 |
const upgradeLibrary = iframeEditor.ContentType.getPossibleUpgrade(library, this.selector.libraries.libraries !== undefined ? this.selector.libraries.libraries : this.selector.libraries);
|
|
|
374 |
if (upgradeLibrary) {
|
|
|
375 |
// We need to run content upgrade before saving
|
|
|
376 |
iframeEditor.upgradeContent(library, upgradeLibrary, content.params, function (err, result) {
|
|
|
377 |
if (err) {
|
|
|
378 |
if (error) {
|
|
|
379 |
error(err);
|
|
|
380 |
}
|
|
|
381 |
}
|
|
|
382 |
else {
|
|
|
383 |
content.library = iframeEditor.ContentType.getNameVersionString(upgradeLibrary);
|
|
|
384 |
content.params = result;
|
|
|
385 |
submit(content);
|
|
|
386 |
}
|
|
|
387 |
})
|
|
|
388 |
}
|
|
|
389 |
else {
|
|
|
390 |
// All OK, store the data
|
|
|
391 |
content.params = JSON.stringify(content.params);
|
|
|
392 |
submit(content);
|
|
|
393 |
}
|
|
|
394 |
};
|
|
|
395 |
|
|
|
396 |
/**
|
|
|
397 |
* Check if main title is set. If not, focus on it!
|
|
|
398 |
*
|
|
|
399 |
* @return {[type]}
|
|
|
400 |
*/
|
|
|
401 |
ns.Editor.prototype.isMainTitleSet = function () {
|
|
|
402 |
var mainTitleField = this.selector.form.metadataForm.getExtraTitleField();
|
|
|
403 |
|
|
|
404 |
// validate() actually doesn't return a boolean, but the trimmed value
|
|
|
405 |
// We know title is a mandatory field, so that's what we are checking here
|
|
|
406 |
var valid = mainTitleField.validate();
|
|
|
407 |
if (!valid) {
|
|
|
408 |
mainTitleField.$input.focus();
|
|
|
409 |
}
|
|
|
410 |
return valid;
|
|
|
411 |
};
|
|
|
412 |
|
|
|
413 |
/**
|
|
|
414 |
*
|
|
|
415 |
* @alias H5PEditor.Editor#presave
|
|
|
416 |
* @param content
|
|
|
417 |
* @return {H5PEditor.Presave}
|
|
|
418 |
*/
|
|
|
419 |
ns.Editor.prototype.getMaxScore = function (content) {
|
|
|
420 |
try {
|
|
|
421 |
var value = this.selector.presave(content, this.getLibrary());
|
|
|
422 |
return value.maxScore;
|
|
|
423 |
}
|
|
|
424 |
catch (e) {
|
|
|
425 |
// Deliberatly catching error
|
|
|
426 |
return 0;
|
|
|
427 |
}
|
|
|
428 |
};
|
|
|
429 |
|
|
|
430 |
/**
|
|
|
431 |
* Trigger semi-fullscreen for $iframe and $element.
|
|
|
432 |
*
|
|
|
433 |
* @param {jQuery} $iframe
|
|
|
434 |
* @param {jQuery} $element
|
|
|
435 |
* @param {function} done Callback that runs after semi-fullscreen exit
|
|
|
436 |
* @return {function} Exit trigger
|
|
|
437 |
*/
|
|
|
438 |
ns.Editor.prototype.semiFullscreen = function ($iframe, $element, done) {
|
|
|
439 |
const self = this;
|
|
|
440 |
|
|
|
441 |
// Add class for element to cover all of the page
|
|
|
442 |
const $classes = $iframe.add($element).addClass('h5peditor-semi-fullscreen');
|
|
|
443 |
// NOTE: Styling for this class is provided by Core
|
|
|
444 |
|
|
|
445 |
// Prevent the resizing loop from messing with the iframe while
|
|
|
446 |
// the semi-fullscreen is active.
|
|
|
447 |
self.preventResize = true;
|
|
|
448 |
|
|
|
449 |
// Prevent body overflow
|
|
|
450 |
const bodyOverflowValue = document.body.style.getPropertyValue('overflow');
|
|
|
451 |
const bodyOverflowPriority = document.body.style.getPropertyPriority('overflow');
|
|
|
452 |
document.body.style.setProperty('overflow', 'hidden', 'important');
|
|
|
453 |
|
|
|
454 |
// Reset the iframe's default CSS props
|
|
|
455 |
$iframe.css({
|
|
|
456 |
width: '',
|
|
|
457 |
height: '',
|
|
|
458 |
zIndex: '',
|
|
|
459 |
top: '',
|
|
|
460 |
left: ''
|
|
|
461 |
});
|
|
|
462 |
// NOTE: Style attribute has been used here since June 2014 since there are
|
|
|
463 |
// no CSS files in H5PEditor loaded outside the iframe.
|
|
|
464 |
|
|
|
465 |
// Hide all elements except the iframe and the fullscreen elements
|
|
|
466 |
// This is to avoid tabbing and readspeakers accessing these while
|
|
|
467 |
// the semi-fullscreen is active.
|
|
|
468 |
const iframeWindow = $iframe[0].contentWindow;
|
|
|
469 |
const restoreOutside = ns.hideAllButOne($iframe[0], iframeWindow);
|
|
|
470 |
const restoreInside = ns.hideAllButOne($element[0], window);
|
|
|
471 |
|
|
|
472 |
/**
|
|
|
473 |
* Trigger semi-fullscreen exit on ESC key
|
|
|
474 |
*
|
|
|
475 |
* @private
|
|
|
476 |
*/
|
|
|
477 |
const handleKeyup = function (e) {
|
|
|
478 |
if (e.which === 27) {
|
|
|
479 |
restore();
|
|
|
480 |
}
|
|
|
481 |
}
|
|
|
482 |
iframeWindow.document.body.addEventListener('keyup', handleKeyup);
|
|
|
483 |
|
|
|
484 |
/**
|
|
|
485 |
* Exit/restore callback returned.
|
|
|
486 |
*
|
|
|
487 |
* @private
|
|
|
488 |
*/
|
|
|
489 |
const restore = function () {
|
|
|
490 |
// Remove our special class
|
|
|
491 |
$classes.removeClass('h5peditor-semi-fullscreen');
|
|
|
492 |
|
|
|
493 |
// Allow the resizing loop to adjust the iframe
|
|
|
494 |
self.preventResize = false;
|
|
|
495 |
|
|
|
496 |
// Restore body overflow
|
|
|
497 |
document.body.style.setProperty('overflow', bodyOverflowValue, bodyOverflowPriority);
|
|
|
498 |
|
|
|
499 |
// Restore the default style attribute properties
|
|
|
500 |
$iframe.css({
|
|
|
501 |
width: '100%',
|
|
|
502 |
height: '3em',
|
|
|
503 |
zIndex: 101,
|
|
|
504 |
top: 0,
|
|
|
505 |
left: 0
|
|
|
506 |
});
|
|
|
507 |
|
|
|
508 |
// Return all of the elements hidden back to their original state
|
|
|
509 |
restoreOutside();
|
|
|
510 |
restoreInside();
|
|
|
511 |
|
|
|
512 |
iframeWindow.document.body.removeEventListener('keyup', handleKeyup);
|
|
|
513 |
done(); // Callback for UI
|
|
|
514 |
|
|
|
515 |
self.resize(true);
|
|
|
516 |
}
|
|
|
517 |
|
|
|
518 |
return restore;
|
|
|
519 |
};
|
|
|
520 |
|
|
|
521 |
/**
|
|
|
522 |
* Will hide all siblings and ancestor siblings(uncles and aunts) of element.
|
|
|
523 |
*
|
|
|
524 |
* @param {Element} element
|
|
|
525 |
* @param {Window} win Needed to get the correct computed style
|
|
|
526 |
* @return {function} Restore trigger
|
|
|
527 |
*/
|
|
|
528 |
ns.hideAllButOne = function (element, win) {
|
|
|
529 |
// Make it easy and quick to restore previous display values
|
|
|
530 |
const restore = [];
|
|
|
531 |
|
|
|
532 |
/**
|
|
|
533 |
* Check if the given element is visible.
|
|
|
534 |
*
|
|
|
535 |
* @private
|
|
|
536 |
* @param {Element} element
|
|
|
537 |
*/
|
|
|
538 |
const isVisible = function (element) {
|
|
|
539 |
if (element.offsetParent === null) {
|
|
|
540 |
// Must check computed style to be sure in case of fixed element
|
|
|
541 |
if (win.getComputedStyle(element).display !== 'none') {
|
|
|
542 |
return true;
|
|
|
543 |
}
|
|
|
544 |
}
|
|
|
545 |
else {
|
|
|
546 |
return true;
|
|
|
547 |
}
|
|
|
548 |
return false;
|
|
|
549 |
}
|
|
|
550 |
|
|
|
551 |
/**
|
|
|
552 |
* Recusive function going up the DOM tree.
|
|
|
553 |
* Will hide all siblings of given element.
|
|
|
554 |
*
|
|
|
555 |
* @private
|
|
|
556 |
* @param {Element} element
|
|
|
557 |
*/
|
|
|
558 |
const recurse = function (element) {
|
|
|
559 |
// Loop through siblings
|
|
|
560 |
for (let i = 0; i < element.parentElement.children.length; i++) {
|
|
|
561 |
let sibling = element.parentElement.children[i];
|
|
|
562 |
if (sibling === element) {
|
|
|
563 |
continue; // Skip where we came from
|
|
|
564 |
}
|
|
|
565 |
|
|
|
566 |
// Only hide if sibling is visible
|
|
|
567 |
if (isVisible(sibling)) {
|
|
|
568 |
// Make it simple to restore original value
|
|
|
569 |
restore.push({
|
|
|
570 |
element: sibling,
|
|
|
571 |
display: sibling.style.getPropertyValue('display'),
|
|
|
572 |
priority: sibling.style.getPropertyPriority('display')
|
|
|
573 |
});
|
|
|
574 |
sibling.style.setProperty('display', 'none', 'important');
|
|
|
575 |
}
|
|
|
576 |
}
|
|
|
577 |
|
|
|
578 |
// Climb up the tree until we hit some body
|
|
|
579 |
if (element.parentElement.tagName !== 'BODY') {
|
|
|
580 |
recurse(element.parentElement);
|
|
|
581 |
}
|
|
|
582 |
}
|
|
|
583 |
recurse(element); // Start
|
|
|
584 |
|
|
|
585 |
/**
|
|
|
586 |
* Restore callback returned.
|
|
|
587 |
*
|
|
|
588 |
* @private
|
|
|
589 |
*/
|
|
|
590 |
return function () {
|
|
|
591 |
for (let i = restore.length - 1; i > -1; i--) { // In opposite order
|
|
|
592 |
restore[i].element.style.setProperty('display', restore[i].display, restore[i].priority);
|
|
|
593 |
}
|
|
|
594 |
};
|
|
|
595 |
}
|
|
|
596 |
|
|
|
597 |
/**
|
|
|
598 |
* Editor translations index by library name or "core".
|
|
|
599 |
*
|
|
|
600 |
* @member {Object} H5PEditor.language
|
|
|
601 |
*/
|
|
|
602 |
ns.language = {};
|
|
|
603 |
|
|
|
604 |
/**
|
|
|
605 |
* Translate text strings.
|
|
|
606 |
*
|
|
|
607 |
* @method H5PEditor.t
|
|
|
608 |
* @param {string} library The library name(machineName), or "core".
|
|
|
609 |
* @param {string} key Translation string identifier.
|
|
|
610 |
* @param {Object} [vars] Placeholders and values to replace in the text.
|
|
|
611 |
* @returns {string} Translated string, or a text if string translation is
|
|
|
612 |
* missing.
|
|
|
613 |
*/
|
|
|
614 |
ns.t = function (library, key, vars) {
|
|
|
615 |
if (ns.language[library] === undefined) {
|
|
|
616 |
return 'Missing translations for library ' + library;
|
|
|
617 |
}
|
|
|
618 |
|
|
|
619 |
var translation;
|
|
|
620 |
if (library === 'core') {
|
|
|
621 |
if (ns.language[library][key] === undefined) {
|
|
|
622 |
return 'Missing translation for ' + key;
|
|
|
623 |
}
|
|
|
624 |
translation = ns.language[library][key];
|
|
|
625 |
}
|
|
|
626 |
else {
|
|
|
627 |
if (ns.language[library].libraryStrings === undefined || ns.language[library].libraryStrings[key] === undefined) {
|
|
|
628 |
return ns.t('core', 'missingTranslation', {':key': key});
|
|
|
629 |
}
|
|
|
630 |
translation = ns.language[library].libraryStrings[key];
|
|
|
631 |
}
|
|
|
632 |
|
|
|
633 |
// Replace placeholder with variables.
|
|
|
634 |
for (var placeholder in vars) {
|
|
|
635 |
if (vars[placeholder] === undefined) {
|
|
|
636 |
continue;
|
|
|
637 |
}
|
|
|
638 |
translation = translation.replace(placeholder, vars[placeholder]);
|
|
|
639 |
}
|
|
|
640 |
|
|
|
641 |
return translation;
|
|
|
642 |
};
|
|
|
643 |
|
|
|
644 |
/**
|
|
|
645 |
* Wraps multiple content between a prefix and a suffix.
|
|
|
646 |
*
|
|
|
647 |
* @method H5PEditor.wrap
|
|
|
648 |
* @param {string} prefix Inserted before the content.
|
|
|
649 |
* @param {Array} content List of content to be wrapped.
|
|
|
650 |
* @param {string} suffix Inserted after the content.
|
|
|
651 |
* @returns {string} All content put together with prefix and suffix.
|
|
|
652 |
*/
|
|
|
653 |
ns.wrap = function (prefix, content, suffix) {
|
|
|
654 |
var result = '';
|
|
|
655 |
for (var i = 0; i < content.length; i++) {
|
|
|
656 |
result += prefix + content[i] + suffix;
|
|
|
657 |
}
|
|
|
658 |
return result;
|
|
|
659 |
};
|