bad/projekt-sklep
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixes for the carousel

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
package.json
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"
} }
} }

2
src/base.html
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">

16
src/base.scss
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;

4
src/index.html
View file

@ -1,11 +1,11 @@
<extends src="base.html"> <extends src="base.html">
<block name="head"> <block name="head">
<title>Sklep AAAA </title> <title>Sklep AAAA </title>
<link rel="stylesheet" href="index.scss"> <link rel="stylesheet" href="index.scss">
</block> </block>
<block name="content"> <block name="content">
<div class="gallery"> <div class="gallery">
<x-carousel></x-carousel> <x-carousel></x-carousel>
</div> </div>
<p> <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! 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
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() {

4
src/utils.ts
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;
}; };

6
webpack.config.js
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
View file

File diff suppressed because it is too large Load diff