stuf

package.json

@@ -29,5 +29,8 @@
 		"typescript": "^4.0.2",
 		"webpack": "^4.44.1",
 		"webpack-cli": "^3.3.12"
+	},
+	"dependencies": {
+		"lit-element": "~/.local2.4.0"
 	}
 }

src/base.scss

@@ -44,7 +44,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	a {
+	&>a {
 		padding: 0px 2px;
 		&:link,&:visited {
 			color: var(--text-opposite-4);
@@ -62,7 +62,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	img {
+	&>img {
 		max-width: 100%;
 		max-height: 100%;
 		padding: 1em;
@@ -76,7 +76,7 @@ nav {
 	align-items: center;
 	color: var(--text-opposite-1);
 	background-color: var(--green-1);
-	a {
+	&>a {
 		border-left: 1px solid var(--text-color-1);
 		&:first-child {
 			border-left: 0px;

src/index.scss

@@ -1,4 +1,6 @@
 .gallery {
-	width: 100%;
+	margin: 1em;
-	height: 10em;
+	height: 30em;
+	display: flex;
+	justify-content: center;
 }

src/index.ts

@@ -1,4 +1,5 @@
-import { cyclicArray, rotateArray } from "./utils";
+import { css, html, LitElement } from "lit-element";
+import { cyclicArray } from "./utils";
 
 const items = [
 	{
@@ -22,132 +23,53 @@ const items = [
 	},
 ];
 
-class Item extends HTMLElement {
+class Carousel extends LitElement {
-	shadow: ShadowRoot = this.attachShadow({ mode: "open" });
+	currentIndex = 0;
-	private _item!: { img: string; name: string };
+	currentItem = items[this.currentIndex];
-
-	public get item(): { img: string; name: string } {
-		return this._item;
-	}
-	public set item(value: { img: string; name: string }) {
-		this._item = value;
-		this.img.src = value.img;
-		this.p.innerText = value.name;
-	}
-	img;
-	p;
 
 	constructor() {
 		super();
-		this.img = document.createElement("img") as HTMLImageElement;
-		this.p = document.createElement("p") as HTMLParagraphElement;
 	}
 
-	connectedCallback() {
+	render() {
-		this.shadow.appendChild(this.img);
+		return html`
-		this.shadow.appendChild(this.p);
+			<button class="left">&lt</button>
-
+			<img src=${this.currentItem.img}></img>
-		const style = document.createElement("style");
+			<button class="right">&gt</button>
-		style.innerHTML = `
-			:host {
-				margin: 0.3em;
-			}
-			img {
-				height: 100%;
-				max-width: 100%;
-				object-fit: scale-down;
-			}
 		`;
-		this.shadow.appendChild(style);
 	}
-}
-customElements.define("x-item", Item);
 
-class Carousel extends HTMLElement {
+	static get styles() {
-	items: Item[] = [];
+		return css`
-	shadow: ShadowRoot = this.attachShadow({ mode: "open" });
-	forSale = cyclicArray(items);
-	leftButton!: HTMLButtonElement;
-	rightButton!: HTMLButtonElement;
-
-	constructor() {
-		super();
-		const style = document.createElement("style");
-		style.innerHTML = `
 			:host {
+				max-width: 100%;
+				height: 100%;
+				height: 100%;
 				display: flex;
 				align-items: center;
-				height: 100%;
 			}
+
 			button {
-				z-index: 2;
-			}
-
-			div {
-				display: flex;
-				height: 100%;
-				margin: 0 -10%;
-			}
-
-			x-item {
-				max-height: 100%;
-				width: 33%;
-				transition: 3s ease;
-				flex-grow: 1;
-			}
-			
-			.item-1, .item-3 {
-				transform: scale(0.8, 0.8);
-				opacity: 0.7;
-			}
-			.item-1 {
-				order: 1;
-			}
-			.item-2 {
-				order: 2;
-				margin: 0 -10em;
 				z-index: 1;
+				margin: -6em;
 			}
-			.item-3 {
+
-				order: 3;
+			img {
+				max-height: 100%;
+				box-shadow: 0px 0px 5px 0px var(--background-opposite-1);
+				transition: 0.2s;
+			}
+
+			img:hover {
+				transform: scale(1.1);
+			}
+
+			button {
+				border: 1px solid var(--background-opposite-2);
+				border-radius: 50%;
+				background-color: var(--background-primary-2);
 			}
 		`;
-		this.shadow.appendChild(style);
-	}
-
-	connectedCallback() {
-		this.leftButton = document.createElement("button") as HTMLButtonElement;
-		this.leftButton.innerHTML = "Next";
-		this.leftButton.addEventListener("click", () => this.rotate());
-		this.shadow.appendChild(this.leftButton);
-
-		const container = document.createElement("div") as HTMLDivElement;
-		this.shadow.appendChild(container);
-		for (let i = 0; i < 3; i++) {
-			const elm = document.createElement("x-item") as Item;
-			elm.classList.add(`item-${i + 1}`);
-			elm.item = items[i];
-			container.appendChild(elm);
-			this.items.push(elm);
-		}
-		this.rightButton = document.createElement("button") as HTMLButtonElement;
-		this.rightButton.innerHTML = "Prev";
-		this.rightButton.addEventListener("click", () => this.rotate(true));
-		this.shadow.appendChild(this.rightButton);
-	}
-	rotate(backwards = false) {
-		this.items.forEach((item) => item.classList.remove(`item-1`));
-		this.items.forEach((item) => item.classList.remove(`item-2`));
-		this.items.forEach((item) => item.classList.remove(`item-3`));
-
-		this.items = rotateArray(this.items, backwards);
-		this.items.forEach((item, i) => item.classList.add(`item-${i + 1}`));
-
-		const val = this.forSale.next(backwards).value;
-		if (val) {
-			if (backwards) this.items[0].item = val;
-			else this.items[2].item = val;
-		}
 	}
 }
 customElements.define("x-carousel", Carousel);

src/utils.ts

@@ -35,38 +35,28 @@ export const newPromise = <T>(): [
 	return [promise, resolve!, reject!];
 };
 
-declare global {
-	interface Window {
-		alarmsMap?: Map<any, [Promise<void>, rejectCallback]>;
-	}
-}
-
 //Clone of the https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/alarms
 export namespace Alarms {
-	const getMap = () => {
+	const alarmsMap = new Map<any, [Promise<void>, rejectCallback]>();
-		window.alarmsMap ??= new Map();
-		return window.alarmsMap;
-	};
 
 	export const create = (delay: number, name?: any) => {
-		const map = getMap();
+		const alrm = alarmsMap.get(name);
-		const alrm = map.get(name);
 		if (alrm) alrm[1]();
 
 		const [promise, resolve, reject] = newPromise<void>();
 		const timeout = setTimeout(resolve, delay);
 		promise.catch(() => window.clearTimeout(timeout));
 
-		if (name != undefined) map.set(name, [promise, reject]);
+		if (name != undefined) alarmsMap.set(name, [promise, reject]);
 		return promise;
 	};
 
-	export const get = (name: any) => (getMap().get(name) ?? [])[0];
+	export const get = (name: any) => (alarmsMap.get(name) ?? [])[0];
-	export const getAll = () => Array.from(getMap().entries()).map((a) => a[0]);
+	export const getAll = () => Array.from(alarmsMap.entries()).map((a) => a[0]);
 
 	export const clear = (name: any) => {
-		const alrm = getMap().get(name);
+		const alrm = alarmsMap.get(name);
 		if (alrm) alrm[1]();
 	};
-	export const clearAll = () => getMap().forEach((a) => a[1]());
+	export const clearAll = () => alarmsMap.forEach((a) => a[1]());
 }

yarn.lock

@@ -2528,6 +2528,18 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lit-element@~/.local2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452"
+  integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==
+  dependencies:
+    lit-html "^1.1.1"
+
+lit-html@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
+  integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==
+
 live-server@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/live-server/-/live-server-1.2.1.tgz#670630dd409d22fe9c513ab1c1894686c757153e"