Added lottie toggle

2024-11-06 21:53:08 +01:00
parent 34c31b8533
commit 91cef8c24c
13 changed files with 3035 additions and 102 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
+    "@lottiefiles/dotlottie-web": "^0.36.1",
+    "install": "^0.13.0",
+    "npm": "^10.9.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
--- a/public/assets/flame-to-dark.lottie
+++ b/public/assets/flame-to-dark.lottie
--- a/public/assets/flame-to-light.lottie
+++ b/public/assets/flame-to-light.lottie
--- a/public/assets/signature.html
+++ b/public/assets/signature.html
@@ -0,0 +1,69 @@
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
+<style>
+@font-face {
+  font-family: Phospate;
+  src: url("cptarn.com/ontvlambaar/assets/Phosphate/Phosphate-Solid-02.woff2");
+}
+ * {font-weight: 300;}
+</style>
+<div
+  style="
+  display: flex;
+  width: 600px;
+  padding: 20px 30px;
+  border-radius: 40px;
+  background-color: rgb(41, 23, 44);
+  gap: 2rem;
+  font-family: Fredoka;
+  "
+>
+  <img src="https://cptarn.com/ontvlambaar/assets/signature/logofoto.webp" style="height: 250px;"/>
+  <span
+    style="
+      display: flex;
+      border-left: 5px solid #E94541;
+      padding: 1rem 2rem;
+      flex-direction: column;
+    "
+  >
+    <h1
+      style="
+        color: #F4A5A7;
+        padding: 0;
+        margin: 0;
+        font-size: 2rem;
+        font-family: Phosphate;
+         margin-bottom: 1rem;
+      "
+    >LOTTE DE VLAM</h1>
+    <p
+      style="
+        color: #EE7262;
+        display: flex;
+        flex-direction: column;
+         font-weight: 500;
+      "
+    >
+      Grafische vormgever
+      <span style="font-weight: 500;">Ontvlambaar</span>
+    </p>
+    <p
+      style="
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        color: #F4A5A7;
+        text-decoration: none;
+      "
+    >
+      <a style="color: #F4A5A7;text-decoration: none;"href="tel:+0493183740">04 93 18 37 40</a>
+      <a style="color: #F4A5A7;text-decoration: none;"href="mailto:lotte@ontvlambaar.be">lotte&#64;ontvlambaar.be</a>
+      <a style="color: #F4A5A7;text-decoration: none;"href="https://www.ontvlambaar.be">www.ontvlambaar.be</a>
+      <span style="margin-top: 1rem;">BTW BE0673 769 126</span>
+    </p>
+  </span>
+</div>
+
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,58 +1,3 @@
-<!--
-<div
-  style="
-  display: flex;
-  width: 550px;
-  padding: 20px 30px;
-  border-radius: 40px;
-  background-color: rgb(41, 23, 44);
-  gap: 1rem;
-  "
->
-  <img src="https://cptarn.com/ontvlambaar/assets/signature/logofoto.webp" style="height: 250px;"/>
-  <div
-    style="
-      display: flex;
-      border-left: 5px solid #E94541;
-      padding: 1rem;
-      flex-direction: column;
-    "
-  >
-    <h1
-      style="
-        color: rgb(222, 112, 108);
-        padding: 0;
-        margin: 0;
-        font-size: 1rem;
-      "
-    >LOTTE DE VLAM</h1>
-    <p
-      style="
-        color: #E94541;
-        display: flex;
-        flex-direction: column;
-      "
-    >
-      Grafische vormgever
-      <span>Ontvlambaar</span>
-    </p>
-    <p
-      style="
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        color: rgb(222, 112, 108);
-        text-decoration: none;
-      "
-    >
-      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="tel:+0493183740">04 93 18 37 40</a>
-      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="mailto:lotte@ontvlambaar.be">lotte&#64;ontvlambaar.be</a>
-      <a style="color: rgb(222, 112, 108);text-decoration: none;"href="https://www.ontvlambaar.be">www.ontvlambaar.be</a>
-      <span>BTW BE0673 769 126</span>
-    </p>
-  </div>
-</div> -->
-
 <div class="wrapper">
  <app-header></app-header>
  <app-hero [theme]="theme" (themeChange)="themeChange($event)"></app-hero>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,12 +6,11 @@ import { ServicesComponent } from "./services/services.component";
 import { FooterComponent } from "./footer/footer.component";
 import { PortfolioComponent } from "./portfolio/portfolio.component";
 import { AboutComponent } from "./about/about.component";
