Improved description popup design

pull/25/head
Frode Petterson 2017-05-08 15:14:18 +02:00
parent 9347b17279
commit c5ac5f8760
4 changed files with 63 additions and 23 deletions

View File

@ -152,6 +152,7 @@
var styles = {
front: '',
back: '',
popup: '',
backImage: !!backImage
};
@ -166,6 +167,8 @@
styles.back += 'color:' + color + ';' +
'background-color:' + backColor + ';' +
'border-color:' + frontColor +';';
styles.popup += 'border-color:' + backColor + ';' +
'background-color:' + shade(color, 90 * invertShades) + ';';
}
// Add back image for card
@ -174,6 +177,7 @@
styles.front += backgroundImage;
styles.back += backgroundImage;
styles.popup += backgroundImage;
}
// Prep style attribute
@ -183,6 +187,9 @@
if (styles.back) {
styles.back = ' style="' + styles.back + '"';
}
if (styles.popup) {
styles.popup = ' style="' + styles.popup + '"';
}
return styles;
};

View File

@ -80,7 +80,8 @@
color: #909090;
}
.h5p-memory-game .h5p-memory-card .h5p-front:before,
.h5p-memory-game .h5p-memory-card .h5p-back:before {
.h5p-memory-game .h5p-memory-card .h5p-back:before,
.h5p-memory-game .h5p-memory-image:before {
position: absolute;
display: block;
content: "";
@ -90,7 +91,8 @@
opacity: 0;
}
.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before {
.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before,
.h5p-memory-game.h5p-invert-shades .h5p-memory-image:before {
background: #000;
}
@ -127,7 +129,8 @@
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-ms-transform: scale(0,1.1);
}
.h5p-memory-game .h5p-memory-card .h5p-back:before {
.h5p-memory-game .h5p-memory-card .h5p-back:before,
.h5p-memory-game .h5p-memory-image:before {
opacity: 0.5;
}
.h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
@ -193,19 +196,31 @@
.h5p-memory-game .h5p-memory-pop {
display: none;
background: #fff;
padding: 1em;
width: 20em;
padding: 0.25em;
width: 24em;
max-width: 90%;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 1em #666;
box-shadow: 0 0 2em #666;
border-radius: 0.25em;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.h5p-memory-game .h5p-memory-top {
padding: 0em 1em;
background-color: #f0f0f0;
background-size: cover;
text-align: center;
margin-bottom: 1.75em;
border-bottom: 1px solid #d0d0d0;
}
.h5p-memory-game .h5p-memory-image {
float: left;
display: inline-block;
position: relative;
top: 1.5em;
left: -0.5em;
border: 2px solid #d0d0d0;
box-sizing: border-box;
-moz-box-sizing: border-box;
@ -214,12 +229,23 @@
width: 6.25em;
height: 6.25em;
text-align: center;
overflow: hidden;
box-shadow: 0 0 1em rgba(125,125,125,0.5);
}
.h5p-memory-game .h5p-memory-image:first-child {
top: 1em;
left: 0;
}
.h5p-memory-game .h5p-memory-two-images .h5p-memory-image:first-child {
left: 0.5em;
}
.h5p-memory-game .h5p-row-break {
clear: left;
}
.h5p-memory-game .h5p-memory-desc {
margin-left: 7em;
padding: 1em;
margin-bottom: 0.5em;
text-align: center;
}
.h5p-memory-reset {
position: absolute;

View File

@ -67,7 +67,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (desc !== undefined) {
// Pause timer and show desciption.
timer.pause();
popup.show(desc, card.getImage(), function () {
var imgs = [card.getImage()];
if (card.hasTwoImages) {
imgs.push(mate.getImage());
}
popup.show(desc, imgs, cardStyles.back, function () {
if (isFinished) {
// Game done
finished();
@ -267,6 +271,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (MemoryGame.Card.hasTwoImages(cardParams)) {
// Use matching image for card two
cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
}
else {
// Add two cards with the same image
@ -314,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
popup = new MemoryGame.Popup($container);
popup = new MemoryGame.Popup($container, cardStyles.popup);
$container.click(function () {
popup.close();

View File

@ -6,26 +6,29 @@
* @class H5P.MemoryGame.Popup
* @param {H5P.jQuery} $container
*/
MemoryGame.Popup = function ($container) {
MemoryGame.Popup = function ($container, styles) {
/** @alias H5P.MemoryGame.Popup# */
var self = this;
var closed;
var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-image"></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + styles + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
var $desc = $popup.find('.h5p-memory-desc');
var $image = $popup.find('.h5p-memory-image');
var $top = $popup.find('.h5p-memory-top');
/**
* Show the popup.
*
* @param {string} desc
* @param {H5P.jQuery} $img
* @param {H5P.jQuery[]} imgs
* @param {function} done
*/
self.show = function (desc, $img, done) {
self.show = function (desc, imgs, styles, done) {
$desc.html(desc);
$img.appendTo($image.html(''));
$top.html('').toggleClass('h5p-memory-two-images', imgs.length > 1);
for (var i = 0; i < imgs.length; i++) {
$('<div class="h5p-memory-image"' + styles + '></div>').append(imgs[i]).appendTo($top);
}
$popup.show();
closed = done;
};
@ -47,15 +50,14 @@
*/
self.setSize = function (fontSize) {
// Set image size
$image[0].style.fontSize = fontSize + 'px';
$top[0].style.fontSize = fontSize + 'px';
// Determine card size
var cardSize = fontSize * 6.25; // From CSS
// Set popup size
$popup[0].style.minWidth = (cardSize * 2) + 'px';
$popup[0].style.minWidth = (cardSize * 2.5) + 'px';
$popup[0].style.minHeight = cardSize + 'px';
$desc[0].style.marginLeft = (cardSize + 20) + 'px';
};
};