') .html(official.description) .find('*') .removeAttr('style') .end() .html(); } var itemTeaser = $('') .html(descriptionHTML) .appendTo(itemInfo); } if (official.mobile) { $('').appendTo(itemInfoInner); } // Add email if it has a value if (official.email) { $('').appendTo(itemInfoInner); } // Append the itemWrapper for this official under the kmRows kmRows.append(itemWrapper); }); if (!hasMatchingItems) { kmRows.remove(); } }); // Start processing the image queue for loaded items processofficialQueue(officialQueue); }, error: function(xhr, status, error) { console.error('Error fetching JSON data:', error); } }); // Helper function to create a placeholder div with initials if no image is found function createPlaceholder(itemImage, name) { var initials = name.split(' ').map(word => word[0]).join('').toUpperCase(); var noImgDiv = $(''); itemImage.addClass("NoImgContainer") itemImage.append(noImgDiv); } // Function to process the official queue one at a time and load images function processofficialQueue(queue) { if (queue.length === 0) return; var nextItem = queue.shift(); // Check if the image is available using the JSON 'img' property if (nextItem.official.img === "true") { // Check if img is true as a string checkImageSize(nextItem.imgSrc, function(fileSize) { if (fileSize && fileSize > 0) { if (fileSize > 150000) { loadImageToCanvas(nextItem.imgSrc, nextItem.itemImage, function() { nextItem.itemImage.closest('.item-wrapper').removeClass('hidebestyr'); addDescriptionIfNeeded(nextItem); // Check description after loading processofficialQueue(queue); }); } else { var img = $('').attr('src', nextItem.imgSrc).attr('alt', nextItem.official.name); nextItem.itemImage.append(img); nextItem.itemImage.closest('.item-wrapper').removeClass('hidebestyr'); addDescriptionIfNeeded(nextItem); // Check description after loading processofficialQueue(queue); } } else { createPlaceholder(nextItem.itemImage, nextItem.official.name); nextItem.itemImage.closest('.item-wrapper').removeClass('hidebestyr'); addDescriptionIfNeeded(nextItem); // Check description after loading processofficialQueue(queue); } }); } else { // No image exists, create a placeholder directly createPlaceholder(nextItem.itemImage, nextItem.official.name); nextItem.itemImage.closest('.item-wrapper').removeClass('hidebestyr'); addDescriptionIfNeeded(nextItem); // Check description after loading processofficialQueue(queue); } } function addDescriptionIfNeeded(nextItem) { // Select the existing .item-teaser within the relevant .item-info container var itemTeaser = nextItem.itemImage.closest('.item-info').find('.item-teaser'); var itemWrapper = nextItem.itemImage.closest('.item-wrapper'); // Ensure it exists before proceeding if (itemTeaser.length && itemTeaser.text().trim().length > 0) { // Apply max-height and overflow hidden styles initially itemTeaser.css({ "max-height": "200px", "overflow": "hidden" }); // Add a slight delay to measure the height after styles are applied var measuredHeight = itemTeaser.outerHeight(); // Check if the height is exactly 200px and add "See more" link if so if (measuredHeight === 200) { $('') .appendTo(itemTeaser) .on("click", function() { itemTeaser.css("max-height", "none"); // Expand content itemWrapper.addClass("big"); $(this).remove(); // Remove "See more" link }); } } else { //console.log("No valid .item-teaser found or it is empty for:", nextItem.official.name); } } // Function to check the Content-Length of an image without loading it fully function checkImageSize(imgSrc, callback) { $.ajax({ url: imgSrc, type: 'HEAD', success: function(data, status, xhr) { var fileSize = parseInt(xhr.getResponseHeader("Content-Length"), 10); callback(fileSize); }, error: function() { callback(0); // If HEAD request fails, treat as no image } }); } // Function to load image to canvas with a minimum intrinsic width of 500px, max width 600px, and max height 1000px function loadImageToCanvas(imgSrc, itemImage, onComplete) { var tempImage = new Image(); tempImage.onload = function() { var minWidth = 160; // Minimum intrinsic width for better quality var maxWidth = 200; // Maximum intrinsic width var maxHeight = 1000; // Maximum intrinsic height var width = tempImage.width; var height = tempImage.height; // Ensure minimum intrinsic width for better quality if (width maxWidth || height > maxHeight) { var scalingFactor = Math.max(width / maxWidth, height / maxHeight); width = Math.floor(width / scalingFactor); height = Math.floor(height / scalingFactor); } // Create canvas with the adjusted intrinsic dimensions var canvas = document.createElement('canvas'); canvas.width = width; // Intrinsic canvas width for quality canvas.height = height; // Intrinsic canvas height for quality var ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.drawImage(tempImage, 0, 0, width, height); // Set the canvas to scale responsively $(canvas).css({ width: '100%', // Display width set to 100% height: 'auto' // Maintain aspect ratio }).attr('alt', itemImage.find('p').text()); // Append the canvas to itemImage container itemImage.append(canvas); onComplete(); // Signal completion }; tempImage.onerror = function() { createPlaceholder(itemImage, itemImage.find('p').text()); onComplete(); }; tempImage.src = imgSrc; } }); function hexToRgb(hex) { // Remove the hash at the start if it's there hex = hex.replace('#', ''); // Parse r, g, b values var r = parseInt(hex.substring(0, 2), 16); var g = parseInt(hex.substring(2, 4), 16); var b = parseInt(hex.substring(4, 6), 16); return { r: r, g: g, b: b }; } // Function to convert RGB to HSL function rgbToHsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g 1) t -= 1; if (t 160; } function adjustColor(color, amount, opacity) { opacity = (opacity !== undefined) ? opacity : "1"; amount = (amount !== undefined) ? amount : 0; color = color.replace('#', ''); var r = parseInt(color.substring(0, 2), 16); var g = parseInt(color.substring(2, 4), 16); var b = parseInt(color.substring(4, 6), 16); // Convert RGB to HSL var hsl = rgbToHsl(r, g, b); // Adjust lightness (value) var adjustedL = hsl[2] + amount / 100; // Convert amount to a percentage // Set maximum lightness threshold var maxLightness = 0.9; // Adjust as needed // Ensure adjusted lightness stays within 0 to maxLightness adjustedL = Math.min(Math.max(adjustedL, 0), maxLightness); // Convert back to RGB var rgb = hslToRgb(hsl[0], hsl[1], adjustedL); // Convert RGB to hex var result = '#' + rgb.map(component => { var hex = component.toString(16); return hex.length === 1 ? '0' + hex : hex; }).join(''); // Combine with opacity and return result return 'rgba(' + rgb.join(',') + ', ' + opacity + ')'; } $('#searchInput').on('keyup', function() { let searchTerm = $(this).val().toLowerCase(); $('.km_rows').each(function() { let rows = $(this); let anyMatches = false; rows.find('.item-wrapper').each(function() { let itemWrapper = $(this); let wrapperText = itemWrapper.text().toLowerCase(); // Get all text content within .item-wrapper // Check if the search term is within the full text content if (wrapperText.includes(searchTerm)) { itemWrapper.show(); anyMatches = true; } else { itemWrapper.hide(); } }); // Show the title if any item within this row matches the search if (anyMatches) { rows.find('.title-name').show(); } else { rows.find('.title-name').hide(); } }); }); $('#resetButton').on('click', function() { $('#searchInput').val(''); // Empty the search input field $('.item-wrapper, .title-name').show(); // Show all items window.clickedTag = ''; // Reset clicked tag }); });