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;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<extends src="base.html">
|
||||
<extends src="base.html">
|
||||
<block name="head">
|
||||
<title>Sklep AAAA </title>
|
||||
<link rel="stylesheet" href="index.scss">
|
||||
</block>
|
||||
<block name="content">
|
||||
<div class="gallery">
|
||||
<x-carousel></x-carousel>
|
||||
<x-carousel></x-carousel>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla quos animi alias porro modi doloremque numquam quaerat, pariatur doloribus sit quo, repellendus consequatur esse omnis repudiandae accusantium sint facere cupiditate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur autem expedita inventore magnam, eos aspernatur. Eveniet, laudantium doloribus veritatis sapiente eos illo, debitis non obcaecati numquam ab nam enim unde!
|
||||
|
|
|
|||
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