JezK

Edit File: resize-detection.js

(function(window, document) {
	let started;
	const scalingError = document.createElement('div');
	scalingError.id = 'ewww-scaling-error';

const lcpElements = [];
	const lcpTag = document.createElement('div');
	const excludeMenuTag = document.createElement('div');
	excludeMenuTag.id = 'ewww-lazy-exclude-menu';
	let excludeButtonVisible = false;
	let excludeMenuVisible = false;
	let lastLCP = false;
	let shouldTagLCP = true;
	const initCriticalImages = function() {
		if (! atfImagesLoaded() && Date.now() - started < 5000) {
			console.log('hold up, need to wait a bit...');
			setTimeout(initCriticalImages, 100);
			return;
		}
		console.log('lets get the LCP image!');
		setupLCPObserver();
	};

const matchPosition = function(sourceElem, destElem) {
		const rect = sourceElem.getBoundingClientRect();
		destElem.style.top = (rect.top + window.scrollY) + 'px';
		destElem.style.left = (rect.left + window.scrollX) + 'px';
		destElem.style.zIndex = sourceElem.style.zIndex + 999;
		destElem.style.maxWidth = (rect.width - 60) + 'px';
	};

const sendExclusion = async function() {
		this.removeEventListener('click', sendExclusion);
		const exclusion = this.dataset.ewwwLazyExcludeValue;
		console.log('sending exclusion:', exclusion, this.dataset.globalExclusion);
		const exclusionData = new FormData();
		exclusionData.append('action', 'ewww_add_lazy_exclusion');
		exclusionData.append('ewww_wpnonce', imageDetectiveVars.nonce);
		exclusionData.append('global', this.dataset.globalExclusion);
		exclusionData.append('exclusion', exclusion);
		exclusionData.append('post_id', imageDetectiveVars.postId);
		exclusionData.append('request_uri', imageDetectiveVars.requestUri);

try {
			const exclusionResponse = await fetch(
				imageDetectiveVars.ajaxUrl,
				{
					method: 'POST',
					body: exclusionData,
				}
			);
			if (!exclusionResponse.ok) {
				excludeMenuTag.innerHTML = imageDetectiveVars.invalid_response;
				excludeMenuTag.classList.add('ewww-error');
				window.console.log(`Attempt to add Lazy Load Exclusion resulted in an HTTP error with code ${exclusionResponse.status}`);
				return;
			}
			const exclusionResult = await exclusionResponse.json();
			if (exclusionResult.success && exclusionResult.message) {
				excludeMenuTag.innerHTML = exclusionResult.message;
				excludeMenuTag.classList.add('ewww-success');
			} else if (exclusionResult.data) {
				excludeMenuTag.innerHTML = exclusionResult.data;
				excludeMenuTag.classList.add('ewww-error');
			} else {
				excludeMenuTag.innerHTML = imageDetectiveVars.invalid_response;
				excludeMenuTag.classList.add('ewww-error');
				window.console.log('Attempt to add Lazy Load Exclusion encountered an invalid response:', exclusionResult);
			}
		} catch (error) {
			excludeMenuTag.innerHTML = imageDetectiveVars.invalid_response;
			excludeMenuTag.classList.add('ewww-error');
			window.console.log('Attempt to add Lazy Load Exclusion resulted in an error:', error);
		}
		excludeMenuVisible = false;
	}

const sendIgnoreImage = async function() {
		event.preventDefault();
		this.removeEventListener('click', sendIgnoreImage);
		currentScalingErrorElem.removeEventListener('mouseover', showScalingError);
		// How do we display success? Just nuke the error message?
		// But likely need to make sure we remove the ignoreTag
		const ignorePath = this.dataset.imagePath;
		console.log('sending ignore request:', ignorePath );
		const ignoreData = new FormData();
		ignoreData.append('action', 'ewww_add_ignore_scaling_rule');
		ignoreData.append('ewww_wpnonce', imageDetectiveVars.nonce);
		ignoreData.append('ignore', ignorePath);
		ignoreData.append('post_id', imageDetectiveVars.postId);
		ignoreData.append('request_uri', imageDetectiveVars.requestUri);

try {
			const ignoreResponse = await fetch(
				imageDetectiveVars.ajaxUrl,
				{
					method: 'POST',
					body: ignoreData,
				}
			);
			if (!ignoreResponse.ok) {
				scalingError.innerHTML = imageDetectiveVars.invalid_response;
				scalingError.classList.add('ewww-error');
				window.console.log(`Attempt to add Scaling Ignore Rule resulted in an HTTP error with code ${ignoreResponse.status}`);
				return false;
			}
			const ignoreResult = await ignoreResponse.json();
			if (ignoreResult.success && ignoreResult.message) {
				currentScalingErrorElem.classList.remove('ewww-improperly-scaled');
				scalingError.innerHTML = ignoreResult.message;
				scalingError.classList.add('ewww-success');
				imageDetectiveVars.scalingExclusions.push(ignorePath);
			} else if (ignoreResult.data) {
				scalingError.innerHTML = ignoreResult.data;
				scalingError.classList.add('ewww-error');
			} else {
				scalingError.innerHTML = imageDetectiveVars.invalid_response;
				scalingError.classList.add('ewww-error');
				window.console.log('Attempt to add Scaling Ignore Rule encountered an invalid response:', ignoreResult);
			}
		} catch (error) {
			scalingError.innerHTML = imageDetectiveVars.invalid_response;
			scalingError.classList.add('ewww-error');
			window.console.log('Attempt to add Scaling Ignore Rule resulted in an error:', error);
		}
		return false;
	}

const hideScalingError = function() {
		scalingError.innerText = '';
		scalingError.style.top = '-1000px';
		scalingError.style.left = '-1000px';
	}

const clearScalingError = function(elem) {
		elem.classList.remove('ewww-improperly-scaled');
		delete elem.dataset.ewwwScalingError;
		elem.removeEventListener('mouseover', showScalingError);
	}

const clearScaledImages = function() {
		const scaledImages = document.querySelectorAll('img.ewww-improperly-scaled');
		for (let i = 0, len = scaledImages.length; i < len; i++) {
			clearScalingError(scaledImages[i]);
		}
		hideScalingError();
	}

const clearLCPMarker = function() {
		for (let i = 0, len = lcpElements.length; i < len; i++){
			lcpElements[i].element.classList.remove('ewww-lcp-element');
			lcpElements[i].element.removeEventListener('mouseover', showExcludeMenu);
		}
		lcpTag.style.top = '-1000px';
		lcpTag.style.left = '-1000px';
	}

const atfImages = [];
	let isBodyHidden;

const imageInView = function(img) {
		const rect = img.getBoundingClientRect();
		const screenWidth = window.innerWidth || document.documentElement.clientWidth;
		const screenHeight = window.innerHeight || document.documentElement.clientHeight;
		if (
			(rect.bottom || rect.right || rect.left || rect.top) &&
			(
				(rect.top >= 0 && rect.top <= screenHeight) ||
				(rect.bottom >= 0 && rect.bottom <= screenHeight)
			) &&
			(
				(rect.left >= 0 && rect.left <= screenWidth) ||
				(rect.right >= 0 && rect.right <= screenWidth)
			) &&
			isVisible(img)
		) {
			return true;
		}
		/*console.log(img.dataset.src);
		console.log(rect.top + ' >= 0');
		console.log(rect.left + ' >= 0');
		console.log(rect.right + ' <= ' + (window.innerWidth || document.documentElement.clientWidth));
		console.log(rect.bottom + ' <= ' + (window.innerHeight || document.documentElement.clientHeight));*/
		return false;
	};

const isVisible = function (elem) {
		if (isBodyHidden == null) {
			isBodyHidden = getCSS(document.body, 'visibility') == 'hidden';
		}
		return isBodyHidden || !(getCSS(elem.parentNode, 'visibility') == 'hidden' && getCSS(elem, 'visibility') == 'hidden');
	};

const getCSS = function (elem, style) {
		return (getComputedStyle(elem, null) || {})[style];
	};

document.addEventListener('lazyloaded', function(e) {
		clearScalingError(e.target);
		checkImageScale(e.target);
	});
})(window, document);