feat(#123): Des onglets verticaux.

- Si un seul onglet est vertical dans un groupe, on considère que l'ensemble des onglets le sont.
- Css : dans le public largeur `15em`, dans le
privé `--spip-form-label-width`, responsive avec un code de @nicod_

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Added
+
+- #123 Option `onglet_vertical` pour les `fieldsets` en `onglet` ; si un seul onglet est désigné comme vertical, tous les onglets le sont
+
 ## [4.6.1] - 2022-12-01
 
 

css/saisies.css

@@ -106,6 +106,33 @@ fieldset {
 	margin-top: 0; /* pour la dist */
 }
 
+.saisies-onglets-verticaux {
+	margin-bottom: calc(var(--spip-form-spacing-y) / 2);
+}
+.saisies-onglets-verticaux .saisies-menu-onglets {
+	width: 100%;
+}
+@media (min-width: 580px) {
+	.saisies-onglets-verticaux {
+		display: flex;
+		column-gap: var(--spip-form-spacing-x);
+		margin-bottom: calc(var(--spip-form-spacing-y) / 2);
+	}
+	.saisies-onglets-verticaux .saisies-menu-onglets {
+		max-width: 15em;
+		min-width: 15em;
+	}
+}
+
+
+.saisies-onglets-verticaux .saisies-contenus-onglets {
+	flex-basis: 100%;
+}
+.saisies-onglets-verticaux .saisies-menu-onglets__items {
+	flex-direction: column;
+}
+
+
 .afficher_si_masque_chargement, .etapes__item.afficher_si_masque{
   position: absolute!important;
   width: 1px!important;

javascript/saisies.js

@@ -80,6 +80,13 @@ function saisies_fieldset_onglet() {
 	// Générer les onglets
 	var init = function() {
 		$.each(collections_fieldsets(), function(i, $fieldsets) {
+			// A-t-on ne serait-ce qu'un onglet vertical ? Si oui, on considère que tout est en vertical
+			$fieldsets.each(function() {
+				if ($(this).hasClass('fieldset_onglet_vertical')) {
+					classes.wrapper = classes.wrapper + ' ' + 'saisies-onglets-verticaux';
+					return false;
+				}
+			});
 
 			var
 				$conteneur				= $('<div class="'+classes.wrapper+'"></div>'),
@@ -192,6 +199,12 @@ function saisies_fieldset_onglet() {
 				$onglet_defaut = $menu.find('.'+classes.tablist_link).first();
 			}
 			activer_onglet($onglet_defaut, 0, false);
+			// On regenere select2
+			if (typeof(spip_select2) === 'function') {
+				var $select2 = $fieldsets.find('.select2-hidden-accessible');
+				$select2.select2('destroy');
+				spip_select2($select2);
+			}
 		});
 	}
 

lang/saisies_fr.php

@@ -188,6 +188,8 @@ Vous trouverez la <a href="https://contrib.spip.net/5080" target="_blank" rel="n
 	'option_nom_label' => 'Nom du champ',
 	'option_obligatoire_label' => 'Champ obligatoire',
 	'option_onglet_label' => 'Onglet',
+	'option_onglet_vertical_label_case' => 'Onglet vertical',
+	'option_onglet_vertical_explication' => 'Il suffit qu\'un seul onglet dans un groupe soit marqué comme vertical pour que l\'ensemble des onglets soient verticaux.',
 	'option_onglet_label_case' => 'Afficher sous forme d’onglet.',
 	'option_option_destinataire_intro_label' => 'Label du premier choix vide (lorsque sous forme de liste)',
 	'option_option_intro_label' => 'Label du premier choix vide',

prive/style_prive_plugin_saisies.html

@@ -41,6 +41,12 @@
 .saisies-menu-onglets__lien {
 	border-bottom: 2px solid hsla(0, 0%, 0%, 0.066);
 }
+.saisies-onglets-verticaux .saisies-menu-onglets__lien {
+	border-#RIGHT: 2px solid hsla(0, 0%, 0%, 0.066);
+	border-bottom: 0;
+	width: 100%;
+}
+
 .saisies-menu-onglets__lien {
 	color: inherit;
 	white-space: nowrap;
@@ -59,7 +65,42 @@
 	transition-duration: 0.2s;
 }
 .saisies-menu-onglets__lien:hover {
+	border-bottom-color: #ENV{foncee};
+}
+
+@media (min-width: 580px) {
+	.saisies-onglets-verticaux .saisies-menu-onglets {
+		max-width: var(--spip-form-label-width) !important; /**Ne pas se laisser surprendre par les styles par défaut en 15em **/
+		min-width: var(--spip-form-label-width) !important;
+	}
+}
+
+.saisies-onglets-verticaux .saisies-menu-onglets__lien.actif {
 	background-color: hsla(0, 0%, 0%, 0.05);
+	border-bottom-color: hsla(0, 0%, 0%, 0.066);
+	border-right-color: #ENV{foncee};
+}
+/**
+	Éviter d'avoir la toute première ligne
+	du contenu d'un onglet vertical décalée
+	vers le bas
+**/
+.saisies-onglets-verticaux .saisies-contenu-onglet > fieldset{
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.saisies-onglets-verticaux .saisies-contenu-onglet > fieldset > .editer-groupe:first-of-type,
+.saisies-onglets-verticaux .saisies-contenu-onglet > fieldset > .editer-groupe:first-of-type > div.editer:first-of-type;/** On cible volontairement div.editer pour ne pas avoir .fieldset.editer, où il est nécessaire de garder un peu de padding-top pour pas que le libellé/legend soit collé à la suite**/
+{
+	padding-top: 0;
+}
+.saisies-onglets-verticaux .saisies-menu-onglets__lien {
+	white-space: normal;/* Les onglets horizontaux ont nowrap*/
+}
+
+.formulaire_spip .saisies-onglets fieldset + fieldset,
+.formulaire_spip .saisies-onglets .fieldset + .fieldset > fieldset {
+	margin-top: 0/* Annulation de style de SPIP pour les fieldset successifs */
 }
 .formulaire_spip .saisies-onglets fieldset + fieldset,
 .formulaire_spip .saisies-onglets .fieldset + .fieldset > fieldset,

saisies/fieldset.html

@@ -1,6 +1,12 @@
 #SET{classe_pliable,#ENV{pliable}|et{#ENV{pliable}|!=={non}}|?{pliable}}
 #SET{classe_plie,#ENV{plie}|et{#ENV{plie}|!=={non}}|?{plie}}
 #SET{classe_onglet,#ENV{onglet}|et{#ENV{onglet}|!=={non}}|?{fieldset_onglet}}
+#SET{classe_onglet_vertical,''}
+[(#GET{classe_onglet}|oui)
+	[(#ENV{onglet_vertical}|et{#ENV{onglet_vertical}|!=={non}}|oui)
+		#SET{classe_onglet_vertical,fieldset_onglet_vertical}
+	]
+]
 
 [(#REM) S'il y a des erreurs pour au moins un des champs internes, on ne plie pas ! ]
 #SET{champs_internes, #ENV{saisies}|saisies_lister_par_nom}
@@ -11,7 +17,7 @@
 ]
 #SET{erreur_ici,#ENV**{erreurs/#ENV{nom}}}
 
-<div class="avec_sous_saisies fieldset[ fieldset_(#ENV{nom}|saisie_nom2classe)][ (#ENV{conteneur_class,#ENV{li_class}})][ (#ENV{type_saisie}|saisie_type2classe)][ (#GET{classe_pliable})[ (#GET{classe_plie})]][ (#GET{classe_onglet})]"[ data-id="(#ENV{id_saisie})"][ data-afficher_si="(#ENV*{afficher_si}|saisies_afficher_si_js{#ENV{_saisies}})"]>
+<div class="avec_sous_saisies fieldset[ fieldset_(#ENV{nom}|saisie_nom2classe)][ (#ENV{conteneur_class,#ENV{li_class}})][ (#ENV{type_saisie}|saisie_type2classe)][ (#GET{classe_pliable})[ (#GET{classe_plie})]][ (#GET{classe_onglet})][ (#GET{classe_onglet_vertical})]"[ data-id="(#ENV{id_saisie})"][ data-afficher_si="(#ENV*{afficher_si}|saisies_afficher_si_js{#ENV{_saisies}})"]>
 	#ENV*{inserer_debut}
 	<fieldset id="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"[ (#ENV*{attributs})]>
 

saisies/fieldset.yaml

@@ -54,6 +54,14 @@ options:
           label: '<:saisies:option_onglet_label:>'
           label_case: '<:saisies:option_onglet_label_case:>'
           afficher_si: '!@pliable@'
+      -
+        saisie: 'case'
+        options:
+          nom: 'onglet_vertical'
+          label_case: '<:saisies:option_onglet_vertical_label_case:>'
+          explication: '<:saisies:option_onglet_vertical_explication:>'
+          conteneur_class: 'pleine_largeur'
+          afficher_si: '!@pliable@ && @onglet@'
       -
         saisie: 'input'
         options: