diff --git a/h5p.classes.php b/h5p.classes.php
index 1868daf..2292471 100644
--- a/h5p.classes.php
+++ b/h5p.classes.php
@@ -1840,6 +1840,7 @@ abstract class H5PPermission {
const CREATE_RESTRICTED = 2;
const UPDATE_LIBRARIES = 3;
const INSTALL_RECOMMENDED = 4;
+ const COPY_H5P = 8;
}
abstract class H5PDisplayOptionBehaviour {
@@ -1910,6 +1911,7 @@ class H5PCore {
const DISPLAY_OPTION_EMBED = 'embed';
const DISPLAY_OPTION_COPYRIGHT = 'copyright';
const DISPLAY_OPTION_ABOUT = 'icon';
+ const DISPLAY_OPTION_COPY = 'copy';
// Map flags to string
public static $disable = array(
@@ -2898,6 +2900,7 @@ class H5PCore {
$display_options[self::DISPLAY_OPTION_COPYRIGHT] = false;
}
}
+ $display_options[self::DISPLAY_OPTION_COPY] = $this->h5pF->hasPermission(H5PPermission::COPY_H5P, $id);
return $display_options;
}
@@ -3311,6 +3314,9 @@ class H5PCore {
'license' => $this->h5pF->t('License'),
'thumbnail' => $this->h5pF->t('Thumbnail'),
'noCopyrights' => $this->h5pF->t('No copyright information available for this content.'),
+ 'reuse' => $this->h5pF->t('Reuse'),
+ 'reuseContent' => $this->h5pF->t('Reuse Content'),
+ 'reuseDescription' => $this->h5pF->t('Reuse this content.'),
'downloadDescription' => $this->h5pF->t('Download this content as a H5P file.'),
'copyrightsDescription' => $this->h5pF->t('View copyright information for this content.'),
'embedDescription' => $this->h5pF->t('View the embed code for this content.'),
diff --git a/js/h5p-action-bar.js b/js/h5p-action-bar.js
index 3af1a43..608a848 100644
--- a/js/h5p-action-bar.js
+++ b/js/h5p-action-bar.js
@@ -57,9 +57,9 @@ H5P.ActionBar = (function ($, EventDispatcher) {
};
// Register action bar buttons
- if (displayOptions.export) {
+ if (displayOptions.export || displayOptions.copy) {
// Add export button
- addActionButton('download', 'export');
+ addActionButton('reuse', 'export');
}
if (displayOptions.copyright) {
addActionButton('copyrights');
diff --git a/js/h5p.js b/js/h5p.js
index e2fb91f..e0ffeef 100644
--- a/js/h5p.js
+++ b/js/h5p.js
@@ -176,9 +176,9 @@ H5P.init = function (target) {
var actionBar = new H5P.ActionBar(displayOptions);
var $actions = actionBar.getDOMElement();
- actionBar.on('download', function () {
- window.location.href = contentData.exportUrl;
- instance.triggerXAPI('downloaded');
+ actionBar.on('reuse', function () {
+ H5P.openReuseDialog($actions, contentData, library, instance, contentId);
+ instance.triggerXAPI('accessed-reuse');
});
actionBar.on('copyrights', function () {
var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container);
@@ -1129,6 +1129,49 @@ H5P.buildMetadataCopyrights = function (metadata) {
}
};
+/**
+ * Display a dialog containing the download button and copy button.
+ *
+ * @param {H5P.jQuery} $element
+ * @param {Object} contentData
+ * @param {Object} library
+ * @param {Object} instance
+ * @param {number} contentId
+ */
+H5P.openReuseDialog = function ($element, contentData, library, instance, contentId) {
+ let html = '';
+ if (contentData.displayOptions.export) {
+ html += '';
+ }
+ if (contentData.displayOptions.export && contentData.displayOptions.copy) {
+ html += '
or
';
+ }
+ if (contentData.displayOptions.copy) {
+ html += '';
+ }
+
+ const dialog = new H5P.Dialog('reuse', H5P.t('reuseContent'), html, $element);
+
+ // Selecting embed code when dialog is opened
+ H5P.jQuery(dialog).on('dialog-opened', function (e, $dialog) {
+ H5P.jQuery('More Info').click(function (e) {
+ e.stopPropagation();
+ }).appendTo($dialog.find('h2'));
+ $dialog.find('.h5p-download-button').click(function () {
+ window.location.href = contentData.exportUrl;
+ instance.triggerXAPI('downloaded');
+ });
+ $dialog.find('.h5p-copy-button').click(function () {
+ const item = new H5P.ClipboardItem(library);
+ item.contentId = contentId;
+ H5P.setClipboard(item);
+ instance.triggerXAPI('copied');
+ });
+ });
+
+ dialog.open();
+};
+
/**
* Display a dialog containing the embed code.
*
diff --git a/styles/h5p.css b/styles/h5p.css
index 102cf5d..d24a8f1 100644
--- a/styles/h5p.css
+++ b/styles/h5p.css
@@ -228,7 +228,7 @@ div.h5p-fullscreen {
padding-right: 0;
}
.h5p-actions > .h5p-button.h5p-export:before {
- content: "\e893";
+ content: "\e90b";
}
.h5p-actions > .h5p-button.h5p-copyrights:before {
content: "\e88f";
@@ -297,6 +297,11 @@ div.h5p-fullscreen {
padding: 0.325em 0.5em 0.25em;
line-height: 1.25em;
border-bottom: 1px solid #ccc;
+ z-index: 2;
+}
+.h5p-popup-dialog .h5p-inner > h2 > a {
+ font-size: 12px;
+ margin-left: 1em;
}
.h5p-embed-dialog .h5p-inner {
width: 300px;
@@ -344,6 +349,7 @@ div.h5p-fullscreen {
overflow-x: hidden;
overflow-y: auto;
color: #555555;
+ z-index: 1;
}
.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar {
width: 8px;
@@ -357,7 +363,6 @@ div.h5p-fullscreen {
}
.h5p-popup-dialog .h5p-close {
cursor: pointer;
- outline:none
}
.h5p-popup-dialog .h5p-close:after {
font-family: 'H5P';
@@ -372,6 +377,7 @@ div.h5p-fullscreen {
color: #656565;
cursor: pointer;
text-indent: -0.065em;
+ z-index: 3
}
.h5p-popup-dialog .h5p-close:hover:after,
.h5p-popup-dialog .h5p-close:focus:after {
@@ -455,6 +461,62 @@ div.h5p-fullscreen {
.h5p-dialog-ok-button:active {
background: #eeffee;
}
+.h5p-big-button {
+ line-height: 1.25;
+ display: block;
+ position: relative;
+ cursor: pointer;
+ width: 100%;
+ padding: 1em 1em 1em 3.75em;
+ text-align: left;
+ border: 1px solid #dedede;
+ background: linear-gradient(#ffffff, #f1f1f2);
+ border-radius: 0.25em;
+}
+.h5p-big-button:before {
+ font-family: 'h5p';
+ content: "\e893";
+ line-height: 1;
+ font-size: 3em;
+ color: #2747f7;
+ position: absolute;
+ left: 0.125em;
+ top: 0.125em;
+}
+.h5p-copy-button:before {
+ content: "\e905";
+}
+.h5p-big-button:hover {
+ border: 1px solid #2747f7;
+ background: #eff1fe;
+}
+.h5p-big-button:active {
+ border: 1px solid #dedede;
+ background: #dfe4fe;
+}
+.h5p-button-title {
+ color: #2747f7;
+ font-size: 15px;
+ font-weight: bold;
+ margin-bottom: 0.5em;
+}
+.h5p-button-description {
+ color: #757575;
+}
+.h5p-horizontal-line-text {
+ border-top: 1px solid #dadada;
+ line-height: 1;
+ color: #474747;
+ text-align: center;
+ position: relative;
+ margin: 1.25em 0;
+}
+.h5p-horizontal-line-text > span {
+ background: white;
+ padding: 0.5em;
+ position: absolute;
+ top: -1em;
+}
/* This is loaded as part of Core and not Editor since this needs to be outside the editor iframe */
.h5peditor-semi-fullscreen {