Commit 7ae83cf7 authored by ManuLEM's avatar ManuLEM Committed by Killian Kemps
Browse files

Add overlay and cross to image popup

parent 559a9a38
......@@ -1442,7 +1442,7 @@ img.emoji {
display: none;
}
#largeImagePopup, #tweetConfirmationPopup, #userProfilePanel{
#tweetConfirmationPopup, #userProfilePanel{
position: fixed;
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3), 0 0 7px 0 rgba(0,0,0,0.35);
z-index: 2;
......@@ -1455,9 +1455,52 @@ img.emoji {
background: #fff;
}
#largeImagePopup {
position: fixed;
z-index: -1;
-moz-transition: all ease-in 0.35s;
-webkit-transition: all ease-in 0.35s;
-ms-transition: all ease-in 0.35s;
-o-transition: all ease-in 0.35s;
transition: all ease-in 0.35s;
opacity: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#largeImagePopup .back {
background: rgba(0,0,0,0.4);
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#largeImagePopup .cross{
position: absolute;
right: 50px;
top: 50px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
background-color: rgba(255,255,255,0.6);
line-height: 30px;
width: 30px;
text-align: center;
}
#largeImagePopup .cross:hover{
background-color: rgba(255,255,255,0.8);
}
#largeImagePopup img {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3), 0 0 7px 0 rgba(0,0,0,0.35);
}
#tweetConfirmationPopup{
......
......@@ -746,32 +746,45 @@ Message.prototype.enlargeImage = function(e){
width = width*differencial;
}
var popup = document.getElementById('largeImagePopup');
var popupBack = document.querySelector('#largeImagePopup .back');
var popupImage = document.querySelector('#largeImagePopup img');
var popupCross = document.querySelector('#largeImagePopup .cross');
popupImage.setAttribute('src', src + ':large');
var halfWidth = width / 2;
var left = 'calc(50% - ' + halfWidth + 'px)';
// console.log('left: ', left);
popup.style.left = left;
popupImage.style.left = left;
var halfHeight = height / 2;
var top = 'calc(50% - ' + halfHeight + 'px)';
// console.log('top: ', top);
popup.style.top = top;
popup.style.display = 'block';
popupImage.style.top = top;
popup.style.height = height + 'px';
popup.style.width = width + 'px';
popupImage.style.height = height + 'px';
popupImage.style.width = width + 'px';
popup.style.zIndex = 20000;
popup.style.opacity = 1;
popupCross.style.right = 'calc(50% - ' + (halfWidth-15) + 'px)';
popupCross.style.top = 'calc(50% - ' + (halfHeight-15) + 'px)';
function closeImagePopup(e){
columnsList.removeEventListener('click', closeImagePopup, true);
// columnsList.removeEventListener('click', closeImagePopup, true);
document.querySelector('#largeImagePopup .cross').removeEventListener('click', closeImagePopup, true);
e.stopPropagation();
e.preventDefault();
var popup = document.getElementById('largeImagePopup');
popup.style.display = 'none';
var popupBack = document.querySelector('#largeImagePopup .back');
popupBack.removeEventListener('click', closeImagePopup, true);
popup.style.zIndex = -1;
popup.style.opacity = 0;
}
var columnsList = document.getElementById('tweets-columns-list');
columnsList.addEventListener('click', closeImagePopup, true);
// var columnsList = document.getElementById('tweets-columns-list');
// columnsList.addEventListener('click', closeImagePopup, true);
popupBack.addEventListener('click', closeImagePopup, true);
popupCross.addEventListener('click', closeImagePopup, true);
}
/**
......
......@@ -105,7 +105,7 @@
</section>
</div>
<div id="largeImagePopup"><img src="#"></div>
<div id="largeImagePopup"><div class="back"></div><img src="#"><i class="cross fa fa-times"></i></div>
<ul id="tweets-columns-list">
</ul>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment