On mutualise du code pour afficher les classes standards des modèles de documents.

On ajoute pareil pour des attributs supplémentaires.
On propose d'ajouter data-legende-len et data-legende-lenx qui indique une longueur approximative de légende,
de sorte de pouvoir styler en CSS différement possiblement selon la longueur de cette légende.

medias_fonctions.php

@@ -414,3 +414,145 @@ function medias_trouver_modele_emb($extension, $mime_type, $modele_base='file')
 
 	return $modele_base;
 }
+
+
+/**
+ * Liste les classes standards des modèles de documents SPIP.
+ *
+ * @note
+ *     le nomage au pluriel est historique.
+ *     préférer au singulier pour toute nouvelle classe.
+ * 
+ * @param int $id_document
+ * @param string $media
+ * @param array $env
+ * @param array $get
+ * @return string
+ */
+function filtre_medias_modele_document_standard_classes_dist($Pile, $id_document, $media) {
+	$env = $Pile[0];
+	$var = $Pile['vars'] ?? [];
+
+	$s  = 'spip_document_';
+	
+	$classes = [];
+	$classes[] = $s . $id_document;
+	$classes[] = 'spip_documents';
+	$classes[] = $s . $media;
+	if (!empty($env['align'])) {
+		$classes[] = 'spip_documents_' . $env['align'];
+	} elseif ($media === 'image') {
+		$classes[] = 'spip_documents_center';
+	}
+	if (!empty($var['legende'])) {
+		$classes[] = $s . '--legende';
+	}
+	if (!empty($env['class'])) {
+		$classes[] = $env['class'];
+	}
+	return implode(" ", $classes);
+}
+
+
+/**
+ * Liste les attributs data standards des modèles de documents SPIP.
+ *
+ * @param int $id_document
+ * @param string $media
+ * @param array $env
+ * @param array $get
+ * @return string
+ */
+function filtre_medias_modele_document_standard_attributs_dist($Pile, $id_document, $media) {
+	$env = $Pile[0];
+	$var = $Pile['vars'] ?? [];
+	$attrs = [];
+
+	if (!empty($var['legende'])) {
+		$len = spip_strlen(textebrut($var['legende']));
+		// des x. "x" = 32 caratères, "xx" => 64, "xxx" => 128, etc...
+		$lenx = medias_str_repeat_log($len, 2, "x", 4);
+		$attrs['data-legende-len'] = $len;
+		$attrs['data-legende-lenx'] = $lenx;
+	}
+
+	$res = "";
+	foreach($attrs as $attr => $value) {
+		$res .= "$attr=\"" . attribut_html($value) . "\""; 
+	};
+	return $res;
+}
+
+
+/**
+ * Retourne une chaine répétée d'autant de fois le logarithme
+ *
+ * @example medias_str_repeat_log(124, 2)
+ * 
+ *     Avec $base = 2 et $remove = 0
+ * 
+ *     0 => 
+ *     2 => x
+ *     4 => xx
+ *     8 => xxx
+ *     16 => xxxx
+ *     32 => xxxxx
+ *     64 => xxxxxx
+ * 
+ * @example medias_str_repeat_log(124, 2, "x", 4)
+ * 
+ *     Avec $base = 2 et $remove = 4
+ * 
+ *     0 => 
+ *     2 => 
+ *     4 => 
+ *     8 => 
+ *     16 => 
+ *     32 => x
+ *     64 => xx
+ * 
+ * @note 
+ *     L'inverse (nb caractères => valeur) est donc `pow($base, $nb_char)`
+ * 
+ *     En partant du nombre de "x" on retrouve la fourchette du nombre de départ.
+ *     Si $base = 2 et $remove = 4 :
+ * 
+ *    - "xxx" = 2 ^ (strlen("xxx") + 4) = 2 ^ (3 + 4) = 128
+ *    - "xxxxx" = 2 ^ (5 + 4) = 512
+ 
+ *     x = 32,
+ *     xx = 64
+ *     xxx = 128
+ *     xxxx = 256
+ *     xxxxx = 512 
+ *     ...
+ * 
+ *     Ce qui veut dire que "xxx" provient d'une valeur entre 128 et 255.
+ * 
+ * @note
+ *     C'est surtout utile pour une sélection en CSS (car CSS ne permet pas de sélecteur "lower than" ou "greater than") :
+ * 
+ *    ```spip
+ *    <div class='demo' attr-demo-pad='[(#TEXTE|textebrut|spip_strlen|medias_attr_pad_log)]'>...</div>`
+ *    ```
+ * 
+ *    ```css
+ *    .demo[attr-demo-pad^="xxxx"] {
+ *       // le contenu fait au moins 256 caractères
+ *    }
+ *    .demo:not([attr-demo-pad^="xxxx"]) {
+ *       // le contenu fait au moins 256 caractères
+ *    }
+ *    ```
+ * 
+ * @param float $num 
+ * @param float $log
+ * @param string $pad_string
+ * @param int $remove : Nombre de caractères à enlever.
+ * 
+ * @return string Des x
+ */
+function medias_str_repeat_log($num, $base = 2, $string = "x", $remove = 0) {
+	$pad = str_repeat($string, (int)log($num, $base));
+	return substr($pad, $remove);
+}

