Fixes for the carousel

This commit is contained in:
Linux User 2020-10-01 20:44:23 +02:00
parent 02f8f27839
commit caa491fbaf
8 changed files with 889 additions and 218 deletions

View file

@ -4,7 +4,7 @@
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
"watch": "webpack --watch", "watch": "webpack --watch",
"server": "live-server dist/" "server": "webpack-dev-server"
}, },
"main": "index.js", "main": "index.js",
"license": "MIT", "license": "MIT",
@ -17,7 +17,6 @@
"file-loader": "^6.1.0", "file-loader": "^6.1.0",
"html-loader": "^1.3.0", "html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1", "html-webpack-plugin": "^4.4.1",
"live-server": "^1.2.1",
"posthtml-extend": "^0.5.0", "posthtml-extend": "^0.5.0",
"posthtml-loader": "^2.0.1", "posthtml-loader": "^2.0.1",
"prettier": "^2.1.1", "prettier": "^2.1.1",
@ -28,9 +27,11 @@
"ts-loader": "^8.0.3", "ts-loader": "^8.0.3",
"typescript": "^4.0.2", "typescript": "^4.0.2",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.12" "webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}, },
"dependencies": { "dependencies": {
"lit-element": "~/.local2.4.0" "@fortawesome/fontawesome-free": "^5.15.0",
"resolve-cwd": "^3.0.0"
} }
} }

View file

@ -8,7 +8,7 @@
<block name="head"></block> <block name="head"></block>
<head> <head>
<body> <body>
<div class="container"> <div class="container do-a-barrel-roll">
<header> <header>
<div class="contact-login-cart-bar"> <div class="contact-login-cart-bar">
<div class="contact"> <div class="contact">

View file

@ -18,6 +18,22 @@ body {
padding: 0px; padding: 0px;
} }
.container.do-a-barrel-roll {
animation-duration: 2s;
animation-timing-function: ease;
animation-name: barrel-roll;
}
@keyframes barrel-roll {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -24,6 +24,7 @@ const items = [
class Carousel extends HTMLElement { class Carousel extends HTMLElement {
items = cyclicArray(items); items = cyclicArray(items);
rotatating = false;
shadow; shadow;
constructor() { constructor() {
@ -52,28 +53,35 @@ class Carousel extends HTMLElement {
rotate(reverse = false) { rotate(reverse = false) {
Alarms.create(6000, "rotateAlarm").then(() => this.rotate()); Alarms.create(6000, "rotateAlarm").then(() => this.rotate());
if (this.rotatating) return;
const container = this.shadow.querySelector(".container") as HTMLDivElement; const container = this.shadow.querySelector(".container") as HTMLDivElement;
const oldItem = container.querySelector( const oldItem = container.querySelector(
"img:last-of-type" "img:last-of-type"
) as HTMLImageElement; //In case we are waiting for animation to finish ) as HTMLImageElement;
const newItem = document.createElement("img") as HTMLImageElement; const newItem = document.createElement("img") as HTMLImageElement;
const inClass = reverse ? ["reverse", "left"] : ["right"]; const inClass = reverse ? ["reverse", "left"] : ["right"];
const outClass = reverse ? ["reverse", "right"] : ["left"]; const outClass = reverse ? ["reverse", "right"] : ["left"];
//Sanity checks
this.shadow
.querySelectorAll("." + inClass.join("."))
.forEach((e) => e.remove());
newItem.src = this.items.next(reverse).value.img; newItem.src = this.items.next(reverse).value.img;
container.appendChild(newItem); container.appendChild(newItem);
animationPromise(oldItem).finally(() => { animationPromise(oldItem).finally(() => container.removeChild(oldItem));
container.removeChild(oldItem);
});
oldItem.classList.add(...outClass); oldItem.classList.add(...outClass);
animationPromise(newItem).finally(() => animationPromise(newItem).finally(() => {
newItem.classList.remove(...inClass) newItem.classList.remove(...inClass);
); this.rotatating = false;
});
newItem.classList.add(...inClass); newItem.classList.add(...inClass);
this.rotatating = true;
} }
static get css() { static get css() {

View file

@ -82,10 +82,10 @@ export namespace Alarms {
/** /**
@returns Promise that resolves when an animation on the element finishes @returns Promise that resolves when an animation on the element finishes
*/ */
export const animationPromise = (element: HTMLElement) => { export const animationPromise = (element: HTMLElement, cancel = true) => {
const [promise, reject, resolve] = newPromise<void>(); const [promise, reject, resolve] = newPromise<void>();
element.addEventListener("animationend", () => resolve(), true); element.addEventListener("animationend", () => resolve(), true);
element.addEventListener("animationcancel", () => reject(), true); if (cancel) element.addEventListener("animationcancel", () => reject(), true);
return promise; return promise;
}; };

View file

@ -43,10 +43,14 @@ module.exports = {
}, },
], ],
}, },
{
test: /\.svg$/,
loader: "svg-inline-loader",
},
], ],
}, },
resolve: { resolve: {
extensions: [".tsx", ".ts", ".js"], extensions: [".tsx", ".ts", ".js", ".svg"],
}, },
output: { output: {
filename: "bundle.js", filename: "bundle.js",

1044
yarn.lock

File diff suppressed because it is too large Load diff