- Séperation de la modal dans un fichier twig et js.
- Ajout d ela section commentaire dans la modal.
This commit is contained in:
28
assets/js/modal.js
Normal file
28
assets/js/modal.js
Normal file
@ -0,0 +1,28 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const datas = {{ datas | tojson }};
|
||||
|
||||
datas.items.forEach((book, index) => {
|
||||
const openModalBtn = document.getElementById(`openModalBtn-${index + 1}`);
|
||||
const closeModalSvg = document.getElementById(`closeModalSvg-${index + 1}`);
|
||||
const closeModalBtn = document.getElementById(`closeModalBtn-${index + 1}`);
|
||||
const modal = document.getElementById(`myModal-${index + 1}`);
|
||||
|
||||
if (openModalBtn) {
|
||||
openModalBtn.addEventListener('click', () => {
|
||||
modal.classList.remove('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
if (closeModalSvg) {
|
||||
closeModalSvg.addEventListener('click', () => {
|
||||
modal.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
if (closeModalBtn) {
|
||||
closeModalBtn.addEventListener('click', () => {
|
||||
modal.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -14,6 +14,7 @@
|
||||
</p>
|
||||
</div>
|
||||
{% for book in datas.items %}
|
||||
{% include '/apiSearch/modal.html.twig' with { 'loop': loop} %}
|
||||
<div class="relative flex rounded-xl border bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 w-1/2 mx-auto py-2 mt-5">
|
||||
<div class="flex flex-col justify-start">
|
||||
<div class="flex flex-col p-2 text-2xl">
|
||||
@ -79,66 +80,12 @@
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if favoris is empty %}
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
|
||||
<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
|
||||
<div class="relative bg-white p-6 rounded-lg w-1/3">
|
||||
<div class="flex flex-row w-1/4">
|
||||
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
|
||||
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
|
||||
{% endif %}
|
||||
</div>
|
||||
<svg id="closeModalSvg-{{ loop.index }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor"
|
||||
class="absolute top-2 right-2 w-6 h-6 cursor-pointer text-gray-500 hover:text-gray-700">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
{% if favoris is empty %}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
|
||||
</svg>
|
||||
|
||||
{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
|
||||
<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.authors is defined %}
|
||||
<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
|
||||
<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
|
||||
<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
|
||||
{% for categorie in book.volumeInfo.categories %}
|
||||
<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
|
||||
<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
|
||||
<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% set nb_items = datas.totalItems %}
|
||||
@ -146,16 +93,15 @@
|
||||
{% set current_page = app.request.get('page') ? app.request.get('page') : 1 %}
|
||||
|
||||
{% if nb_pages > 1 %}
|
||||
<div class="flex justify-center mt-5">
|
||||
<div class="flex justify-center mt-8 mb-8">
|
||||
<ul class="flex">
|
||||
{# Flèche "Précédent" #}
|
||||
{% if current_page > 1 %}
|
||||
<li class="mx-2">
|
||||
<a href="{{ path('api_search', {'q': query, 'page': current_page - 1}) }}" class="px-3 py-1 bg-blue-500 text-black rounded-lg">← Précédent</a>
|
||||
<a href="{{ path('api_search', {'q': query, 'page': current_page - 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg mr-32">Précédent</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="mx-2">
|
||||
<span class="px-3 py-1 bg-gray-500 text-white rounded-lg cursor-not-allowed">← Précédent</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
@ -163,7 +109,7 @@
|
||||
{% for i in current_page - 3..current_page + 3 %}
|
||||
{% if i > 0 and i <= nb_pages %}
|
||||
<li class="mx-2">
|
||||
<a href="{{ path('api_search', {'q': query, 'page': i}) }}" class="px-3 py-1 {{ i == current_page ? 'bg-blue-500 text-gray-700' : 'bg-gray-200 text-black' }} rounded-lg">{{ i }}</a>
|
||||
<a href="{{ path('api_search', {'q': query, 'page': i}) }}" class="px-4 py-3 text-white {{ i == current_page ? 'dark:bg-[#9db1bd] text-gray-700' : 'bg-gray-200 text-black' }} rounded-lg">{{ i }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@ -171,17 +117,16 @@
|
||||
{# Flèche "Suivant" #}
|
||||
{% if current_page < nb_pages %}
|
||||
<li class="mx-2">
|
||||
<a href="{{ path('api_search', {'q': query, 'page': current_page + 1}) }}" class="px-3 py-1 bg-blue-500 text-black rounded-lg">Suivant →</a>
|
||||
<a href="{{ path('api_search', {'q': query, 'page': current_page + 1}) }}" class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg ml-32">Suivant</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="mx-2">
|
||||
<span class="px-3 py-1 bg-gray-500 text-white rounded-lg cursor-not-allowed">Suivant →</span>
|
||||
<span class="px-3 py-3 dark:bg-[#263B46] text-white rounded-lg cursor-not-allowed ml-32">Suivant</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -193,10 +138,10 @@
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({ // D'autres données peuvent être envoyées si nécessaire
|
||||
body: JSON.stringify({
|
||||
})
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.status === 'removed') { // Mettre à jour le SVG ou l'état du bouton pour retirer le like
|
||||
if (data.status === 'removed') {
|
||||
console.log('Livre retiré des favoris');
|
||||
}
|
||||
}).catch(error => {
|
||||
|
||||
76
templates/apiSearch/modal.html.twig
Normal file
76
templates/apiSearch/modal.html.twig
Normal file
@ -0,0 +1,76 @@
|
||||
{% block body %}
|
||||
|
||||
<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
|
||||
<div class="relative bg-white p-6 rounded-lg w-1/3 max-h-screen overflow-y-auto">
|
||||
<div class="flex mx-auto flex-row w-1/4">
|
||||
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
|
||||
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
|
||||
{% endif %}
|
||||
</div>
|
||||
<svg id="closeModalSvg-{{ loop.index }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor"
|
||||
class="absolute top-2 right-2 w-6 h-6 cursor-pointer text-gray-500 hover:text-gray-700">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
|
||||
{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
|
||||
<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.authors is defined %}
|
||||
<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
|
||||
<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
|
||||
<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
|
||||
{% for categorie in book.volumeInfo.categories %}
|
||||
<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
|
||||
<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
{% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
|
||||
<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
|
||||
{% endif %}
|
||||
|
||||
<hr class="mt-6">
|
||||
|
||||
<div class="mt-4">
|
||||
<h3 class="font-bold text-lg">Laisser un commentaire :</h3>
|
||||
<form id="commentForm-{{ loop.index }}" action="" method="POST" class="space-y-4">
|
||||
<textarea id="commentText-{{ loop.index }}" name="comment" rows="4" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Écrivez votre commentaire ici..." required></textarea>
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr class="mt-8">
|
||||
<div id="commentsSection-{{ loop.index }}" class="mt-4 max-h-60 overflow-y-auto">
|
||||
<h3 class="font-bold text-lg">Commentaires :</h3>
|
||||
<div class="mt-2">
|
||||
<div class="p-2 border-b border-gray-200">
|
||||
<p class="font-semibold">Auteur : Fabien</p>
|
||||
<p>Très bon livre pour les débutants.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block javascripts %}
|
||||
<script src="{{ asset('js/modal.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user