Merge branch 'improved-file-handling' of https://github.com/h5p/h5p-php-library into improved-file-handling

h5p.classes.php

@@ -1055,24 +1055,27 @@ class H5PValidator {
     $valid = $this->isValidRequiredH5pData($h5pData, $required, $library_name);
     $valid = $this->isValidOptionalH5pData($h5pData, $optional, $library_name) && $valid;
 
-    // Test library core version requirement.  If no requirement is set,
+    // Check the library's required API version of Core.
-    // this implicitly means 1.0, which shall work on newer versions
+    // If no requirement is set this implicitly means 1.0.
-    // too.
     if (isset($h5pData['coreApi']) && !empty($h5pData['coreApi'])) {
       if (($h5pData['coreApi']['majorVersion'] > H5PCore::$coreApi['majorVersion']) ||
           ( ($h5pData['coreApi']['majorVersion'] == H5PCore::$coreApi['majorVersion']) &&
-            ($h5pData['coreApi']['minorVersion'] > H5PCore::$coreApi['minorVersion'])))
+            ($h5pData['coreApi']['minorVersion'] > H5PCore::$coreApi['minorVersion']) )) {
-      {
+
         $this->h5pF->setErrorMessage(
-          $this->h5pF->t('The library "%libraryName" requires H5P %requiredVersion, but only H5P %coreApi is installed.',
+            $this->h5pF->t('The system was unable to install the <em>%component</em> component from the package, it requires a newer version of the H5P plugin. This site is currently running version %current, whereas the required version is %required or higher. You should consider upgrading and then try again.',
                 array(
-            '%libraryName' => $library_name,
+                  '%component' => (isset($h5pData['title']) ? $h5pData['title'] : $library_name),
-            '%requiredVersion' => $h5pData['coreApi']['majorVersion'] . '.' . $h5pData['coreApi']['minorVersion'],
+                  '%current' => H5PCore::$coreApi['majorVersion'] . '.' . H5PCore::$coreApi['minorVersion'],
-            '%coreApi' => H5PCore::$coreApi['majorVersion'] . '.' . H5PCore::$coreApi['minorVersion']
+                  '%required' => $h5pData['coreApi']['majorVersion'] . '.' . $h5pData['coreApi']['minorVersion']
-          )));
+                )
+            )
+        );
+
         $valid = false;
       }
     }
+
     return $valid;
   }
 

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) {
+    cancelButton.onclick = dialogCanceled;
-      self.hide();
-      self.trigger('canceled');
-      e.preventDefault();
-    };
     cancelButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
+        dialogCanceled(e);
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('canceled');
-        e.preventDefault();
       }
     };
     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) {
+    confirmButton.onclick = dialogConfirmed;
-      self.hide();
-      self.trigger('confirmed');
-      e.preventDefault();
-    };
     confirmButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
+        dialogConfirmed(e);
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('confirmed');
-        e.preventDefault();
       }
     };
     buttons.appendChild(confirmButton);
 
     // Exit button
-    var exitButton = document.createElement('a');
+    var exitButton = document.createElement('button');
-    exitButton.href = '#';
     exitButton.classList.add('h5p-confirmation-dialog-exit');
-    exitButton.onclick = function (e) {
+    exitButton.onclick = dialogCanceled;
-      self.hide();
-      self.trigger('canceled');
-      e.preventDefault();
-    };
     exitButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
+        dialogCanceled(e);
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('canceled');
-        e.preventDefault();
       }
     };
     popup.appendChild(exitButton);
@@ -141,14 +128,12 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     var wrapperElement;
 
     /**
-     * Append confirmation dialog
+     * Set parent of confirmation dialog
      * @param {HTMLElement} wrapper
      * @returns {H5P.ConfirmationDialog}
      */
     this.appendTo = function (wrapper) {
-      wrapper.appendChild(popupBackground);
       wrapperElement = wrapper;
-
       return this;
     };
 
@@ -182,6 +167,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
      * @returns {H5P.ConfirmationDialog}
      */
     this.show = function (offsetTop) {
+      wrapperElement.appendChild(popupBackground);
       popupBackground.classList.remove('hidden');
       fitToContainer(offsetTop);
       setTimeout(function () {
@@ -215,6 +201,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
       popup.classList.add('hidden');
       setTimeout(function () {
         popupBackground.classList.add('hidden');
+        wrapperElement.removeChild(popupBackground);
       }, 100);
 
       return this;

styles/h5p-confirmation-dialog.css

@@ -81,9 +81,9 @@
   float: right;
 }
 
-a.h5p-confirmation-dialog-exit:visited,
+button.h5p-confirmation-dialog-exit:visited,
-a.h5p-confirmation-dialog-exit:link,
+button.h5p-confirmation-dialog-exit:link,
-a.h5p-confirmation-dialog-exit {
+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,
+button.h5p-confirmation-dialog-exit:focus,
-a.h5p-confirmation-dialog-exit:hover {
+button.h5p-confirmation-dialog-exit:hover {
   color: #555;
 }
 

styles/h5p-core-button.css

@@ -1,6 +1,6 @@
-a.h5p-core-button:visited,
+button.h5p-core-button:visited,
-a.h5p-core-button:link,
+button.h5p-core-button:link,
-a.h5p-core-button {
+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,
+button.h5p-core-button:hover,
-a.h5p-core-button:focus {
+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,18 +45,20 @@ a.h5p-core-button:before {
   line-height: 0.7;
 }
 
-a.h5p-core-cancel-button:visited,
+button.h5p-core-cancel-button:visited,
-a.h5p-core-cancel-button:link,
+button.h5p-core-cancel-button:link,
-a.h5p-core-cancel-button {
+button.h5p-core-cancel-button {
+  border: none;
   background: none;
   color: #a00;
   margin-right: 1em;
   font-size: 1em;
   text-decoration: none;
+  cursor: pointer;
 }
 
-a.h5p-core-cancel-button:hover,
+button.h5p-core-cancel-button:hover,
-a.h5p-core-cancel-button:focus {
+button.h5p-core-cancel-button:focus {
   background: none;
   border: none;
   color: #e40000;