From f0e5161e54ceffa70c8471d63cd651717db4f205 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 14 Nov 2024 11:26:49 +0100
Subject: [PATCH] Create nice animation when scanning nfc cards

---
 core/static/core/components/nfc-input.scss    | 34 +++++++++++++++++++
 .../core/components/nfc-input-index.ts        |  3 ++
 core/templates/core/widgets/nfc.jinja         |  7 ++--
 core/views/forms.py                           |  3 +-
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 core/static/core/components/nfc-input.scss

diff --git a/core/static/core/components/nfc-input.scss b/core/static/core/components/nfc-input.scss
new file mode 100644
index 00000000..924504db
--- /dev/null
+++ b/core/static/core/components/nfc-input.scss
@@ -0,0 +1,34 @@
+nfc-input[scan="active"]::before {
+  content: "";
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: #18c89b;
+  box-shadow: 0 0 70px 20px #18c89b;
+  clip-path: inset(0);
+  animation:
+  x 1s ease-in-out infinite alternate,
+  y 2s ease-in-out infinite;
+}
+
+@keyframes x {
+  to {
+    transform: translateX(-100%);
+    left: 100%;
+  }
+}
+
+@keyframes y {
+  33% {
+    clip-path: inset(0 0 0 -100px);
+  }
+
+  50% {
+    clip-path: inset(0 0 0 0);
+  }
+
+  83% {
+    clip-path: inset(0 -100px 0 0);
+  }
+}
\ No newline at end of file
diff --git a/core/static/webpack/core/components/nfc-input-index.ts b/core/static/webpack/core/components/nfc-input-index.ts
index 4214ba0b..0b57931b 100644
--- a/core/static/webpack/core/components/nfc-input-index.ts
+++ b/core/static/webpack/core/components/nfc-input-index.ts
@@ -19,13 +19,16 @@ export class NfcInput extends inheritHtmlElement("input") {
     button.addEventListener("click", async () => {
       // biome-ignore lint/correctness/noUndeclaredVariables: browser API
       const ndef = new NDEFReader();
+      this.setAttribute("scan", "active");
       await ndef.scan();
       ndef.addEventListener("readingerror", () => {
+        this.removeAttribute("scan");
         window.alert(gettext("Unsupported NFC card"));
       });
 
       // biome-ignore lint/correctness/noUndeclaredVariables: browser API
       ndef.addEventListener("reading", (event: NDEFReadingEvent) => {
+        this.removeAttribute("scan");
         this.node.value = event.serialNumber.replace(/:/g, "").toUpperCase();
         /* Auto submit form, we need another button to not trigger our previously defined click event */
         const submit = document.createElement("button");
diff --git a/core/templates/core/widgets/nfc.jinja b/core/templates/core/widgets/nfc.jinja
index e0f341b0..7489ff9e 100644
--- a/core/templates/core/widgets/nfc.jinja
+++ b/core/templates/core/widgets/nfc.jinja
@@ -1,5 +1,6 @@
 <script-once src="{{ statics.js }}" defer></script-once>
+<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
-<span>
-  <nfc-input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}></nfc-input>
-</span>
+  <span>
+    <nfc-input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}></nfc-input>
+  </span>
diff --git a/core/views/forms.py b/core/views/forms.py
index 00b1f359..f9e9841d 100644
--- a/core/views/forms.py
+++ b/core/views/forms.py
@@ -76,7 +76,8 @@ class NFCTextInput(TextInput):
     def get_context(self, name, value, attrs):
         context = super().get_context(name, value, attrs)
         context["statics"] = {
-            "js": staticfiles_storage.url("webpack/core/components/nfc-input-index.ts")
+            "js": staticfiles_storage.url("webpack/core/components/nfc-input-index.ts"),
+            "css": staticfiles_storage.url("core/components/nfc-input.scss"),
         }
         return context