mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-71956 filter_h5p: Display the edit content button

Browse Source 
The H5P filter will display now the "Edit content" button if the
user can edit the file.
This commit is contained in:
Sara Arjona 2021-06-10 17:10:01 +02:00
parent eb4e36400e
commit 03af737f21
3 changed files with 442 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
filter/displayh5p/filter.php
View File

@ -49,7 +49,7 @@ class filter_displayh5p extends moodle_text_filter {
* @return string
*/
public function filter($text, array $options = array()) {
global $CFG;
global $CFG, $USER;
if (!is_string($text) or empty($text)) {
// Non string data can not be filtered anyway.
@ -83,7 +83,10 @@ class filter_displayh5p extends moodle_text_filter {
// It is needed to add "/embed" at the end of URLs like https:://*.h5p.com/content/12345 (H5P.com).
$params['urlmodifier'] = '';
if (($source == $localsource)) {
// Local files may display a button below the content to modify it when editing mode is on. This button will appear
// only if the user has the proper capabilities.
$params['canbeedited'] = (!empty($USER->editing)) && ($source == $localsource);
if ($source == $localsource) {
$params['tagbegin'] = '<iframe src="'.$CFG->wwwroot.'/h5p/embed.php?url=';
$escapechars = $source;
$ultimatepattern = $source;
@ -103,7 +106,7 @@ class filter_displayh5p extends moodle_text_filter {
}
$h5pcontenturl = new filterobject($source, null, null, false,
false, null, [$this, 'filterobject_prepare_replacement_callback'], $params);
false, null, [$this, 'filterobject_prepare_replacement_callback'], $params + ['ish5plink' => false]);
$h5pcontenturl->workregexp = '#'.$ultimatepattern.'#';
$h5pcontents[] = $h5pcontenturl;
@ -112,7 +115,7 @@ class filter_displayh5p extends moodle_text_filter {
$linkregexp = '~<a [^>]*href=["\']('.$escapechars.'[^"\']*)["\'][^>]*>([^<]*)</a>~is';
$h5plinkurl = new filterobject($linkregexp, null, null, false,
false, null, [$this, 'filterobject_prepare_replacement_callback'], $params);
false, null, [$this, 'filterobject_prepare_replacement_callback'], $params + ['ish5plink' => true]);
$h5plinkurl->workregexp = $linkregexp;
$h5plinks[] = $h5plinkurl;
}
@ -135,7 +138,52 @@ class filter_displayh5p extends moodle_text_filter {
return $matches[0];
}
}, $text);
}
// The "Edit" button below each H5P content will be displayed only for users with permissions to edit the content (to
// avoid confusion). So the original H5P file behind this URL will be obtained and checked using the methods in the API.
// As the H5P URL is required in order to get this information, this action can be done only here(the
// prepare_replacement_callback method has only the placeholders).
foreach ($h5pcontents as $h5pcontent) {
$text = preg_replace_callback($h5pcontent->workregexp,
function ($matches) use ($h5pcontent) {
global $USER, $CFG;
// The Edit button placeholder has been added only if the file can be edited.
if ($h5pcontent->replacementcallbackdata['canbeedited']) {
// If the content was originally a link, ignore it (it won't have the placeholder).
$matchurl = new \moodle_url($matches[0]);
if (strpos($matchurl->get_path(), 'h5p/embed.php') !== false) {
return $matches[0];
}
$contenturl = $matches[0];
list($file, $h5p) = \core_h5p\api::get_original_content_from_pluginfile_url($contenturl, true, true);
if ($file) {
filter_prepare_phrase_for_replacement($h5pcontent);
// Check if the user can edit this content.
if (\core_h5p\api::can_edit_content($file)) {
// If the user can modify the content, replace the placeholder with a link to the editor.
$title = get_string('editcontent', 'core_h5p');
$editorurl = $CFG->wwwroot . '/h5p/edit.php?url=' . $contenturl;
$htmlcode = html_writer::start_tag(
'a',
['class' => 'autolink', 'title' => $title, 'href' => $editorurl]
);
$htmlcode .= $title . html_writer::end_tag('a');
$content = str_replace('$2', $htmlcode, $h5pcontent->workreplacementphrase);
} else {
// If the user can't edit the content, remove the placeholder.
$content = str_replace('$2', '', $h5pcontent->workreplacementphrase);
}
return str_replace('$1', $contenturl, $content);
}
}
return $matches[0];
}, $text);
}
$result = filter_phrases($text, $h5pcontents, null, null, false, true);
@ -166,9 +214,12 @@ class filter_displayh5p extends moodle_text_filter {
* @param string $tagbegin HTML to insert before any match
* @param string $tagend HTML to insert after any match
* @param string $urlmodifier string to add to the match URL
* @param bool $canbeedited Whether the content can be modified or not (to display a link to edit it or not).
* @param bool $ish5plink Whether the original content comes from an H5P link or not.
* @return array [$hreftagbegin, $hreftagend, $replacementphrase] for filterobject.
*/
public function filterobject_prepare_replacement_callback($tagbegin, $tagend, $urlmodifier) {
public function filterobject_prepare_replacement_callback($tagbegin, $tagend, $urlmodifier, $canbeedited, $ish5plink) {
$sourceurl = "$1";
if ($urlmodifier !== "") {
$sourceurl .= $urlmodifier;
@ -184,6 +235,11 @@ class filter_displayh5p extends moodle_text_filter {
self::$loadresizerjs = false;
}
if ($canbeedited && !$ish5plink) {
// Placeholder to be replaced by the edit content button (depending on the user permissions).
$tagend .= "$2";
}
return [$tagbegin, $tagend, $h5piframesrc];
}
}

255
filter/displayh5p/tests/behat/inline_editing_content.feature Normal file
View File

@ -0,0 +1,255 @@
@editor @editor_atto @atto @atto_h5p @filter @filter_displayh5p @core_h5p @_file_upload @_switch_iframe
Feature: Inline editing H5P content anywhere
In order to edit an existing H5P content
As a user
I need to see the button and access to the H5P editor
Background:
Given the following "users" exist:
| username | firstname | lastname | email |
| teacher1 | Teacher | 1 | teacher1@example.com |
| teacher2 | Teacher | 2 | teacher2@example.com |
| student1 | Student | 1 | student1@example.com |
And the following "courses" exist:
| fullname | shortname | category |
| Course 1 | C1 | 0 |
And the following "course enrolments" exist:
| user | course | role |
| teacher1 | C1 | editingteacher |
| teacher2 | C1 | teacher |
| student1 | C1 | student |
And the following "contentbank content" exist:
| contextlevel | reference | contenttype | user | contentname | filepath |
| Course | C1 | contenttype_h5p | admin | Greeting card | /h5p/tests/fixtures/greeting-card-887.h5p |
And the following "activities" exist:
| activity | name | intro | introformat | course | content | contentformat | idnumber |
| page | PageName1 | PageDesc1 | 1 | C1 | H5Ptest | 1 | 1 |
And the "displayh5p" filter is "on"
# Override this capability to let teachers and students to Turn editing on.
And the following "permission overrides" exist:
| capability | permission | role | contextlevel | reference |
| moodle/course:update | Allow | teacher | System | |
| moodle/course:update | Allow | student | System | |
@javascript @mod @mod_page
Scenario: Edit H5P content from a page using link to private file
Given the following "permission overrides" exist:
| capability | permission | role | contextlevel | reference |
| moodle/h5p:updatelibraries | Allow | editingteacher | System | |
And I log in as "teacher1"
# Upload the H5P to private user files.
And I follow "Manage private files..."
And I upload "h5p/tests/fixtures/greeting-card-887.h5p" file to "Files" filemanager
And I click on "Save changes" "button"
# Add H5P content to the page.
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I navigate to "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 select "Private files" repository in file picker
And I click on "greeting-card-887.h5p" "file" in repository content area
And I click on "Link to the file" "radio"
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I click on "Save and display" "button"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should not see "Edit H5P content"
And I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
Then I should see "Edit H5P content"
And I log out
# Check admin can't see the Edit button (it's a private file and only the author can edit it).
And I log in as "admin"
And I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
@javascript @mod @mod_page @repository_contentbank
Scenario: Edit H5P content from a page using link to content bank file
Given I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to the page.
And I am on the "PageName1" "page activity" page
And I navigate to "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 select "Content bank" repository in file picker
And I click on "Greeting card" "file" in repository content area
And I click on "Link to the file" "radio"
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I click on "Save and display" "button"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should not see "Edit H5P content"
When I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
Then I should see "Edit H5P content"
And I log out
# Check teacher1 can see the Edit button too.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
@javascript @mod @mod_page @repository_contentbank
Scenario: Edit H5P content from a page using copy to content bank file
Given I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to the page.
And I am on the "PageName1" "page activity" page
And I navigate to "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 select "Content bank" repository in file picker
And I click on "Greeting card" "file" in repository content area
And I click on "Make a copy of the file" "radio"
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I click on "Save and display" "button"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should not see "Edit H5P content"
When I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
Then I should see "Edit H5P content"
And I log out
# Check teacher1 can see the Edit button too.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
And I should see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
@javascript @mod @mod_page
Scenario: Edit H5P content from a page using external URL
Given the following config values are set as admin:
| allowedsources | https://moodle.h5p.com/content/[id] | filter_displayh5p |
And I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to the page.
And I am on the "PageName1" "page activity" page
And I navigate to "Settings" in current page administration
And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
And I set the field with xpath "//input[@data-region='h5pfile']" to "https://moodle.h5p.com/content/1290772960722742119"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I click on "Save and display" "button"
And ".h5p-placeholder" "css_element" should exist
And I switch to "h5pcontent" iframe
And I should see "Lorum ipsum"
And I switch to the main frame
# The Edit button is never displayed (because it's not a local file).
And I should not see "Edit H5P content"
When I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
Then I should not see "Edit H5P content"
And I log out
# Check teacher1 can't see the Edit button.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "PageName1" "page activity" page
And I should not see "Edit H5P content"
@javascript @block @block_html @core_block @repository_contentbank
Scenario: Edit H5P content from a block using copy to content bank file
Given I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to the block.
And I turn editing mode on
And I add the "Text" block
And I configure the "(new text block)" block
And I click on "Insert H5P" "button" in the "#fitem_id_config_text" "css_element"
And I click on "Browse repositories..." "button" in the "Insert H5P" "dialogue"
And I select "Content bank" repository in file picker
And I click on "Greeting card" "file" in repository content area
And I click on "Make a copy of the file" "radio"
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I press "Save changes"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should see "Edit H5P content"
When I turn editing mode off
Then I should not see "Edit H5P content"
And I log out
# Check teacher1 can see the Edit button too.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I should see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I should not see "Edit H5P content"

126
mod/forum/tests/behat/h5p_inline_editing_content.feature Normal file
View File

@ -0,0 +1,126 @@
@mod @mod_forum @editor @editor_atto @atto @atto_h5p @filter @filter_displayh5p @core_h5p @_file_upload @_switch_iframe
Feature: Inline editing H5P content in mod_forum
In order to edit an existing H5P content
As a user
I need to see the button and access to the H5P editor
Background:
Given the following "users" exist:
| username | firstname | lastname | email |
| teacher1 | Teacher | 1 | teacher1@example.com |
| teacher2 | Teacher | 2 | teacher2@example.com |
| student1 | Student | 1 | student1@example.com |
And the following "courses" exist:
| fullname | shortname | category |
| Course 1 | C1 | 0 |
And the following "course enrolments" exist:
| user | course | role |
| teacher1 | C1 | editingteacher |
| teacher2 | C1 | teacher |
| student1 | C1 | student |
And the following "contentbank content" exist:
| contextlevel | reference | contenttype | user | contentname | filepath |
| Course | C1 | contenttype_h5p | admin | Greeting card | /h5p/tests/fixtures/greeting-card-887.h5p |
And the following "activities" exist:
| activity | name | intro | introformat | course | content | contentformat | idnumber |
| forum | ForumName1 | PageDesc1 | 1 | C1 | H5Ptest | 1 | 1 |
And the "displayh5p" filter is "on"
# Override this capability to let teachers and students to Turn editing on.
And the following "permission overrides" exist:
| capability | permission | role | contextlevel | reference |
| moodle/course:update | Allow | teacher | System | |
| moodle/course:update | Allow | student | System | |
@javascript @repository_contentbank
Scenario: Edit H5P content from a forum intro using copy to content bank file
Given I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to the forum description.
And I am on the "ForumName1" "forum activity" page
And I navigate to "Settings" in current page administration
And I click on "Insert H5P" "button" in the "#fitem_id_introeditor" "css_element"
And I click on "Browse repositories..." "button" in the "Insert H5P" "dialogue"
And I select "Content bank" repository in file picker
And I click on "Greeting card" "file" in repository content area
And I click on "Make a copy of the file" "radio"
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I click on "Save and display" "button"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should not see "Edit H5P content"
When I am on "Course 1" course homepage with editing mode on
And I am on the "ForumName1" "forum activity" page
Then I should see "Edit H5P content"
And I log out
# Check teacher1 can see the Edit button too.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I am on the "ForumName1" "forum activity" page
And I should see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can't see the Edit button, because she can't edit the forum activity.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "ForumName1" "forum activity" page
And I should not see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "ForumName1" "forum activity" page
And I should not see "Edit H5P content"
@javascript @repository_contentbank
Scenario: Edit H5P content from a forum post
Given I am on the "C1" "Course" page logged in as "admin"
# Add H5P content to a forum post as admin.
And I am on the "ForumName1" "forum activity" page
And I click on "Add a new discussion topic" "link"
And I set the following fields to these values:
| Subject | Forum post by admin |
And I click on "Insert H5P" "button" in the "#fitem_id_message" "css_element"
And I click on "Browse repositories..." "button" in the "Insert H5P" "dialogue"
And I select "Content bank" repository in file picker
And I click on "Greeting card" "file" in repository content area
And I click on "Select this file" "button"
And I click on "Insert H5P" "button" in the "Insert H5P" "dialogue"
And I press "Post to forum"
And I follow "Forum post by admin"
And I switch to "h5p-iframe" class iframe
And I switch to "h5p-iframe" class iframe
And I should see "Hello world!"
And I switch to the main frame
# The Edit button is only displayed when editing mode is on.
And I should not see "Edit H5P content"
When I am on "Course 1" course homepage with editing mode on
And I am on the "ForumName1" "forum activity" page
And I follow "Forum post by admin"
Then I should see "Edit H5P content"
And I log out
# Check teacher1 can see the Edit button because she can edit the post too.
And I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I am on the "ForumName1" "forum activity" page
And I follow "Forum post by admin"
And I should see "Edit H5P content"
And I log out
# Check teacher2 (non-editing teacher) can see the Edit button because she can edit the post too.
And I log in as "teacher2"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "ForumName1" "forum activity" page
And I follow "Forum post by admin"
And I should see "Edit H5P content"
And I log out
# Check student1 can't see the Edit button.
And I log in as "student1"
And I turn editing mode on
And I am on "Course 1" course homepage
And I am on the "ForumName1" "forum activity" page
And I follow "Forum post by admin"
And I should not see "Edit H5P content"