Skip to content
Snippets Groups Projects
Commit 90ddb959 authored by Jamie Stamp's avatar Jamie Stamp
Browse files

Fix #339 improve asset caching on embedded content

parent 1d561ca5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
amd/build/communicator.min.js 0 → 100644
+ 1
− 0
View file @ 90ddb959
define([],function(){var a=function(){this._actionHandlers={},this.registerEventListeners()};return a.prototype._actionHandlers={},a.prototype.on=function(a,b){this._actionHandlers[a]=b},a.prototype.send=function(a,b){void 0===b&&(b={}),b.context="h5p",b.action=a,window.parent.postMessage(b,"*")},a.prototype.registerEventListeners=function(){var a=this;window.addEventListener("message",function(b){window.parent===b.source&&"h5p"===b.data.context&&void 0!==a._actionHandlers[b.data.action]&&a._actionHandlers[b.data.action](b.data)},!1)},new a});
\ No newline at end of file
amd/build/embed.min.js 0 → 100644
+ 1
− 0
View file @ 90ddb959
define(["jquery","mod_hvp/communicator"],function(a,b){a(document).ready(function(){a(".h5p-iframe").ready(function(){var a=document.querySelector(".h5p-iframe"),c=a.contentWindow.H5P;if(c&&c.instances&&c.instances[0]){var d,e=c.instances[0],f=!1;b.on("ready",function(){b.send("hello")}),b.on("hello",function(){f=!0,a.contentDocument.body.style.overflow="hidden",document.body.classList.add("h5p-resizing"),c.trigger(e,"resize")}),b.on("resizePrepared",function(){b.send("resize",{scrollHeight:a.contentDocument.body.scrollHeight})}),b.on("resize",function(){c.trigger(e,"resize")}),c.on(e,"resize",function(){c.isFullscreen||(clearTimeout(d),d=setTimeout(function(){f?b.send("prepareResize",{scrollHeight:a.contentDocument.body.scrollHeight,clientHeight:a.contentDocument.body.clientHeight}):b.send("hello")},0))}),c.trigger(e,"resize")}})})});
\ No newline at end of file
amd/src/communicator.js 0 → 100644
+ 79
− 0
View file @ 90ddb959
// 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/>.
define([], function() {
/**
* 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
*/
var H5PEmbedCommunicator = function() {
this._actionHandlers = {};
this.registerEventListeners();
};
/** @type {Object} Maps actions to functions. */
H5PEmbedCommunicator.prototype._actionHandlers = {};
/**
* Register action listener.
*
* @param {string} action What you are waiting for
* @param {function} handler What you want done
*/
H5PEmbedCommunicator.prototype.on = function(action, handler) {
this._actionHandlers[action] = handler;
};
/**
* Send a message to the all mighty father.
*
* @param {string} action
* @param {Object} [data] payload
*/
H5PEmbedCommunicator.prototype.send = function(action, data) {
if (data === undefined) {
data = {};
}
data.context = 'h5p';
data.action = action;
// Parent origin can be anything.
window.parent.postMessage(data, '*');
};
/**
* Register event listeners for the communicator.
*
* @method registerEventListeners
*/
H5PEmbedCommunicator.prototype.registerEventListeners = function() {
var self = this;
// 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 (self._actionHandlers[event.data.action] !== undefined) {
self._actionHandlers[event.data.action](event.data);
}
}, false);
};
return new H5PEmbedCommunicator();
});
amd/src/embed.js 0 → 100644
+ 90
− 0
View file @ 90ddb959
// 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/>.
define(['jquery', 'mod_hvp/communicator'], function($, H5PEmbedCommunicator) {
// Wait for instances to be initialize.
$(document).ready(function() {
$('.h5p-iframe').ready(function() {
var iFrame = document.querySelector('.h5p-iframe');
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');
});
});
});
embed.css deleted 100644 → 0
+ 0
− 33
View file @ 1d561ca5
body.h5p-embed {
font-family: Sans-Serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body.h5p-embed.h5p-resizing {
overflow: hidden;
}
body.h5p-embed .h5p-container {
overflow: hidden;
}
body.h5p-embed .h5p-content {
font-size: 16px;
line-height: 1.5em;
width: 100%;
height: auto;
}
body.h5p-embed .h5p-fullscreen .h5p-content,
body.h5p-embed .h5p-semi-fullscreen .h5p-content {
height: 100%;
}
body.h5p-embed .clearer,
body.h5p-embed #maincontent,
body.h5p-embed #user-notifications {
display: none;
}
\ No newline at end of file
embed.js deleted 100644 → 0
+ 0
− 137
View file @ 1d561ca5
/* 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}
*/
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');
};
embed.php
+ 1
− 3
View file @ 90ddb959
......@@ -91,9 +91,7 @@ $PAGE->set_heading($course->fullname);
$PAGE->add_body_class('h5p-embed');
$PAGE->set_pagelayout('embedded');
$root = \mod_hvp\view_assets::getsiteroot();
$PAGE->requires->css(new \moodle_url("{$root}/mod/hvp/embed.css"));
$PAGE->requires->js(new \moodle_url("{$root}/mod/hvp/embed.js"));
$PAGE->requires->js_call_amd('mod_hvp/embed');
// Add H5P assets to page.
$view->addassetstopage();
$view->logviewed();
......
styles.css
+ 34
− 0
View file @ 90ddb959
......@@ -84,3 +84,37 @@
.content-upgrade-log {
color: red;
}
body.h5p-embed {
font-family: Sans-Serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body.h5p-embed.h5p-resizing {
overflow: hidden;
}
body.h5p-embed .h5p-container {
overflow: hidden;
}
body.h5p-embed .h5p-content {
font-size: 16px;
line-height: 1.5em;
width: 100%;
height: auto;
}
body.h5p-embed .h5p-fullscreen .h5p-content,
body.h5p-embed .h5p-semi-fullscreen .h5p-content {
height: 100%;
}
body.h5p-embed .clearer,
body.h5p-embed #maincontent,
body.h5p-embed #user-notifications {
display: none;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment