HFP-2541 Add reuse dialog instead of download button

pull/58/head
Frode Petterson 2019-02-27 15:03:58 +01:00
parent 01550e7f11
commit 47d049afb2
4 changed files with 118 additions and 7 deletions

View File

@ -1840,6 +1840,7 @@ abstract class H5PPermission {
const CREATE_RESTRICTED = 2; const CREATE_RESTRICTED = 2;
const UPDATE_LIBRARIES = 3; const UPDATE_LIBRARIES = 3;
const INSTALL_RECOMMENDED = 4; const INSTALL_RECOMMENDED = 4;
const COPY_H5P = 8;
} }
abstract class H5PDisplayOptionBehaviour { abstract class H5PDisplayOptionBehaviour {
@ -1910,6 +1911,7 @@ class H5PCore {
const DISPLAY_OPTION_EMBED = 'embed'; const DISPLAY_OPTION_EMBED = 'embed';
const DISPLAY_OPTION_COPYRIGHT = 'copyright'; const DISPLAY_OPTION_COPYRIGHT = 'copyright';
const DISPLAY_OPTION_ABOUT = 'icon'; const DISPLAY_OPTION_ABOUT = 'icon';
const DISPLAY_OPTION_COPY = 'copy';
// Map flags to string // Map flags to string
public static $disable = array( public static $disable = array(
@ -2898,6 +2900,7 @@ class H5PCore {
$display_options[self::DISPLAY_OPTION_COPYRIGHT] = false; $display_options[self::DISPLAY_OPTION_COPYRIGHT] = false;
} }
} }
$display_options[self::DISPLAY_OPTION_COPY] = $this->h5pF->hasPermission(H5PPermission::COPY_H5P, $id);
return $display_options; return $display_options;
} }
@ -3311,6 +3314,9 @@ class H5PCore {
'license' => $this->h5pF->t('License'), 'license' => $this->h5pF->t('License'),
'thumbnail' => $this->h5pF->t('Thumbnail'), 'thumbnail' => $this->h5pF->t('Thumbnail'),
'noCopyrights' => $this->h5pF->t('No copyright information available for this content.'), '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.'), 'downloadDescription' => $this->h5pF->t('Download this content as a H5P file.'),
'copyrightsDescription' => $this->h5pF->t('View copyright information for this content.'), 'copyrightsDescription' => $this->h5pF->t('View copyright information for this content.'),
'embedDescription' => $this->h5pF->t('View the embed code for this content.'), 'embedDescription' => $this->h5pF->t('View the embed code for this content.'),

View File

@ -57,9 +57,9 @@ H5P.ActionBar = (function ($, EventDispatcher) {
}; };
// Register action bar buttons // Register action bar buttons
if (displayOptions.export) { if (displayOptions.export || displayOptions.copy) {
// Add export button // Add export button
addActionButton('download', 'export'); addActionButton('reuse', 'export');
} }
if (displayOptions.copyright) { if (displayOptions.copyright) {
addActionButton('copyrights'); addActionButton('copyrights');

View File

@ -176,9 +176,9 @@ H5P.init = function (target) {
var actionBar = new H5P.ActionBar(displayOptions); var actionBar = new H5P.ActionBar(displayOptions);
var $actions = actionBar.getDOMElement(); var $actions = actionBar.getDOMElement();
actionBar.on('download', function () { actionBar.on('reuse', function () {
window.location.href = contentData.exportUrl; H5P.openReuseDialog($actions, contentData, library, instance, contentId);
instance.triggerXAPI('downloaded'); instance.triggerXAPI('accessed-reuse');
}); });
actionBar.on('copyrights', function () { actionBar.on('copyrights', function () {
var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container); 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. * Display a dialog containing the embed code.
* *

View File

@ -228,7 +228,7 @@ div.h5p-fullscreen {
padding-right: 0; padding-right: 0;
} }
.h5p-actions > .h5p-button.h5p-export:before { .h5p-actions > .h5p-button.h5p-export:before {
content: "\e893"; content: "\e90b";
} }
.h5p-actions > .h5p-button.h5p-copyrights:before { .h5p-actions > .h5p-button.h5p-copyrights:before {
content: "\e88f"; content: "\e88f";
@ -297,6 +297,11 @@ div.h5p-fullscreen {
padding: 0.325em 0.5em 0.25em; padding: 0.325em 0.5em 0.25em;
line-height: 1.25em; line-height: 1.25em;
border-bottom: 1px solid #ccc; 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 { .h5p-embed-dialog .h5p-inner {
width: 300px; width: 300px;
@ -344,6 +349,7 @@ div.h5p-fullscreen {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
color: #555555; color: #555555;
z-index: 1;
} }
.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar { .h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar {
width: 8px; width: 8px;
@ -357,7 +363,6 @@ div.h5p-fullscreen {
} }
.h5p-popup-dialog .h5p-close { .h5p-popup-dialog .h5p-close {
cursor: pointer; cursor: pointer;
outline:none
} }
.h5p-popup-dialog .h5p-close:after { .h5p-popup-dialog .h5p-close:after {
font-family: 'H5P'; font-family: 'H5P';
@ -372,6 +377,7 @@ div.h5p-fullscreen {
color: #656565; color: #656565;
cursor: pointer; cursor: pointer;
text-indent: -0.065em; text-indent: -0.065em;
z-index: 3
} }
.h5p-popup-dialog .h5p-close:hover:after, .h5p-popup-dialog .h5p-close:hover:after,
.h5p-popup-dialog .h5p-close:focus:after { .h5p-popup-dialog .h5p-close:focus:after {
@ -455,6 +461,62 @@ div.h5p-fullscreen {
.h5p-dialog-ok-button:active { .h5p-dialog-ok-button:active {
background: #eeffee; 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 */ /* This is loaded as part of Core and not Editor since this needs to be outside the editor iframe */
.h5peditor-semi-fullscreen { .h5peditor-semi-fullscreen {