Make old embed code insert new.
Frode Petterson
parent
f2595b2bce
commit
aac10b86fa
254
js/h5p-embed.js
254
js/h5p-embed.js
|
|
@ -1,69 +1,27 @@
|
||||||
/*jshint multistr: true */
|
/*jshint multistr: true */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
* Converts old script tag embed to iframe
|
||||||
*/
|
*/
|
||||||
var H5P = H5P || (function () {
|
var H5POldEmbed = H5POldEmbed || (function () {
|
||||||
var head = document.getElementsByTagName('head')[0];
|
var head = document.getElementsByTagName('head')[0];
|
||||||
var contentId = 0;
|
var resizer = false;
|
||||||
var contents = {};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Wraps multiple content between a prefix and a suffix.
|
* Loads the resizing script
|
||||||
*/
|
*/
|
||||||
var wrap = function (prefix, content, suffix) {
|
var loadResizer = function (url) {
|
||||||
var result = '';
|
var data, callback = 'H5POldEmbed';
|
||||||
for (var i = 0; i < content.length; i++) {
|
resizer = true;
|
||||||
result += prefix + content[i] + suffix;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
var loadContent = function (id, script) {
|
|
||||||
var url = script.getAttribute('data-h5p');
|
|
||||||
var data, callback = 'H5P' + id;
|
|
||||||
|
|
||||||
// Prevent duplicate loading.
|
|
||||||
script.removeAttribute('data-h5p');
|
|
||||||
|
|
||||||
// Callback for when content data is loaded.
|
// Callback for when content data is loaded.
|
||||||
window[callback] = function (content) {
|
window[callback] = function (content) {
|
||||||
contents[id] = content;
|
// Add resizing script to head
|
||||||
|
var resizer = document.createElement('script');
|
||||||
var iframe = document.createElement('iframe');
|
resizer.src = content;
|
||||||
var parent = script.parentNode;
|
head.appendChild(resizer);
|
||||||
parent.insertBefore(iframe, script);
|
|
||||||
|
|
||||||
iframe.id = 'h5p-iframe-' + id;
|
|
||||||
iframe.style.display = 'block';
|
|
||||||
iframe.style.width = '100%';
|
|
||||||
iframe.style.height = '1px';
|
|
||||||
iframe.style.border = 'none';
|
|
||||||
iframe.style.zIndex = 101;
|
|
||||||
iframe.style.top = 0;
|
|
||||||
iframe.style.left = 0;
|
|
||||||
iframe.className = 'h5p-iframe';
|
|
||||||
iframe.setAttribute('frameBorder', '0');
|
|
||||||
iframe.contentDocument.open();
|
|
||||||
iframe.contentDocument.write('\
|
|
||||||
<!doctype html><html class="h5p-iframe">\
|
|
||||||
<head>\
|
|
||||||
<script>\
|
|
||||||
var H5PIntegration = window.parent.H5P.getIntegration(' + id + ');\
|
|
||||||
</script>\
|
|
||||||
' + wrap('<link rel="stylesheet" href="', content.styles, '">') + '\
|
|
||||||
' + wrap('<script src="', content.scripts, '"></script>') + '\
|
|
||||||
</head><body>\
|
|
||||||
<div class="h5p-content" data-class="' + content.library + '" data-content-id="' + id + '"/>\
|
|
||||||
</body></html>');
|
|
||||||
iframe.contentDocument.close();
|
|
||||||
iframe.contentDocument.documentElement.style.overflow = 'hidden';
|
|
||||||
|
|
||||||
// Clean up
|
// Clean up
|
||||||
parent.removeChild(script);
|
|
||||||
head.removeChild(data);
|
head.removeChild(data);
|
||||||
delete window[callback];
|
delete window[callback];
|
||||||
};
|
};
|
||||||
|
|
@ -74,183 +32,45 @@ var H5P = H5P || (function () {
|
||||||
head.appendChild(data);
|
head.appendChild(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Replaced script tag with iframe
|
||||||
|
*/
|
||||||
|
var addIframe = function (script) {
|
||||||
|
// Add iframe
|
||||||
|
var iframe = document.createElement('iframe');
|
||||||
|
iframe.src = script.getAttribute('data-h5p');
|
||||||
|
iframe.frameBorder = false;
|
||||||
|
iframe.allowFullscreen = true;
|
||||||
|
var parent = script.parentNode;
|
||||||
|
parent.insertBefore(iframe, script);
|
||||||
|
parent.removeChild(script);
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Go throught all script tags with the data-h5p attribute and load content.
|
* Go throught all script tags with the data-h5p attribute and load content.
|
||||||
*/
|
*/
|
||||||
function H5P() {
|
function H5POldEmbed() {
|
||||||
var scripts = document.getElementsByTagName('script');
|
var scripts = document.getElementsByTagName('script');
|
||||||
var h5ps = []; // Use seperate array since scripts grow in size.
|
var h5ps = []; // Use seperate array since scripts grow in size.
|
||||||
for (var i = 0; i < scripts.length; i++) {
|
for (var i = 0; i < scripts.length; i++) {
|
||||||
var script = scripts[i];
|
var script = scripts[i];
|
||||||
if (script.hasAttribute('data-h5p')) {
|
if (script.src.indexOf('/h5p-resizer.js') !== -1) {
|
||||||
|
resizer = true;
|
||||||
|
}
|
||||||
|
else if (script.hasAttribute('data-h5p')) {
|
||||||
h5ps.push(script);
|
h5ps.push(script);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
for (i = 0; i < h5ps.length; i++) {
|
for (i = 0; i < h5ps.length; i++) {
|
||||||
loadContent(contentId, h5ps[i]);
|
if (!resizer) {
|
||||||
contentId++;
|
loadResizer(h5ps[i].getAttribute('data-h5p'));
|
||||||
|
}
|
||||||
|
addIframe(h5ps[i]);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
return H5POldEmbed;
|
||||||
* Return integration object
|
|
||||||
*/
|
|
||||||
H5P.getIntegration = function (id) {
|
|
||||||
var content = contents[id];
|
|
||||||
return {
|
|
||||||
getJsonContent: function () {
|
|
||||||
return content.params;
|
|
||||||
},
|
|
||||||
getContentPath: function () {
|
|
||||||
return content.path + 'content/' + content.id + '/';
|
|
||||||
},
|
|
||||||
getFullscreen: function () {
|
|
||||||
return content.fullscreen;
|
|
||||||
},
|
|
||||||
getLibraryPath: function (library) {
|
|
||||||
return content.path + 'libraries/' + library;
|
|
||||||
},
|
|
||||||
getContentData: function () {
|
|
||||||
return {
|
|
||||||
library: content.library,
|
|
||||||
jsonContent: content.params,
|
|
||||||
fullScreen: content.fullscreen,
|
|
||||||
exportUrl: content.exportUrl,
|
|
||||||
embedCode: content.embedCode
|
|
||||||
};
|
|
||||||
},
|
|
||||||
i18n: content.i18n,
|
|
||||||
showH5PIconInActionBar: function () {
|
|
||||||
// Always show H5P-icon when embedding
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Detect if we support fullscreen, and what prefix to use.
|
|
||||||
var fullScreenBrowserPrefix, safariBrowser;
|
|
||||||
if (document.documentElement.requestFullScreen) {
|
|
||||||
fullScreenBrowserPrefix = '';
|
|
||||||
}
|
|
||||||
else if (document.documentElement.webkitRequestFullScreen &&
|
|
||||||
navigator.userAgent.indexOf('Android') === -1 // Skip Android
|
|
||||||
) {
|
|
||||||
safariBrowser = navigator.userAgent.match(/Version\/(\d)/);
|
|
||||||
safariBrowser = (safariBrowser === null ? 0 : parseInt(safariBrowser[1]));
|
|
||||||
|
|
||||||
// Do not allow fullscreen for safari < 7.
|
|
||||||
if (safariBrowser === 0 || safariBrowser > 6) {
|
|
||||||
fullScreenBrowserPrefix = 'webkit';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (document.documentElement.mozRequestFullScreen) {
|
|
||||||
fullScreenBrowserPrefix = 'moz';
|
|
||||||
}
|
|
||||||
else if (document.documentElement.msRequestFullscreen) {
|
|
||||||
fullScreenBrowserPrefix = 'ms';
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Enter fullscreen mode.
|
|
||||||
*/
|
|
||||||
H5P.fullScreen = function ($element, instance, exitCallback, body) {
|
|
||||||
var iframe = document.getElementById('h5p-iframe-' + $element.parent().data('content-id'));
|
|
||||||
var $classes = $element.add(body);
|
|
||||||
var $body = $classes.eq(1);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prepare for resize by setting the correct styles.
|
|
||||||
*
|
|
||||||
* @param {String} classes CSS
|
|
||||||
*/
|
|
||||||
var before = function (classes) {
|
|
||||||
$classes.addClass(classes);
|
|
||||||
iframe.style.height = '100%';
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets called when fullscreen mode has been entered.
|
|
||||||
* Resizes and sets focus on content.
|
|
||||||
*/
|
|
||||||
var entered = function () {
|
|
||||||
// Do not rely on window resize events.
|
|
||||||
instance.$.trigger('resize');
|
|
||||||
instance.$.trigger('focus');
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets called when fullscreen mode has been exited.
|
|
||||||
* Resizes and sets focus on content.
|
|
||||||
*
|
|
||||||
* @param {String} classes CSS
|
|
||||||
*/
|
|
||||||
var done = function (classes) {
|
|
||||||
H5P.isFullscreen = false;
|
|
||||||
$classes.removeClass(classes);
|
|
||||||
|
|
||||||
// Do not rely on window resize events.
|
|
||||||
instance.$.trigger('resize');
|
|
||||||
instance.$.trigger('focus');
|
|
||||||
|
|
||||||
if (exitCallback !== undefined) {
|
|
||||||
exitCallback();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
H5P.isFullscreen = true;
|
|
||||||
if (fullScreenBrowserPrefix === undefined) {
|
|
||||||
// Create semi fullscreen.
|
|
||||||
|
|
||||||
before('h5p-semi-fullscreen');
|
|
||||||
iframe.style.position = 'fixed';
|
|
||||||
|
|
||||||
var $disable = $element.prepend('<a href="#" class="h5p-disable-fullscreen" title="Disable fullscreen"></a>').children(':first');
|
|
||||||
var keyup, disableSemiFullscreen = function () {
|
|
||||||
$disable.remove();
|
|
||||||
$body.unbind('keyup', keyup);
|
|
||||||
iframe.style.position = 'static';
|
|
||||||
done('h5p-semi-fullscreen');
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
keyup = function (event) {
|
|
||||||
if (event.keyCode === 27) {
|
|
||||||
disableSemiFullscreen();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$disable.click(disableSemiFullscreen);
|
|
||||||
$body.keyup(keyup); // TODO: Does not work with iframe's $!
|
|
||||||
entered();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Create real fullscreen.
|
|
||||||
|
|
||||||
before('h5p-fullscreen');
|
|
||||||
var first, eventName = (fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : fullScreenBrowserPrefix + 'fullscreenchange');
|
|
||||||
document.addEventListener(eventName, function () {
|
|
||||||
if (first === undefined) {
|
|
||||||
// We are entering fullscreen mode
|
|
||||||
first = false;
|
|
||||||
entered();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We are exiting fullscreen
|
|
||||||
done('h5p-fullscreen');
|
|
||||||
document.removeEventListener(eventName, arguments.callee, false);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (fullScreenBrowserPrefix === '') {
|
|
||||||
iframe.requestFullScreen();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var method = (fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : fullScreenBrowserPrefix + 'RequestFullScreen');
|
|
||||||
var params = (fullScreenBrowserPrefix === 'webkit' && safariBrowser === 0 ? Element.ALLOW_KEYBOARD_INPUT : undefined);
|
|
||||||
iframe[method](params);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return H5P;
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
new H5P();
|
new H5POldEmbed();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue