Fixes for the carousel
This commit is contained in:
Linux User
parent
02f8f27839
commit
caa491fbaf
8 changed files with 889 additions and 218 deletions
|
|
@ -4,7 +4,7 @@
|
|||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch",
|
||||
"server": "live-server dist/"
|
||||
"server": "webpack-dev-server"
|
||||
},
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
"file-loader": "^6.1.0",
|
||||
"html-loader": "^1.3.0",
|
||||
"html-webpack-plugin": "^4.4.1",
|
||||
"live-server": "^1.2.1",
|
||||
"posthtml-extend": "^0.5.0",
|
||||
"posthtml-loader": "^2.0.1",
|
||||
"prettier": "^2.1.1",
|
||||
|
|
@ -28,9 +27,11 @@
|
|||
"ts-loader": "^8.0.3",
|
||||
"typescript": "^4.0.2",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12"
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit-element": "~/.local2.4.0"
|
||||
"@fortawesome/fontawesome-free": "^5.15.0",
|
||||
"resolve-cwd": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<block name="head"></block>
|
||||
<head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="container do-a-barrel-roll">
|
||||
<header>
|
||||
<div class="contact-login-cart-bar">
|
||||
<div class="contact">
|
||||
|
|
|
|||
|
|
@ -18,6 +18,22 @@ body {
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
22
src/index.ts
22
src/index.ts
|
|
@ -24,6 +24,7 @@ const items = [
|
|||
|
||||
class Carousel extends HTMLElement {
|
||||
items = cyclicArray(items);
|
||||
rotatating = false;
|
||||
shadow;
|
||||
|
||||
constructor() {
|
||||
|
|
@ -52,28 +53,35 @@ class Carousel extends HTMLElement {
|
|||
|
||||
rotate(reverse = false) {
|
||||
Alarms.create(6000, "rotateAlarm").then(() => this.rotate());
|
||||
if (this.rotatating) return;
|
||||
|
||||
const container = this.shadow.querySelector(".container") as HTMLDivElement;
|
||||
const oldItem = container.querySelector(
|
||||
"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 inClass = reverse ? ["reverse", "left"] : ["right"];
|
||||
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;
|
||||
container.appendChild(newItem);
|
||||
|
||||
animationPromise(oldItem).finally(() => {
|
||||
container.removeChild(oldItem);
|
||||
});
|
||||
animationPromise(oldItem).finally(() => container.removeChild(oldItem));
|
||||
|
||||
oldItem.classList.add(...outClass);
|
||||
|
||||
animationPromise(newItem).finally(() =>
|
||||
newItem.classList.remove(...inClass)
|
||||
);
|
||||
animationPromise(newItem).finally(() => {
|
||||
newItem.classList.remove(...inClass);
|
||||
this.rotatating = false;
|
||||
});
|
||||
newItem.classList.add(...inClass);
|
||||
this.rotatating = true;
|
||||
}
|
||||
|
||||
static get css() {
|
||||
|
|
|
|||
|
|
@ -82,10 +82,10 @@ export namespace Alarms {
|
|||
/**
|
||||
@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>();
|
||||
element.addEventListener("animationend", () => resolve(), true);
|
||||
element.addEventListener("animationcancel", () => reject(), true);
|
||||
if (cancel) element.addEventListener("animationcancel", () => reject(), true);
|
||||
return promise;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -43,10 +43,14 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: "svg-inline-loader",
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".js"],
|
||||
extensions: [".tsx", ".ts", ".js", ".svg"],
|
||||
},
|
||||
output: {
|
||||
filename: "bundle.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue