Confirmation dialog adjustments.

Translated copyright dialog default texts.
Removed focus on click.
Adjusted left positioning when showing dialog.
Adjusted max width of dialog.
HFJ-1572

js/h5p-confirmation-dialog.js

@@ -18,12 +18,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
 
     // Default options
     options = options || {};
-    options.headerText = options.headerText ||
+    options.headerText = options.headerText || H5P.t('confirmDialogHeader');
-      'Confirm action';
+    options.dialogText = options.dialogText || H5P.t('confirmDialogBody');
-    options.dialogText = options.dialogText ||
+    options.cancelText = options.cancelText || H5P.t('cancelLabel');
-      'Please confirm that you wish to proceed. This action will not be reversible.';
+    options.confirmText = options.confirmText || H5P.t('confirmLabel');
-    options.cancelText = options.cancelText || 'Cancel';
+
-    options.confirmText = options.confirmText || 'Confirm';
+    // Offset of exit button
+    var exitButtonOffset = 2 * 16;
+    var shadowOffset = 8;
 
     // Create background
     var popupBackground = document.createElement('div');
@@ -63,35 +65,71 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     body.appendChild(buttons);
 
     // Cancel button
-    var cancelButton = document.createElement('button');
+    var cancelButton = document.createElement('a');
     cancelButton.classList.add('h5p-core-cancel-button');
-    cancelButton.tabindex = 0;
+    cancelButton.href = '#';
     cancelButton.textContent = options.cancelText;
-    cancelButton.onclick = function () {
+    cancelButton.onclick = function (e) {
       self.hide();
       self.trigger('canceled');
+      e.preventDefault();
+    };
+    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();
+      }
     };
     buttons.appendChild(cancelButton);
 
     // Confirm button
-    var confirmButton = document.createElement('button');
+    var confirmButton = document.createElement('a');
     confirmButton.classList.add('h5p-core-button',
       'h5p-confirmation-dialog-confirm-button');
-    confirmButton.tabindex = 0;
+    confirmButton.href = '#';
     confirmButton.textContent = options.confirmText;
-    confirmButton.onclick = function () {
+    confirmButton.onclick = function (e) {
       self.hide();
       self.trigger('confirmed');
+      e.preventDefault();
+    };
+    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();
+      }
     };
     buttons.appendChild(confirmButton);
 
     // Exit button
-    var exitButton = document.createElement('button');
+    var exitButton = document.createElement('a');
+    exitButton.href = '#';
     exitButton.classList.add('h5p-confirmation-dialog-exit');
-    exitButton.tabindex = 0;
+    exitButton.onclick = function (e) {
-    exitButton.onclick = function () {
       self.hide();
       self.trigger('canceled');
+      e.preventDefault();
+    };
+    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();
+      }
     };
     popup.appendChild(exitButton);
 
@@ -114,22 +152,45 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
      * Fit popup to container. Makes sure it doesn't overflow.
      */
     var fitToContainer = function () {
-      var popupOffset = parseInt(popup.style.top, 10) + popup.offsetHeight;
+      var popupOffsetTop = parseInt(popup.style.top, 10);
 
-      // Overflows wrapper
+      // Overflows height
-      if (popupOffset > wrapperElement.offsetHeight) {
+      if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) {
-        var overflowedContainerOffset = wrapperElement.offsetHeight - popup.offsetHeight;
+        popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight;
-        popup.style.top = overflowedContainerOffset + 'px';
       }
+
+      if (popupOffsetTop - exitButtonOffset <= 0) {
+        popupOffsetTop = exitButtonOffset;
+      }
+      popup.style.top = popupOffsetTop + 'px';
+
+      // Overflows width
+      var popupOffsetLeft = parseInt(popup.style.left, 10);
+
+      if (popupOffsetLeft + popup.offsetWidth + exitButtonOffset + shadowOffset > wrapperElement.offsetWidth) {
+        popupOffsetLeft = wrapperElement.offsetWidth - exitButtonOffset - shadowOffset - popup.offsetWidth;
+      }
+
+      if (popupOffsetLeft < 0) {
+        popupOffsetLeft = 0;
+      }
+
+      popup.style.left = popupOffsetLeft + 'px';
     };
 
     /**
      * Show confirmation dialog
      * @params {number} offsetTop Offset top
+     * @params {number} [offsetLeft] Offset left
      * @returns {H5P.ConfirmationDialog}
      */
-    this.show = function (offsetTop) {
+    this.show = function (offsetTop, offsetLeft) {
+      popup.classList.remove('not-centered');
       popup.style.top = offsetTop + 'px';
+      if (offsetLeft !== undefined) {
+        popup.classList.add('not-centered');
+        popup.style.left = offsetLeft + 'px';
+      }
       popupBackground.classList.remove('hidden');
       fitToContainer();
       popupBackground.classList.remove('hiding');

js/h5p.js

@@ -836,9 +836,9 @@ H5P.error = function (err) {
  *
  * @param {string} key
  *   Translation identifier, may only contain a-zA-Z0-9. No spaces or special chars.
- * @param {Object} vars
+ * @param {Object} [vars]
  *   Data for placeholders.
- * @param {string} ns
+ * @param {string} [ns]
  *   Translation namespace. Defaults to H5P.
  * @returns {string}
  *   Translated text

styles/h5p-confirmation-dialog.css

@@ -32,7 +32,7 @@
   justify-content: center;
 
   box-sizing: border-box;
-  max-width: calc(100% - 2em);
+  max-width: 35em;
   min-width: 25em;
 
   top: 2em;
@@ -48,6 +48,18 @@
   transition: transform 0.1s ease-in;
 }
 
+.h5p-confirmation-dialog-popup.not-centered {
+  -webkit-transform: translate(0.5em, 0%);
+  -ms-transform: translate(0.5em, 0%);
+  transform: translate(0.5em, 0%);
+}
+
+.h5p-confirmation-dialog-popup.hidden.not-centered {
+  -webkit-transform: translate(0.5em, 50%);
+  -ms-transform: translate(0.5em, 50%);
+  transform: translate(0.5em, 50%);
+}
+
 .h5p-confirmation-dialog-popup.hidden {
   -webkit-transform: translate(-50%, 50%);
   -ms-transform: translate(-50%, 50%);
@@ -77,6 +89,11 @@
   float: right;
 }
 
+.h5p-confirmation-dialog-exit:focus,
+.h5p-confirmation-dialog-exit:hover {
+  color: #555;
+}
+
 .h5p-confirmation-dialog-exit {
   position: absolute;
   background: none;