-import { ToggleComponent } from "./toggle/toggle.component";

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent, ToggleComponent],
+  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
 })
--- a/src/app/hero/hero.component.html
+++ b/src/app/hero/hero.component.html
@@ -2,4 +2,4 @@
 <a href="/" aria-label="Ontvlambaar"><img src="assets/logo-light.svg" alt="Logo light" class="only-on-light" /></a>
 <h1>Ontvlambaar</h1>
 <span class="slogan">Jullie het vuur, wij de branding</span>
-<input type="checkbox" [checked]="isDarkMode()" (change)="themeClicked($event)">
+<app-toggle (toggleOn)="themeClicked($event)" [toggleValue]="isDarkMode()"></app-toggle>
--- a/src/app/hero/hero.component.ts
+++ b/src/app/hero/hero.component.ts
@@ -1,9 +1,10 @@
 import { Component, computed, input, output } from '@angular/core';
+import { ToggleComponent } from '../toggle/toggle.component';

@Component({
  selector: 'app-hero',
  standalone: true,
-  imports: [],
+  imports: [ToggleComponent],
  templateUrl: './hero.component.html',
  styleUrl: './hero.component.scss'
 })
@@ -15,6 +16,6 @@ export class HeroComponent {
  themeChange = output<string>();

  public themeClicked(event: any) {
-    this.themeChange.emit(event.target.checked ? 'dark' : 'light');
+    this.themeChange.emit(event ? 'dark' : 'light');
  }
 }
