cosmoz-data-nav.js

/* eslint-disable max-lines */
import { render } from 'lit-html';

import { PolymerElement } from '@polymer/polymer/polymer-element';
import { html } from '@polymer/polymer/lib/utils/html-tag';
import { templatize } from '@polymer/polymer/lib/utils/templatize';

import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer';

import { Debouncer } from '@polymer/polymer/lib/utils/debounce';
import { animationFrame } from '@polymer/polymer/lib/utils/async';
import { flush } from '@polymer/polymer/lib/utils/flush';

import { hauntedPolymer } from '@neovici/cosmoz-utils';

import { useDataNav } from './lib/use-data-nav.js';

const _async = window.requestIdleCallback || window.requestAnimationFrame || window.setTimeout,
	_hasDeadline = 'IdleDeadline' in window,
	_asyncPeriod = (cb, timeout = 1500) => {
		_async(() => cb(), _hasDeadline && { timeout });
	},

	hashUrl = () => new URL(location.hash.replace(/^#!?/iu, '').replace('%23', '#'), location.origin),
	getHashParam = param => new URLSearchParams(hashUrl().hash.replace('#', '')).get(param),
	setHashParam = (param, value) => {
		const
			url = hashUrl(),
			searchParams = new URLSearchParams(url.hash.replace('#', ''));

		searchParams.set(param, value);

		const newUrl = '#!' + Object.assign(url, { hash: searchParams }).href.replace(location.origin, '');

		history.replaceState(null, '', newUrl);
	};

class CosmozDataNav extends hauntedPolymer('haunted', useDataNav)(PolymerElement) {
	static get template() { // eslint-disable-line max-lines-per-function
		return html`
			<style>
				:host {
					position: relative;
				}

				#items {
					overflow-x: hidden;
				}

				#items,
				#items > ::slotted(.animatable) {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
				:host([animating]) #items > ::slotted(.animatable){
					transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;
					backface-visibility: hidden;
				}

				:host([animating][reverse]) #items > ::slotted(.in),
				:host([animating]) #items > ::slotted(.out){
					transform: translateX(-100%);
				}

				:host([animating][reverse]) #items > ::slotted(.out),
				:host([animating]) #items > ::slotted(.in){
					transform: translateX(100%);
				}

				:host([has-items][animating]) #items > ::slotted(:not(.selected):not(.out)),
				:host([has-items]:not([animating])) #items > ::slotted(:not(.selected)),
				:host(:not([has-items])) #items > ::slotted(:not(:first-of-type)){
					display: none;
				}
			</style>
			<div id="items">
				<slot name="items"></slot>
			</div>
			<div id="templates">
				<slot id="templatesSlot"></slot>
			</div>
		`;
	}

	static get properties() { // eslint-disable-line max-lines-per-function
		return {
			/**
			 * The array of buffer elements.
			 */
			_elements: {
				type: Array,
				value() {
					return [];
				}
			},

			/**
			 * The name of the variable to add to the binding scope for the array
			 * element associated with a template instance.
			 */
			as: {
				type: String,
				value: 'item'
			},

			/**
			 * The name of the variable to add to the binding scope with the index
			 * for the item.
			 */
			indexAs: {
				type: String,
				value: 'index'
			},

			/**
			 * An array containing items from which a selection can be made.
			 */
			items: {
				type: Array,
				value() {
					return [];
				},
				notify: true,
				observer: '_itemsChanged'
			},

			/**
			 * The length of items array.
			 */
			queueLength: {
				type: Number,
				notify: true,
				readOnly: true
			},

			hasItems: {
				type: Boolean,
				readOnly: true,
				reflectToAttribute: true
			},

			elementsBuffer: {
				type: Number,
				value: 3
			},

			/**
			 * Number of items after the currently selected one to preload.
			 */
			preload: {
				type: Number,
				value: 1
			},

			renderItem: {
				type: Function
			},

			/**
			 * The currently selected index.
			 */
			selected: {
				type: Number,
				value: 0,
				notify: true,
				observer: '_updateSelected'
			},

			/**
			 * The index of the next element.
			 */
			selectedNext: {
				type: Number,
				notify: true,
				value: 1,
				readOnly: true
			},

			/**
			 * The currently selected element (holder)
			 */
			selectedElement: {
				type: Object,
				notify: true,
				readOnly: true
			},

			/**
			 * The currently selected element (instance)
			 */
			selectedInstance: {
				type: Object,
				notify: true,
				readOnly: true
			},

			/**
			 * The currently selected item, or `null` if no item is selected.
			 */
			selectedItem: {
				type: Object,
				notify: true,
				readOnly: true,
				computed: '_getItem(selected, items.*)'
			},

			/**
			 * True if cosmoz-data-nav should try to maintain selection when
			 * `items` change.
			 */
			maintainSelection: {
				type: Boolean,
				value: false
			},

			/**
			 * The attribute that elements which control the `selected` of this element
			 * should have. The value of the attribute can be `-1` or `+1`.
			 */
			selectAttribute: {
				type: String,
				value: 'cosmoz-data-nav-select'
			},

			/**
			 *	True if the element is currently animating.
			 */
			animating: {
				type: Boolean,
				value: false,
				reflectToAttribute: true
			},

			/**
			 * True if selecting a element with a index smaller than the current one.
			 */
			reverse: {
				type: Boolean,
				value: false,
				reflectToAttribute: true
			},

			/**
			 * Function used to determine if a item is incomplete and needs to be preloaded.
			 * The default values is a function that requires item to be a `Object`.
			 */
			isIncompleteFn: {
				type: Function,
				value() {
					return item => item == null || typeof item !== 'object';
				}
			},

			/**
			 * The hash parameter to use for selecting an item.
			 */
			hashParam: {
				type: String
			},

			/**
			 *
			 */
			idPath: {
				type: String,
				value: 'id'
			},

			/**
			 * True if element should render items even if it is not visible.
			 */
			hiddenRendering: {
				type: Boolean,
				value: false
			},

			/**
			 * Whether we should request data for all preloaded items at once or one at a time
			 */
			parallelDataRequests: {
				type: Boolean,
				value: false
			}
		};
	}

	static get observers() {
		return [
			'renderIncomplete(selected, haunted)'
		];
	}

	renderIncomplete(index, haunted) {
		if (haunted == null) {
			return;
		}

		const position = index < this.items.length ? index : index - 1,
			element = this._getElement(position),
			item = this.items[position];

		if (element == null || !this.isIncompleteFn(item)) {
			return;
		}
		render(haunted.incompleteTemplates[position], element.__incomplete);
	}

	constructor() {
		super();
		this._previouslySelectedItem = null;
		this._preloadIdx = 0;
		this._boundOnTemplatesChange = this._onTemplatesChange.bind(this);
	}

	connectedCallback() {
		super.connectedCallback();
		this._templatesObserver = new FlattenedNodesObserver(
			this.$.templatesSlot,
			this._boundOnTemplatesChange
		);
		this.addEventListener('tap', this._onTap);
		this.addEventListener('transitionend', this._onTransitionEnd);
	}

	disconnectedCallback() {
		super.disconnectedCallback();
		if (this._templatesObserver) {
			this._templatesObserver.disconnect();
			this._templatesObserver = null;
		}

		if (this._selectDebouncer != null) {
			this._selectDebouncer.cancel();
		}

		this._previouslySelectedItem = null;
		this._indexRenderQueue = [];
		this.removeEventListener('tap', this._onTap);
		this.removeEventListener('transitionend', this._onTransitionEnd);

		this.splice('_elements', 0, this._elements.length, this._createElement())
			.forEach(element => {
				if (this.renderItem) {
					element.removeChild(element.__instance);
				} else {
					this._removeInstance(element.__instance);
				}
				element.removeChild(element.__incomplete);
				element.__instance = element.__incomplete = null;
			});
	}

	_onTemplatesChange(change) {
		if (!this._elementTemplate && !this.renderItem) {
			const templates = change.addedNodes.filter(n => n.nodeType === Node.ELEMENT_NODE && n.tagName === 'TEMPLATE'),
				elementTemplate = templates[0];

			if (!elementTemplate) {
				// eslint-disable-next-line no-console
				console.warn('cosmoz-data-nav requires a template');
				return;
			}
			this._templatize(elementTemplate);
		}

		const elements = this._elements,
			length = elements.length;

		this.splice('_elements', -1, 0, ...Array(this.elementsBuffer - length)
			.fill().map(this._createElement, this));

		elements.forEach(el => this.appendChild(el));
	}

	_templatize(elementTemplate) {
		this._elementTemplate = elementTemplate;

		const baseProps = {
			prevDisabled: true,
			nextDisabled: true,
			[this.indexAs]: true
		};
		this._elementCtor = templatize(this._elementTemplate, this, {
			instanceProps: Object.assign({ [this.as]: true }, baseProps),
			parentModel: true,
			forwardHostProp: this._forwardHostProp,
			notifyInstanceProp: this._notifyInstanceProp
		});
	}

	get _allElementInstances() {
		return this._elements
			.map(e => e.__instance)
			.filter(i => i != null);
	}

	_forwardHostProp(prop, value) {
		const instances = this._allElementInstances;
		if (!instances || !instances.length) {
			return;
		}
		instances.forEach(inst => inst.forwardHostProp(prop, value));
	}

	_notifyInstanceProp(inst, prop, value) {
		const index = inst.index,
			item = this.items[index];
		if (prop !== this.as || value === item || this._allElementInstances.indexOf(inst) < 0) {
			return;
		}
		this.haunted.cache.dropItem(item);
		this.set(['items', index], value);
	}

	_createElement() {
		const element = document.createElement('div'),
			incDiv = document.createElement('div');
		element.appendChild(incDiv);
		element.__incomplete = incDiv;
		if (this.renderItem) {
			const instDiv = document.createElement('div');
			element.appendChild(instDiv);
			element.__instance = instDiv;
		}
		element.setAttribute('slot', 'items');
		element.classList.add('animatable');
		return element;
	}

	/**
	 * Selects an item by index.
	 *
	 * @param	 {Number} index The index
	 * @return {void}
	 */
	select(index) {
		const length = this.items && this.items.length;
		if (!length || index < 0 || index >= length) {
			return;
		}
		this.reverse = index < this.selected;
		this.selected = index;
	}

	/**
	 * Replace an id in the `items` element list with the full data of the item.
	 *
	 * @param	 {type} id		 The id currently stored in the `items` array
	 * @param	 {Object} item The full data of object
	 * @return {void}
	 */
	setItemById(id, item) {
		const items = this.items,
			matches = items.filter(item => this._getItemId(item) === id);

		if (matches.length === 0) {
			// eslint-disable-next-line no-console
			console.warn('List item replacement failed, no matching idPath', this.idPath, 'with id', id, 'in the item list', items, 'to replace with item', item);
			return;
		} else if (matches.length > 1) {
			// eslint-disable-next-line no-console
			console.warn('Multiple replaceable items matches idPath', this.idPath, 'with id', id, 'in the item list', items, 'to replace with item', item);
		}

		this.haunted.cache.set(id, item);
		matches.forEach(match => this.set(['items', items.indexOf(match)], { ...item }));

		this._preload();

		if (this.animating || this.selected == null) {
			return;
		}

		this._updateSelected();
	}

	/**
	 * Observes full changes to `items` properties
	 * and replaces cached items with full data if available.
	 *
	 * @param	 {type} items description
	 * @return {type}				description
	 */
	_itemsChanged(items) { // eslint-disable-line max-statements
		const length = items && items.length;

		// update read-only properties
		this._setQueueLength(length >> 0); // eslint-disable-line no-bitwise
		this._setHasItems(!!length);

		// replace incomplete items with cached item data
		if (length) {
			items.forEach((item, index) => {
				if (this.isIncompleteFn(item)) {
					const cachedItem = this.haunted?.cache?.get(item);
					if (cachedItem) {
						this.set(['items', index], cachedItem);
					}
				}
			});
		}

		// synchronize `selected` with hash params
		if (this._updateSelectedFromHash()) {
			return;
		}

		// reset queue to 0 or maintain selection
		let index = 0;
		if (items.length > 0 && this.maintainSelection && this._previouslySelectedItem != null) {
			// search for previously selected item by reference
			index = items.indexOf(this._previouslySelectedItem);

			// if not found, search by id
			if (index < 0) {
				const prevId = this._getItemId(this._previouslySelectedItem);
				index = items.findIndex(item => this._getItemId(item) === prevId);
			}

			// if still not found, remain on the selected index
			if (index < 0) {
				index = this.selected < items.length
					? this.selected
					: items.length - 1;
			}
			this._realignElements(index);
		}
		// update selected or force re-render if selected did not change
		if (this.selected === index) {
			return this._updateSelected();
		}
		this.selected = index;
		return index;
	}

	_realignElements(index) { // eslint-disable-line max-statements
		const elements = this._elements,
			element = this._getElement(index),
			item = this.items[index];
		if (this.isIncompleteFn(item) || element.item === item) {
			return;
		}
		const renderedElement = this._elements.find(el => !this.isIncompleteFn(el.item) && this._getItemId(el.item) === this._getItemId(item));
		if (!renderedElement) {
			return;
		}
		const elementIndex = elements.indexOf(element),
			renderedIndex = elements.indexOf(renderedElement);
		if (elementIndex === renderedIndex) {
			return;
		}

		if (!this.renderItem) {
			// update instance's data-nav related props
			const instance = renderedElement.__instance;
			Object.entries(this._getBaseProps(index))
				.forEach(([key, value]) => instance._setPendingProperty(key, value));
			instance._flushProperties();
		}
		this._elements.splice(renderedIndex, 1);
		this.splice('_elements', elementIndex, 0, renderedElement);
	}

	/**
	 * Observes changed to `selected` property and
	 * updates related properties and the `selected` page.
	 *
	 * @param	 {Number} selected The selected property
	 * @param	 {Number} previous The previous value of selected property
	 * @return {void}
	 */
	_updateSelected(selected = this.selected, previous) { // eslint-disable-line max-statements
		if (this.items.length === 0) {
			return;
		}
		const position = selected < this.items.length ? selected : selected - 1;
		this._setSelectedNext((position || 0) + 1);
		this._preload(position);
		this._previouslySelectedItem = this.items[position];

		const element = this._getElement(position);

		if (!element) {
			return;
		}

		this._setSelectedElement(element);
		this._setSelectedInstance(this._getInstance(element));

		this._updateHashForSelected(position);

		const classes = element.classList,
			animating = this.animating && previous != null && previous !== position;

		if (!animating) {
			this._elements.forEach(el => el.classList.remove('selected'));
		}

		classes.toggle('in', animating);
		classes.add('selected');

		if (!animating) {
			if (this.isConnected) {
				this._synchronize();
			}
			return;
		}

		const prev = animating && this._getElement(previous);

		requestAnimationFrame(() => {
			if (prev && element.offsetWidth) {
				prev.classList.add('out');
				prev.classList.remove('selected');
			}
			classes.remove('in');
		}, 8);
	}

	/**
	 * Handles `transitionend` event and cleans up animation classe and properties
	 *
	 * @param	 {TransitionEvent} e The event
	 * @return {void}
	 */
	_onTransitionEnd(e) {
		const elements = this._elements;

		if (!this.animating || elements.indexOf(e.target) < 0) {
			return;
		}

		this.animating = false;
		elements.forEach(el => el.classList.remove('in', 'out'));
		this._synchronize();
	}

	/**
	 * Preloads items that are not loaded depending on the currently
	 * selected item and the `preload` property.
	 *
	 * @fires need-data
	 * @param	 {Number} index The index to preload from
	 * @return {void}
	 */
	_preload(index = this._preloadIdx) {
		const items = this.items;

		if (!Array.isArray(items) || items.length === 0) {
			return;
		}

		const item = items[index];

		if (this.isIncompleteFn(item)) {
			this.dispatchEvent(new CustomEvent('need-data', {
				bubbles: true,
				composed: true,
				detail: {
					id: item,
					render: true
				}
			}));
			if (!this.parallelDataRequests) {
				return;
			}
		}

		if (index >= Math.min(this.selected + this.preload, items.length - 1)) {
			return;
		}

		this._preloadIdx = index + 1;
		this._preload();
	}

	_getBaseProps(index) {
		return {
			prevDisabled: index < 1,
			nextDisabled: index + 1 >= this.items.length,
			[this.indexAs]: Math.max(Math.min(index, this.items.length - 1), 0)
		};
	}

	_getElement(index, _elements = this._elements) {
		const elements = _elements && _elements.base || _elements,
			bufferLength = this.elementsBuffer || elements.length,
			elementIndex = index % bufferLength;

		return elements[elementIndex];
	}

	_getInstance(selectedElement) {
		if (selectedElement == null) {
			return;
		}
		// return reference to the rendered template instance or the incomplete template if missing
		return selectedElement.children[1] || selectedElement.__incomplete;
	}

	_getItem(index, items = this.items) {
		const arr = items.base ? items.base : items;
		return arr[index];
	}

	_resetElement(index) { // eslint-disable-line max-statements
		const element = this._getElement(index);
		if (!element) {
			return;
		}

		const item = this.items[index],
			baseProps = this._getBaseProps(index),
			instance = element.__instance;

		if (!this.renderItem && instance) {
			Object.assign(instance, baseProps);
		}

		if (!this.isIncompleteFn(item) && element.item === item) {
			return;
		}

		if (element._reset) {
			return;
		}
		element._reset = true;
		element.__incomplete.style.display = 'block';

		if (!instance) {
			return;
		}

		this._toggleInstance(instance, false);
	}

	_removeInstance(instance) {
		if (!instance) {
			return;
		}
		instance.children.forEach(child => child.parentNode.removeChild(child));
	}

	/**
	* Syncronizes the `items` data with the created template instances
	* depending on the currently selected item.
	* @return {type}	description
	*/
	_synchronize() {
		const selected = this.selected,
			buffer = this.elementsBuffer,
			offset = buffer / 2 >> 0, // eslint-disable-line no-bitwise
			max = Math.max,
			min = Math.min,
			length = this.items.length,

			start = min(max(selected - offset, 0), length ? length - buffer : 0),
			end = max(min(selected + offset, length ? length - 1 : 0), buffer - 1),
			indexes = Array(end + 1)
				.fill()
				.map((u, i) => i)
				.slice(start >= 0 ? start : 0);

		// Reset items
		indexes.forEach(i => this._resetElement(i));
		this._indexRenderQueue = indexes;
		_asyncPeriod(this._renderQueue.bind(this));

	}

	/**
	 * Handle `tap` event and finds the closest item to the rootTarget that has a `selectAttribute` attribute.
	 * If the attribute is `next` or `previous` the `selectNext` or `selectPrevious` action is called.
	 *
	 * @param	 {Event} event The tap event
	 * @return {void}
	 */
	_onTap(event) {
		if (this.animating) {
			return;
		}
		const path = event.composedPath(),
			attr = this.selectAttribute,
			selectEl = path.find(e => e && e.hasAttribute && e.hasAttribute(attr));

		if (!selectEl) {
			return;
		}
		const inBetween = path.slice(path.indexOf(selectEl)),
			ancestorNav = inBetween.find(e => e && e.tagName === this.tagName);

		if (ancestorNav !== this) {
			return;
		}

		const select = parseInt(selectEl.getAttribute(attr), 10);

		if (isNaN(select)) {
			return;
		}
		this._selectDebouncer = Debouncer.debounce(this._selectDebouncer,
			animationFrame,
			() => {
				this.animating = true;
				this.select(this.selected + select);
			}
		);
	}

	/**
	* True if the current element is visible.
	*/
	get _isVisible() {
		return Boolean(this.offsetWidth || this.offsetHeight);
	}

	/**
	 * Select item by id.
	 *
	 * @deprecated
	 * @param	 {String|Number} id The item's id
	 * @return {void}
	 */
	selectById(id) {
		for (let index = 0; index < this.items.length; index++) {
			const item = this.items[index];
			if (typeof item === 'object' && item.id === id || item === id) {
				this.selected = index;
				return;
			}
		}
	}

	_forwardItem(element, item, idx) {
		this._removeInstance(element.__instance);
		flush();

		const props = Object.assign({ [this.as]: item }, this._getBaseProps(idx)),
			instance = new this._elementCtor(props);

		element.__instance = instance;
		element.appendChild(instance.root);
	}

	_renderQueue() {
		if (!this.isConnected) {
			return;
		}
		const queue = this._indexRenderQueue;

		if (!Array.isArray(queue) || queue.length < 1) {
			// no tasks in queue
			return;
		}

		if (this.animating) {
			// will be re-run on transition end
			return;
		}

		if (this.hiddenRendering || this._isVisible) {

			this._renderRan = this._renderAbort = false;

			this._indexRenderQueue = queue
				.sort((a, b) => {
					if (a === this.selected) {
						return -1;
					}
					if (b === this.selected) {
						return 1;
					}
					return 0;
				})
				.map(this._renderQueueProcess, this)
				.filter(idx => idx != null);

			if (this._renderAbort || this._indexRenderQueue.length === 0) {
				return;
			}
		}

		_asyncPeriod(this._renderQueue.bind(this));
	}

	_renderQueueProcess(idx) { // eslint-disable-line max-statements
		const element = this._getElement(idx),
			item = this.items[idx];

		if (this.isIncompleteFn(item)) {
			element.item = false;
			// no data for item drop task from queue
			return;
		}

		if (this._renderRan) {
			// one render per run
			// maintain task in queue
			return idx;
		}
		element.__incomplete.style.display = 'none';

		const isSelected = idx === this.selected,
			needsRender = element.item !== item || (this.renderItem && element.ilen !== this.items?.length);

		this._renderRan = needsRender;

		if (needsRender) {
			element.item = item;
			element._reset = false;
			if (this.renderItem) {
				render(this.renderItem(item, idx, this.items), element.__instance);
				this._toggleInstance(element.__instance, true);
				element.ilen = this.items?.length
				return;
			}
			this._forwardItem(element, item, idx);
			if (isSelected) {
				return idx;
			}
		} else if (isSelected) {
			// make sure that the instance is visible (may be a re-aligned invisible instance)
			this._toggleInstance(element.__instance, true);
			this._renderRan = true;
			this._setSelectedInstance(this._getInstance(element));
		}
	}

	_toggleInstance(inst, show) {
		if (this.renderItem) {
			inst.style.display = show ? 'contents' : 'none';
			return;
		}
		inst?._showHideChildren(!show);
	}

	_getItemId(item) {
		return this.isIncompleteFn(item) ? item : this.get(this.idPath, item);
	}

	_updateHashForSelected(selected) {
		const hashParam = this.hashParam,
			idPath = this.idPath;

		if (!hashParam || !idPath || !this.items.length) {
			return;
		}

		const item = this.items[selected];
		if (item == null) {
			return;
		}
		const itemId = this._getItemId(item),
			hashValue = getHashParam(hashParam);

		if (itemId === hashValue) {
			return;
		}

		setHashParam(hashParam, itemId);
	}

	_updateSelectedFromHash() {
		const hashParam = this.hashParam,
			idPath = this.idPath;

		if (!(hashParam && idPath)) {
			return;
		}

		if (this._readFromHashOnce && !this.maintainSelection) {
			return;
		}

		const hashValue = getHashParam(hashParam);

		if (!hashValue) {
			this._readFromHashOnce = true;
			return;
		}

		const selection = this.items.findIndex(i => this._getItemId(i) === hashValue);

		if (selection < 0 || selection === this.selected) {
			return;
		}
		this._readFromHashOnce = true;
		this.selected = selection;
		return true;
	}

}
customElements.define('cosmoz-data-nav', CosmozDataNav);