mirror of
https://github.com/moodle/moodle.git
synced 2025-03-01 06:22:39 +01:00
MDL-68116 atto_h5p: simplify fields to add H5P content
The embed section has been removed in order to simplify this screen. It was added to make easier include content coming from h5p.org but, as soon users won't be able to use it, it makes no sense. Users will still be able to use the "HTML" button to paste the embed code.
This commit is contained in:
Sara Arjona
parent
728f0fb587
commit
186a0361a3
@ -30,11 +30,12 @@ $string['embedbutton'] = 'Embed button';
|
||||
$string['enterurl'] = 'URL or embed code';
|
||||
$string['h5p:addembed'] = 'Add embedded H5P';
|
||||
$string['h5pfile'] = 'H5P file upload';
|
||||
$string['h5pfileorurl'] = 'H5P URL or 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['instructions'] = 'You can insert H5P content by <strong>either</strong> entering a URL <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.';
|
||||
|
||||
@ -69,16 +69,13 @@ function atto_h5p_strings_for_js() {
|
||||
'copyrightbutton',
|
||||
'downloadbutton',
|
||||
'instructions',
|
||||
'either',
|
||||
'embedbutton',
|
||||
'enterurl',
|
||||
'h5pfile',
|
||||
'h5poptions',
|
||||
'h5pproperties',
|
||||
'h5purl',
|
||||
'h5pfileorurl',
|
||||
'invalidh5purl',
|
||||
'noh5pcontent',
|
||||
'or',
|
||||
'pluginname'
|
||||
);
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Feature: Add h5ps to Atto
|
||||
| page | PageName1 | PageDesc1 | 1 | C1 | H5Ptest | 1 | 1 |
|
||||
And the "displayh5p" filter is "on"
|
||||
And the following config values are set as admin:
|
||||
| allowedsources | https://moodle.h5p.com/content/[id]/embed | filter_displayh5p |
|
||||
| allowedsources | https://moodle.h5p.com/content/[id] | filter_displayh5p |
|
||||
|
||||
@javascript @external
|
||||
Scenario: Insert an embedded h5p
|
||||
@ -27,7 +27,7 @@ Feature: Add h5ps to Atto
|
||||
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 with xpath "//textarea[@data-region='h5purl']" to "https://moodle.h5p.com/content/1290772960722742119/embed"
|
||||
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 wait until the page is ready
|
||||
When I click on "Save and display" "button"
|
||||
@ -64,7 +64,7 @@ Feature: Add h5ps to Atto
|
||||
And I navigate to "Edit settings" in current page administration
|
||||
And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
|
||||
# This is not a real external URL, so this scenario shouldn't be labeled as external.
|
||||
And I set the field with xpath "//textarea[@data-region='h5purl']" to "ftp://moodle.h5p.com/content/1290772960722742119/embed"
|
||||
And I set the field with xpath "//input[@data-region='h5pfile']" to "ftp://moodle.h5p.com/content/1290772960722742119"
|
||||
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 "Insert H5P" "dialogue"
|
||||
@ -91,7 +91,9 @@ Feature: Add h5ps to Atto
|
||||
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 "URL or embed code" in the "Insert H5P" "dialogue"
|
||||
Then I should not see "H5P URL" in the "Insert H5P" "dialogue"
|
||||
And I should see "H5P file upload" in the "Insert H5P" "dialogue"
|
||||
And I should see "H5P options" in the "Insert H5P" "dialogue"
|
||||
|
||||
@javascript
|
||||
Scenario: No upload h5p capabilities
|
||||
@ -104,6 +106,8 @@ Feature: Add h5ps to Atto
|
||||
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"
|
||||
And I should see "H5P URL" in the "Insert H5P" "dialogue"
|
||||
And I should not see "H5P options" in the "Insert H5P" "dialogue"
|
||||
|
||||
@javascript @external
|
||||
Scenario: Edit H5P content
|
||||
@ -132,7 +136,7 @@ Feature: Add h5ps to Atto
|
||||
And I click on ".h5p-placeholder" "css_element"
|
||||
And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
|
||||
# External URL
|
||||
And I set the field with xpath "//textarea[@data-region='h5purl']" to "https://moodle.h5p.com/content/1290772960722742119/embed"
|
||||
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 wait until the page is ready
|
||||
And I click on "Save and display" "button"
|
||||
@ -199,6 +203,32 @@ Feature: Add h5ps to Atto
|
||||
And I should see "Embed"
|
||||
And I should see "Rights of use"
|
||||
|
||||
@javascript @external
|
||||
Scenario: H5P options are ignored for H5P URLs
|
||||
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 with xpath "//input[@data-region='h5pfile']" to "https://moodle.h5p.com/content/1290752078589054689"
|
||||
And I click on "H5P options" "link"
|
||||
And I click on "Embed button" "checkbox"
|
||||
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
|
||||
And I wait until the page is ready
|
||||
And I switch to "h5pcontent" iframe
|
||||
And I should see "History of strawberries"
|
||||
And I should not see "Embed"
|
||||
And I switch to the main frame
|
||||
And I navigate to "Edit settings" in current page administration
|
||||
And I click on ".h5p-placeholder" "css_element"
|
||||
And I click on "Insert H5P" "button" in the "#fitem_id_page" "css_element"
|
||||
And I click on "H5P options" "link"
|
||||
And "input[aria-label=\"Embed button\"]:not([checked=checked])" "css_element" should exist
|
||||
|
||||
@javascript
|
||||
Scenario: Private H5P files are shown to students
|
||||
Given the following "users" exist:
|
||||
|
||||
@ -38,7 +38,6 @@ var CSS = {
|
||||
H5PBROWSER: 'openh5pbrowser',
|
||||
INPUTALT: 'atto_h5p_altentry',
|
||||
INPUTH5PFILE: 'atto_h5p_file',
|
||||
INPUTH5PURL: 'atto_h5p_url',
|
||||
INPUTSUBMIT: 'atto_h5p_urlentrysubmit',
|
||||
OPTION_DOWNLOAD_BUTTON: 'atto_h5p_option_download_button',
|
||||
OPTION_COPYRIGHT_BUTTON: 'atto_h5p_option_copyright_button',
|
||||
@ -49,7 +48,6 @@ var CSS = {
|
||||
CONTENTWARNING: '.' + CSS.CONTENTWARNING,
|
||||
H5PBROWSER: '.' + CSS.H5PBROWSER,
|
||||
INPUTH5PFILE: '.' + CSS.INPUTH5PFILE,
|
||||
INPUTH5PURL: '.' + CSS.INPUTH5PURL,
|
||||
INPUTSUBMIT: '.' + CSS.INPUTSUBMIT,
|
||||
OPTION_DOWNLOAD_BUTTON: '.' + CSS.OPTION_DOWNLOAD_BUTTON,
|
||||
OPTION_COPYRIGHT_BUTTON: '.' + CSS.OPTION_COPYRIGHT_BUTTON,
|
||||
@ -64,65 +62,71 @@ var CSS = {
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.CONTENTWARNING}}">' +
|
||||
'{{get_string "noh5pcontent" component}}' +
|
||||
'</div>' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="mt-2 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'<div class="my-2"><strong>{{get_string "either" component}}</strong></div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.INPUTH5PURL}}">{{get_string "enterurl" component}}</label>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'<textarea rows="3" data-region="h5purl" class="form-control {{CSS.INPUTH5PURL}}" type="url" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PURL}}" />{{embedURL}}</textarea>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="my-2"><strong>{{get_string "or" component}}</strong></div>' +
|
||||
'<div class="mt-2 mb-4 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">{{get_string "h5pfile" component}}</label>' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'{{get_string "h5pfileorurl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{^if canUploadAndEmbed}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'{{get_string "h5pfile" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'{{get_string "h5purl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{/if}}' +
|
||||
'</label>' +
|
||||
'<div class="input-group input-append w-100">' +
|
||||
'<input class="form-control {{CSS.INPUTH5PFILE}}" type="url" value="{{fileURL}}" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" size="32"/>' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" data-region="h5pfile" size="32"/>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'aria-label="{{get_string "downloadbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "embedbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "copyrightbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</fieldset>' +
|
||||
'</fieldset>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'<div class="text-center">' +
|
||||
'<button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">' + '' +
|
||||
'{{get_string "pluginname" component}}</button>' +
|
||||
@ -270,9 +274,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_getPermissions: function() {
|
||||
var permissions = {
|
||||
'canEmbed': false,
|
||||
'canUpload': false,
|
||||
'canUploadAndEbmed': false,
|
||||
'canEmbed': false
|
||||
'canUploadAndEmbed': false
|
||||
};
|
||||
|
||||
if (this.get('host').canShowFilepicker('h5p')) {
|
||||
@ -304,7 +308,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
var permissions = this._getPermissions();
|
||||
|
||||
var fileURL,
|
||||
embedURL,
|
||||
optionDownloadButton,
|
||||
optionEmbedButton,
|
||||
optionCopyrightButton,
|
||||
@ -334,7 +337,7 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
}
|
||||
}
|
||||
} else {
|
||||
embedURL = H5PURL;
|
||||
fileURL = H5PURL;
|
||||
}
|
||||
}
|
||||
|
||||
@ -345,10 +348,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
component: COMPONENTNAME,
|
||||
canUpload: permissions.canUpload,
|
||||
canEmbed: permissions.canEmbed,
|
||||
fileURL: fileURL,
|
||||
embedURL: embedURL,
|
||||
canUploadAndEmbed: permissions.canUploadAndEmbed,
|
||||
collapseOptions: collapseOptions,
|
||||
fileURL: fileURL,
|
||||
optionDownloadButton: optionDownloadButton,
|
||||
optionEmbedButton: optionEmbedButton,
|
||||
optionCopyrightButton: optionCopyrightButton
|
||||
@ -374,7 +376,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
if (params.url !== '') {
|
||||
var input = this._form.one(SELECTORS.INPUTH5PFILE);
|
||||
input.set('value', params.url);
|
||||
this._form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}
|
||||
},
|
||||
@ -399,11 +400,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
if (permissions.canUploadAndEmbed) {
|
||||
form.one(SELECTORS.INPUTH5PFILE).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
form.one(SELECTORS.INPUTH5PURL).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PFILE).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
}
|
||||
@ -423,7 +419,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
/**
|
||||
* Update the h5p in the contenteditable.
|
||||
|
||||
*
|
||||
* @method _setH5P
|
||||
* @param {EventFacade} e
|
||||
@ -431,20 +426,11 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_setH5P: function(e) {
|
||||
var form = this._form,
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value'),
|
||||
h5phtml,
|
||||
host = this.get('host'),
|
||||
h5pfile,
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value'),
|
||||
permissions = this._getPermissions();
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Check if there are any issues.
|
||||
@ -464,68 +450,49 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
addParagraphs = false;
|
||||
}
|
||||
|
||||
if (url !== '') {
|
||||
|
||||
if (h5pfile !== '') {
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
if (this._validEmbed(url)) {
|
||||
var embedtemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
var regex = /<iframe.*?src="(.*?)".*<\/iframe>/;
|
||||
var src = url.match(regex)[1];
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot)) {
|
||||
// It's a local file.
|
||||
var params = '';
|
||||
if (permissions.canUpload) {
|
||||
var options = {};
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
// In case a local H5P embed code is used we need get the url
|
||||
// param form the src and decode it.
|
||||
if (src.startsWith(M.cfg.wwwroot + '/h5p/embed.php')) {
|
||||
src = decodeURIComponent(src.split("url=")[1]);
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
}
|
||||
|
||||
h5phtml = embedtemplate({
|
||||
url: src
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
} else {
|
||||
// It's a URL.
|
||||
var urltemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
h5phtml = urltemplate({
|
||||
url: url
|
||||
url: h5pfile
|
||||
});
|
||||
}
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
} else if (h5pfile !== '') {
|
||||
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
var options = {};
|
||||
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
var params = "";
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
host.insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
}
|
||||
@ -574,30 +541,21 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
_updateWarning: function() {
|
||||
var form = this._form,
|
||||
state = true,
|
||||
url,
|
||||
h5pfile,
|
||||
permissions = this._getPermissions();
|
||||
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
if (url !== '') {
|
||||
if (this._validURL(url) || this._validEmbed(url)) {
|
||||
if (permissions.canUpload || permissions.canEmbed) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot) || this._validURL(h5pfile)) {
|
||||
// Only external URLs have to be validated.
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -38,7 +38,6 @@ var CSS = {
|
||||
H5PBROWSER: 'openh5pbrowser',
|
||||
INPUTALT: 'atto_h5p_altentry',
|
||||
INPUTH5PFILE: 'atto_h5p_file',
|
||||
INPUTH5PURL: 'atto_h5p_url',
|
||||
INPUTSUBMIT: 'atto_h5p_urlentrysubmit',
|
||||
OPTION_DOWNLOAD_BUTTON: 'atto_h5p_option_download_button',
|
||||
OPTION_COPYRIGHT_BUTTON: 'atto_h5p_option_copyright_button',
|
||||
@ -49,7 +48,6 @@ var CSS = {
|
||||
CONTENTWARNING: '.' + CSS.CONTENTWARNING,
|
||||
H5PBROWSER: '.' + CSS.H5PBROWSER,
|
||||
INPUTH5PFILE: '.' + CSS.INPUTH5PFILE,
|
||||
INPUTH5PURL: '.' + CSS.INPUTH5PURL,
|
||||
INPUTSUBMIT: '.' + CSS.INPUTSUBMIT,
|
||||
OPTION_DOWNLOAD_BUTTON: '.' + CSS.OPTION_DOWNLOAD_BUTTON,
|
||||
OPTION_COPYRIGHT_BUTTON: '.' + CSS.OPTION_COPYRIGHT_BUTTON,
|
||||
@ -64,65 +62,71 @@ var CSS = {
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.CONTENTWARNING}}">' +
|
||||
'{{get_string "noh5pcontent" component}}' +
|
||||
'</div>' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="mt-2 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'<div class="my-2"><strong>{{get_string "either" component}}</strong></div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.INPUTH5PURL}}">{{get_string "enterurl" component}}</label>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'<textarea rows="3" data-region="h5purl" class="form-control {{CSS.INPUTH5PURL}}" type="url" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PURL}}" />{{embedURL}}</textarea>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="my-2"><strong>{{get_string "or" component}}</strong></div>' +
|
||||
'<div class="mt-2 mb-4 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">{{get_string "h5pfile" component}}</label>' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'{{get_string "h5pfileorurl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{^if canUploadAndEmbed}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'{{get_string "h5pfile" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'{{get_string "h5purl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{/if}}' +
|
||||
'</label>' +
|
||||
'<div class="input-group input-append w-100">' +
|
||||
'<input class="form-control {{CSS.INPUTH5PFILE}}" type="url" value="{{fileURL}}" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" size="32"/>' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" data-region="h5pfile" size="32"/>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'aria-label="{{get_string "downloadbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "embedbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "copyrightbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</fieldset>' +
|
||||
'</fieldset>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'<div class="text-center">' +
|
||||
'<button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">' + '' +
|
||||
'{{get_string "pluginname" component}}</button>' +
|
||||
@ -270,9 +274,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_getPermissions: function() {
|
||||
var permissions = {
|
||||
'canEmbed': false,
|
||||
'canUpload': false,
|
||||
'canUploadAndEbmed': false,
|
||||
'canEmbed': false
|
||||
'canUploadAndEmbed': false
|
||||
};
|
||||
|
||||
if (this.get('host').canShowFilepicker('h5p')) {
|
||||
@ -304,7 +308,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
var permissions = this._getPermissions();
|
||||
|
||||
var fileURL,
|
||||
embedURL,
|
||||
optionDownloadButton,
|
||||
optionEmbedButton,
|
||||
optionCopyrightButton,
|
||||
@ -334,7 +337,7 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
}
|
||||
}
|
||||
} else {
|
||||
embedURL = H5PURL;
|
||||
fileURL = H5PURL;
|
||||
}
|
||||
}
|
||||
|
||||
@ -345,10 +348,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
component: COMPONENTNAME,
|
||||
canUpload: permissions.canUpload,
|
||||
canEmbed: permissions.canEmbed,
|
||||
fileURL: fileURL,
|
||||
embedURL: embedURL,
|
||||
canUploadAndEmbed: permissions.canUploadAndEmbed,
|
||||
collapseOptions: collapseOptions,
|
||||
fileURL: fileURL,
|
||||
optionDownloadButton: optionDownloadButton,
|
||||
optionEmbedButton: optionEmbedButton,
|
||||
optionCopyrightButton: optionCopyrightButton
|
||||
@ -374,7 +376,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
if (params.url !== '') {
|
||||
var input = this._form.one(SELECTORS.INPUTH5PFILE);
|
||||
input.set('value', params.url);
|
||||
this._form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}
|
||||
},
|
||||
@ -399,11 +400,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
if (permissions.canUploadAndEmbed) {
|
||||
form.one(SELECTORS.INPUTH5PFILE).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
form.one(SELECTORS.INPUTH5PURL).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PFILE).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
}
|
||||
@ -423,7 +419,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
/**
|
||||
* Update the h5p in the contenteditable.
|
||||
|
||||
*
|
||||
* @method _setH5P
|
||||
* @param {EventFacade} e
|
||||
@ -431,20 +426,11 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_setH5P: function(e) {
|
||||
var form = this._form,
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value'),
|
||||
h5phtml,
|
||||
host = this.get('host'),
|
||||
h5pfile,
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value'),
|
||||
permissions = this._getPermissions();
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Check if there are any issues.
|
||||
@ -464,68 +450,49 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
addParagraphs = false;
|
||||
}
|
||||
|
||||
if (url !== '') {
|
||||
|
||||
if (h5pfile !== '') {
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
if (this._validEmbed(url)) {
|
||||
var embedtemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
var regex = /<iframe.*?src="(.*?)".*<\/iframe>/;
|
||||
var src = url.match(regex)[1];
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot)) {
|
||||
// It's a local file.
|
||||
var params = '';
|
||||
if (permissions.canUpload) {
|
||||
var options = {};
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
// In case a local H5P embed code is used we need get the url
|
||||
// param form the src and decode it.
|
||||
if (src.startsWith(M.cfg.wwwroot + '/h5p/embed.php')) {
|
||||
src = decodeURIComponent(src.split("url=")[1]);
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
}
|
||||
|
||||
h5phtml = embedtemplate({
|
||||
url: src
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
} else {
|
||||
// It's a URL.
|
||||
var urltemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
h5phtml = urltemplate({
|
||||
url: url
|
||||
url: h5pfile
|
||||
});
|
||||
}
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
} else if (h5pfile !== '') {
|
||||
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
var options = {};
|
||||
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
var params = "";
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
host.insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
}
|
||||
@ -574,30 +541,21 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
_updateWarning: function() {
|
||||
var form = this._form,
|
||||
state = true,
|
||||
url,
|
||||
h5pfile,
|
||||
permissions = this._getPermissions();
|
||||
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
if (url !== '') {
|
||||
if (this._validURL(url) || this._validEmbed(url)) {
|
||||
if (permissions.canUpload || permissions.canEmbed) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot) || this._validURL(h5pfile)) {
|
||||
// Only external URLs have to be validated.
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
|
||||
@ -36,7 +36,6 @@ var CSS = {
|
||||
H5PBROWSER: 'openh5pbrowser',
|
||||
INPUTALT: 'atto_h5p_altentry',
|
||||
INPUTH5PFILE: 'atto_h5p_file',
|
||||
INPUTH5PURL: 'atto_h5p_url',
|
||||
INPUTSUBMIT: 'atto_h5p_urlentrysubmit',
|
||||
OPTION_DOWNLOAD_BUTTON: 'atto_h5p_option_download_button',
|
||||
OPTION_COPYRIGHT_BUTTON: 'atto_h5p_option_copyright_button',
|
||||
@ -47,7 +46,6 @@ var CSS = {
|
||||
CONTENTWARNING: '.' + CSS.CONTENTWARNING,
|
||||
H5PBROWSER: '.' + CSS.H5PBROWSER,
|
||||
INPUTH5PFILE: '.' + CSS.INPUTH5PFILE,
|
||||
INPUTH5PURL: '.' + CSS.INPUTH5PURL,
|
||||
INPUTSUBMIT: '.' + CSS.INPUTSUBMIT,
|
||||
OPTION_DOWNLOAD_BUTTON: '.' + CSS.OPTION_DOWNLOAD_BUTTON,
|
||||
OPTION_COPYRIGHT_BUTTON: '.' + CSS.OPTION_COPYRIGHT_BUTTON,
|
||||
@ -62,65 +60,71 @@ var CSS = {
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.CONTENTWARNING}}">' +
|
||||
'{{get_string "noh5pcontent" component}}' +
|
||||
'</div>' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="mt-2 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'<div class="my-2"><strong>{{get_string "either" component}}</strong></div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.INPUTH5PURL}}">{{get_string "enterurl" component}}</label>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'<textarea rows="3" data-region="h5purl" class="form-control {{CSS.INPUTH5PURL}}" type="url" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PURL}}" />{{embedURL}}</textarea>' +
|
||||
'<div style="display:none" role="alert" class="alert alert-warning mb-1 {{CSS.URLWARNING}}">' +
|
||||
'{{get_string "invalidh5purl" component}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'<div class="my-2"><strong>{{get_string "or" component}}</strong></div>' +
|
||||
'<div class="mt-2 mb-4 attoh5pinstructions">{{{get_string "instructions" component}}}</div>' +
|
||||
'{{/if}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'<div class="mb-4">' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">{{get_string "h5pfile" component}}</label>' +
|
||||
'<label for="{{elementid}}_{{CSS.H5PBROWSER}}">' +
|
||||
'{{#if canUploadAndEmbed}}' +
|
||||
'{{get_string "h5pfileorurl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{^if canUploadAndEmbed}}' +
|
||||
'{{#if canUpload}}' +
|
||||
'{{get_string "h5pfile" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{#if canEmbed}}' +
|
||||
'{{get_string "h5purl" component}}' +
|
||||
'{{/if}}' +
|
||||
'{{/if}}' +
|
||||
'</label>' +
|
||||
'<div class="input-group input-append w-100">' +
|
||||
'<input class="form-control {{CSS.INPUTH5PFILE}}" type="url" value="{{fileURL}}" ' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" size="32"/>' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'id="{{elementid}}_{{CSS.INPUTH5PFILE}}" data-region="h5pfile" size="32"/>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<span class="input-group-append">' +
|
||||
'<button class="btn btn-secondary {{CSS.H5PBROWSER}}" type="button">' +
|
||||
'{{get_string "browserepositories" component}}</button>' +
|
||||
'</span>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'{{#if canUpload}}' +
|
||||
'<fieldset class="collapsible {{#if collapseOptions}}collapsed{{/if}}" id="{{elementid}}_h5poptions">' +
|
||||
'<legend class="ftoggler">{{get_string "h5poptions" component}}</legend>' +
|
||||
'<div class="fcontainer">' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionDownloadButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_DOWNLOAD_BUTTON}}"' +
|
||||
'aria-label="{{get_string "downloadbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-allow-download"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-allow-download">' +
|
||||
'{{get_string "downloadbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "embedbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'aria-label="{{get_string "copyrightbutton" component}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="form-check">' +
|
||||
'<input type="checkbox" {{optionEmbedButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_EMBED_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-embed-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-embed-button">' +
|
||||
'{{get_string "embedbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="form-check mb-2">' +
|
||||
'<input type="checkbox" {{optionCopyrightButton}} ' +
|
||||
'class="form-check-input {{CSS.OPTION_COPYRIGHT_BUTTON}}" ' +
|
||||
'id="{{elementid}}_h5p-option-copyright-button"/>' +
|
||||
'<label class="form-check-label" for="{{elementid}}_h5p-option-copyright-button">' +
|
||||
'{{get_string "copyrightbutton" component}}' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</fieldset>' +
|
||||
'</fieldset>' +
|
||||
'{{/if}}' +
|
||||
'</div>' +
|
||||
'{{/if}}' +
|
||||
'<div class="text-center">' +
|
||||
'<button class="btn btn-secondary {{CSS.INPUTSUBMIT}}" type="submit">' + '' +
|
||||
'{{get_string "pluginname" component}}</button>' +
|
||||
@ -268,9 +272,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_getPermissions: function() {
|
||||
var permissions = {
|
||||
'canEmbed': false,
|
||||
'canUpload': false,
|
||||
'canUploadAndEbmed': false,
|
||||
'canEmbed': false
|
||||
'canUploadAndEmbed': false
|
||||
};
|
||||
|
||||
if (this.get('host').canShowFilepicker('h5p')) {
|
||||
@ -302,7 +306,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
var permissions = this._getPermissions();
|
||||
|
||||
var fileURL,
|
||||
embedURL,
|
||||
optionDownloadButton,
|
||||
optionEmbedButton,
|
||||
optionCopyrightButton,
|
||||
@ -332,7 +335,7 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
}
|
||||
}
|
||||
} else {
|
||||
embedURL = H5PURL;
|
||||
fileURL = H5PURL;
|
||||
}
|
||||
}
|
||||
|
||||
@ -343,10 +346,9 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
component: COMPONENTNAME,
|
||||
canUpload: permissions.canUpload,
|
||||
canEmbed: permissions.canEmbed,
|
||||
fileURL: fileURL,
|
||||
embedURL: embedURL,
|
||||
canUploadAndEmbed: permissions.canUploadAndEmbed,
|
||||
collapseOptions: collapseOptions,
|
||||
fileURL: fileURL,
|
||||
optionDownloadButton: optionDownloadButton,
|
||||
optionEmbedButton: optionEmbedButton,
|
||||
optionCopyrightButton: optionCopyrightButton
|
||||
@ -372,7 +374,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
if (params.url !== '') {
|
||||
var input = this._form.one(SELECTORS.INPUTH5PFILE);
|
||||
input.set('value', params.url);
|
||||
this._form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}
|
||||
},
|
||||
@ -397,11 +398,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
if (permissions.canUploadAndEmbed) {
|
||||
form.one(SELECTORS.INPUTH5PFILE).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PURL).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
form.one(SELECTORS.INPUTH5PURL).on('change', function() {
|
||||
form.one(SELECTORS.INPUTH5PFILE).set('value', '');
|
||||
this._removeWarnings();
|
||||
}, this);
|
||||
}
|
||||
@ -421,7 +417,6 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
|
||||
/**
|
||||
* Update the h5p in the contenteditable.
|
||||
|
||||
*
|
||||
* @method _setH5P
|
||||
* @param {EventFacade} e
|
||||
@ -429,20 +424,11 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
*/
|
||||
_setH5P: function(e) {
|
||||
var form = this._form,
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value'),
|
||||
h5phtml,
|
||||
host = this.get('host'),
|
||||
h5pfile,
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value'),
|
||||
permissions = this._getPermissions();
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Check if there are any issues.
|
||||
@ -462,68 +448,49 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
addParagraphs = false;
|
||||
}
|
||||
|
||||
if (url !== '') {
|
||||
|
||||
if (h5pfile !== '') {
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
if (this._validEmbed(url)) {
|
||||
var embedtemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
var regex = /<iframe.*?src="(.*?)".*<\/iframe>/;
|
||||
var src = url.match(regex)[1];
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot)) {
|
||||
// It's a local file.
|
||||
var params = '';
|
||||
if (permissions.canUpload) {
|
||||
var options = {};
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
// In case a local H5P embed code is used we need get the url
|
||||
// param form the src and decode it.
|
||||
if (src.startsWith(M.cfg.wwwroot + '/h5p/embed.php')) {
|
||||
src = decodeURIComponent(src.split("url=")[1]);
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
}
|
||||
|
||||
h5phtml = embedtemplate({
|
||||
url: src
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
} else {
|
||||
// It's a URL.
|
||||
var urltemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
h5phtml = urltemplate({
|
||||
url: url
|
||||
url: h5pfile
|
||||
});
|
||||
}
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
} else if (h5pfile !== '') {
|
||||
|
||||
host.setSelection(this._currentSelection);
|
||||
|
||||
var options = {};
|
||||
|
||||
if (form.one(SELECTORS.OPTION_DOWNLOAD_BUTTON).get('checked')) {
|
||||
options['export'] = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_EMBED_BUTTON).get('checked')) {
|
||||
options.embed = '1';
|
||||
}
|
||||
if (form.one(SELECTORS.OPTION_COPYRIGHT_BUTTON).get('checked')) {
|
||||
options.copyright = '1';
|
||||
}
|
||||
|
||||
var params = "";
|
||||
for (var opt in options) {
|
||||
if (params === "" && (h5pfile.indexOf("?") === -1)) {
|
||||
params += "?";
|
||||
} else {
|
||||
params += "&";
|
||||
}
|
||||
params += opt + "=" + options[opt];
|
||||
}
|
||||
|
||||
var h5ptemplate = Y.Handlebars.compile(H5PTEMPLATE);
|
||||
|
||||
h5phtml = h5ptemplate({
|
||||
url: h5pfile + params,
|
||||
addParagraphs: addParagraphs
|
||||
});
|
||||
|
||||
this.get('host').insertContentAtFocusPoint(h5phtml);
|
||||
host.insertContentAtFocusPoint(h5phtml);
|
||||
|
||||
this.markUpdated();
|
||||
}
|
||||
@ -572,30 +539,21 @@ Y.namespace('M.atto_h5p').Button = Y.Base.create('button', Y.M.editor_atto.Edito
|
||||
_updateWarning: function() {
|
||||
var form = this._form,
|
||||
state = true,
|
||||
url,
|
||||
h5pfile,
|
||||
permissions = this._getPermissions();
|
||||
|
||||
|
||||
if (permissions.canEmbed) {
|
||||
url = form.one(SELECTORS.INPUTH5PURL).get('value');
|
||||
if (url !== '') {
|
||||
if (this._validURL(url) || this._validEmbed(url)) {
|
||||
if (permissions.canUpload || permissions.canEmbed) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
if (h5pfile.startsWith(M.cfg.wwwroot) || this._validURL(h5pfile)) {
|
||||
// Only external URLs have to be validated.
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.URLWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
if (permissions.canUpload) {
|
||||
h5pfile = form.one(SELECTORS.INPUTH5PFILE).get('value');
|
||||
if (h5pfile !== '') {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'none');
|
||||
state = false;
|
||||
} else {
|
||||
form.one(SELECTORS.CONTENTWARNING).setStyle('display', 'block');
|
||||
state = true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user