Image

import BaseView from 'base-view';

const COVER_IMAGE_SELECTOR = '.a-image__image--fp';

const LAZY_LOADED = 'a-image__image--loaded';
const COMPATIBILITY_STATE = 'object-fit-ie';

const LAZY_LOAD_WAIT_MS = 200;

/**
 * Since IE and Edge don't support object-fit, use background: cover css for
 * them
 *
 * @see https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
 */
export default class AImageCover extends BaseView {
	initialize() {
		this.initUrl = this.getUrl();
	}

	bind() {
		super.bind();

		this.on( 'afterReplaceImage', () => {
			this.setSizes();
			this.objectFit();
		} );
	}

	objectFit() {
		if ('objectFit' in document.documentElement.style !== false) {
			this.destroy();
			return;
		}

		const img = this.getScopedElement(COVER_IMAGE_SELECTOR);

		if (!img) {
			this.destroy();
			return;
		}

		this.polyfill(img);
	}

	polyfill(img) {
		const url = this.getUrl();

		// wait for lazy loading to be complete
		if (img.classList.contains(LAZY_LOADED)) {
			if (this.initUrl === url) {
				window.setTimeout(() => this.polyfill(img), LAZY_LOAD_WAIT_MS);
				return;
			}
		}

		let fp = img.className.match(/\ba-image__image--fp-[^\s]+\b/g);
		if (fp) {
			this.addClass('a-image__image--fp');
			this.addClass(fp[0]);
		}

		this.addClass(COMPATIBILITY_STATE);
		this.element.style.backgroundImage = "url('"+url+"')";

		this.addClass(img, COMPATIBILITY_STATE);
	}

	getUrl() {
		const img = this.getScopedElement( COVER_IMAGE_SELECTOR );

		if (img) {
			return img.src;
		}

		return '';
	}

	setSizes() {
		const img = this.getScopedElement( COVER_IMAGE_SELECTOR );
		const cDims = this.element.getBoundingClientRect();
		const cRatio = cDims.width / cDims.height;
		const iRatio = img.naturalWidth / img.naturalHeight;

		const zoom = iRatio > cRatio ? iRatio / cRatio : cRatio / iRatio;

		img.sizes = cDims.width * zoom + 'px';
	}
}

import BaseView from 'base-view';
import inView from '../../../js/service/inview';

const BASE_CONTAINER_SELECTOR = '.a-image';

const LAZY_STATE = 'a-image__image--lazy';
const LAZY_LOADED = 'a-image__image--loaded';
const DEBOUNCE_DELAY_MS = 300;

export default class AImageLazy extends BaseView {
	initialize() {
		this.loading = false;
	}

	bind() {
		super.bind();

		inView(this.element, DEBOUNCE_DELAY_MS).then(() => this.maybeLoadImage());
	}

	maybeLoadImage() {
		if (!this.loading){
			this.loading = true;
			let img = this.loadFullImage();
			if (img.complete) {
				this.replaceImage( img );
			} else {
				img.onload = () => this.replaceImage( img );
			}
		}
	}

	loadFullImage() {
		let img = this.element.cloneNode( true );
		img.srcset = img.dataset.srcset || '';
		img.sizes = img.dataset.sizes || '';
		img.removeAttribute( 'data-srcset' );
		img.removeAttribute( 'data-sized' );

		// otherwise safari on iOS doesn't load images when
		// scrolling, even if they are in the viewport
		img.loading = 'eager';

		return img;
	}

	replaceImage( img ) {
		if (this.element.parentNode) {
			this.element.parentNode.replaceChild( img, this.element );
		}

		img.classList.add( LAZY_LOADED );
		img.classList.remove( LAZY_STATE );

		this.triggerAfterReplaceEvent( img.closest( BASE_CONTAINER_SELECTOR ) );

		this.destroy();
	}

	triggerAfterReplaceEvent(elem) {
		// use the old fashioned way, cause we need it in IE
		let event = document.createEvent('Event');
		event.initEvent('afterReplaceImage', true, true);
		elem.dispatchEvent(event);
	}
}