modeles/audio.html

@@ -7,7 +7,11 @@
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}}
 #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
-<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_audio[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'[ style='width:(#GET{largeur})px;']>
+<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{audio})]"[ 
+  style='width:(#GET{largeur})px;'][
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{audio})
+]>
 	[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|vider_attribut{class})]
   <div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']>
   	<audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"

modeles/file.html

@@ -25,7 +25,11 @@
 [(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})]
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 [(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}]
-<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_file[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})][ (#ENV{class})] spip_lien_ok' [ style='width:(#GET{width}|max{120})px;']>
+<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{file}) ]spip_lien_ok"[ 
+  style='width:(#GET{width}|max{120})px;'][ 
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{file})
+]>
 [<a href="(#GET{url})"[
 	class="(#ENV{lien_class})"] title='[(#GET{title}|attribut_html)]'[
 	(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='' />[(#GET{url}|?{</a>})]

modeles/file_emb_application.html

@@ -5,14 +5,17 @@
 - #GET{hauteur} et #GET{largeur} correspondent prioritairement a #ENV,
   puis #LARGEUR/HAUTEUR sauf si il y a un controleur
 ]
-[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 #SET{hauteur,#ENV{hauteur,#HAUTEUR}} #SET{largeur,#ENV{largeur,#LARGEUR}}
 [(#ENV{controls}=={PlayButton}|?{#SET{hauteur,25},''})][
  (#ENV{controls}=={PlayButton}|?{#SET{largeur,40},''})][
  (#ENV{controls}=={PositionSlider}|?{#SET{hauteur,25},''})][
  (#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''})
 ][(#ENV{controls,''}|non)
-<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_application[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'>
+[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
+<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{application})]"[
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{application})
+]>
 ][(#EXTENSION|=={swf}|oui)
 <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' 
  codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=#ENV{version,'6,0,0,0'}' 

modeles/file_emb_text.html

 <BOUCLE_text (DOCUMENTS types_documents) {id_document=#ENV{id,#ENV{id_document}}} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-][<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_text[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'
-><pre>(#FICHIER|contenu_document{#ENV{charset,auto}}|echapper_tags)</pre>
+][<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ 
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{text})
+]><pre>(#FICHIER|contenu_document{#ENV{charset,auto}}|echapper_tags)</pre>
 [(#GET{legende})
 ]</figure>
 ]</BOUCLE_text>

modeles/file_emb_text_csv.html

 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-]<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_text[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'>
+]<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text})]"[ 
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{text})
+]>
 [(#FICHIER|contenu_document{#ENV{charset,auto}}|appliquer_filtre{#MIME_TYPE})]
 [(#GET{legende}
 ]</figure>

modeles/file_emb_text_html.html

 <BOUCLE_texthtml (DOCUMENTS types_documents) {id_document=#ID} {tout}
 >[(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})][(#REM)
-][<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_text_html[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'
-><object data="(#URL_DOCUMENT)" width="100%" height="400"><a href="#URL_DOCUMENT">#FICHIER</a></object>
+][<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{text_html})]"[ 
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{text_html})
+]><object data="(#URL_DOCUMENT)" width="100%" height="400"><a href="#URL_DOCUMENT">#FICHIER</a></object>
 [(#GET{legende})
 ]</figure>
 ]</BOUCLE_texthtml>

modeles/image.html

@@ -11,7 +11,11 @@
 [(#SET{image,#GET{image}|inserer_attribut{alt,#ENV{alt,#ALT}|sinon{''}}})]
 [(#SET{legende,#INCLURE{fond=modeles/document_legende, env}|trim})]
 #SET{largeur,#GET{image}|largeur}
-<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_image[ spip_documents_(#ENV{align}|sinon{center})][ (#GET{legende}|?{spip_document--legende})][ (#ENV{class})] spip_lien_ok'[ style='width:(#GET{largeur})px;']>
+<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{image}) ]spip_lien_ok"[ 
+  style='width:(#GET{largeur})px;'][
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{image})
+]>
 [<a href="(#ENV{lien})"[ class="(#ENV{lien_class}|concat{#GET{autolien}|?{' mediabox'}})"]>]
 [(#ENV{lien}|non|et{#GET{autolien}})<a href="#URL_DOCUMENT" class="mediabox" type="#MIME_TYPE">]
 		#GET{image}

modeles/video.html

@@ -9,7 +9,11 @@
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}}
 #SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}}
 #SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
-<figure class='spip_document_#ID_DOCUMENT spip_documents spip_document_video[ spip_documents_(#ENV{align})][ (#GET{legende}|?{spip_document--legende})]'[ style='width:(#GET{largeur})px;']>
+<figure 
+  class="[(#ID_DOCUMENT|medias_modele_document_standard_classes{video})]"[ 
+  style='width:(#GET{largeur})px;'][ 
+  (#ID_DOCUMENT|medias_modele_document_standard_attributs{video})
+]>
 <div class="video-intrinsic-wrapper" style='height:0;width:#GET{largeur}px;max-width:100%;padding-bottom:[(#GET{hauteur}|div{#GET{largeur}}|mult{100}|round{2})]%;position:relative;'>
 	<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
 		<video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]"