adding details much more elegant
This commit is contained in:
parent
2feb64e7e0
commit
c30be04ba0
GPG key ID:
883EDBAA726BD96C
2 changed files with 95 additions and 47 deletions
|
|
@ -1,7 +1,55 @@
|
|||
const contactDetails = [];
|
||||
class ContactDetails {
|
||||
constructor(rootUiElement) {
|
||||
this.rootUiElement = rootUiElement;
|
||||
this.details = [];
|
||||
}
|
||||
|
||||
addDetails(type, value) {
|
||||
this.details.push({ type, value });
|
||||
}
|
||||
|
||||
removeDetails(type, value) {
|
||||
this.details = this.details.filter(detail => detail.type !== type || detail.value !== value);
|
||||
}
|
||||
|
||||
syncUi() {
|
||||
requestAnimationFrame(() => {
|
||||
this.rootUiElement.innerHTML = '';
|
||||
this.details.forEach((detail) => {
|
||||
const addedDetailFragment = ContactDetails.buildContactDetailBadge(detail);
|
||||
this.rootUiElement.appendChild(addedDetailFragment);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
static buildContactDetailBadge(detail) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.className = "added-contact-detail badge";
|
||||
|
||||
const p = document.createElement("p");
|
||||
p.textContent = `${detail.type}: ${detail.value}`;
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.textContent = "Eliminar";
|
||||
button.onclick = function () {
|
||||
removeAddedContactDetail(this);
|
||||
return false;
|
||||
};
|
||||
|
||||
div.appendChild(p);
|
||||
div.appendChild(button);
|
||||
fragment.appendChild(div);
|
||||
|
||||
return fragment;
|
||||
}
|
||||
}
|
||||
|
||||
let contactDetails;
|
||||
|
||||
window.onload = () => {
|
||||
const contactList = document.querySelector('.contact-list');
|
||||
contactDetails = new ContactDetails(document.querySelector('#created-contact-details-list'));
|
||||
|
||||
document.querySelectorAll('.contact-detail-add-button').forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
|
|
@ -13,13 +61,10 @@ window.onload = () => {
|
|||
if (value === '') return; // Ignore empty input
|
||||
|
||||
// Save new contact detail
|
||||
contactDetails.push({ type, value });
|
||||
contactDetails.addDetails(type, value);
|
||||
|
||||
// Create and display a non-editable badge
|
||||
const newBadge = document.createElement('div');
|
||||
newBadge.classList.add('contact-badge');
|
||||
newBadge.innerText = `${type}: ${value}`;
|
||||
contactList.appendChild(newBadge);
|
||||
contactDetails.syncUi();
|
||||
|
||||
// Clear input field
|
||||
input.value = '';
|
||||
|
|
|
|||
|
|
@ -2,50 +2,53 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Crear perfil</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/seca.css">
|
||||
<script src="/javascript/createProfile.js"></script>
|
||||
<title>Crear perfil</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/seca.css">
|
||||
<script src="/javascript/createProfile.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Crea tu perfil</h1>
|
||||
<p>Tu clave de Nostr ya es parte de la seca.</p>
|
||||
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
|
||||
</p>
|
||||
<hr>
|
||||
<form onsubmit="return false">
|
||||
<label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label>
|
||||
<h1>Crea tu perfil</h1>
|
||||
<p>Tu clave de Nostr ya es parte de la seca.</p>
|
||||
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
|
||||
</p>
|
||||
<hr>
|
||||
<form onsubmit="return false">
|
||||
<label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label>
|
||||
|
||||
<button id="submit-details-button" type="submit">Crear tu perfil</button>
|
||||
<div id="contacts">
|
||||
<p>Añade métodos de contacto para poder hablar con otros miembros.</p>
|
||||
<div class="badges">
|
||||
<div class="badge" data-type="whatsapp">📱 Teléfono <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="whatsapp">📱 WhatsApp <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="telegram">📩 Telegram <input><button
|
||||
class="contact-detail-add-button"></button>>Añadir</button></div>
|
||||
<div class="badge" data-type="email">📧 Email <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="nostr">📧 Nostr <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="signal">📧 Signal <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="matrix">📧 Matrix <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="xmpp">📧 XMPP <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="simplex">📧 Simplex <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-list">
|
||||
<p>Contactos añadidos</p>
|
||||
</div>
|
||||
</form>
|
||||
<button id="submit-details-button" type="submit">Crear tu perfil</button>
|
||||
<div id="contacts">
|
||||
<p>Añade métodos de contacto para poder hablar con otros miembros.</p>
|
||||
<div class="badges">
|
||||
<div class="badge" data-type="whatsapp">📱 Teléfono <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="whatsapp">📱 WhatsApp <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="telegram">📩 Telegram <input><button
|
||||
class="contact-detail-add-button"></button>>Añadir</button></div>
|
||||
<div class="badge" data-type="email">📧 Email <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="nostr">📧 Nostr <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="signal">📧 Signal <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="matrix">📧 Matrix <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="xmpp">📧 XMPP <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
<div class="badge" data-type="simplex">📧 Simplex <input><button
|
||||
class="contact-detail-add-button">Añadir</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="created-contact-details-section">
|
||||
<p>Contactos añadidos</p>
|
||||
<div id="created-contact-details-list">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue