HFP-2541 Add reuse dialog instead of download button

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.'),

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');

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 () {
+      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 () {
         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.
  *

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 {