Image Magnifier Component Attempt 3

create magnifier effect using size attribute of the image

by Konstantin Rouda

HTML

<section class="c-container" data-image-magnifier>
    <img src="https://farm5.staticflickr.com/4775/40838850831_cd1ce064f3.jpg" id="test-img" data-image-magnifier-image class="c-container__img" srcset="https://farm5.staticflickr.com/4775/40838850831_cd1ce064f3.jpg 480w, https://farm5.staticflickr.com/4775/40838850831_1b5ca41eff_h.jpg 1200w, https://farm5.staticflickr.com/4775/40838850831_ddc946af81_k.jpg 2000w" sizes="100vw" data-magnifier-size="4000px" alt="" /> 
</section>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(253, 254, 253);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/

.c-container {
  position: relative;
  margin: 10rem auto;
  max-width: 1000px;
  cursor: none;
}
/*
.c-image-magnifier__wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: none;
}
*/
.c-container__img {
  width: 100%;
}

.o-loupe-wrapper {
  position: absolute;
  width: 9.45rem; /*~150px*/
  height: 9.45rem; /*~150px*/
  /*max-width: 18.45rem;*/ /*~300px*/
  /*max-height: 18.45rem;*/ /*~300px*/
  border-radius: 100%;
  border: 5px solid #fff;
  overflow: hidden;  
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  transition: opacity 0s .15s, transform .3s ease-out;
  box-shadow: 0 5px 7px rgba(0, 0, 0, .7);
/*   filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.7)); */
  z-index: 999;
}

[data-image-magnifier]:hover .o-loupe-wrapper {
  transform: scale(1);
  opacity: 1;
  transition-timing-function: ease-in;
}
/*
.o-loupe-wrapper__loupe {
  position: relative;
  height: 100%;
  overflow: visible;
}
*/

.o-loupe-wrapper__image {
}

JavaScript

;(function () {
  "use strict";
  
  const ENLARGE_IMG_CONTAINER_ATTR = "data-image-magnifier";
 
  const imgMagnifierContainers = Array.from(document.querySelectorAll("[" + ENLARGE_IMG_CONTAINER_ATTR + "]"));
  
  if(!imgMagnifierContainers.length) {
    console.error("None element with " + ENLARGE_IMG_CONTAINER_ATTR + " attribute has been found.");
    return;
  };
  
  const IMAGE_MAGNIFIER_IMAGE_JS_CLASS = "js-magnifierImg";
  const LOUPE_WRAPPER_JS_CLASS = "js-flyoutLoupe";
  const LOUPE_IMAGE_JS_CLASS = "js-flyoutLoupeImg";
  
  const IMAGE_MAGNIFIER_CLASS = "c-image-magnifier";
  const IMAGE_MAGNIFIER_IMAGE_CLASS = "c-image-magnifier__image";
  
  const LOUPE_WRAPPER_CLASS = "o-loupe-wrapper";
  const LOUPE_IMAGE_CLASS = "o-loupe-wrapper__image";
  
  const LOUPE_IMAGE_SIZE_ATTR = "data-magnifier-size";
  
  document.addEventListener("DOMContentLoaded", onDOMContentLoaded);
  
  function onDOMContentLoaded (e) {
      
    imgMagnifierContainers.forEach(function(container) {
        container.addEventListener("mouseenter", imageContainerOnMouseEnter);
        container.classList.add(IMAGE_MAGNIFIER_CLASS);
        const magnifierImg = setupMagnifierImg(container, IMAGE_MAGNIFIER_IMAGE_JS_CLASS, IMAGE_MAGNIFIER_IMAGE_CLASS);
      
        container.addEventListener("mousemove", imageContainerOnMouseMove);
        const loupeHTML = _createLoupeImgHTML(container, IMAGE_MAGNIFIER_IMAGE_JS_CLASS);
        container.appendChild(loupeHTML);
    });
    
  };
    
  function _createLoupeImgHTML (container, imgClass) {
    const loupeContainer = document.createElement("div");
    
    const origIMG = container.querySelector("." + imgClass);
    debugger;
     const loupeImg = origIMG ? origIMG.cloneNode() : null;
     loupeContainer.classList.add(LOUPE_WRAPPER_CLASS, LOUPE_WRAPPER_JS_CLASS);
       
     if(loupeImg) {
       loupeImg.removeAttribute("id");
       loupeImg.className = LOUPE_IMAGE_CLASS;
       loupeImg.classList.add(LOUPE_IMAGE_JS_CLASS);
      ...