diff --git a/js/h5p.js b/js/h5p.js
index fa2e4c7..dfa6671 100644
--- a/js/h5p.js
+++ b/js/h5p.js
@@ -146,18 +146,49 @@ H5P.init = function (target) {
// Create action bar
var $actions = H5P.jQuery('
');
+
+ /**
+ * Helper for creating action bar buttons.
+ *
+ * @private
+ * @param {string} type
+ * @param {function} handler
+ * @param {string} customClass Instead of type class
+ */
+ var addActionButton = function (type, handler, customClass) {
+ H5P.jQuery('', {
+ 'class': 'h5p-button h5p-' + (customClass ? customClass : type),
+ role: 'button',
+ tabindex: 0,
+ title: H5P.t(type + 'Description'),
+ html: H5P.t(type),
+ on: {
+ click: handler,
+ keypress: function (e) {
+ if (e.which === 32) {
+ handler();
+ e.preventDefault(); // (since return false will block other inputs)
+ }
+ }
+ },
+ appendTo: $actions
+ });
+ };
+
+ // Register action bar buttons
if (!(contentData.disable & H5P.DISABLE_DOWNLOAD)) {
// Add export button
- H5P.jQuery('' + H5P.t('download') + '').appendTo($actions).click(function () {
+ addActionButton('download', function () {
+ // Use button for download to avoid people linking directly to the .h5p
window.location.href = contentData.exportUrl;
- });
+ }, 'export');
}
if (!(contentData.disable & H5P.DISABLE_COPYRIGHT)) {
var copyright = H5P.getCopyrights(instance, library.params, contentId);
if (copyright) {
// Add copyright dialog button
- H5P.jQuery('' + H5P.t('copyrights') + '').appendTo($actions).click(function () {
+ addActionButton('copyrights', function () {
// Open dialog with copyright information
var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyright, $container);
dialog.open();
@@ -166,7 +197,8 @@ H5P.init = function (target) {
}
if (!(contentData.disable & H5P.DISABLE_EMBED)) {
// Add embed button
- H5P.jQuery('' + H5P.t('embed') + '').appendTo($actions).click(function () {
+ addActionButton('embed', function () {
+ // Open dialog with embed information
H5P.openEmbedDialog($actions, contentData.embedCode, contentData.resizeCode, {
width: $element.width(),
height: $element.height()