TImelapse Component

Image timelapse web component experiments.

by Nicholas Berlette

TypeScript

class Timelapse extends HTMLElement {
  protected static template: HTMLTemplateElement;
  protected static readonly styles = `
    <style>
      :host {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 1s ease-in-out;
      }
    </style>
  `;

  static {
    Timelapse.template = document.createElement('template');
    Timelapse.template.innerHTML = `
      <style>
        :host {
        	--color-primary: #234;
          --color-light: #567;
          --color-dark: #123;
          --color-shadow-1: #0002;
          --color-shadow-2: #0003;
          --color-shadow-3: #0005;
          --border-radius: 0.666rem;
          --max-width: 80vw;
          
          display: block;
          overflow: hidden;
          width: var(--max-width, 100%);
          height: calc(calc(768px / 1024px) * var(--max-width, 100%));
          /* margin: 5vw auto 0 auto; */
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: var(--color-light);
          padding: 1rem 1.25rem;
          border-radius: var(--border-radius, 1rem);
        }
				figure {
        	display: flex;
          flex: 1 1 auto;
          flex-basis: row;
          flex-wrap: no-wrap;
        }
        figure img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transition: all var(--transition-duration, 1s) var(--transition-easing, ease-in-out);
        }
        figure img.current, figure.current img {
        	opacity: 1;
        }
      </style>
      <div class="timelapse-outer">
      	<figure class="container">
        	<slot></slot>
        	<figcaption><slot name="caption">Latest image captured.</slot></figcaption>
				</figure>
				<nav...