HFP-2541 Add reuse dialog instead of download button
Frode Petterson
parent
01550e7f11
commit
47d049afb2
|
|
@ -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.'),
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
49
js/h5p.js
49
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 += '<button type="button" class="h5p-big-button h5p-download-button"><div class="h5p-button-title">Download as an .h5p file</div><div class="h5p-button-description">.h5p files may be uploaded to any web-site where H5P content may be created.</div></button>';
|
||||
}
|
||||
if (contentData.displayOptions.export && contentData.displayOptions.copy) {
|
||||
html += '<div class="h5p-horizontal-line-text"><span>or</span></div>';
|
||||
}
|
||||
if (contentData.displayOptions.copy) {
|
||||
html += '<button type="button" class="h5p-big-button h5p-copy-button"><div class="h5p-button-title">Copy content</div><div class="h5p-button-description">Copied content may be pasted anywhere this content type is supported on this website.</div></button>';
|
||||
}
|
||||
|
||||
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('<a href="https://h5p.org/more-info" target="_blank">More Info</a>').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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue