From 8a6733ceb452fc9a882b53f1998813d671a22068 Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Mon, 25 Apr 2016 13:17:24 +0200
Subject: [PATCH] Specified confirmation dialog css rules so they wont get
 overwritten by standard anchor styling. Enabled iframe resize functionality
 for confirmation dialog. HFJ-1572

---
 js/h5p-confirmation-dialog.js      | 23 +++++++++++++++++++++--
 styles/h5p-confirmation-dialog.css | 14 ++++++++------
 styles/h5p-core-button.css         | 22 ++++++++++++----------
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index abeba8a..15dd71e 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -6,6 +6,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
    * Create a confirmation dialog
    *
    * @param [options] Options for confirmation dialog
+   * @param [options.instance] Instance that uses confirmation dialog
    * @param [options.headerText] Header text
    * @param [options.dialogText] Dialog text
    * @param [options.cancelText] Cancel dialog button text
@@ -27,6 +28,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     var exitButtonOffset = 2 * 16;
     var shadowOffset = 8;
 
+    // Determine if we are too large for our container and must resize
+    var resizeIFrame = false;
+
     // Create background
     var popupBackground = document.createElement('div');
     popupBackground.classList
@@ -156,11 +160,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
 
       // Overflows height
       if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) {
-        popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight;
+        popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight - shadowOffset;
       }
 
       if (popupOffsetTop - exitButtonOffset <= 0) {
-        popupOffsetTop = exitButtonOffset;
+        popupOffsetTop = exitButtonOffset + shadowOffset;
+
+        // We are too big and must resize
+        resizeIFrame = true;
       }
       popup.style.top = popupOffsetTop + 'px';
     };
@@ -177,6 +184,18 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
       setTimeout(function () {
         popup.classList.remove('hidden');
         popupBackground.classList.remove('hiding');
+
+        // Resize iFrame if necessary
+        if (resizeIFrame && options.instance) {
+          setTimeout(function () {
+            var minHeight = parseInt(popup.offsetHeight, 10) +
+              exitButtonOffset + (2 * shadowOffset);
+            wrapperElement.style.minHeight = minHeight + 'px';
+            options.instance.trigger('resize');
+            resizeIFrame = false;
+          }, 100);
+        }
+
       }, 0);
 
       // Programmatically focus popup
diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css
index f8c23ff..ca55b39 100644
--- a/styles/h5p-confirmation-dialog.css
+++ b/styles/h5p-confirmation-dialog.css
@@ -81,12 +81,9 @@
   float: right;
 }
 
-.h5p-confirmation-dialog-exit:focus,
-.h5p-confirmation-dialog-exit:hover {
-  color: #555;
-}
-
-.h5p-confirmation-dialog-exit {
+a.h5p-confirmation-dialog-exit:visited,
+a.h5p-confirmation-dialog-exit:link,
+a.h5p-confirmation-dialog-exit {
   position: absolute;
   background: none;
   border: none;
@@ -98,6 +95,11 @@
   text-decoration: none;
 }
 
+a.h5p-confirmation-dialog-exit:focus,
+a.h5p-confirmation-dialog-exit:hover {
+  color: #555;
+}
+
 .h5p-confirmation-dialog-exit:before {
   font-family: "H5P";
   content: "\e890";
diff --git a/styles/h5p-core-button.css b/styles/h5p-core-button.css
index f7cc3f1..b05c423 100644
--- a/styles/h5p-core-button.css
+++ b/styles/h5p-core-button.css
@@ -1,4 +1,6 @@
-.h5p-core-button {
+a.h5p-core-button:visited,
+a.h5p-core-button:link,
+a.h5p-core-button {
   font-size: 1em;
   line-height: 1.2;
   padding: 0.5em 1.25em;
@@ -18,15 +20,15 @@
   vertical-align: baseline;
   text-decoration: none;
 }
-.h5p-core-button:hover,
-.h5p-core-button:focus {
+a.h5p-core-button:hover,
+a.h5p-core-button:focus {
   background: #1356a3;
   color: #fff;
   text-decoration: none;
   -webkit-transition: initial;
   transition: initial;
 }
-.h5p-core-button:active {
+a.h5p-core-button:active {
   position: relative;
   background: #104888;
 
@@ -35,7 +37,7 @@
   box-shadow: inset 0 4px 0 #0e407a;
 }
 
-.h5p-core-button:before {
+a.h5p-core-button:before {
   font-family: 'H5P';
   padding-right: 0.15em;
   font-size: 1.5em;
@@ -43,18 +45,18 @@
   line-height: 0.7;
 }
 
-.h5p-core-cancel-button {
-  cursor: pointer;
+a.h5p-core-cancel-button:visited,
+a.h5p-core-cancel-button:link,
+a.h5p-core-cancel-button {
   background: none;
-  border: none;
   color: #a00;
   margin-right: 1em;
   font-size: 1em;
   text-decoration: none;
 }
 
-.h5p-core-cancel-button:hover,
-.h5p-core-cancel-button:focus {
+a.h5p-core-cancel-button:hover,
+a.h5p-core-cancel-button:focus {
   background: none;
   border: none;
   color: #e40000;