klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-25 18:44:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create nice animation when scanning nfc cards

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-11-14 11:26:49 +01:00
parent 63736a6c60
commit f0e5161e54
4 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
core/static/core/components/nfc-input.scss Normal file
View File

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

3
core/static/webpack/core/components/nfc-input-index.ts
View File

@ -19,13 +19,16 @@ export class NfcInput extends inheritHtmlElement("input") {
button.addEventListener("click", async () => { button.addEventListener("click", async () => {
// biome-ignore lint/correctness/noUndeclaredVariables: browser API // biome-ignore lint/correctness/noUndeclaredVariables: browser API
const ndef = new NDEFReader(); const ndef = new NDEFReader();
this.setAttribute("scan", "active");
await ndef.scan(); await ndef.scan();
ndef.addEventListener("readingerror", () => { ndef.addEventListener("readingerror", () => {
this.removeAttribute("scan");
window.alert(gettext("Unsupported NFC card")); window.alert(gettext("Unsupported NFC card"));
}); });
// biome-ignore lint/correctness/noUndeclaredVariables: browser API // biome-ignore lint/correctness/noUndeclaredVariables: browser API
ndef.addEventListener("reading", (event: NDEFReadingEvent) => { ndef.addEventListener("reading", (event: NDEFReadingEvent) => {
this.removeAttribute("scan");
this.node.value = event.serialNumber.replace(/:/g, "").toUpperCase(); this.node.value = event.serialNumber.replace(/:/g, "").toUpperCase();
/* Auto submit form, we need another button to not trigger our previously defined click event */ /* Auto submit form, we need another button to not trigger our previously defined click event */
const submit = document.createElement("button"); const submit = document.createElement("button");

5
core/templates/core/widgets/nfc.jinja
View File

@ -1,5 +1,6 @@
<script-once src="{{ statics.js }}" defer></script-once> <script-once src="{{ statics.js }}" defer></script-once>
<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
<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> <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>

3
core/views/forms.py
View File

@ -76,7 +76,8 @@ class NFCTextInput(TextInput):
def get_context(self, name, value, attrs): def get_context(self, name, value, attrs):
context = super().get_context(name, value, attrs) context = super().get_context(name, value, attrs)
context["statics"] = { 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 return context