--- a/src/app/toggle/toggle.component.html
+++ b/src/app/toggle/toggle.component.html
@@ -1,9 +1,2 @@
-<div class="background">
-  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.27 26.9"><path class="cls-1" d="M47.19,26.9H13.08C5.87,26.9,0,21.03,0,13.82v-.74C0,5.87,5.87,0,13.08,0h34.11c7.21,0,13.08,5.87,13.08,13.08v.74c0,7.21-5.87,13.08-13.08,13.08ZM13.08,2.16C7.06,2.16,2.16,7.06,2.16,13.08v.74c0,6.02,4.9,10.92,10.92,10.92h34.11c6.02,0,10.92-4.9,10.92-10.92v-.74c0-6.02-4.9-10.92-10.92-10.92H13.08Z"/></svg>
- </div>
-<span class="elements">
-  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.47 21.47"><circle class="cls-3" cx="10.73" cy="10.73" r="9.98"/><path class="cls-1" d="M10.73,21.47C4.81,21.47,0,16.65,0,10.73S4.81,0,10.73,0s10.73,4.81,10.73,10.73-4.81,10.73-10.73,10.73ZM10.73,1.5C5.64,1.5,1.5,5.64,1.5,10.73s4.14,9.23,9.23,9.23,9.23-4.14,9.23-9.23S15.82,1.5,10.73,1.5Z"/><circle class="cls-2" cx="10.73" cy="10.73" r="4.7"/></svg>
-  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.32 31.41"><path class="cls-3" d="M16.01,11.85c-1.33-3.38-3.59-5.72-8.41-11.1,1.11,4.39-.75,9.66-2.57,12.36-11.8,17.55,4.52,17.45,4.52,17.45,0,0,14.82,2.59,6.45-18.7Z"/><path class="cls-1" d="M10.99,31.41c-.75,0-1.3-.07-1.5-.1-.72,0-6.52-.19-8.7-4.25-1.78-3.32-.56-8.15,3.62-14.36,1.59-2.36,3.56-7.44,2.46-11.76-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.16,1.29c4.08,4.54,6.13,6.82,7.39,10.04,3.19,8.11,3.46,13.86.81,17.11-1.89,2.32-4.76,2.72-6.53,2.72ZM9.55,29.81s.09,0,.13.01c.04,0,4.4.72,6.68-2.09,2.24-2.75,1.88-8.15-1.05-15.6h0c-1.12-2.85-2.99-5-6.64-9.06.15,4.11-1.58,8.32-3.02,10.46-3.79,5.63-5.01,10.06-3.54,12.81,1.84,3.43,7.33,3.47,7.44,3.47h0Z"/><circle class="cls-2" cx="9.66" cy="22.13" r="5.08"/></svg>
-  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.34 36.47"><path class="cls-3" d="M18.59,13.73c-1.55-3.95-4.2-6.69-9.83-12.98,1.3,5.13-.88,11.29-3,14.45-13.8,20.51,5.29,20.4,5.29,20.4,0,0,17.33,3.03,7.55-21.87Z"/><path class="cls-1" d="M12.73,36.47c-.88,0-1.53-.09-1.74-.12-.79,0-7.55-.2-10.07-4.9-2.06-3.83-.64-9.44,4.22-16.66,1.87-2.78,4.19-8.77,2.9-13.85-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.35,1.51c4.76,5.3,7.15,7.96,8.62,11.7h0c3.71,9.44,4.03,16.12.97,19.88-2.18,2.67-5.49,3.14-7.53,3.14ZM11.04,34.85s.09,0,.13.01c.05,0,5.21.85,7.93-2.48,2.65-3.26,2.24-9.61-1.21-18.37-1.34-3.41-3.59-5.96-8.02-10.89.29,4.88-1.77,9.96-3.49,12.51C1.86,22.34.46,27.43,2.23,30.73c2.18,4.08,8.68,4.12,8.81,4.12h0Z"/><path class="cls-2" d="M14.82,23.89c-.76-1.94-2.06-3.29-4.83-6.38.64,2.52-.43,5.55-1.48,7.1-6.78,10.08,2.6,10.02,2.6,10.02,0,0,8.52,1.49,3.71-10.75Z"/></svg>
-  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.35 40.34"><path class="cls-3" d="M13.74,39.59c-5.05,0-8.71-1.48-10.85-4.39-3.73-5.07-1.48-12.54-1.38-12.85.1-.31.39-.53.72-.53.01,0,.02,0,.04,0,.34.02.63.26.7.6.12.57.39,1.48.79,2.25-.17-2.61.18-7.08,3.46-11.58.14-.2.37-.31.61-.31.07,0,.14,0,.21.03.3.09.52.35.54.67.11,1.4.54,2.67.83,2.78,0,0,.22-.03.69-.58,2.13-2.57,2.75-8.71,1.41-14-.08-.32.06-.65.34-.83.12-.07.25-.11.39-.11.18,0,.36.06.5.19,7.04,6.27,7.66,12.19,7.92,14.72,0,.08.02.16.02.24.33-.69.45-1.9.39-2.8-.02-.35.2-.67.54-.77.07-.02.14-.03.21-.03.27,0,.52.14.66.39,2.04,3.7,2,7.25,1.53,9.74.27-.84.33-1.56.33-1.58.03-.36.31-.65.67-.69.03,0,.05,0,.08,0,.33,0,.63.22.72.54.11.37,2.57,9.04-1.57,14.57-2.16,2.88-5.68,4.33-10.47,4.33Z"/><path class="cls-1" d="M12.22,1.5c9.25,8.23,7.04,15.64,8.09,15.64.03,0,.05,0,.08-.01,1.63-.49,1.4-4.08,1.4-4.08,3.57,6.47.38,12.53.38,12.53,2.59-.75,2.88-4.67,2.88-4.67,0,0,5.24,17.94-11.32,17.94S2.22,22.58,2.22,22.58c0,0,.76,3.71,2.59,4.21,0,0-1.83-6.62,3-13.25,0,0,.26,3.48,1.57,3.48.35,0,.77-.24,1.28-.85,2.44-2.93,2.86-9.53,1.56-14.66M12.22,0c-.27,0-.54.07-.78.22-.56.34-.84,1.01-.68,1.65,1.24,4.9.72,10.76-1.16,13.21-.14-.46-.25-1.09-.3-1.65-.05-.63-.48-1.16-1.09-1.33-.14-.04-.27-.06-.41-.06-.47,0-.93.22-1.21.62-2.25,3.09-3.17,6.18-3.49,8.71-.23-.17-.51-.27-.81-.29-.03,0-.05,0-.08,0-.65,0-1.24.43-1.43,1.06-.1.33-2.46,8.15,1.49,13.52,2.29,3.11,6.15,4.69,11.45,4.69s8.76-1.56,11.07-4.63c4.37-5.82,1.8-14.85,1.69-15.23-.19-.65-.78-1.08-1.44-1.08-.02,0-.04,0-.06,0-.03-2.13-.5-4.57-1.88-7.09-.27-.49-.78-.78-1.31-.78-.14,0-.28.02-.42.06-.23.07-.44.19-.61.35-.8-3.07-2.69-7.25-7.55-11.57-.28-.25-.64-.38-1-.38h0Z"/><path class="cls-2" d="M12.93,18.87c4.85,4.31,3.54,8.19,4.18,8,.84-.25.72-2.09.72-2.09,1.83,3.31.2,6.41.2,6.41,1.33-.38,1.47-2.39,1.47-2.39,0,0,2.68,9.18-5.79,9.18s-5.89-8.32-5.89-8.32c0,0,.39,1.9,1.32,2.15,0,0-.94-3.39,1.53-6.78,0,0,.21,2.84,1.46,1.34s1.47-4.88.8-7.5Z"/></svg>
-</span>
+<canvas id="lightmode" (click)="themeChange()" [style.visibility]="!isDarkMode() ? 'visible' : 'hidden'"></canvas>
+<canvas id="darkmode" (click)="themeChange()" [style.visibility]="isDarkMode() ? 'visible' : 'hidden'"></canvas>
--- a/src/app/toggle/toggle.component.scss
+++ b/src/app/toggle/toggle.component.scss
@@ -1,38 +1,13 @@
 :host {
-  height: 4rem;
-  width: 8rem;
+  margin-bottom: -3rem;
  position: relative;
 }

