From 47d049afb290d0f59ee65a33f54055c7e2d75bd5 Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Wed, 27 Feb 2019 15:03:58 +0100 Subject: [PATCH] HFP-2541 Add reuse dialog instead of download button --- h5p.classes.php | 6 ++++ js/h5p-action-bar.js | 4 +-- js/h5p.js | 49 ++++++++++++++++++++++++++++++-- styles/h5p.css | 66 ++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 118 insertions(+), 7 deletions(-) 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 {