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": {
"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"
}
}

View file

@ -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">

View file

@ -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;

View file

@ -1,4 +1,4 @@
<extends src="base.html">
<extends src="base.html">
<block name="head">
<title>Sklep AAAA </title>
<link rel="stylesheet" href="index.scss">

View file

@ -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() {

View file

@ -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;
};

View file

@ -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",

1044
yarn.lock

File diff suppressed because it is too large Load diff