EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make fullscreen button keyboard accessible 

HFP-1199
pull/40/head
thomasmars 2017-06-22 10:56:15 +02:00
parent 46d772cb51
commit d2746b18b4
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/h5p.js
View File

@ -133,9 +133,26 @@ H5P.init = function (target) {
// Check if we should add and display a fullscreen button for this H5P.
if (contentData.fullScreen == 1 && H5P.fullscreenSupported) {
H5P.jQuery('<div class="h5p-content-controls"><div role="button" tabindex="0" class="h5p-enable-fullscreen" title="' + H5P.t('fullscreen') + '"></div></div>').prependTo($container).children().click(function () {
H5P.fullScreen($container, instance);
});
H5P.jQuery(
'<div class="h5p-content-controls">' +
'<div role="button" ' +
'tabindex="0" ' +
'class="h5p-enable-fullscreen" ' +
'title="' + H5P.t('fullscreen') + '">' +
'</div>' +
'</div>')
.prependTo($container)
.children()
.click(function () {
H5P.fullScreen($container, instance);
})
.keydown(function (e) {
if (e.which === 32 || e.which === 13) {
H5P.fullScreen($container, instance);
return false;
}
})
;
}
/**

9
styles/h5p.css
View File

@ -108,13 +108,20 @@ body.h5p-semi-fullscreen {
width: 1.125em;
height: 0.925em;
text-indent: -0.0875em;
outline: none;
}
.h5p-disable-fullscreen {
line-height: 0.925em;
width: 1.1em;
height: 0.9em;
}
.h5p-enable-fullscreen:focus,
.h5p-disable-fullscreen:focus {
outline-style: solid;
outline-width: 1px;
outline-offset: 0.25em;
}
.h5p-enable-fullscreen:hover, .h5p-disable-fullscreen:hover {
background: rgba(0,0,0,0.5);
}