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": {
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
22
src/index.ts
22
src/index.ts
|
|
@ -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() {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue