Widget caroussel #105

Closed
opened 2022-04-14 23:58:26 +02:00 by Darks · 4 comments
Owner

Objectif : afficher des médias sous la forme d’un caroussel statique/dynamique suivant si le Js est activé ou non. Si on clique sur un élément ça l’unroll en grand dessous

Forme : widget Markdown, syntaxe à définir

Contraintes : spécifier l’ordre d’affichage des médias, spécifier l’(anti)aliasing pour chaque média

Objectif : afficher des médias sous la forme d’un caroussel statique/dynamique suivant si le Js est activé ou non. Si on clique sur un élément ça l’unroll en grand dessous Forme : widget Markdown, syntaxe à définir Contraintes : spécifier l’ordre d’affichage des médias, spécifier l’(anti)aliasing pour chaque média
Darks self-assigned this 2022-04-14 23:58:26 +02:00
Darks changed title from Faire un widget caroussel to Widget caroussel 2022-04-14 23:59:14 +02:00
Owner

Okay donc j'ai cherché un peu s'il y a une façon standard d'intégrer des vidéos, à la fois pour les mettre dans le carroussel et pour réutiliser autant que possible la syntaxe des médias en général (![]() par exemple).

Il y a eu plusieurs discussions sur CommonMark, notamment ici pour l'audio/vidéo et, puisque c'est pertinent, ici sur les attributs génériques.

La plupart des plateformes, quand elles font une extension, réutilisent la syntaxe des images en essayant d'être malin pour détecter si c'est image/audio/vidéo :

![](video.mp4)

Pour désambiguer (et pour nous, étendre), la solution la plus sérieuse retenue est la syntaxe des attributs, pas formellement adoptée par CommonMark mais utilisée en pratique :

![](video.mp4){type:video/mp4}

Comme rien n'empêche de mettre plusieurs ressources dans un lien, je serais tenté de suggérer :

![https://.../video_1.mp4
  https://.../video_1.mp4
  https://.../img_1.png
  https://.../img_2.png
  https://.../img_3.png]{type:gallery}

Notre implémentation du Markdown supporte l'extension des attributs, mais envoie tout vers des attributs des balises HTML. Je ne crois pas qu'on puisse l'utiliser directement du coup, mais le code est très simple, on peut récupérer le parser et faire ce qu'on veut.

Okay donc j'ai cherché un peu s'il y a une façon standard d'intégrer des vidéos, à la fois pour les mettre dans le carroussel et pour réutiliser autant que possible la syntaxe des médias en général (`![]()` par exemple). Il y a eu plusieurs discussions sur CommonMark, notamment [ici pour l'audio/vidéo](https://talk.commonmark.org/t/embedded-audio-and-video/441/54) et, puisque c'est pertinent, [ici sur les attributs génériques](https://talk.commonmark.org/t/consistent-attribute-syntax/272). La plupart des plateformes, quand elles font une extension, réutilisent la syntaxe des images en essayant d'être malin pour détecter si c'est image/audio/vidéo : ```markdown ![](video.mp4) ``` Pour désambiguer (et pour nous, étendre), la solution la plus sérieuse retenue est la syntaxe des attributs, pas formellement adoptée par CommonMark mais utilisée en pratique : ```markdown ![](video.mp4){type:video/mp4} ``` Comme rien n'empêche de mettre plusieurs ressources dans un lien, je serais tenté de suggérer : ```markdown ![https://.../video_1.mp4 https://.../video_1.mp4 https://.../img_1.png https://.../img_2.png https://.../img_3.png]{type:gallery} ``` Notre implémentation du Markdown [supporte l'extension des attributs](https://python-markdown.github.io/extensions/attr_list/), mais envoie tout vers des attributs des balises HTML. Je ne crois pas qu'on puisse l'utiliser directement du coup, mais [le code est très simple](https://github.com/Python-Markdown/markdown/blob/master/markdown/extensions/attr_list.py), on peut récupérer le parser et faire ce qu'on veut.
Owner

Ma syntaxe proposée ci-dessus a le défaut de ne pas permettre aux métadonnées d'être indiquées sur les images, dont le texte alternatif et l'attribut {pixelated}.

Du coup, j'ai commencé par implémenter ces attributs sur les images et les vidéos via une extension : des choses comme {pixelated}, ou l'alignement avec {float-right}, ou la taille avec {size=x240}.

Pour rester dans la lignée de cette syntaxe, on a choisi qu'un caroussel ce soit une liste avec un attribut, comme ceci :

- ![](video.mp4)
- ![](image1.png)
- ![](image2.png){size=x480 pixelated}
- ![](image3.png){size=530x}
{gallery}

J'ai implémenté la détection dans f53032fc88 ; actuellement ça remplace juste la liste par une div indiquant que ça a été détecté ; le temps que Darks peaufine le front on pourra connecter les deux bouts.

Ma syntaxe proposée ci-dessus a le défaut de ne pas permettre aux métadonnées d'être indiquées sur les images, dont le texte alternatif et l'attribut `{pixelated}`. Du coup, j'ai commencé par implémenter ces attributs sur les images et les vidéos via une extension : des choses comme `{pixelated}`, ou l'alignement avec `{float-right}`, ou la taille avec `{size=x240}`. Pour rester dans la lignée de cette syntaxe, on a choisi qu'un caroussel ce soit une liste avec un attribut, comme ceci : ``` - ![](video.mp4) - ![](image1.png) - ![](image2.png){size=x480 pixelated} - ![](image3.png){size=530x} {gallery} ``` J'ai implémenté la détection dans f53032fc882552fb44ec8d635f58d2658bd4b3e8 ; actuellement ça remplace juste la liste par une div indiquant que ça a été détecté ; le temps que Darks peaufine le front on pourra connecter les deux bouts.
Darks added the
enhancement
label 2022-04-22 00:01:09 +02:00
Owner

Au passage j'ai réécrit la page de wiki sur la syntaxe lightscript pour y documenter à la place les spécificités/extensions de la syntaxe Markdown qu'on utilise.

Au passage j'ai réécrit la page de wiki sur la syntaxe lightscript pour y documenter à la place [les spécificités/extensions de la syntaxe Markdown qu'on utilise](https://gitea.planet-casio.com/devs/PCv5/wiki/09-Markdown-et-extensions).
Author
Owner

Le commit 3e399fb4c4 ajoute la fonctionnalité. On ouvrira un ticket de bug si jamais on en rencontre.

Le commit 3e399fb4c4 ajoute la fonctionnalité. On ouvrira un ticket de bug si jamais on en rencontre.
Darks closed this issue 2023-06-06 16:21:24 +02:00
Sign in to join this conversation.
No description provided.