MDL-66399 atto_h5p: allow h5p file uploads in atto

lib/editor/atto/plugins/h5p/lang/en/atto_h5p.php

@@ -22,10 +22,20 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-$string['enterurl'] = 'Enter URL';
+$string['browserepositories'] = 'Browse repositories...';
+$string['copyrightbutton'] = 'Copyright button';
+$string['downloadbutton'] = 'Allow download';
+$string['either'] = 'Either';
+$string['embedbutton'] = 'Embed button';
+$string['enterurl'] = 'URL or Embed code';
+$string['h5p:addembed'] = 'Add embedded H5P';
+$string['h5pfile'] = 'H5P file upload';
+$string['h5poptions'] = 'H5P options';
 $string['h5pproperties'] = 'H5P properties';
+$string['h5purl'] = 'H5P URL';
 $string['invalidh5purl'] = 'Invalid URL';
+$string['instructions'] = 'You can insert H5P content by <strong>either</strong> entering a URL or embed code from an external H5P site <strong>or</strong> by uploading an H5P file.';
+$string['noh5pcontent'] = 'No H5P content added';
 $string['pluginname'] = 'Insert H5P';
 $string['privacy:metadata'] = 'The atto_h5p plugin does not store any personal data.';
-$string['h5p:addembed'] = 'Add embedded H5P';
-$string['saveh5p'] = 'Save H5P';
+$string['or'] = 'or';

lib/editor/atto/plugins/h5p/lib.php

@@ -36,14 +36,23 @@ function atto_h5p_params_for_js($elementid, $options, $fpoptions) {
     if (!$context) {
         $context = context_system::instance();
     }
+
     $addembed = has_capability('atto/h5p:addembed', $context);
+    $upload = has_capability('moodle/h5p:deploy', $context);
 
     $allowedmethods = 'none';
-    if ($addembed) {
+    if ($addembed && $upload) {
+        $allowedmethods = 'both';
+    } else if ($addembed) {
         $allowedmethods = 'embed';
+    } else if ($upload) {
+        $allowedmethods = 'upload';
     }
 
-    $params = ['allowedmethods' => $allowedmethods];
+    $params = [
+        'allowedmethods' => $allowedmethods,
+        'storeinrepo' => true
+    ];
     return $params;
 }
 
@@ -54,10 +63,21 @@ function atto_h5p_strings_for_js() {
     global $PAGE;
 
     $strings = array(
-        'saveh5p',
-        'h5pproperties',
+        'browserepositories',
+        'copyrightbutton',
+        'downloadbutton',
+        'instructions',
+        'either',
+        'embedbutton',
         'enterurl',
-        'invalidh5purl'
+        'h5pfile',
+        'h5poptions',
+        'h5pproperties',
+        'h5purl',
+        'invalidh5purl',
+        'noh5pcontent',
+        'or',
+        'pluginname'
     );
 
     $PAGE->requires->strings_for_js($strings, 'atto_h5p');

lib/editor/atto/plugins/h5p/styles.css

@@ -1,17 +1,20 @@
 .attoh5poverlay {
     display: none;
 }
-.editor_atto_content_wrap .attoh5poverlay {
-    display: block;
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background: url([[pix:atto_h5p|icon]]) center center / 100px auto no-repeat #adb5bd;
+.attoh5pinstructions {
+    max-width: 500px;
 }
-.h5p-embed-placeholder .attoh5poverlay + br {
+.editor_atto_content_wrap .h5p-placeholder + br {
     display: none;
+}
+.editor_atto_content_wrap .h5p-placeholder {
+    color: #6c757d;
+    width: 100%;
+    word-break: break-all;
+    height: 260px;
+    cursor: pointer;
+    background: url([[pix:atto_h5p|icon-white]]) center center / 100px auto no-repeat #6c757d;
+}
+.atto_h5p_button .icon {
+    width: 24px;
 }

lib/editor/atto/plugins/h5p/tests/behat/h5p.feature

@@ -1,4 +1,4 @@
-@editor @editor_atto @atto @atto_h5p @_switch_iframe
+@editor @editor_atto @atto @atto_h5p @_file_upload @_switch_iframe
 Feature: Add h5ps to Atto
   To write rich text - I need to add h5ps.
 
@@ -19,38 +19,82 @@ Feature: Add h5ps to Atto
   @javascript
   Scenario: Insert an embedded h5p
     Given I log in as "admin"
+    And I change window size to "large"
     And I am on "Course 1" course homepage
     And I follow "PageName1"
     And I navigate to "Edit settings" in current page administration
     And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
-    And I set the field "Enter URL" to "https://h5p.org/h5p/embed/576651"
-    And I click on "Save H5P" "button" in the "H5P properties" "dialogue"
+    And I set the field with xpath "//textarea[@data-region='h5purl']" to "https://h5p.org/h5p/embed/576651"
+    And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
     And I wait until the page is ready
     When I click on "Save and display" "button"
-    And I switch to "h5pcontent" iframe
-    Then ".h5p-iframe" "css_element" should exist
+    Then ".h5p-placeholder" "css_element" should exist
+
+  @javascript
+  Scenario: Insert an h5p file
+    Given I log in as "admin"
+    And I change window size to "large"
+    And I follow "Manage private files..."
+    And I upload "lib/editor/atto/tests/fixtures/ipsums.h5p" file to "Files" filemanager
+    And I click on "Save changes" "button"
+    And I am on "Course 1" course homepage
+    And I follow "PageName1"
+    And I navigate to "Edit settings" in current page administration
+    And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
+    And I click on "Browse repositories..." "button" in the "Insert H5P" "dialogue"
+    And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
+    And I click on "ipsums.h5p" "link"
+    And I click on "Select this file" "button"
+    And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
+    And I wait until the page is ready
+    When I click on "Save and display" "button"
+    Then ".h5p-placeholder" "css_element" should exist
 
   @javascript
   Scenario: Test an invalid url
     Given I log in as "admin"
+    And I change window size to "large"
     And I am on "Course 1" course homepage
     And I follow "PageName1"
     And I navigate to "Edit settings" in current page administration
     And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
-    And I set the field "Enter URL" to "ftp://h5p.org/h5p/embed/576651"
-    And I click on "Save H5P" "button" in the "H5P properties" "dialogue"
+    And I set the field with xpath "//textarea[@data-region='h5purl']" to "ftp://h5p.org/h5p/embed/576651"
+    When I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
     And I wait until the page is ready
-    Then I should see "Invalid URL" in the "H5P properties" "dialogue"
+    Then I should see "Invalid URL" in the "Insert H5P" "dialogue"
+
+  @javascript
+  Scenario: No h5p capabilities
+    Given the following "permission overrides" exist:
+    | capability | permission | role | contextlevel | reference |
+    | atto/h5p:addembed | Prohibit | editingteacher | Course | C1 |
+    | moodle/h5p:deploy | Prohibit | editingteacher | Course | C1 |
+    And I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    And I follow "PageName1"
+    When I navigate to "Edit settings" in current page administration
+    Then "Insert H5P" "button" should not exist
 
   @javascript
   Scenario: No embed h5p capabilities
-    Given I log in as "admin"
-    And I set the following system permissions of "Teacher" role:
-    | capability | permission |
-    | atto/h5p:addembed | Prohibit |
-    And I log out
+    Given the following "permission overrides" exist:
+    | capability | permission | role | contextlevel | reference |
+    | atto/h5p:addembed | Prohibit | editingteacher | Course | C1 |
     And I log in as "teacher1"
     And I am on "Course 1" course homepage
     And I follow "PageName1"
-    And I navigate to "Edit settings" in current page administration
-    Then "Insert H5P" "button" should not exist
+    When I navigate to "Edit settings" in current page administration
+    And I click on "Insert H5P" "button"
+    Then I should not see "URL or Embed code" in the "Insert H5P" "dialogue"
+
+  @javascript
+  Scenario: No upload h5p capabilities
+    Given the following "permission overrides" exist:
+    | capability | permission | role | contextlevel | reference |
+    | moodle/h5p:deploy | Prohibit | editingteacher | Course | C1 |
+    And I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    And I follow "PageName1"
+    When I navigate to "Edit settings" in current page administration
+    And I click on "Insert H5P" "button"
+    Then I should not see "H5P file upload" in the "Insert H5P" "dialogue"