petar_bonov

Price balloon - hide option

Oct 23rd, 2020
1,404
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. document.addEventListener("DOMContentLoaded", function () {
  2.     var _fallbackImage = "";
  3.     function _imageError() {
  4.         image.src = _fallbackImage;
  5.     }
  6.     function hover(event) {
  7.         if (this.hasAttribute("data-no-balloon")) return;
  8.  
  9.         balloon.style.display = "";
  10.         var src = this.getAttribute("data-img");
  11.         if (src) image.src = src; else _imageError();
  12.         description.innerText = this.getAttribute("data-description");
  13.        
  14.         var bcr = this.getBoundingClientRect();
  15.  
  16.         var x = bcr.left + window.scrollX + bcr.width;
  17.         var y = bcr.top  + window.scrollY + bcr.height / 2.0;
  18.  
  19.         balloon.style.left = x + "px";
  20.         balloon.style.top  = y + "px";
  21.  
  22.         var container = this.parentElement;
  23.         while (container && !container.getAttribute("data-img")) {
  24.             container = container.parentElement;
  25.         }
  26.         if (container) _fallbackImage = container.getAttribute("data-img");
  27.     }
  28.     function leave(event) {
  29.         balloon.style.display = "none";
  30.         image.removeAttribute("src");
  31.     }
  32.  
  33.     var links = document.querySelectorAll(".module.price .pricing a");
  34.     for (var i = 0; i < links.length; i++) {
  35.         links[i].onmouseover  = hover;
  36.         links[i].onmouseleave = leave;
  37.     }
  38.  
  39.     var balloon = $gsm.tag("div", {"class": "price-balloon", "style": "display: none;"}, "", document.body);
  40.     var imageContainer = $gsm.tag("div", {"class": "image"}, "", balloon);
  41.     var image = $gsm.tag("img", {}, "", imageContainer);
  42.     var description = $gsm.tag("span", {}, "", balloon);
  43.     image.onerror = _imageError;
  44. });
RAW Paste Data