Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<div class="modal-card" id="bookmark-modal" data-event-aturi="{{ event_aturi }}"{% if is_already_bookmarked and existing_bookmark.tags %} data-existing-tags="{{ existing_bookmark.tags | join(',') }}"{% endif %}>
2 <header class="modal-card-head">
3 <p class="modal-card-title">
4 {% if is_already_bookmarked %}
5 Modifier le marque-page
6 {% else %}
7 Marquer l'événement
8 {% endif %}
9 </p>
10 <button class="delete" aria-label="close" onclick="closeBookmarkModal()"></button>
11 </header>
12 <section class="modal-card-body">
13 {% if is_already_bookmarked %}
14 <div class="notification is-info">
15 <p><strong>Cet événement est déjà marqué!</strong></p>
16 <p>Étiquettes actuelles:
17 {% if existing_bookmark.tags %}
18 {% for tag in existing_bookmark.tags %}
19 <span class="tag is-light">{{ tag }}</span>
20 {% endfor %}
21 {% else %}
22 <em>Aucune étiquette</em>
23 {% endif %}
24 </p>
25 </div>
26 {% endif %}
27
28 <div class="field">
29 <label class="label">Étiquettes (optionnel)</label>
30 <div class="control">
31 <input class="input" type="text" id="bookmark-tags"
32 placeholder="ex. concerts, local, été"
33 onkeypress="handleTagKeypress(event)">
34 </div>
35 <p class="help">
36 {% if is_already_bookmarked %}
37 Modifiez les étiquettes pour réorganiser votre marque-page
38 {% else %}
39 Ajoutez des étiquettes pour organiser vos marque-pages (séparées par des virgules)
40 {% endif %}
41 </p>
42 </div>
43 <div id="selected-tags" class="tags"></div>
44 </section>
45 <footer class="modal-card-foot">
46 <button class="button is-success" onclick="submitBookmark()">
47 <span class="icon">
48 <i class="fas fa-bookmark"></i>
49 </span>
50 <span>
51 {% if is_already_bookmarked %}
52 Modifier le marque-page
53 {% else %}
54 Marquer l'événement
55 {% endif %}
56 </span>
57 </button>
58 {% if is_already_bookmarked %}
59 <button class="button is-danger" onclick="removeBookmark()">
60 <span class="icon">
61 <i class="fas fa-bookmark-slash"></i>
62 </span>
63 <span>Retirer le marque-page</span>
64 </button>
65 {% endif %}
66 <button class="button" onclick="closeBookmarkModal()">Annuler</button>
67 </footer>
68</div>
69
70<script>
71// Initialize with existing tags from data attribute
72document.addEventListener('DOMContentLoaded', function() {
73 const modalCard = document.getElementById('bookmark-modal');
74 if (modalCard && modalCard.hasAttribute('data-existing-tags')) {
75 const existingTagsStr = modalCard.getAttribute('data-existing-tags');
76 const existingTags = existingTagsStr ? existingTagsStr.split(',') : [];
77 initializeBookmarkModal(existingTags);
78 }
79});
80</script>