EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2235 h5p: Include resizer scripts

main
Dani Palou 2019-11-25 09:19:26 +01:00
parent fb898f6f05
commit ea2aa48d77
6 changed files with 188 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/filter/providers/delegate.ts
View File

@ -188,6 +188,7 @@ export class CoreFilterDelegate extends CoreDelegate {
}
promise = promise.then(() => {
return Promise.resolve(this.executeFunctionOnEnabled(filter.filter, 'handleHtml',
[container, filter, options, viewContainerRef, component, componentId, siteId])).catch((error) => {
this.logger.error('Error handling HTML' + filter.filter, error);

155
src/core/h5p/assets/moodle/js/embed.js 100644
View File

@ -0,0 +1,155 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/* global H5PEmbedCommunicator:true */
/**
* When embedded the communicator helps talk to the parent page.
* This is a copy of the H5P.communicator, which we need to communicate in this context
*
* @type {H5PEmbedCommunicator}
* @module core_h5p
* @copyright 2019 Joubel AS <contact@joubel.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
H5PEmbedCommunicator = (function() {
/**
* @class
* @private
*/
function Communicator() {
var self = this;
// Maps actions to functions.
var actionHandlers = {};
// Register message listener.
window.addEventListener('message', function receiveMessage(event) {
if (window.parent !== event.source || event.data.context !== 'h5p') {
return; // Only handle messages from parent and in the correct context.
}
if (actionHandlers[event.data.action] !== undefined) {
actionHandlers[event.data.action](event.data);
}
}, false);
/**
* Register action listener.
*
* @param {string} action What you are waiting for
* @param {function} handler What you want done
*/
self.on = function(action, handler) {
actionHandlers[action] = handler;
};
/**
* Send a message to the all mighty father.
*
* @param {string} action
* @param {Object} [data] payload
*/
self.send = function(action, data) {
if (data === undefined) {
data = {};
}
data.context = 'h5p';
data.action = action;
// Parent origin can be anything.
window.parent.postMessage(data, '*');
};
}
return (window.postMessage && window.addEventListener ? new Communicator() : undefined);
})();
document.onreadystatechange = function() {
// Wait for instances to be initialize.
if (document.readyState !== 'complete') {
return;
}
// Check for H5P iFrame.
var iFrame = document.querySelector('.h5p-iframe');
if (!iFrame || !iFrame.contentWindow) {
return;
}
var H5P = iFrame.contentWindow.H5P;
// Check for H5P instances.
if (!H5P || !H5P.instances || !H5P.instances[0]) {
return;
}
var resizeDelay;
var instance = H5P.instances[0];
var parentIsFriendly = false;
// Handle that the resizer is loaded after the iframe.
H5PEmbedCommunicator.on('ready', function() {
H5PEmbedCommunicator.send('hello');
});
// Handle hello message from our parent window.
H5PEmbedCommunicator.on('hello', function() {
// Initial setup/handshake is done.
parentIsFriendly = true;
// Hide scrollbars for correct size.
iFrame.contentDocument.body.style.overflow = 'hidden';
document.body.classList.add('h5p-resizing');
// Content need to be resized to fit the new iframe size.
H5P.trigger(instance, 'resize');
});
// When resize has been prepared tell parent window to resize.
H5PEmbedCommunicator.on('resizePrepared', function() {
H5PEmbedCommunicator.send('resize', {
scrollHeight: iFrame.contentDocument.body.scrollHeight
});
});
H5PEmbedCommunicator.on('resize', function() {
H5P.trigger(instance, 'resize');
});
H5P.on(instance, 'resize', function() {
if (H5P.isFullscreen) {
return; // Skip iframe resize.
}
// Use a delay to make sure iframe is resized to the correct size.
clearTimeout(resizeDelay);
resizeDelay = setTimeout(function() {
// Only resize if the iframe can be resized.
if (parentIsFriendly) {
H5PEmbedCommunicator.send('prepareResize',
{
scrollHeight: iFrame.contentDocument.body.scrollHeight,
clientHeight: iFrame.contentDocument.body.clientHeight
}
);
} else {
H5PEmbedCommunicator.send('hello');
}
}, 0);
});
// Trigger initial resize for instance.
H5P.trigger(instance, 'resize');
};

3
src/core/h5p/components/h5p-player/core-h5p-player.html
View File

@ -9,4 +9,5 @@
<core-download-refresh [status]="state" [enabled]="canDownload" [loading]="calculating" [canTrustDownload]="true" (action)="download()"></core-download-refresh>
</div>
</div>
<core-iframe *ngIf="showPackage" [src]="playerSrc" iframeHeight="230px"></core-iframe>
<core-iframe *ngIf="showPackage" [src]="playerSrc" iframeHeight="auto"></core-iframe>
<script *ngIf="resizeScript && showPackage" type="text/javascript" [src]="resizeScript"></script>

13
src/core/h5p/components/h5p-player/h5p-player.ts
View File

@ -99,6 +99,8 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
let promise;
this.addResizerScript();
if (this.canDownload && (this.state == CoreConstants.DOWNLOADED || this.state == CoreConstants.OUTDATED)) {
// Package is downloaded, use the local URL.
promise = this.h5pProvider.getContentIndexFileUrl(this.urlParams.url).catch((error) => {
@ -154,6 +156,17 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
});
}
/**
* Add the resizer script if it hasn't been added already.
*/
protected addResizerScript(): void {
const script = document.createElement('script');
script.id = 'core-h5p-resizer-script';
script.type = 'text/javascript';
script.src = this.h5pProvider.getResizerScriptUrl();
document.head.appendChild(script);
}
/**
* Check if the package can be downloaded.
*/

22
src/core/h5p/providers/h5p.ts
View File

@ -522,20 +522,22 @@ export class CoreH5PProvider {
let html = '<html><head><title>' + content.title + '</title>' +
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';
// @todo: Load the embed.js to allow communication with the parent window.
// $PAGE->requires->js(new moodle_url('/h5p/js/embed.js'));
// Include the required CSS.
result.cssRequires.forEach((cssUrl) => {
html += '<link rel="stylesheet" type="text/css" href="' + cssUrl + '">';
});
// Add the settings.
html += '<script type="text/javascript">var H5PIntegration = ' + JSON.stringify(result.settings) + '</script>';
html += '<script type="text/javascript">var H5PIntegration = ' +
JSON.stringify(result.settings).replace(/\//g, '\\/') + '</script>';
html += '</head><body>';
// Include the required JS at the beginning of the body, like Moodle web does.
// Load the embed.js to allow communication with the parent window.
html += '<script type="text/javascript" src="' +
this.textUtils.concatenatePaths(this.getCoreH5PPath(), 'moodle/js/embed.js') + '"></script>';
result.jsRequires.forEach((jsUrl) => {
html += '<script type="text/javascript" src="' + jsUrl + '"></script>';
});
@ -1664,8 +1666,16 @@ export class CoreH5PProvider {
* @return The HTML code with the resize script.
*/
protected getResizeCode(): string {
// @todo return '<script src="' + + '"></script>';
return '';
return '<script src="' + this.getResizerScriptUrl() + '"></script>';
}
/**
* Get the URL to the resizer script.
*
* @return URL.
*/
getResizerScriptUrl(): string {
return this.textUtils.concatenatePaths(this.getCoreH5PPath(), 'js/h5p-resizer.js');
}
/**

2
src/providers/utils/dom.ts
View File

@ -385,7 +385,7 @@ export class CoreDomUtilsProvider {
* @return Formatted size. If size is not valid, returns an empty string.
*/
formatPixelsSize(size: any): string {
if (typeof size == 'string' && (size.indexOf('px') > -1 || size.indexOf('%') > -1)) {
if (typeof size == 'string' && (size.indexOf('px') > -1 || size.indexOf('%') > -1 || size == 'auto' || size == 'initial')) {
// It seems to be a valid size.
return size;
}