parent
0c5971d6d4
commit
35a7213a67
|
@ -1664,6 +1664,8 @@ class H5PCore {
|
||||||
);
|
);
|
||||||
public static $styles = array(
|
public static $styles = array(
|
||||||
'styles/h5p.css',
|
'styles/h5p.css',
|
||||||
|
'styles/h5p-confirmation-dialog.css',
|
||||||
|
'styles/h5p-core-button.css'
|
||||||
);
|
);
|
||||||
public static $scripts = array(
|
public static $scripts = array(
|
||||||
'js/jquery.js',
|
'js/jquery.js',
|
||||||
|
@ -1672,6 +1674,7 @@ class H5PCore {
|
||||||
'js/h5p-x-api-event.js',
|
'js/h5p-x-api-event.js',
|
||||||
'js/h5p-x-api.js',
|
'js/h5p-x-api.js',
|
||||||
'js/h5p-content-type.js',
|
'js/h5p-content-type.js',
|
||||||
|
'js/h5p-confirmation-dialog.js'
|
||||||
);
|
);
|
||||||
public static $adminScripts = array(
|
public static $adminScripts = array(
|
||||||
'js/jquery.js',
|
'js/jquery.js',
|
||||||
|
|
|
@ -0,0 +1,162 @@
|
||||||
|
/*global H5P*/
|
||||||
|
H5P.ConfirmationDialog = (function (EventDispatcher) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a confirmation dialog
|
||||||
|
*
|
||||||
|
* @param [options] Options for confirmation dialog
|
||||||
|
* @param [options.headerText] Header text
|
||||||
|
* @param [options.dialogText] Dialog text
|
||||||
|
* @param [options.cancelText] Cancel dialog button text
|
||||||
|
* @param [options.confirmText] Confirm dialog button text
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
function ConfirmationDialog(options) {
|
||||||
|
EventDispatcher.call(this);
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
options = options || {};
|
||||||
|
options.headerText = options.headerText ||
|
||||||
|
'Confirm action';
|
||||||
|
options.dialogText = options.dialogText ||
|
||||||
|
'Please confirm that you wish to proceed. This action will not be reversible.';
|
||||||
|
options.cancelText = options.cancelText || 'Cancel';
|
||||||
|
options.confirmText = options.confirmText || 'Confirm';
|
||||||
|
|
||||||
|
// Create background
|
||||||
|
var popupBackground = document.createElement('div');
|
||||||
|
popupBackground.classList
|
||||||
|
.add('h5p-confirmation-dialog-background', 'hidden', 'hiding');
|
||||||
|
|
||||||
|
// Create outer popup
|
||||||
|
var popup = document.createElement('div');
|
||||||
|
popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
|
||||||
|
popupBackground.appendChild(popup);
|
||||||
|
|
||||||
|
// Popup header
|
||||||
|
var header = document.createElement('div');
|
||||||
|
header.classList.add('h5p-confirmation-dialog-header');
|
||||||
|
popup.appendChild(header);
|
||||||
|
|
||||||
|
// Header text
|
||||||
|
var headerText = document.createElement('div');
|
||||||
|
headerText.classList.add('h5p-confirmation-dialog-header-text');
|
||||||
|
headerText.innerHTML = options.headerText;
|
||||||
|
header.appendChild(headerText);
|
||||||
|
|
||||||
|
// Popup body
|
||||||
|
var body = document.createElement('div');
|
||||||
|
body.classList.add('h5p-confirmation-dialog-body');
|
||||||
|
popup.appendChild(body);
|
||||||
|
|
||||||
|
// Popup text
|
||||||
|
var text = document.createElement('div');
|
||||||
|
text.classList.add('h5p-confirmation-dialog-text');
|
||||||
|
text.innerHTML = options.dialogText;
|
||||||
|
body.appendChild(text);
|
||||||
|
|
||||||
|
// Popup buttons
|
||||||
|
var buttons = document.createElement('div');
|
||||||
|
buttons.classList.add('h5p-confirmation-dialog-buttons');
|
||||||
|
body.appendChild(buttons);
|
||||||
|
|
||||||
|
// Cancel button
|
||||||
|
var cancelButton = document.createElement('button');
|
||||||
|
cancelButton.classList.add('h5p-core-cancel-button');
|
||||||
|
cancelButton.tabindex = 0;
|
||||||
|
cancelButton.textContent = options.cancelText;
|
||||||
|
cancelButton.onclick = function () {
|
||||||
|
self.hide();
|
||||||
|
self.trigger('canceled');
|
||||||
|
};
|
||||||
|
buttons.appendChild(cancelButton);
|
||||||
|
|
||||||
|
// Confirm button
|
||||||
|
var confirmButton = document.createElement('button');
|
||||||
|
confirmButton.classList.add('h5p-core-button',
|
||||||
|
'h5p-confirmation-dialog-confirm-button');
|
||||||
|
confirmButton.tabindex = 0;
|
||||||
|
confirmButton.textContent = options.confirmText;
|
||||||
|
confirmButton.onclick = function () {
|
||||||
|
self.hide();
|
||||||
|
self.trigger('confirmed');
|
||||||
|
};
|
||||||
|
buttons.appendChild(confirmButton);
|
||||||
|
|
||||||
|
// Exit button
|
||||||
|
var exitButton = document.createElement('button');
|
||||||
|
exitButton.classList.add('h5p-confirmation-dialog-exit');
|
||||||
|
exitButton.tabindex = 0;
|
||||||
|
exitButton.onclick = function () {
|
||||||
|
self.hide();
|
||||||
|
self.trigger('canceled');
|
||||||
|
};
|
||||||
|
popup.appendChild(exitButton);
|
||||||
|
|
||||||
|
// Wrapper element
|
||||||
|
var wrapperElement;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Append confirmation dialog
|
||||||
|
* @param {HTMLElement} wrapper
|
||||||
|
* @returns {H5P.ConfirmationDialog}
|
||||||
|
*/
|
||||||
|
this.appendTo = function (wrapper) {
|
||||||
|
wrapper.appendChild(popupBackground);
|
||||||
|
wrapperElement = wrapper;
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fit popup to container. Makes sure it doesn't overflow.
|
||||||
|
*/
|
||||||
|
var fitToContainer = function () {
|
||||||
|
var popupOffset = parseInt(popup.style.top, 10) + popup.offsetHeight;
|
||||||
|
|
||||||
|
// Overflows wrapper
|
||||||
|
if (popupOffset > wrapperElement.offsetHeight) {
|
||||||
|
var overflowedContainerOffset = wrapperElement.offsetHeight - popup.offsetHeight;
|
||||||
|
popup.style.top = overflowedContainerOffset + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show confirmation dialog
|
||||||
|
* @params {number} offsetTop Offset top
|
||||||
|
* @returns {H5P.ConfirmationDialog}
|
||||||
|
*/
|
||||||
|
this.show = function (offsetTop) {
|
||||||
|
popup.style.top = offsetTop + 'px';
|
||||||
|
popupBackground.classList.remove('hidden');
|
||||||
|
fitToContainer();
|
||||||
|
popupBackground.classList.remove('hiding');
|
||||||
|
popup.classList.remove('hidden');
|
||||||
|
cancelButton.focus();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide confirmation dialog
|
||||||
|
* @returns {H5P.ConfirmationDialog}
|
||||||
|
*/
|
||||||
|
this.hide = function () {
|
||||||
|
popupBackground.classList.add('hiding');
|
||||||
|
popup.classList.add('hidden');
|
||||||
|
setTimeout(function () {
|
||||||
|
popupBackground.classList.add('hidden');
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
ConfirmationDialog.prototype = Object.create(EventDispatcher.prototype);
|
||||||
|
ConfirmationDialog.prototype.constructor = ConfirmationDialog;
|
||||||
|
|
||||||
|
return ConfirmationDialog;
|
||||||
|
|
||||||
|
}(H5P.EventDispatcher));
|
|
@ -99,7 +99,7 @@ H5P.EventDispatcher = (function () {
|
||||||
* Event type
|
* Event type
|
||||||
* @param {H5P.EventCallback} listener
|
* @param {H5P.EventCallback} listener
|
||||||
* Event listener
|
* Event listener
|
||||||
* @param {Object} thisArg
|
* @param {Object} [thisArg]
|
||||||
* Optionally specify the this value when calling listener.
|
* Optionally specify the this value when calling listener.
|
||||||
*/
|
*/
|
||||||
this.on = function (type, listener, thisArg) {
|
this.on = function (type, listener, thisArg) {
|
||||||
|
|
|
@ -0,0 +1,103 @@
|
||||||
|
.h5p-confirmation-dialog-background {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transition: opacity 0.1s, linear 0s, visibility 0s linear 0s;
|
||||||
|
transition: opacity 0.1s linear 0s, visibility 0s linear 0s;
|
||||||
|
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-background.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-background.hiding {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
-webkit-transition: opacity 0.1s, linear 0s, visibility 0s linear 0.1s;
|
||||||
|
transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-popup {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: calc(100% - 2em);
|
||||||
|
min-width: 25em;
|
||||||
|
|
||||||
|
top: 2em;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, 0%);
|
||||||
|
-ms-transform: translate(-50%, 0%);
|
||||||
|
transform: translate(-50%, 0%);
|
||||||
|
|
||||||
|
color: #555;
|
||||||
|
box-shadow: 0 0 6px 1px #ddd;
|
||||||
|
|
||||||
|
-webkit-transition: transform 0.1s ease-in;
|
||||||
|
transition: transform 0.1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-popup.hidden {
|
||||||
|
-webkit-transform: translate(-50%, 50%);
|
||||||
|
-ms-transform: translate(-50%, 50%);
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-header {
|
||||||
|
padding: 1.5em;
|
||||||
|
background: #fff;
|
||||||
|
color: #1a73d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-header-text {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-body {
|
||||||
|
padding: 1.25em 1.5em;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-text {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-buttons {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-exit {
|
||||||
|
position: absolute;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 2.5em;
|
||||||
|
top: -0.9em;
|
||||||
|
right: -1.15em;
|
||||||
|
color: #777;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-confirmation-dialog-exit:before {
|
||||||
|
font-family: "H5P";
|
||||||
|
content: "\e890";
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-core-button.h5p-confirmation-dialog-confirm-button {
|
||||||
|
padding-left: 0.75em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-core-button.h5p-confirmation-dialog-confirm-button:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
|
@ -0,0 +1,59 @@
|
||||||
|
.h5p-core-button {
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 0.5em 1.25em;
|
||||||
|
border-radius: 2em;
|
||||||
|
|
||||||
|
background: #1a73d9;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: none;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
.h5p-core-button:hover,
|
||||||
|
.h5p-core-button:focus {
|
||||||
|
background: #1356a3;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: initial;
|
||||||
|
transition: initial;
|
||||||
|
}
|
||||||
|
.h5p-core-button:active {
|
||||||
|
position: relative;
|
||||||
|
background: #104888;
|
||||||
|
|
||||||
|
-webkit-box-shadow: inset 0 4px 0 #0e407a;
|
||||||
|
-moz-box-shadow: inset 0 4px 0 #0e407a;
|
||||||
|
box-shadow: inset 0 4px 0 #0e407a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-core-button:before {
|
||||||
|
font-family: 'H5P';
|
||||||
|
padding-right: 0.15em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-core-cancel-button {
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #a00;
|
||||||
|
margin-right: 1em;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5p-core-cancel-button:hover,
|
||||||
|
.h5p-core-cancel-button:focus {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #e40000;
|
||||||
|
}
|
Loading…
Reference in New Issue