stuf
This commit is contained in:
a
parent
bb183f4211
commit
bdd8ccc0c6
|
|
@ -29,5 +29,8 @@
|
|||
"typescript": "^4.0.2",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit-element": "~/.local2.4.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.gallery {
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
margin: 1em;
|
||||
height: 30em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
142
src/index.ts
142
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 {
|
||||
shadow: ShadowRoot = this.attachShadow({ mode: "open" });
|
||||
private _item!: { img: string; name: string };
|
||||
|
||||
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;
|
||||
class Carousel extends LitElement {
|
||||
currentIndex = 0;
|
||||
currentItem = items[this.currentIndex];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.img = document.createElement("img") as HTMLImageElement;
|
||||
this.p = document.createElement("p") as HTMLParagraphElement;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.shadow.appendChild(this.img);
|
||||
this.shadow.appendChild(this.p);
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
:host {
|
||||
margin: 0.3em;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<button class="left"><</button>
|
||||
<img src=${this.currentItem.img}></img>
|
||||
<button class="right">></button>
|
||||
`;
|
||||
this.shadow.appendChild(style);
|
||||
}
|
||||
}
|
||||
customElements.define("x-item", Item);
|
||||
|
||||
class Carousel extends HTMLElement {
|
||||
items: Item[] = [];
|
||||
shadow: ShadowRoot = this.attachShadow({ mode: "open" });
|
||||
forSale = cyclicArray(items);
|
||||
leftButton!: HTMLButtonElement;
|
||||
rightButton!: HTMLButtonElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
static get styles() {
|
||||
return css`
|
||||
: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);
|
||||
|
|
|
|||
24
src/utils.ts
24
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 = () => {
|
||||
window.alarmsMap ??= new Map();
|
||||
return window.alarmsMap;
|
||||
};
|
||||
const alarmsMap = new Map<any, [Promise<void>, rejectCallback]>();
|
||||
|
||||
export const create = (delay: number, name?: any) => {
|
||||
const map = getMap();
|
||||
const alrm = map.get(name);
|
||||
const alrm = alarmsMap.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 getAll = () => Array.from(getMap().entries()).map((a) => a[0]);
|
||||
export const get = (name: any) => (alarmsMap.get(name) ?? [])[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]());
|
||||
}
|
||||
|
|
|
|||
12
yarn.lock
12
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue