h5p-php-library/js/h5p.js

1401 lines
39 KiB
JavaScript
Raw Normal View History

/*jshint multistr: true */
// TODO: Should we split up the generic parts needed by the editor(and others), and the parts needed to "run" H5Ps?
var H5P = H5P || {};
2013-01-17 09:01:43 +01:00
2014-03-26 08:43:29 +01:00
// Determine if we're inside an iframe.
H5P.isFramed = (window.self !== window.top);
// Useful jQuery object.
H5P.$window = H5P.jQuery(window);
2014-10-13 22:19:59 +02:00
H5P.instances = [];
2014-03-26 08:43:29 +01:00
// Detect if we support fullscreen, and what prefix to use.
if (document.documentElement.requestFullScreen) {
H5P.fullScreenBrowserPrefix = '';
}
else if (document.documentElement.webkitRequestFullScreen) {
H5P.safariBrowser = navigator.userAgent.match(/Version\/(\d)/);
H5P.safariBrowser = (H5P.safariBrowser === null ? 0 : parseInt(H5P.safariBrowser[1]));
// Do not allow fullscreen for safari < 7.
if (H5P.safariBrowser === 0 || H5P.safariBrowser > 6) {
H5P.fullScreenBrowserPrefix = 'webkit';
}
2014-03-26 08:43:29 +01:00
}
else if (document.documentElement.mozRequestFullScreen) {
H5P.fullScreenBrowserPrefix = 'moz';
}
else if (document.documentElement.msRequestFullscreen) {
H5P.fullScreenBrowserPrefix = 'ms';
}
// Keep track of when the H5Ps where started
H5P.opened = {};
/**
* Initialize H5P content.
* Scans for ".h5p-content" in the document and initializes H5P instances where found.
*/
2015-03-10 10:09:31 +01:00
H5P.init = function (target) {
2014-03-26 08:43:29 +01:00
// Useful jQuery object.
2015-03-10 10:09:31 +01:00
if (H5P.$body === undefined) {
H5P.$body = H5P.jQuery(document.body);
}
2013-04-26 17:27:35 +02:00
2015-03-13 12:51:31 +01:00
// Determine if we can use full screen
if (H5P.canHasFullScreen === undefined) {
H5P.canHasFullScreen = (H5P.isFramed && H5P.externalEmbed !== false) ? (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) : true;
}
2014-03-26 08:43:29 +01:00
// H5Ps added in normal DIV.
2015-03-10 10:09:31 +01:00
var $containers = H5P.jQuery('.h5p-content:not(.h5p-initialized)', target).each(function () {
var $element = H5P.jQuery(this).addClass('h5p-initialized');
2014-03-26 08:43:29 +01:00
var $container = H5P.jQuery('<div class="h5p-container"></div>').appendTo($element);
var contentId = $element.data('content-id');
2015-02-27 13:59:42 +01:00
var contentData = H5PIntegration.contents['cid-' + contentId];
2014-04-14 10:50:37 +02:00
if (contentData === undefined) {
return H5P.error('No data for content id ' + contentId + '. Perhaps the library is gone?');
}
2014-03-26 08:43:29 +01:00
var library = {
library: contentData.library,
params: JSON.parse(contentData.jsonContent)
2014-03-26 08:43:29 +01:00
};
// Create new instance.
var instance = H5P.newRunnable(library, contentId, $container, true);
2014-03-26 08:43:29 +01:00
// Check if we should add and display a fullscreen button for this H5P.
if (contentData.fullScreen == 1) {
2014-04-13 15:52:12 +02:00
H5P.jQuery('<div class="h5p-content-controls"><div role="button" tabindex="1" class="h5p-enable-fullscreen" title="' + H5P.t('fullscreen') + '"></div></div>').prependTo($container).children().click(function () {
2014-03-26 08:43:29 +01:00
H5P.fullScreen($container, instance);
});
}
2014-03-26 08:43:29 +01:00
var $actions = H5P.jQuery('<ul class="h5p-actions"></ul>');
if (contentData.exportUrl !== '') {
2014-03-26 08:43:29 +01:00
// Display export button
H5P.jQuery('<li class="h5p-button h5p-export" role="button" tabindex="1" title="' + H5P.t('downloadDescription') + '">' + H5P.t('download') + '</li>').appendTo($actions).click(function () {
window.location.href = contentData.exportUrl;
2014-03-26 08:43:29 +01:00
});
2013-04-11 14:29:29 +02:00
}
// Display copyrights button
H5P.jQuery('<li class="h5p-button h5p-copyrights" role="button" tabindex="1" title="' + H5P.t('copyrightsDescription') + '">' + H5P.t('copyrights') + '</li>').appendTo($actions).click(function () {
H5P.openCopyrightsDialog($actions, instance, library.params, contentId);
});
2014-03-26 08:43:29 +01:00
if (contentData.embedCode !== undefined) {
// Display embed button
H5P.jQuery('<li class="h5p-button h5p-embed" role="button" tabindex="1" title="' + H5P.t('embedDescription') + '">' + H5P.t('embed') + '</li>').appendTo($actions).click(function () {
2015-02-25 12:10:07 +01:00
H5P.openEmbedDialog($actions, contentData.embedCode, contentData.resizeCode, {
width: $container.width(),
height: $container.height()
});
2014-03-26 08:43:29 +01:00
});
2013-04-11 14:29:29 +02:00
}
if (contentData.showH5PIconInActionBar) {
2014-04-13 15:52:12 +02:00
H5P.jQuery('<li><a class="h5p-link" href="http://h5p.org" target="_blank" title="' + H5P.t('h5pDescription') + '"></a></li>').appendTo($actions);
}
2014-03-26 08:43:29 +01:00
$actions.insertAfter($container);
// Keep track of when we started
H5P.opened[contentId] = new Date();
// Handle events when the user finishes the content. Useful for logging exercise results.
H5P.on(instance, 'finish', function (event) {
if (event.data !== undefined) {
H5P.setFinished(contentId, event.data.score, event.data.maxScore, event.data.time);
}
});
// Listen for xAPI events.
2015-02-16 16:47:04 +01:00
H5P.on(instance, 'xAPI', H5P.xAPICompletedListener);
2015-02-17 10:57:21 +01:00
H5P.on(instance, 'xAPI', H5P.externalDispatcher.trigger);
2014-11-01 20:42:34 +01:00
2015-03-03 11:03:10 +01:00
if (H5P.isFramed) {
var resizeDelay;
if (H5P.externalEmbed === false) {
// Internal embed
// Make it possible to resize the iframe when the content changes size. This way we get no scrollbars.
var iframe = window.parent.document.getElementById('h5p-iframe-' + contentId);
var resizeIframe = function () {
if (window.parent.H5P.isFullscreen) {
return; // Skip if full screen.
}
// Retain parent size to avoid jumping/scrolling
var parentHeight = iframe.parentElement.style.height;
iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px';
// Reset iframe height, in case content has shrinked.
iframe.style.height = '1px';
// Resize iframe so all content is visible.
iframe.style.height = (iframe.contentDocument.body.scrollHeight) + 'px';
// Free parent
iframe.parentElement.style.height = parentHeight;
};
H5P.on(instance, 'resize', function () {
// Use a delay to make sure iframe is resized to the correct size.
clearTimeout(resizeDelay);
resizeDelay = setTimeout(function () {
resizeIframe();
}, 1);
});
}
else if (H5P.communicator) {
// External embed
var parentIsFriendly = false;
// Handle that the resizer is loaded after the iframe
H5P.communicator.on('ready', function () {
H5P.communicator.send('hello');
});
// Handle hello message from our parent window
H5P.communicator.on('hello', function () {
// Initial setup/handshake is done
parentIsFriendly = true;
// Hide scrollbars for correct size
document.body.style.overflow = 'hidden';
// Content need to be resized to fit the new iframe size
H5P.trigger(instance, 'resize');
});
// When resize has been prepared tell parent window to resize
H5P.communicator.on('resizePrepared', function (data) {
H5P.communicator.send('resize', {
2015-02-27 10:26:57 +01:00
height: document.body.scrollHeight
});
});
H5P.communicator.on('resize', function () {
H5P.trigger(instance, 'resize');
});
H5P.on(instance, 'resize', function () {
if (H5P.isFullscreen) {
return; // Skip iframe resize
}
// Use a delay to make sure iframe is resized to the correct size.
clearTimeout(resizeDelay);
resizeDelay = setTimeout(function () {
// Only resize if the iframe can be resized
if (parentIsFriendly) {
H5P.communicator.send('prepareResize');
}
else {
H5P.communicator.send('hello');
}
}, 0);
});
}
}
if (!H5P.isFramed || H5P.externalEmbed === false) {
// Resize everything when window is resized.
H5P.jQuery(window.top).resize(function () {
2014-06-24 15:31:02 +02:00
if (window.parent.H5P.isFullscreen) {
// Use timeout to avoid bug in certain browsers when exiting fullscreen. Some browser will trigger resize before the fullscreenchange event.
H5P.trigger(instance, 'resize');
}
else {
H5P.trigger(instance, 'resize');
}
});
2013-04-11 14:29:29 +02:00
}
2015-03-02 15:01:05 +01:00
H5P.instances.push(instance);
// Resize content.
H5P.trigger(instance, 'resize');
2013-01-17 09:01:43 +01:00
});
2014-03-26 08:43:29 +01:00
// Insert H5Ps that should be in iframes.
2015-03-10 10:09:31 +01:00
H5P.jQuery('iframe.h5p-iframe:not(.h5p-initialized)', target).each(function () {
var contentId = H5P.jQuery(this).addClass('h5p-initialized').data('content-id');
2014-03-26 08:43:29 +01:00
this.contentDocument.open();
this.contentDocument.write('<!doctype html><html class="h5p-iframe"><head>' + H5P.getHeadTags(contentId) + '</head><body><div class="h5p-content" data-content-id="' + contentId + '"/></body></html>');
2014-03-26 08:43:29 +01:00
this.contentDocument.close();
});
2013-01-17 09:01:43 +01:00
};
2015-02-27 13:59:42 +01:00
/**
* Loop through assets for iframe content and create a set of tags for head.
*
* @private
* @param {number} contentId
* @returns {string} HTML
*/
H5P.getHeadTags = function (contentId) {
var basePath = window.location.protocol + '//' + window.location.host + H5PIntegration.basePath;
var createUrl = function (path) {
if (path.substring(0,7) !== 'http://' && path.substring(0,8) !== 'https://') {
// Not external, add base path.
path = basePath + path;
}
return path;
};
var createStyleTags = function (styles) {
var tags = '';
for (var i = 0; i < styles.length; i++) {
tags += '<link rel="stylesheet" href="' + createUrl(styles[i]) + '">';
}
return tags;
};
var createScriptTags = function (scripts) {
var tags = '';
for (var i = 0; i < scripts.length; i++) {
tags += '<script src="' + createUrl(scripts[i]) + '"></script>';
}
return tags;
};
return createStyleTags(H5PIntegration.core.styles) +
createStyleTags(H5PIntegration.contents['cid-' + contentId].styles) +
createScriptTags(H5PIntegration.core.scripts) +
createScriptTags(H5PIntegration.contents['cid-' + contentId].scripts) +
'<script>H5PIntegration = window.top.H5PIntegration; var H5P = H5P || {}; H5P.externalEmbed = false;</script>';
2015-02-27 13:59:42 +01:00
};
H5P.communicator = (function () {
/**
* @class
*/
function Communicator() {
var self = this;
// Maps actions to functions
var actionHandlers = {};
// Register message listener
window.addEventListener('message', function receiveMessage(event) {
if (window.parent !== event.source || event.data.context !== 'h5p') {
return; // Only handle messages from parent and in the correct context
}
if (actionHandlers[event.data.action] !== undefined) {
actionHandlers[event.data.action](event.data);
}
} , false);
/**
* Register action listener.
*
* @public
* @param {String} action What you are waiting for
* @param {Function} handler What you want done
*/
self.on = function (action, handler) {
actionHandlers[action] = handler;
};
/**
* Send a message to the all mighty father.
*
* @public
* @param {String} action
* @param {Object} [data] payload
*/
self.send = function (action, data) {
if (data === undefined) {
data = {};
}
data.context = 'h5p';
data.action = action;
// Parent origin can be anything
window.parent.postMessage(data, '*');
};
}
return (window.postMessage && window.addEventListener ? new Communicator() : undefined);
})();
2013-04-11 14:29:29 +02:00
/**
* Enable full screen for the given h5p.
2013-04-26 17:27:35 +02:00
*
2014-03-26 08:43:29 +01:00
* @param {jQuery} $element Content container.
* @param {object} instance
* @param {function} exitCallback Callback function called when user exits fullscreen.
2014-03-26 08:43:29 +01:00
* @param {jQuery} $body For internal use. Gives the body of the iframe.
2013-04-11 14:29:29 +02:00
* @returns {undefined}
*/
2014-03-26 08:43:29 +01:00
H5P.fullScreen = function ($element, instance, exitCallback, body) {
if (H5P.exitFullScreen !== undefined) {
return; // Cannot enter new fullscreen until previous is over
}
if (H5P.isFramed && H5P.externalEmbed === false) {
2014-03-26 08:43:29 +01:00
// Trigger resize on wrapper in parent window.
window.top.H5P.fullScreen($element, instance, exitCallback, H5P.$body.get());
H5P.isFullscreen = true;
H5P.exitFullScreen = function () {
window.top.H5P.exitFullScreen();
2015-02-24 16:02:14 +01:00
};
H5P.on(instance, 'exitFullScreen', function () {
H5P.isFullscreen = false;
H5P.exitFullScreen = undefined;
2015-02-24 16:02:14 +01:00
});
2014-03-26 08:43:29 +01:00
return;
}
2014-03-26 08:43:29 +01:00
var $container = $element;
var $classes, $iframe;
if (body === undefined) {
$body = H5P.$body;
}
2014-03-26 08:43:29 +01:00
else {
// We're called from an iframe.
$body = H5P.jQuery(body);
$classes = $body.add($element.get());
var iframeSelector = '#h5p-iframe-' + $element.parent().data('content-id');
$iframe = H5P.jQuery(iframeSelector);
$element = $iframe.parent(); // Put iframe wrapper in fullscreen, not container.
}
2014-03-26 08:43:29 +01:00
$classes = $element.add(H5P.$body).add($classes);
/**
* Prepare for resize by setting the correct styles.
*
* @param {String} classes CSS
*/
var before = function (classes) {
$classes.addClass(classes);
if ($iframe !== undefined) {
// Set iframe to its default size(100%).
$iframe.css('height', '');
2014-03-26 08:43:29 +01:00
}
};
/**
* Gets called when fullscreen mode has been entered.
* Resizes and sets focus on content.
*/
var entered = function () {
// Do not rely on window resize events.
H5P.trigger(instance, 'resize');
H5P.trigger(instance, 'focus');
H5P.trigger(instance, 'enterFullScreen');
};
/**
* Gets called when fullscreen mode has been exited.
* Resizes and sets focus on content.
*
* @param {String} classes CSS
*/
var done = function (classes) {
H5P.isFullscreen = false;
$classes.removeClass(classes);
// Do not rely on window resize events.
H5P.trigger(instance, 'resize');
H5P.trigger(instance, 'focus');
H5P.exitFullScreen = undefined;
2014-03-26 08:43:29 +01:00
if (exitCallback !== undefined) {
exitCallback();
}
2015-02-09 11:47:33 +01:00
H5P.trigger(instance, 'exitFullScreen');
2014-03-26 08:43:29 +01:00
};
H5P.isFullscreen = true;
2013-04-11 14:29:29 +02:00
if (H5P.fullScreenBrowserPrefix === undefined) {
// Create semi fullscreen.
if (H5P.isFramed) {
2015-02-09 11:51:39 +01:00
return; // TODO: Should we support semi-fullscreen for IE9 & 10 ?
}
before('h5p-semi-fullscreen');
var $disable = H5P.jQuery('<div role="button" tabindex="1" class="h5p-disable-fullscreen" title="' + H5P.t('disableFullscreen') + '"></div>').appendTo($container.find('.h5p-content-controls'));
2013-04-11 14:29:29 +02:00
var keyup, disableSemiFullscreen = function () {
$disable.remove();
$body.unbind('keyup', keyup);
2014-03-26 08:43:29 +01:00
done('h5p-semi-fullscreen');
2013-04-11 14:29:29 +02:00
};
keyup = function (event) {
if (event.keyCode === 27) {
disableSemiFullscreen();
}
};
$disable.click(disableSemiFullscreen);
$body.keyup(keyup);
entered();
}
2013-04-11 14:29:29 +02:00
else {
2014-03-26 08:43:29 +01:00
// Create real fullscreen.
before('h5p-fullscreen');
2014-01-29 16:03:51 +01:00
var first, eventName = (H5P.fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : H5P.fullScreenBrowserPrefix + 'fullscreenchange');
2013-04-11 14:29:29 +02:00
document.addEventListener(eventName, function () {
if (first === undefined) {
// We are entering fullscreen mode
2013-04-11 14:29:29 +02:00
first = false;
entered();
2013-04-11 14:29:29 +02:00
return;
}
// We are exiting fullscreen
2014-03-26 08:43:29 +01:00
done('h5p-fullscreen');
2013-04-11 14:29:29 +02:00
document.removeEventListener(eventName, arguments.callee, false);
});
2013-04-26 17:27:35 +02:00
2013-04-11 14:29:29 +02:00
if (H5P.fullScreenBrowserPrefix === '') {
2014-03-26 08:43:29 +01:00
$element[0].requestFullScreen();
2013-04-11 14:29:29 +02:00
}
else {
2014-01-29 16:03:51 +01:00
var method = (H5P.fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : H5P.fullScreenBrowserPrefix + 'RequestFullScreen');
var params = (H5P.fullScreenBrowserPrefix === 'webkit' && H5P.safariBrowser === 0 ? Element.ALLOW_KEYBOARD_INPUT : undefined);
2014-03-26 08:43:29 +01:00
$element[0][method](params);
2013-04-11 14:29:29 +02:00
}
// Allows everone to exit
H5P.exitFullScreen = function () {
if (H5P.fullScreenBrowserPrefix === '') {
document.exitFullscreen();
}
else if (H5P.fullScreenBrowserPrefix === 'moz') {
document.mozCancelFullScreen();
}
else {
document[H5P.fullScreenBrowserPrefix + 'ExitFullscreen']();
}
};
}
};
2013-06-20 14:49:56 +02:00
/**
* Find the path to the content files based on the id of the content
*
* Also identifies and returns absolute paths
*
* @param string path
* Absolute path to a file, or relative path to a file in the content folder
* @param contentId
* Id of the content requesting a path
2013-06-20 14:49:56 +02:00
*/
2013-06-27 14:29:56 +02:00
H5P.getPath = function (path, contentId) {
2014-06-24 14:41:35 +02:00
var hasProtocol = function (path) {
return path.match(/^[a-z0-9]+:\/\//i);
};
2014-06-24 14:41:35 +02:00
if (hasProtocol(path)) {
2013-06-27 14:29:56 +02:00
return path;
}
if (contentId !== undefined) {
2015-02-27 13:59:42 +01:00
prefix = H5PIntegration.url + '/content/' + contentId;
}
else if (window.H5PEditor !== undefined) {
prefix = H5PEditor.filesPath;
}
else {
return;
}
2014-06-24 14:41:35 +02:00
if (!hasProtocol(prefix)) {
// Use absolute urls
prefix = window.location.protocol + "//" + window.location.host + prefix;
2014-06-24 14:41:35 +02:00
}
return prefix + '/' + path;
2013-02-07 17:50:17 +01:00
};
/**
* Get library class constructor from H5P by classname.
* Note that this class will only work for resolve "H5P.NameWithoutDot".
2014-03-26 08:43:29 +01:00
* Also check out: H5P.newRunnable
*
* Used from libraries to construct instances of other libraries' objects by name.
*
* @param {string} name Name of library
* @returns Class constructor
*/
H5P.classFromName = function (name) {
2013-01-17 09:01:43 +01:00
var arr = name.split(".");
return this[arr[arr.length-1]];
};
2014-03-26 08:43:29 +01:00
/**
* A safe way of creating a new instance of a runnable H5P.
*
* TODO: Should we check if version matches the library?
* TODO: Dynamically try to load libraries currently not loaded? That will require a callback.
*
2014-03-26 08:43:29 +01:00
* @param {Object} library Library/action object form params.
* @param {Number} contentId
* @param {jQuery} $attachTo An optional element to attach the instance to.
* @param {Boolean} skipResize Optionally skip triggering of the resize event after attaching.
2014-10-13 22:19:59 +02:00
* @param {Object} The parent of this H5P
2014-03-26 08:43:29 +01:00
* @return {Object} Instance.
*/
H5P.newRunnable = function (library, contentId, $attachTo, skipResize) {
var nameSplit, versionSplit;
2014-03-26 08:43:29 +01:00
try {
nameSplit = library.library.split(' ', 2);
versionSplit = nameSplit[1].split('.', 2);
2014-03-26 08:43:29 +01:00
}
catch (err) {
return H5P.error('Invalid library string: ' + library.library);
}
2014-03-26 08:43:29 +01:00
if ((library.params instanceof Object) !== true || (library.params instanceof Array) === true) {
H5P.error('Invalid library params for: ' + library.library);
return H5P.error(library.params);
}
2014-03-26 08:43:29 +01:00
// Find constructor function
var constructor;
2014-03-26 08:43:29 +01:00
try {
nameSplit = nameSplit[0].split('.');
constructor = window;
for (var i = 0; i < nameSplit.length; i++) {
2014-03-26 08:43:29 +01:00
constructor = constructor[nameSplit[i]];
}
2014-03-26 08:43:29 +01:00
if (typeof constructor !== 'function') {
throw null;
}
}
catch (err) {
return H5P.error('Unable to find constructor for: ' + library.library);
}
2014-03-26 08:43:29 +01:00
var instance = new constructor(library.params, contentId);
if (instance.$ === undefined) {
instance.$ = H5P.jQuery(instance);
}
if (instance.contentId === undefined) {
2015-02-18 15:20:20 +01:00
instance.contentId = contentId;
}
2014-10-13 22:19:59 +02:00
2014-03-26 08:43:29 +01:00
if ($attachTo !== undefined) {
instance.attach($attachTo);
if (skipResize === undefined || !skipResize) {
2014-03-26 08:43:29 +01:00
// Resize content.
H5P.trigger(instance, 'resize');
2014-03-26 08:43:29 +01:00
}
}
return instance;
};
/**
* Used to print useful error messages.
*
* @param {mixed} err Error to print.
* @returns {undefined}
*/
H5P.error = function (err) {
2015-02-20 10:26:33 +01:00
if (window.console !== undefined && console.error !== undefined) {
2014-03-26 08:43:29 +01:00
console.error(err);
}
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
/**
* Translate text strings.
*
* @param {String} key Translation identifier, may only contain a-zA-Z0-9. No spaces or special chars.
* @param {Object} vars Data for placeholders.
* @param {String} ns Translation namespace. Defaults to H5P.
* @returns {String} Text
*/
H5P.t = function (key, vars, ns) {
if (ns === undefined) {
ns = 'H5P';
}
2015-02-27 13:59:42 +01:00
if (H5PIntegration.l10n[ns] === undefined) {
2014-03-26 08:43:29 +01:00
return '[Missing translation namespace "' + ns + '"]';
}
2015-02-27 13:59:42 +01:00
if (H5PIntegration.l10n[ns][key] === undefined) {
2014-03-26 08:43:29 +01:00
return '[Missing translation "' + key + '" in "' + ns + '"]';
}
2015-02-27 13:59:42 +01:00
var translation = H5PIntegration.l10n[ns][key];
2014-03-26 08:43:29 +01:00
if (vars !== undefined) {
// Replace placeholder with variables.
for (var placeholder in vars) {
translation = translation.replace(placeholder, vars[placeholder]);
}
2014-03-26 08:43:29 +01:00
}
return translation;
};
H5P.Dialog = function (name, title, content, $element) {
var self = this;
var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog">\
<div class="h5p-inner">\
<h2>' + title + '</h2>\
<div class="h5p-scroll-content">' + content + '</div>\
<div class="h5p-close" role="button" tabindex="1" title="' + H5P.t('close') + '">\
</div>\
</div>')
.insertAfter($element)
.click(function () {
self.close();
})
.children('.h5p-inner')
.click(function () {
return false;
})
.find('.h5p-close')
.click(function () {
self.close();
})
.end()
.end();
2014-03-26 08:43:29 +01:00
this.open = function () {
setTimeout(function () {
$dialog.addClass('h5p-open'); // Fade in
// Triggering an event, in case something has to be done after dialog has been opened.
H5P.jQuery(self).trigger('dialog-opened', [$dialog]);
}, 1);
};
2014-03-26 08:43:29 +01:00
this.close = function () {
$dialog.removeClass('h5p-open'); // Fade out
setTimeout(function () {
$dialog.remove();
}, 200);
};
};
/**
* Gather copyright information and display in a dialog over the content.
*
* @param {jQuery} $element to insert dialog after.
* @param {object} instance to get copyright information from.
* @returns {undefined}
*/
H5P.openCopyrightsDialog = function ($element, instance, parameters, contentId) {
var copyrights;
if (instance.getCopyrights !== undefined) {
// Use the instance's own copyright generator
copyrights = instance.getCopyrights();
}
else {
// Create a generic flat copyright list
copyrights = new H5P.ContentCopyrights();
H5P.findCopyrights(copyrights, parameters, contentId);
}
2014-03-26 08:43:29 +01:00
if (copyrights !== undefined) {
// Convert to string
2014-03-26 08:43:29 +01:00
copyrights = copyrights.toString();
}
if (copyrights === undefined || copyrights === '') {
// Use no copyrights default text
2014-03-26 08:43:29 +01:00
copyrights = H5P.t('noCopyrights');
}
// Open dialog with copyright information
2014-03-26 08:43:29 +01:00
var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $element);
dialog.open();
};
/**
* Gather a flat list of copyright information from the given parameters.
*
* @param {H5P.ContentCopyrights} info Used to collect all information in.
* @param {(Object|Arrray)} parameters To search for file objects in.
* @param {Number} contentId Used to insert thumbnails for images.
* @returns {undefined}
*/
H5P.findCopyrights = function (info, parameters, contentId) {
// Cycle through parameters
for (var field in parameters) {
if (!parameters.hasOwnProperty(field)) {
continue; // Do not check
}
var value = parameters[field];
if (value instanceof Array) {
// Cycle through array
H5P.findCopyrights(info, value, contentId);
}
else if (value instanceof Object) {
// Check if object is a file with copyrights
if (value.copyright === undefined ||
value.copyright.license === undefined ||
value.path === undefined ||
value.mime === undefined) {
// Nope, cycle throught object
H5P.findCopyrights(info, value, contentId);
}
else {
// Found file, add copyrights
var copyrights = new H5P.MediaCopyright(value.copyright);
if (value.width !== undefined && value.height !== undefined) {
copyrights.setThumbnail(new H5P.Thumbnail(H5P.getPath(value.path, contentId), value.width, value.height));
}
info.addMedia(copyrights);
}
}
else {
}
}
};
2014-03-26 08:43:29 +01:00
/**
* Display a dialog containing the embed code.
*
* @param {jQuery} $element to insert dialog after.
* @param {string} embed code.
* @returns {undefined}
*/
2015-02-25 12:10:07 +01:00
H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
2015-03-02 15:01:05 +01:00
var fullEmbedCode = embedCode + resizeCode;
2015-02-25 12:10:07 +01:00
var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + size.width + '" class="h5p-embed-size"/> × <input type="text" value="' + size.height + '" class="h5p-embed-size"/> px<div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element);
2014-03-26 08:43:29 +01:00
// Selecting embed code when dialog is opened
H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) {
2015-02-25 13:05:45 +01:00
var $inner = $dialog.find('.h5p-inner');
2015-02-27 10:26:57 +01:00
var $scroll = $inner.find('.h5p-scroll-content');
var diff = $scroll.outerHeight() - $scroll.innerHeight();
2015-02-25 13:05:45 +01:00
var positionInner = function () {
2015-02-27 10:26:57 +01:00
var height = $inner.height();
if ($scroll[0].scrollHeight + diff > height) {
$inner.css('height', ''); // 100%
2015-02-25 13:05:45 +01:00
}
2015-02-27 10:26:57 +01:00
else {
$inner.css('height', 'auto');
height = $inner.height();
}
$inner.css('marginTop', '-' + (height / 2) + 'px');
2015-02-25 13:05:45 +01:00
};
2015-02-25 12:10:07 +01:00
// Handle changing of width/height
var $w = $dialog.find('.h5p-embed-size:eq(0)');
var $h = $dialog.find('.h5p-embed-size:eq(1)');
var getNum = function ($e, d) {
var num = parseFloat($e.val());
if (isNaN(num)) {
return d;
}
return Math.ceil(num);
};
var updateEmbed = function () {
2015-03-02 15:01:05 +01:00
$dialog.find('.h5p-embed-code-container:first').val(fullEmbedCode.replace(':w', getNum($w, size.width)).replace(':h', getNum($h, size.height)));
2015-02-25 12:10:07 +01:00
};
2015-03-02 15:01:05 +01:00
$w.change(updateEmbed);
2015-02-25 12:10:07 +01:00
$h.change(updateEmbed);
updateEmbed();
// Select text and expand textareas
2015-03-02 15:01:05 +01:00
$dialog.find('.h5p-embed-code-container').each(function(index, value) {
H5P.jQuery(this).css('height', this.scrollHeight + 'px').focus(function() {
H5P.jQuery(this).select();
});
});
$dialog.find('.h5p-embed-code-container').eq(0).select();
positionInner();
2015-02-25 12:10:07 +01:00
// Expand advanced embed
2015-02-27 08:57:02 +01:00
var expand = function () {
2015-02-25 12:10:07 +01:00
var $expander = H5P.jQuery(this);
var $content = $expander.next();
if ($content.is(':visible')) {
$expander.removeClass('h5p-open').text(H5P.t('showAdvanced'));
$content.hide();
}
else {
$expander.addClass('h5p-open').text(H5P.t('hideAdvanced'));
$content.show();
}
2015-03-02 15:01:05 +01:00
$dialog.find('.h5p-embed-code-container').each(function(index, value) {
H5P.jQuery(this).css('height', this.scrollHeight + 'px');
});
2015-02-25 13:05:45 +01:00
positionInner();
2015-02-27 08:57:02 +01:00
};
$dialog.find('.h5p-expander').click(expand).keypress(function (event) {
if (event.keyCode === 32) {
2015-02-27 10:26:57 +01:00
expand.apply(this);
2015-02-27 08:57:02 +01:00
}
2015-02-25 12:10:07 +01:00
});
2014-03-26 08:43:29 +01:00
});
2014-03-26 08:43:29 +01:00
dialog.open();
};
/**
* Copyrights for a H5P Content Library.
*/
H5P.ContentCopyrights = function () {
var label;
var media = [];
var content = [];
2014-03-26 08:43:29 +01:00
/**
* Public. Set label.
*
* @param {String} newLabel
*/
this.setLabel = function (newLabel) {
label = newLabel;
};
2014-03-26 08:43:29 +01:00
/**
* Public. Add sub content.
*
* @param {H5P.MediaCopyright} newMedia
*/
this.addMedia = function (newMedia) {
if (newMedia !== undefined) {
media.push(newMedia);
}
};
2014-03-26 08:43:29 +01:00
/**
* Public. Add sub content.
*
* @param {H5P.ContentCopyrights} newContent
*/
this.addContent = function (newContent) {
if (newContent !== undefined) {
content.push(newContent);
}
};
2014-03-26 08:43:29 +01:00
/**
* Public. Print content copyright.
*
* @returns {String} HTML.
*/
this.toString = function () {
var html = '';
2014-03-26 08:43:29 +01:00
// Add media rights
for (var i = 0; i < media.length; i++) {
html += media[i];
}
2014-03-26 08:43:29 +01:00
// Add sub content rights
for (i = 0; i < content.length; i++) {
2014-03-26 08:43:29 +01:00
html += content[i];
}
2014-03-26 08:43:29 +01:00
if (html !== '') {
// Add a label to this info
if (label !== undefined) {
html = '<h3>' + label + '</h3>' + html;
}
2014-03-26 08:43:29 +01:00
// Add wrapper
html = '<div class="h5p-content-copyrights">' + html + '</div>';
}
2014-03-26 08:43:29 +01:00
return html;
};
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
/**
* A ordered list of copyright fields for media.
*
* @param {Object} copyright information fields.
* @param {Object} labels translation. Optional.
* @param {Array} order of fields. Optional.
* @param {Object} extraFields for copyright. Optional.
*/
H5P.MediaCopyright = function (copyright, labels, order, extraFields) {
var thumbnail;
var list = new H5P.DefinitionList();
2014-03-26 08:43:29 +01:00
/**
* Private. Get translated label for field.
*
* @param {String} fieldName
* @return {String}
2014-03-26 08:43:29 +01:00
*/
var getLabel = function (fieldName) {
if (labels === undefined || labels[fieldName] === undefined) {
return H5P.t(fieldName);
}
2014-03-26 08:43:29 +01:00
return labels[fieldName];
};
2014-03-26 08:43:29 +01:00
/**
* Private. Get humanized value for field.
*
* @param {String} fieldName
* @return {String}
2014-03-26 08:43:29 +01:00
*/
var humanizeValue = function (fieldName, value) {
if (fieldName === 'license') {
return H5P.copyrightLicenses[value];
}
2014-03-26 08:43:29 +01:00
return value;
};
2014-03-26 08:43:29 +01:00
if (copyright !== undefined) {
// Add the extra fields
for (var field in extraFields) {
if (extraFields.hasOwnProperty(field)) {
copyright[field] = extraFields[field];
}
}
2014-03-26 08:43:29 +01:00
if (order === undefined) {
// Set default order
order = ['title', 'author', 'year', 'source', 'license'];
}
2014-03-26 08:43:29 +01:00
for (var i = 0; i < order.length; i++) {
var fieldName = order[i];
if (copyright[fieldName] !== undefined) {
list.add(new H5P.Field(getLabel(fieldName), humanizeValue(fieldName, copyright[fieldName])));
}
}
}
2014-03-26 08:43:29 +01:00
/**
* Public. Set thumbnail.
*
* @param {H5P.Thumbnail} newThumbnail
*/
this.setThumbnail = function (newThumbnail) {
thumbnail = newThumbnail;
};
2014-03-26 08:43:29 +01:00
/**
* Public. Checks if this copyright is undisclosed.
* I.e. only has the license attribute set, and it's undisclosed.
*
* @returns {Boolean}
*/
this.undisclosed = function () {
if (list.size() === 1) {
var field = list.get(0);
if (field.getLabel() === getLabel('license') && field.getValue() === humanizeValue('license', 'U')) {
return true;
}
}
return false;
};
2014-03-26 08:43:29 +01:00
/**
* Public. Print media copyright.
*
* @returns {String} HTML.
*/
this.toString = function () {
var html = '';
2014-03-26 08:43:29 +01:00
if (this.undisclosed()) {
return html; // No need to print a copyright with a single undisclosed license.
}
2014-03-26 08:43:29 +01:00
if (thumbnail !== undefined) {
html += thumbnail;
}
html += list;
2014-03-26 08:43:29 +01:00
if (html !== '') {
html = '<div class="h5p-media-copyright">' + html + '</div>';
}
2014-03-26 08:43:29 +01:00
return html;
};
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
// Translate table for copyright license codes.
H5P.copyrightLicenses = {
'U': 'Undisclosed',
'CC BY': 'Attribution',
'CC BY-SA': 'Attribution-ShareAlike',
'CC BY-ND': 'Attribution-NoDerivs',
'CC BY-NC': 'Attribution-NonCommercial',
'CC BY-NC-SA': 'Attribution-NonCommercial-ShareAlike',
'CC BY-NC-ND': 'Attribution-NonCommercial-NoDerivs',
'GNU GPL': 'General Public License',
'PD': 'Public Domain',
'ODC PDDL': 'Public Domain Dedication and Licence',
'CC PDM': 'Public Domain Mark',
'C': 'Copyright'
};
/**
* Simple class for creating thumbnails for images.
*
* @param {String} source
* @param {Number} width
* @param {Number} height
*/
H5P.Thumbnail = function (source, width, height) {
var thumbWidth, thumbHeight = 100;
if (width !== undefined) {
thumbWidth = Math.round(thumbHeight * (width / height));
}
/**
* Public. Print thumbnail.
*
* @returns {String} HTML.
*/
this.toString = function () {
return '<img src="' + source + '" alt="' + H5P.t('thumbnail') + '" class="h5p-thumbnail" height="' + thumbHeight + '"' + (thumbWidth === undefined ? '' : ' width="' + thumbWidth + '"') + '/>';
};
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
/**
* Simple data class for storing a single field.
*/
H5P.Field = function (label, value) {
/**
* Public. Get field label.
*
* @returns {String}
*/
2014-03-26 08:43:29 +01:00
this.getLabel = function () {
return label;
};
2014-03-26 08:43:29 +01:00
/**
* Public. Get field value.
*
* @returns {String}
*/
2014-03-26 08:43:29 +01:00
this.getValue = function () {
return value;
};
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
/**
* Simple class for creating a definition list.
*/
H5P.DefinitionList = function () {
var fields = [];
2014-03-26 08:43:29 +01:00
/**
* Public. Add field to list.
*
* @param {H5P.Field} field
*/
this.add = function (field) {
fields.push(field);
};
2014-03-26 08:43:29 +01:00
/**
* Public. Get Number of fields.
*
* @returns {Number}
*/
this.size = function () {
return fields.length;
};
2014-03-26 08:43:29 +01:00
/**
* Public. Get field at given index.
*
* @param {Number} index
* @returns {Object}
*/
this.get = function (index) {
return fields[index];
};
2014-03-26 08:43:29 +01:00
/**
* Public. Print definition list.
*
* @returns {String} HTML.
*/
this.toString = function () {
var html = '';
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
html += '<dt>' + field.getLabel() + '</dt><dd>' + field.getValue() + '</dd>';
}
return (html === '' ? html : '<dl class="h5p-definition-list">' + html + '</dl>');
};
2014-05-02 15:45:45 +02:00
};
2014-03-26 08:43:29 +01:00
/**
* THIS FUNCTION/CLASS IS DEPRECATED AND WILL BE REMOVED.
*
* Helper object for keeping coordinates in the same format all over.
*/
H5P.Coords = function (x, y, w, h) {
2013-01-17 09:01:43 +01:00
if ( !(this instanceof H5P.Coords) )
return new H5P.Coords(x, y, w, h);
this.x = 0;
this.y = 0;
this.w = 1;
this.h = 1;
if (typeof(x) === 'object') {
2013-01-17 09:01:43 +01:00
this.x = x.x;
this.y = x.y;
this.w = x.w;
this.h = x.h;
} else {
if (x !== undefined) {
this.x = x;
}
if (y !== undefined) {
this.y = y;
}
if (w !== undefined) {
this.w = w;
}
if (h !== undefined) {
this.h = h;
}
2013-01-17 09:01:43 +01:00
}
return this;
};
2013-03-06 15:59:02 +01:00
/**
* Parse library string into values.
*
* @param {string} library
* library in the format "machineName majorVersion.minorVersion"
2013-03-06 15:59:02 +01:00
* @returns
* library as an object with machineName, majorVersion and minorVersion properties
* return false if the library parameter is invalid
*/
H5P.libraryFromString = function (library) {
var regExp = /(.+)\s(\d)+\.(\d)$/g;
var res = regExp.exec(library);
if (res !== null) {
return {
'machineName': res[1],
'majorVersion': res[2],
'minorVersion': res[3]
};
}
else {
return false;
}
};
2013-02-07 17:50:17 +01:00
/**
* Get the path to the library
*
2014-03-26 08:43:29 +01:00
* @param {String} library
* The library identifier in the format "machineName-majorVersion.minorVersion".
* @returns {String} The full path to the library.
*/
H5P.getLibraryPath = function (library) {
2015-02-27 13:59:42 +01:00
return H5PIntegration.url + '/libraries/' + library;
};
/**
* Recursivly clone the given object.
* TODO: Consider if this needs to be in core. Doesn't $.extend do the same?
2013-04-26 17:27:35 +02:00
*
* @param {object} object Object to clone.
* @param {type} recursive
* @returns {object} A clone of object.
*/
H5P.cloneObject = function (object, recursive) {
var clone = object instanceof Array ? [] : {};
2013-04-26 17:27:35 +02:00
for (var i in object) {
if (object.hasOwnProperty(i)) {
if (recursive !== undefined && recursive && typeof object[i] === 'object') {
clone[i] = H5P.cloneObject(object[i], recursive);
}
else {
clone[i] = object[i];
}
}
}
2013-04-26 17:27:35 +02:00
return clone;
};
/**
* Remove all empty spaces before and after the value.
2014-03-26 08:43:29 +01:00
* TODO: Only include this or String.trim(). What is best?
* I'm leaning towards implementing the missing ones: http://kangax.github.io/compat-table/es5/
* So should we make this function deprecated?
*
* @param {String} value
* @returns {@exp;value@call;replace}
*/
H5P.trim = function (value) {
return value.replace(/^\s+|\s+$/g, '');
};
/**
* Check if javascript path/key is loaded.
*
* @param {String} path
* @returns {Boolean}
*/
H5P.jsLoaded = function (path) {
2015-02-27 13:59:42 +01:00
H5PIntegration.loadedJs = H5PIntegration.loadedJs || [];
return H5P.jQuery.inArray(path, H5PIntegration.loadedJs) !== -1;
};
/**
* Check if styles path/key is loaded.
*
* @param {String} path
* @returns {Boolean}
*/
H5P.cssLoaded = function (path) {
2015-02-27 13:59:42 +01:00
H5PIntegration.loadedCss = H5PIntegration.loadedCss || [];
return H5P.jQuery.inArray(path, H5PIntegration.loadedCss) !== -1;
};
/**
* Shuffle an array in place.
2014-03-26 08:43:29 +01:00
* TODO: Consider if this should be a part of core. I'm guessing very few libraries are going to use it.
*
* @param {array} array Array to shuffle
* @returns {array} The passed array is returned for chaining.
*/
H5P.shuffleArray = function (array) {
if (! array instanceof Array) {
return;
}
2013-07-25 01:50:16 +02:00
var i = array.length, j, tempi, tempj;
2013-01-17 09:01:43 +01:00
if ( i === 0 ) return false;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
2013-07-25 01:50:16 +02:00
tempi = array[i];
tempj = array[j];
array[i] = tempj;
array[j] = tempi;
2013-01-17 09:01:43 +01:00
}
2013-07-25 01:50:16 +02:00
return array;
2013-01-17 09:01:43 +01:00
};
/**
* DEPRECATED! Do not use this function directly, trigger the finish event
* instead.
*
* Post finished results for user.
*
* @param {Number} contentId
* @param {Number} score achieved
* @param {Number} maxScore that can be achieved
* @param {Number} time optional reported time usage
*/
H5P.setFinished = function (contentId, score, maxScore, time) {
2015-02-27 13:59:42 +01:00
if (H5PIntegration.postUserStatistics === true) {
/**
* Return unix timestamp for the given JS Date.
*
* @param {Date} date
* @returns {Number}
*/
var toUnix = function (date) {
return Math.round(date.getTime() / 1000);
};
// Post the results
// TODO: Should we use a variable with the complete path?
2015-02-27 13:59:42 +01:00
H5P.jQuery.post(H5PIntegration.ajaxPath + 'setFinished', {
contentId: contentId,
score: score,
maxScore: maxScore,
opened: toUnix(H5P.opened[contentId]),
finished: toUnix(new Date()),
time: time
});
}
};
2013-01-17 09:01:43 +01:00
// Add indexOf to browsers that lack them. (IEs)
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (needle) {
for (var i = 0; i < this.length; i++) {
if (this[i] === needle) {
return i;
}
}
return -1;
};
2013-01-17 09:01:43 +01:00
}
// Need to define trim() since this is not available on older IEs,
// and trim is used in several libs
if (String.prototype.trim === undefined) {
String.prototype.trim = function () {
return H5P.trim(this);
};
}
/**
* Trigger an event on an instance
*
* Helper function that triggers an event if the instance supports event handling
*
* @param {function} instance
* An H5P instance
* @param {string} eventType
* The event type
*/
H5P.trigger = function(instance, eventType) {
// Try new event system first
if (instance.trigger !== undefined) {
instance.trigger(eventType);
}
// Try deprecated event system
else if (instance.$ !== undefined && instance.$.trigger !== undefined) {
2015-02-20 10:26:33 +01:00
instance.$.trigger(eventType);
}
};
/**
* Register an event handler
*
* Helper function that registers an event handler for an event type if
* the instance supports event handling
*
* @param {function} instance
* An h5p instance
* @param {string} eventType
* The event type
* @param {function} handler
* Callback that gets triggered for events of the specified type
*/
H5P.on = function(instance, eventType, handler) {
// Try new event system first
if (instance.on !== undefined) {
instance.on(eventType, handler);
}
// Try deprecated event system
else if (instance.$ !== undefined && instance.$.on !== undefined) {
2015-02-20 10:26:33 +01:00
instance.$.on(eventType, handler);
}
};
H5P.jQuery(document).ready(function () {
if (!H5P.preventInit) {
// Start script need to be an external resource to load in correct order for IE9.
2015-03-10 10:09:31 +01:00
H5P.init(document.body);
}
});