Free javascript Hosting


ampcontenttable.js

Uploaded on Dec 18 2021 00:01 by rohit.ajmera

function initTableBehaviour() {
var firstVisibleCardIndex = 1;
var sliderContainer = document.querySelectorAll(".gt_bg_contentTableSlider")[0];
var cardWidth = Math.floor(sliderContainer.querySelector(".gt_bg_expressionValue:first-child").offsetWidth);
var sliderWidth = sliderContainer.offsetWidth;
var lastVisibleCardIndex = Math.round(sliderWidth / cardWidth);
var elementsInSlider = sliderContainer.querySelectorAll(".gt_bg_expressionValue").length;
var rowHeaderMinWidth = document.querySelector(".gt_bg_rowName").offsetWidth;
adjustTableColumns();
var noProductImagePath = "//img01.guenstiger.de/imagefiles/bgwidget/sprite.svg#no_image_tiger";
var loaderImg = "//img01.guenstiger.de/imagefiles/bgwidget/LoadingTiger.gif";

window.addEventListener("resize", windowResize);
document.querySelector(".gt_bg_leftArrow").addEventListener('click', function () {
if (!this.classList.contains("gt_bg_disabled")) {
document.querySelectorAll(".gt_bg_contentTableSlider").forEach(ele => {
ele.scrollLeft -= cardWidth;
});
document.querySelectorAll(".gt_bg_dummyContentTableSlider").forEach(ele => {
ele.scrollLeft -= cardWidth;
});
if (firstVisibleCardIndex !== 1) {
firstVisibleCardIndex -= 1;
lastVisibleCardIndex -= 1;
}
setTimeout(function () { updateVisibleElems(); }, 500);
}
});

document.querySelector(".gt_bg_rightArrow").addEventListener('click', function () {
if (!this.classList.contains("gt_bg_disabled")) {
document.querySelectorAll(".gt_bg_contentTableSlider").forEach(ele => {
ele.scrollLeft += cardWidth;
});
document.querySelectorAll(".gt_bg_dummyContentTableSlider").forEach(ele => {
ele.scrollLeft += cardWidth;
});
if (lastVisibleCardIndex !== elementsInSlider) {
lastVisibleCardIndex += 1;
firstVisibleCardIndex += 1;
}
setTimeout(function () { updateVisibleElems(); }, 500);
}
});

function windowResize() {
document.querySelector(".gt_bg_rowName").style.minWidth = rowHeaderMinWidth + "px";
document.querySelector(".gt_bg_dummyRowName").style.minWidth = rowHeaderMinWidth + "px";
document.querySelector(".gt_bg_contentTableSlider").style.maxWidth = `calc(100% - ${rowHeaderMinWidth}px)`;
document.querySelector(".gt_bg_dummyContentTableSlider").style.maxWidth = `calc(100% - ${rowHeaderMinWidth}px)`;
cardWidth = Math.floor(sliderContainer.querySelector(".gt_bg_expressionValue:first-child").offsetWidth);
sliderWidth = sliderContainer.offsetWidth;
lastVisibleCardIndex = firstVisibleCardIndex + Math.round(sliderWidth / cardWidth) - 1;
if (lastVisibleCardIndex > elementsInSlider) {
lastVisibleCardIndex = elementsInSlider;
firstVisibleCardIndex = lastVisibleCardIndex - Math.round(sliderWidth / cardWidth) + 1;
}
adjustTableColumns();
slideElements();
}

function slideElements() {
var containersOffset = offset(sliderContainer).left;
var firstVisibleEle = sliderContainer.querySelector(".gt_bg_expressionValue:nth-child(" + firstVisibleCardIndex + ")");
var firstVisibleElementOffset = offset(firstVisibleEle).left;
let slideValue = firstVisibleElementOffset - containersOffset;
document.querySelectorAll(".gt_bg_contentTableSlider").forEach(ele => {
ele.scrollLeft += slideValue;
});
document.querySelectorAll(".gt_bg_dummyContentTableSlider").forEach(ele => {
ele.scrollLeft += slideValue;
});
updateVisibleElems();
}

function updateVisibleElems() {
let txt = document.querySelector(".gt_bg_tableName").getAttribute('data-visibleprodtxt');
document.querySelector(".gt_bg_visibleProducts").innerHTML = txt.replace("{0}", firstVisibleCardIndex).replace("{1}", lastVisibleCardIndex).replace("{2}", elementsInSlider);
var arrow = document.querySelector(".gt_bg_arrowContainer");
if (firstVisibleCardIndex === 1) {
arrow.querySelector(".gt_bg_leftArrow").classList.add("gt_bg_disabled");
}
else {
arrow.querySelector(".gt_bg_leftArrow").classList.remove("gt_bg_disabled");
}
if (lastVisibleCardIndex === elementsInSlider) {
arrow.querySelector(".gt_bg_rightArrow").classList.add("gt_bg_disabled");
}
else {
arrow.querySelector(".gt_bg_rightArrow").classList.remove("gt_bg_disabled");
}
}

//This is to adjust the widths for the tables expression rows and row headers so that former never has width with fractional parts
//It ensures proper alignment of the columns and for maintaining it while scrolling
function adjustTableColumns() {
var fixedColumnHeaderWidth = rowHeaderMinWidth + (sliderWidth - ((lastVisibleCardIndex - firstVisibleCardIndex + 1) * cardWidth));
document.querySelector(".gt_bg_rowName").style.minWidth = fixedColumnHeaderWidth + "px";
document.querySelector(".gt_bg_dummyRowName").style.minWidth = fixedColumnHeaderWidth + "px";
document.querySelector(".gt_bg_contentTableSlider").style.maxWidth = `calc(100% - ${fixedColumnHeaderWidth}px)`;
document.querySelector(".gt_bg_dummyContentTableSlider").style.maxWidth = `calc(100% - ${fixedColumnHeaderWidth}px)`;
}

function loadNothingFoundImgsForProdImgs() {
var prodImgContainerWithoutImg = [];
document.querySelectorAll(".gt_bg_prodImgContainer").forEach(x => {
if(x.getElementsByTagName('amp-img').length === 0){
prodImgContainerWithoutImg.push(x);
}
});
for (var i = 0; i < prodImgContainerWithoutImg.length; i++) {
createImageTag(noProductImagePath, prodImgContainerWithoutImg[i]);
}
}

function createImageTag(src, container) {
var img = document.createElement('amp-img');
img.src = src;
container.appendChild(img);
}

function showMerchantImage() {
document.querySelectorAll(".gt_bg_sponsoredImg").forEach(async function(ele) {
var img = ele.querySelector('amp-img');
img.setAttribute("src", loaderImg);
img.setAttribute("layout", "fill");
var imageUrl = img.getAttribute('data-src');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200) {
let grandParent = img.parentNode.parentNode;
for(let sibling of grandParent.children) {
if(sibling.classList.contains("gt_bg_sponsoredTxt")) {
sibling.classList.remove("gt_bg_hidden");
}
}
img.setAttribute("src", this.responseText);
}
else {
img.setAttribute("src", noProductImagePath);
}
};
xhr.open("GET", imageUrl);
xhr.send();
});
}

//utitlity functions
function offset(element) {
if (!element.getClientRects().length) {
return { top: 0, left: 0 };
}
let rect = element.getBoundingClientRect();
let win = element.ownerDocument.defaultView;
return ({
top: rect.top + win.pageYOffset,
left: rect.left + win.pageXOffset
});
}
loadNothingFoundImgsForProdImgs();
updateVisibleElems();
showMerchantImage();
}

document.addEventListener("load", initTableBehaviour({}));

Back to list