Scanyonero/static/js/components/document-queue-entry.js

import { API } from '../api.js';
import { LitElement, css, html, repeat } from '../vendor/lit-html/lit-all.min.js';
import './document-queue-entry-page.js';
import './document-queue-entry-separator.js';

/** @typedef {{selected: boolean}} DocumentQueueEntryEventChangeSelectionDetails */
/** @typedef {CustomEvent<DocumentQueueEntryEventChangeSelectionDetails>} DocumentQueueEntryEventChangeSelection */

export class DocumentQueueEntry extends LitElement {
	static properties = {
		selected: { type: Boolean },
		queueEntry: { type: Object },

		api: { type: Object, state: true },
	};

	constructor() {
		super();

		this.selected = false;
		/** @type {API} */
		this.api;
		/** @type {import('model').APIQueueEntry} */
		this.queueEntry;
	}

	static styles = css`
		:host {
			padding: 8px;
			display: flex;
			flex-direction: row;
			gap: 8px;
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 8px;
		}

		#left-bar {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		#checkbox-selected {
			align-self: center;
			width: 24px;
			height: 24px;
		}

		#button-swap {
			width: 32px;
			height: 32px;
			padding: 0px;
			position: absolute;
			bottom: 0px;
		}
	`;

	// @ts-ignore
	render() {
		let embeddedElement;
		switch (this.queueEntry.type) {
			case "Page":
				embeddedElement = html`<document-queue-entry-page .document=${this.queueEntry} .api=${this.api}></document-queue-entry-page>`; break;
			case "Separator":
				embeddedElement = html`<document-queue-entry-separator .document=${this.queueEntry} .api=${this.api}></document-queue-entry-separator>`; break;
			default:
				embeddedElement = html`<span>Unsupported entry type!</span>`
		}

		return html`
			<div id="left-bar">
				<input id="checkbox-selected" type="checkbox" .checked=${this.selected} @change=${this.onCheckboxChange}></input>
				<button id="button-swap" @click=${e => this.api.queueShift(1, this.queueEntry.id)}>⇵</button>
			</div>

			${embeddedElement}
		`;
	}

	/** @param {Event} event */
	onCheckboxChange(event) {
		// @ts-ignore
		this.selected = event.target.checked;

		/** @type {CustomEventInit<DocumentQueueEntryEventChangeSelectionDetails>} */
		const eventData = { detail: { selected: this.selected } };
		this.dispatchEvent(new CustomEvent("changeselection", eventData));
	}

	/**
	 * Used for FLIP animations.
	 * @type {DOMRect}
	 */
	#oldBoundingClientRect;

	prepareFLIP() {
		this.#oldBoundingClientRect = this.getBoundingClientRect();
	}

	doFLIP() {
		const oldRect = this.#oldBoundingClientRect;
		if (oldRect == undefined) {
			return;
		}

		const newRect = this.getBoundingClientRect();

		const deltaX = oldRect.left - newRect.left;
		const deltaY = oldRect.top - newRect.top;

		if (Math.abs(deltaX) >= 1 || Math.abs(deltaY) >= 1) {
			this.animate([{
				transform: `translate(${deltaX}px, ${deltaY}px)`
			}, {
				transform: 'none'
			}], {
				duration: 150,
				easing: 'ease-out',
				fill: 'both',
			});
		}
	}
}

customElements.define("document-queue-entry", DocumentQueueEntry);