Updated embed fullscreen. Added support for Safari 7.

namespaces
Frode Petterson 2014-05-22 11:46:28 +02:00
parent 191a6a575c
commit c6ff5c52ed
1 changed files with 61 additions and 43 deletions

View File

@ -15,7 +15,7 @@ var H5P = H5P || (function () {
result += prefix + content[i] + suffix; result += prefix + content[i] + suffix;
} }
return result; return result;
} };
/** /**
* *
@ -25,7 +25,7 @@ var H5P = H5P || (function () {
var data, callback = 'H5P' + id; var data, callback = 'H5P' + id;
// Prevent duplicate loading. // Prevent duplicate loading.
script.removeAttribute('data-h5p') 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) {
@ -64,13 +64,13 @@ var H5P = H5P || (function () {
parent.removeChild(script); parent.removeChild(script);
head.removeChild(data); head.removeChild(data);
delete window[callback]; delete window[callback];
} };
// Create data script // Create data script
data = document.createElement('script'); data = document.createElement('script');
data.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'callback=' + callback; data.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'callback=' + callback;
head.appendChild(data); head.appendChild(data);
} };
/** /**
* 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.
@ -126,15 +126,20 @@ var H5P = H5P || (function () {
}; };
// Detect if we support fullscreen, and what prefix to use. // Detect if we support fullscreen, and what prefix to use.
var fullScreenBrowserPrefix; var fullScreenBrowserPrefix, safariBrowser;
if (document.documentElement.requestFullScreen) { if (document.documentElement.requestFullScreen) {
fullScreenBrowserPrefix = ''; fullScreenBrowserPrefix = '';
} }
else if (document.documentElement.webkitRequestFullScreen else if (document.documentElement.webkitRequestFullScreen
&& navigator.userAgent.indexOf('Android') === -1 // Skip Android && navigator.userAgent.indexOf('Android') === -1 // Skip Android
&& navigator.userAgent.indexOf('Version/') === -1 // Skip Safari
) { ) {
fullScreenBrowserPrefix = 'webkit'; 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) { else if (document.documentElement.mozRequestFullScreen) {
fullScreenBrowserPrefix = 'moz'; fullScreenBrowserPrefix = 'moz';
@ -151,27 +156,50 @@ var H5P = H5P || (function () {
var $classes = $element.add(body); var $classes = $element.add(body);
var $body = $classes.eq(1); var $body = $classes.eq(1);
var done = function (c) { /**
H5P.isFullscreen = false; * Prepare for resize by setting the correct styles.
$classes.removeClass(c); *
* @param {String} classes CSS
*/
var before = function (classes) {
$classes.addClass(classes);
iframe.style.height = '100%';
};
if (H5P.fullScreenBrowserPrefix === undefined) { /**
// Resize content. * Gets called when fullscreen mode has been entered.
if (instance.$ !== undefined) { * Resizes and sets focus on content.
instance.$.trigger('resize'); */
} var entered = function () {
} // Do not rely on window resize events.
instance.$.trigger('resize');
instance.$.trigger('focus');
};
if (exitCallback !== undefined) { /**
exitCallback(); * 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; H5P.isFullscreen = true;
if (fullScreenBrowserPrefix === undefined) { if (fullScreenBrowserPrefix === undefined) {
// Create semi fullscreen. // Create semi fullscreen.
$classes.addClass('h5p-semi-fullscreen'); before('h5p-semi-fullscreen');
iframe.style.position = 'fixed'; iframe.style.position = 'fixed';
var $disable = $element.prepend('<a href="#" class="h5p-disable-fullscreen" title="Disable fullscreen"></a>').children(':first'); var $disable = $element.prepend('<a href="#" class="h5p-disable-fullscreen" title="Disable fullscreen"></a>').children(':first');
@ -189,17 +217,22 @@ var H5P = H5P || (function () {
}; };
$disable.click(disableSemiFullscreen); $disable.click(disableSemiFullscreen);
$body.keyup(keyup); // TODO: Does not work with iframe's $! $body.keyup(keyup); // TODO: Does not work with iframe's $!
entered();
} }
else { else {
// Create real fullscreen. // Create real fullscreen.
before('h5p-fullscreen');
var first, eventName = (fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : fullScreenBrowserPrefix + 'fullscreenchange'); var first, eventName = (fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : fullScreenBrowserPrefix + 'fullscreenchange');
document.addEventListener(eventName, function () { document.addEventListener(eventName, function () {
if (first === undefined) { if (first === undefined) {
// We are entering fullscreen mode
first = false; first = false;
entered();
return; return;
} }
// We are exiting fullscreen
done('h5p-fullscreen'); done('h5p-fullscreen');
document.removeEventListener(eventName, arguments.callee, false); document.removeEventListener(eventName, arguments.callee, false);
}); });
@ -209,24 +242,9 @@ var H5P = H5P || (function () {
} }
else { else {
var method = (fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : fullScreenBrowserPrefix + 'RequestFullScreen'); var method = (fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : fullScreenBrowserPrefix + 'RequestFullScreen');
var params = (fullScreenBrowserPrefix === 'webkit' ? Element.ALLOW_KEYBOARD_INPUT : undefined); var params = (fullScreenBrowserPrefix === 'webkit' && safariBrowser === 0 ? Element.ALLOW_KEYBOARD_INPUT : undefined);
iframe[method](params); iframe[method](params);
} }
$classes.addClass('h5p-fullscreen');
}
iframe.style.height = '100%';
if (H5P.fullScreenBrowserPrefix === undefined) {
// Resize content.
if (instance.$ !== undefined) {
instance.$.trigger('resize', [true]);
}
}
// Allow H5P to set focus when entering fullscreen mode
if (instance.focus !== undefined) {
instance.focus();
} }
}; };