Skip to content

Commit

Permalink
Use flexbox instead of float and improve lens performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@mwenge
mwenge committed Oct 3, 2020
1 parent 1a107d9 commit cc9fc16
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 50 deletions.
17 changes: 12 additions & 5 deletions explorer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,13 @@ html {
body {
padding-top: 8vh;
}
#container{
display: flex;
flex-flow: row wrap;
}
.item-container {
float: left;
width: fit-content;
height: fit-content;
margin: 10px;
display: flex;
position: relative;
Expand Down Expand Up @@ -105,8 +110,10 @@ input:focus::placeholder { color:transparent; }
border: 1px solid grey;
display: none;
position: absolute;
height: 80px;
top: -80px;
height: 200px;
width: 200px;
top: -200px;
left: 0;
z-index: 500;
}
.img-wrapper {
Expand All @@ -117,8 +124,8 @@ input:focus::placeholder { color:transparent; }
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
width: 80px;
height: 80px;
}
.result {
opacity: 1;
Expand Down
60 changes: 15 additions & 45 deletions explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -652,51 +652,30 @@ function clearHighlights() {
highlightedSearchElements = [];
}

function makeMoveLens(lens, img, result, imageToAdd, name, stack) {
function makeMoveLens(img, result, imageToAdd, name) {
return function(e) {
result.style.display = "flex";
lens.style.display = "block";
if (stack) {
result.style.width = (result.parentElement.offsetWidth / 2) + "px";
result.style.height = result.parentElement.offsetHeight + "px";
lens.style.width = (result.parentElement.offsetWidth / 5) + "px";
lens.style.height = (result.parentElement.offsetHeight / 2) + "px";
} else {
result.style.width = (result.parentElement.offsetWidth * 2) + "px";
result.style.height = result.parentElement.offsetHeight + "px";
lens.style.width = (result.parentElement.offsetWidth / 2) + "px";
lens.style.height = (result.parentElement.offsetHeight / 5) + "px";
}

var availableHeight = result.parentElement.getBoundingClientRect().top;
if (availableHeight < (result.parentElement.offsetHeight / 2)) {
result.style.top = result.parentElement.offsetHeight + "px";
} else {
result.style.top = "-" + result.parentElement.offsetHeight + "px";
}

var lensD = 80;
/* Calculate the ratio between itemZoom DIV and lens: */
var cx = result.offsetWidth / lens.offsetWidth;
var cy = result.offsetHeight / lens.offsetHeight;
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
var cx = 200 / lensD;
var cy = 200 / lensD;

var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
/* Calculate the position of the lens: */
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
x = pos.x - (lensD / 2);
y = pos.y - (lensD / 2);
/* Prevent the lens from being positioned outside the image: */
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x > img.width - lensD) {x = img.width - lensD;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y > img.height - lensD) {y = img.height - lensD;}
if (y < 0) {y = 0;}
/* Set the position of the lens: */
lens.style.left = x + "px";
lens.style.top = y + "px";
/* Display what the lens "sees": */
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";

function getCursorPos(e) {
Expand Down Expand Up @@ -776,31 +755,27 @@ function addImageToItem(item, imageToAdd, inscription, imageType, stack, classSu
}
itemShell.appendChild(copyright);

var lens = document.createElement("div");
lens.setAttribute("class", "img-zoom-lens");
imageWrapper.appendChild(lens);

var img = document.createElement("img");
img.src = encodeURIComponent(imageToAdd);
img.id = "image-" + imageType + "-" + inscription.name;
img.height = "200";
img.addEventListener("error", makeGiveUpOnImages([inscriptionImage, itemZoom]));
img.addEventListener("load", addWordsToImage(imageToAdd, inscription.name, imageType, img, imageWrapper, lens, itemZoom, item, stack));
img.addEventListener("load", addWordsToImage(imageToAdd, inscription.name, imageType, img, imageWrapper, itemZoom, item, stack));
imageWrapper.appendChild(img);
itemShell.appendChild(inscriptionImage);

itemZoom.style.backgroundImage = "url('" + img.src + "')";
img.addEventListener("mousemove", makeMoveLens(lens, img, itemZoom, imageToAdd, inscription.name, stack));
img.addEventListener("mousemove", makeMoveLens(img, itemZoom, imageToAdd, inscription.name, stack));
itemShell.addEventListener("mousemove", showCopyright(copyright));
itemShell.addEventListener("mouseout", makeHideElements([lens, itemZoom, copyright]));
itemShell.addEventListener("mouseout", makeHideElements([itemZoom, copyright]));
function showCopyright() {
return function (e) {
copyright.style.display = "block";
};
}
}

function addWordsToImage(imageToAdd, name, imageType, img, imageWrapper, lens, itemZoom, item, stack) {
function addWordsToImage(imageToAdd, name, imageType, img, imageWrapper, itemZoom, item, stack) {
return function(e) {
if (!coordinates.has(imageToAdd)) {
return;
Expand Down Expand Up @@ -833,7 +808,7 @@ function addWordsToImage(imageToAdd, name, imageType, img, imageWrapper, lens, i
highlight.style.height = ((area.height / img.naturalHeight) * 100) + '%';
highlight.style.top = ((area.y / img.naturalHeight) * 100) + '%';
highlight.style.left = ((area.x / img.naturalWidth) * 100) + '%';
highlight.addEventListener("mousemove", makeMoveLens(lens, img, itemZoom, imageToAdd, name, stack));
highlight.addEventListener("mousemove", makeMoveLens(img, itemZoom, imageToAdd, name, stack));
highlight.addEventListener("mouseenter", highlightWords(name, currentWord));
highlight.addEventListener("mouseenter", paintHighlightOnZoomImage(itemZoom, img, wordContainer));
highlight.addEventListener("mouseout", clearHighlight(name, currentWord));
Expand Down Expand Up @@ -1218,12 +1193,7 @@ function addWordTip(word, name, index) {
wordCommentElement.textContent = tipText;
tip.appendChild(wordCommentElement);

var availableHeight = inscriptionElement.getBoundingClientRect().top
if (availableHeight < tip.offsetHeight) {
tip.style.top = inscriptionElement.offsetHeight + "px";
} else {
tip.style.top = "-" + tip.offsetHeight + "px";
}
tip.style.top = "-" + tip.offsetHeight + "px";
}

function setHighlightLettersInTranscription(name, index, highlight) {
Expand Down

0 comments on commit cc9fc16

Please sign in to comment.