From cc121b2f5345db6ba7e5510a84361b128747efb8 Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Thu, 12 May 2016 15:52:37 +0200 Subject: [PATCH 1/7] Bugfix: Must be able to run from CLI --- h5p.classes.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/h5p.classes.php b/h5p.classes.php index 93c4213..7f87f7c 100644 --- a/h5p.classes.php +++ b/h5p.classes.php @@ -2469,7 +2469,9 @@ class H5PCore { // Determine remote/visitor origin if ($type === 'network' || - ($type === 'local' && !preg_match('/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/i', $_SERVER['REMOTE_ADDR']))) { + ($type === 'local' && + isset($_SERVER['REMOTE_ADDR']) && + !preg_match('/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/i', $_SERVER['REMOTE_ADDR']))) { if (isset($_SERVER['REMOTE_ADDR']) && filter_var($_SERVER['REMOTE_ADDR'], FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE)) { // Internet $this->h5pF->setOption('site_type', 'internet'); From ed13203254d162036e05e83d540cfaa9347b78d1 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Mon, 23 May 2016 14:34:56 +0200 Subject: [PATCH 2/7] Use buttons instead of anchors in Confirmation Dialog. HFJ-1930 (cherry picked from commit 27bc158) --- js/h5p-confirmation-dialog.js | 71 ++++++++++++------------------ styles/h5p-confirmation-dialog.css | 10 ++--- styles/h5p-core-button.css | 25 ++++++----- 3 files changed, 47 insertions(+), 59 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 84c8827..c948192 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -24,6 +24,26 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { options.cancelText = options.cancelText || H5P.t('cancelLabel'); options.confirmText = options.confirmText || H5P.t('confirmLabel'); + /** + * Handle confirming event + * @param {Event} e + */ + function dialogConfirmed(e) { + self.hide(); + self.trigger('confirmed'); + e.preventDefault(); + } + + /** + * Handle dialog canceled + * @param {Event} e + */ + function dialogCanceled(e) { + self.hide(); + self.trigger('canceled'); + e.preventDefault(); + } + // Offset of exit button var exitButtonOffset = 2 * 16; var shadowOffset = 8; @@ -69,70 +89,37 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { body.appendChild(buttons); // Cancel button - var cancelButton = document.createElement('a'); + var cancelButton = document.createElement('button'); cancelButton.classList.add('h5p-core-cancel-button'); - cancelButton.href = '#'; cancelButton.textContent = options.cancelText; - cancelButton.onclick = function (e) { - self.hide(); - self.trigger('canceled'); - e.preventDefault(); - }; + cancelButton.onclick = dialogCanceled; cancelButton.onkeydown = function (e) { if (e.which === 32) { // Space - // Prevent jumping - e.preventDefault(); - } - else if (e.which === 13) { // Enter - self.hide(); - self.trigger('canceled'); - e.preventDefault(); + dialogCanceled(e); } }; buttons.appendChild(cancelButton); // Confirm button - var confirmButton = document.createElement('a'); + var confirmButton = document.createElement('button'); confirmButton.classList.add('h5p-core-button', 'h5p-confirmation-dialog-confirm-button'); - confirmButton.href = '#'; confirmButton.textContent = options.confirmText; - confirmButton.onclick = function (e) { - self.hide(); - self.trigger('confirmed'); - e.preventDefault(); - }; + confirmButton.onclick = dialogConfirmed; confirmButton.onkeydown = function (e) { if (e.which === 32) { // Space - // Prevent jumping - e.preventDefault(); - } - else if (e.which === 13) { // Enter - self.hide(); - self.trigger('confirmed'); - e.preventDefault(); + dialogConfirmed(e); } }; buttons.appendChild(confirmButton); // Exit button - var exitButton = document.createElement('a'); - exitButton.href = '#'; + var exitButton = document.createElement('button'); exitButton.classList.add('h5p-confirmation-dialog-exit'); - exitButton.onclick = function (e) { - self.hide(); - self.trigger('canceled'); - e.preventDefault(); - }; + exitButton.onclick = dialogCanceled; exitButton.onkeydown = function (e) { if (e.which === 32) { // Space - // Prevent jumping - e.preventDefault(); - } - else if (e.which === 13) { // Enter - self.hide(); - self.trigger('canceled'); - e.preventDefault(); + dialogCanceled(e); } }; popup.appendChild(exitButton); diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index 093a6ad..2923b17 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -81,9 +81,9 @@ float: right; } -a.h5p-confirmation-dialog-exit:visited, -a.h5p-confirmation-dialog-exit:link, -a.h5p-confirmation-dialog-exit { +button.h5p-confirmation-dialog-exit:visited, +button.h5p-confirmation-dialog-exit:link, +button.h5p-confirmation-dialog-exit { position: absolute; background: none; border: none; @@ -95,8 +95,8 @@ a.h5p-confirmation-dialog-exit { text-decoration: none; } -a.h5p-confirmation-dialog-exit:focus, -a.h5p-confirmation-dialog-exit:hover { +button.h5p-confirmation-dialog-exit:focus, +button.h5p-confirmation-dialog-exit:hover { color: #555; } diff --git a/styles/h5p-core-button.css b/styles/h5p-core-button.css index b05c423..04f33a3 100644 --- a/styles/h5p-core-button.css +++ b/styles/h5p-core-button.css @@ -1,6 +1,6 @@ -a.h5p-core-button:visited, -a.h5p-core-button:link, -a.h5p-core-button { +button.h5p-core-button:visited, +button.h5p-core-button:link, +button.h5p-core-button { font-size: 1em; line-height: 1.2; padding: 0.5em 1.25em; @@ -20,15 +20,15 @@ a.h5p-core-button { vertical-align: baseline; text-decoration: none; } -a.h5p-core-button:hover, -a.h5p-core-button:focus { +button.h5p-core-button:hover, +button.h5p-core-button:focus { background: #1356a3; color: #fff; text-decoration: none; -webkit-transition: initial; transition: initial; } -a.h5p-core-button:active { +button.h5p-core-button:active { position: relative; background: #104888; @@ -37,7 +37,7 @@ a.h5p-core-button:active { box-shadow: inset 0 4px 0 #0e407a; } -a.h5p-core-button:before { +button.h5p-core-button:before { font-family: 'H5P'; padding-right: 0.15em; font-size: 1.5em; @@ -45,9 +45,10 @@ a.h5p-core-button:before { line-height: 0.7; } -a.h5p-core-cancel-button:visited, -a.h5p-core-cancel-button:link, -a.h5p-core-cancel-button { +button.h5p-core-cancel-button:visited, +button.h5p-core-cancel-button:link, +button.h5p-core-cancel-button { + border: none; background: none; color: #a00; margin-right: 1em; @@ -55,8 +56,8 @@ a.h5p-core-cancel-button { text-decoration: none; } -a.h5p-core-cancel-button:hover, -a.h5p-core-cancel-button:focus { +button.h5p-core-cancel-button:hover, +button.h5p-core-cancel-button:focus { background: none; border: none; color: #e40000; From f6ce5dff74ae5ebf19e72fb0868a599e446b3205 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 24 May 2016 11:18:42 +0200 Subject: [PATCH 3/7] Added pointer cursor for core cancel button. HFJ-1930 (cherry picked from commit c6b3b06) --- styles/h5p-core-button.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/h5p-core-button.css b/styles/h5p-core-button.css index 04f33a3..3ba392e 100644 --- a/styles/h5p-core-button.css +++ b/styles/h5p-core-button.css @@ -54,6 +54,7 @@ button.h5p-core-cancel-button { margin-right: 1em; font-size: 1em; text-decoration: none; + cursor: pointer; } button.h5p-core-cancel-button:hover, From e3b29a21999f1bc915ebc4f10b84257dffa3da51 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Mon, 6 Jun 2016 14:57:51 +0200 Subject: [PATCH 4/7] Accessibility - reads confirmation dialog text on show. HFJ-1992 --- js/h5p-confirmation-dialog.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index c948192..9badb8e 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -80,6 +80,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Popup text var text = document.createElement('div'); text.classList.add('h5p-confirmation-dialog-text'); + text.setAttribute('role', 'alert'); text.innerHTML = options.dialogText; body.appendChild(text); @@ -116,6 +117,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Exit button var exitButton = document.createElement('button'); exitButton.classList.add('h5p-confirmation-dialog-exit'); + exitButton.title = options.cancelText; exitButton.onclick = dialogCanceled; exitButton.onkeydown = function (e) { if (e.which === 32) { // Space From 7807b8af68a1dfabe8e7c71d238ac139e3c96a39 Mon Sep 17 00:00:00 2001 From: Paal Joergensen Date: Mon, 6 Jun 2016 16:09:35 +0200 Subject: [PATCH 5/7] Making sure reset dialog is only shown once [HFJ-1989] --- js/h5p.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/h5p.js b/js/h5p.js index 5a1c9e1..1511ee8 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -103,6 +103,7 @@ H5P.init = function (target) { var $container = H5P.jQuery('
').appendTo($element); var contentId = $element.data('content-id'); var contentData = H5PIntegration.contents['cid-' + contentId]; + var resetUserState = false; if (contentData === undefined) { return H5P.error('No data for content id ' + contentId + '. Perhaps the library is gone?'); } @@ -118,6 +119,7 @@ H5P.init = function (target) { }; } else if (previousState === null && H5PIntegration.saveFreq) { + resetUserState = true; // Content has been reset. Display dialog. delete contentData.contentUserData; var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '

' + H5P.t('contentChanged') + '

' + H5P.t('startingOver') + '

OK
', $container); @@ -137,6 +139,10 @@ H5P.init = function (target) { // Create new instance. var instance = H5P.newRunnable(library, contentId, $container, true, {standalone: true}); + if (resetUserState) { + H5P.deleteUserData(contentId, 'state', instance.subContentId); + } + // Check if we should add and display a fullscreen button for this H5P. if (contentData.fullScreen == 1 && H5P.canHasFullScreen) { H5P.jQuery('
').prependTo($container).children().click(function () { From 87658ed42b786d214fed222c667986ecdc1051ca Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 7 Jun 2016 11:04:21 +0200 Subject: [PATCH 6/7] Accessibility - reads confirmation dialog text on show. HFJ-1992 --- js/h5p-confirmation-dialog.js | 51 +++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 9badb8e..f2b6c61 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -44,6 +44,16 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { e.preventDefault(); } + /** + * Flow focus to element + * @param {HTMLElement} element Next element to be focused + * @param {Event} e Original tab event + */ + function flowTo(element, e) { + element.focus(); + e.preventDefault(); + } + // Offset of exit button var exitButtonOffset = 2 * 16; var shadowOffset = 8; @@ -59,7 +69,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Create outer popup var popup = document.createElement('div'); popup.classList.add('h5p-confirmation-dialog-popup', 'hidden'); + popup.setAttribute('role', 'dialog'); popupBackground.appendChild(popup); + popup.onkeydown = function (e) { + if (e.which === 27) {// Esc key + // Exit dialog + dialogCanceled(e); + } + }; // Popup header var header = document.createElement('div'); @@ -93,19 +110,31 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { var cancelButton = document.createElement('button'); cancelButton.classList.add('h5p-core-cancel-button'); cancelButton.textContent = options.cancelText; - cancelButton.onclick = dialogCanceled; - cancelButton.onkeydown = function (e) { - if (e.which === 32) { // Space - dialogCanceled(e); - } - }; - buttons.appendChild(cancelButton); // Confirm button var confirmButton = document.createElement('button'); confirmButton.classList.add('h5p-core-button', 'h5p-confirmation-dialog-confirm-button'); confirmButton.textContent = options.confirmText; + + // Exit button + var exitButton = document.createElement('button'); + exitButton.classList.add('h5p-confirmation-dialog-exit'); + exitButton.title = options.cancelText; + + // Cancel handler + cancelButton.onclick = dialogCanceled; + cancelButton.onkeydown = function (e) { + if (e.which === 32) { // Space + dialogCanceled(e); + } + else if (e.which === 9 && e.shiftKey) { // Shift-tab + flowTo(exitButton, e); + } + }; + buttons.appendChild(cancelButton); + + // Confirm handler confirmButton.onclick = dialogConfirmed; confirmButton.onkeydown = function (e) { if (e.which === 32) { // Space @@ -114,15 +143,15 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { }; buttons.appendChild(confirmButton); - // Exit button - var exitButton = document.createElement('button'); - exitButton.classList.add('h5p-confirmation-dialog-exit'); - exitButton.title = options.cancelText; + // Exit handler exitButton.onclick = dialogCanceled; exitButton.onkeydown = function (e) { if (e.which === 32) { // Space dialogCanceled(e); } + else if (e.which === 9 && !e.shiftKey) { // Tab + flowTo(cancelButton, e); + } }; popup.appendChild(exitButton); From f4cee6e2847a8c48ff1c3063825a62f588d38cd8 Mon Sep 17 00:00:00 2001 From: Paal Joergensen Date: Tue, 7 Jun 2016 11:09:42 +0200 Subject: [PATCH 7/7] Moved deletion of content user data to after dialog is closed [HFJ-1989] --- js/h5p.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/js/h5p.js b/js/h5p.js index 1511ee8..5de66e2 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -103,7 +103,6 @@ H5P.init = function (target) { var $container = H5P.jQuery('
').appendTo($element); var contentId = $element.data('content-id'); var contentData = H5PIntegration.contents['cid-' + contentId]; - var resetUserState = false; if (contentData === undefined) { return H5P.error('No data for content id ' + contentId + '. Perhaps the library is gone?'); } @@ -119,18 +118,19 @@ H5P.init = function (target) { }; } else if (previousState === null && H5PIntegration.saveFreq) { - resetUserState = true; // Content has been reset. Display dialog. delete contentData.contentUserData; var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '

' + H5P.t('contentChanged') + '

' + H5P.t('startingOver') + '

OK
', $container); H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) { - $dialog.find('.h5p-dialog-ok-button').click(function () { - dialog.close(); - }).keypress(function (event) { - if (event.which === 32) { + + var closeDialog = function (event) { + if (event.type === 'click' || event.which === 32) { dialog.close(); + H5P.deleteUserData(contentId, 'state', 0); } - }); + }; + + $dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog); }); dialog.open(); } @@ -139,10 +139,6 @@ H5P.init = function (target) { // Create new instance. var instance = H5P.newRunnable(library, contentId, $container, true, {standalone: true}); - if (resetUserState) { - H5P.deleteUserData(contentId, 'state', instance.subContentId); - } - // Check if we should add and display a fullscreen button for this H5P. if (contentData.fullScreen == 1 && H5P.canHasFullScreen) { H5P.jQuery('
').prependTo($container).children().click(function () {