-.background {
-  width: 8rem;
-  height: 2rem;
-
-  .cls-1{fill:#ee7262;}
-}
-
-.elements {
+canvas {
  width: 10rem;
-  height: 2rem;
-
-  svg {
-    position: absolute;
-    width: 2rem;
-    height: 2rem;
-    left: 1rem;
-    // left: 5rem;
-    top: 0.75rem;
-  }
-
-  .cls-1 {
-    fill: #2e142c;
-  }
-
-  .cls-2 {
-    fill: #e94541;
-  }
-
-  .cls-3 {
-    fill: #a3203d;
-  }
+  height: 10rem;
+}
+
+#lightmode {
+  position: absolute;
 }
--- a/src/app/toggle/toggle.component.ts
+++ b/src/app/toggle/toggle.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, input, output, signal } from '@angular/core';
+import { DotLottie } from '@lottiefiles/dotlottie-web';

@Component({
  selector: 'app-toggle',
@@ -8,5 +9,51 @@ import { Component } from '@angular/core';
  styleUrl: './toggle.component.scss'
 })
 export class ToggleComponent {
+  private darkLottie: any = undefined;
+  private lightLottie: any = undefined;

+  toggleOn = output<boolean>();
+  toggleValue = input<boolean>();
+
+  isDarkMode: any = signal(this.toggleValue());
+
+
+  ngAfterViewInit(): void {
+    this.isDarkMode.set(this.toggleValue());
+    this.darkLottie = new DotLottie({
+      autoplay: false,
+      loop: false,
+      canvas: document.querySelector('#darkmode') as any,
+      src: "/assets/flame-to-light.lottie",
+    });
+
+    this.lightLottie = new DotLottie({
+      autoplay: false,
+      loop: false,
+      canvas: document.querySelector('#lightmode') as any,
+      src: "/assets/flame-to-dark.lottie",
+    });
+  }
+
+  public themeChange(): void {
+    this.playForward();
+  }
+
+  public playForward(): void {
+    if (this.isDarkMode()) {
+      this.darkLottie.play();
+      this.lightLottie.setFrame(0);
+
+    } else {
+      this.lightLottie.play();
+      this.darkLottie.setFrame(0);
+    }
+
+    setTimeout(() => {
+      this.isDarkMode.set(!this.isDarkMode());
+      this.toggleOn.emit(this.isDarkMode());
+      this.darkLottie.pause();
+      this.lightLottie.pause();
+    }, this.isDarkMode() ? 600 : 400);
+  }
 }
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,6 +10,7 @@ html {

  color: var(--text-color);
  background-color: var(--background-color);
+  transition: background-color 100ms linear;

  .only-on-dark {
    display: none;