From 16767e690d6c338e412dd20028bd1bff367a9d0c Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Wed, 10 Apr 2013 17:08:57 +0200 Subject: [PATCH] Added responsive design to CP. Added fullscreen option to H5P module. --- h5p.classes.php | 3 +++ js/h5p.js | 56 +++++++++++++++++++++++++++++++++++++++++++++++++ styles/h5p.css | 31 +++++++++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 styles/h5p.css diff --git a/h5p.classes.php b/h5p.classes.php index 8d91310..d07b8f7 100644 --- a/h5p.classes.php +++ b/h5p.classes.php @@ -887,6 +887,9 @@ class H5PStorage { */ class H5PCore { + public static $styles = array( + 'styles/h5p.css', + ); public static $scripts = array( 'js/jquery.js', 'js/h5p.js', diff --git a/js/h5p.js b/js/h5p.js index a95d2c1..6364317 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -4,14 +4,70 @@ var H5P = H5P || {}; // Initialize H5P content // Scans for ".h5p-content" H5P.init = function () { + if (H5P.$window === undefined) { + H5P.$window = H5P.jQuery(window); + } + if (H5P.$body === undefined) { + H5P.$body = H5P.jQuery('body'); + } + H5P.jQuery(".h5p-content").each(function (idx, el) { var $el = H5P.jQuery(el); var contentId = $el.data('content-id'); var obj = new (H5P.classFromName($el.data('class')))(H5P.jQuery.parseJSON(H5PIntegration.getJsonContent(contentId)), contentId); obj.attach($el); + + if (true/* fullscreen */) { + H5P.jQuery('
Enable fullscreen
').insertBefore($el).children().click(function () { + if (H5P.enableFullScreen($el[0]) === false) { + // Create semi fullscreen. + $el.add(H5P.$body).addClass('h5p-semi-fullscreen'); + var $disable = H5P.jQuery('Disable fullscreen').appendTo($el); + var keyup, disableSemiFullscreen = function () { + $el.add(H5P.$body).removeClass('h5p-semi-fullscreen'); + $disable.remove(); + H5P.$body.unbind('keyup', keyup); + + if (obj.resize !== undefined) { + obj.resize(false); + } + + return false; + }; + keyup = function (event) { + if (event.keyCode === 27) { + disableSemiFullscreen(); + } + }; + $disable.click(disableSemiFullscreen); + H5P.$body.keyup(keyup); + } + if (obj.resize !== undefined) { + obj.resize(true); + } + + return false; + }); + } }); }; +H5P.enableFullScreen = function (element) { //return false; + if (element.requestFullScreen) { + return element.requestFullScreen(); + } + if (element.webkitRequestFullScreen) { + return element.webkitRequestFullScreen(); + } + if (element.mozRequestFullScreen) { + return element.mozRequestFullScreen(); + } + if (element.msRequestFullScreen) { + return element.msRequestFullScreen(); + } + return false; +}; + H5P.getContentPath = function(contentId) { // TODO: Rewrite or remove... H5P.getContentPath = H5PIntegration.getContentPath would probably work f.i. return H5PIntegration.getContentPath(contentId); diff --git a/styles/h5p.css b/styles/h5p.css new file mode 100644 index 0000000..19c8060 --- /dev/null +++ b/styles/h5p.css @@ -0,0 +1,31 @@ +body.h5p-semi-fullscreen { + overflow: hidden; +} +.h5p-content { + width: 100%; + height: 100%; + background: #fefefe; +} +div.h5p-semi-fullscreen { + position: fixed; + top: 0; + left: 0; + z-index: 101; +} +.h5p-content-controls { + overflow: hidden; +} +.h5p-enable-fullscreen, .h5p-disable-fullscreen { + float: right; + display: block; + padding: 8px 10px; + background: #fefefe; + opacity: 0.8; + filter: alpha(opacity = 80); +} +.h5p-disable-fullscreen { + position: absolute; + right: 0; + top: 0; + z-index: 201; +} \ No newline at end of file