Specified confirmation dialog css rules so they wont get overwritten by standard anchor styling.
Enabled iframe resize functionality for confirmation dialog. HFJ-1572h5p-prerequisites-validator
parent
926ff4af3a
commit
8a6733ceb4
|
@ -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
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue