Widget caroussel #105

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

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.

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.

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.