Commit Graph

57 Commits (master)

Author SHA1 Message Date
Maïeul e653a1dc1c fix(279): afficher_si et test d'inégalité côté JS
Comparer vraiment des nombres et non pas des chaines.

fix #279
6 days ago
Maïeul 6c68ad3546 fix: Affiner la compatibilité entre les `fieldsets` en onglets et `select2`.
Au sein des onglets, imposer le container de select2 à 100%. Ca manque
de flexibilité, mais ca marche.

A supprimer lorsque
spip-contrib-extensions/select2#4 sera
résolu.

close #240

exemple pour reproduire :

````
id_formulaire: '111'
identifiant: onglets
titre: onglets
descriptif: ''
css: ''
message_retour: ''
saisies:
  -
    options: { label: 'Groupe de champs', onglet: on, onglet_vertical: on, nom: fieldset_1 }
    identifiant: '@63948849014e5'
    verifier: {  }
    saisie: fieldset
    saisies: [{ options: { label: 'Liste déroulante / sélection', datas: "choix1|Un\r\nchoix2|Deux\r\nchoix3|Trois", class: select2, nom: selection_1 }, verifier: {  }, identifiant: '@639488520242a', saisie: selection }]
  -
    options: { label: 'Groupe de champs (copie)', onglet: on, nom: fieldset_2 }
    identifiant: '@6394886e71407'
    verifier: {  }
    saisie: fieldset
    saisies: [{ options: { label: 'Liste déroulante / sélection', datas: "choix1|Un\r\nchoix2|Deux\r\nchoix3|Trois", class: select2, nom: selection_2 }, verifier: {  }, identifiant: '@6394886e7140c', saisie: selection }]
  -
    saisie: input
    options: { nom: input_1, label: 'Ligne de texte', size: 40, sql: 'text DEFAULT '''' NOT NULL' }
    identifiant: '@639488fb2f5e9'
  -
    options: { label: 'Liste déroulante / sélection (copie)', datas: "choix1|Un\r\nchoix2|Deux\r\nchoix3|Trois", class: select2, afficher_si: '@input_1@ == ''1''', nom: selection_3 }
    verifier: {  }
    identifiant: '@639488f4c8c8d'
    saisie: selection
traitements: {  }
public: non
statut: prop
date_creation: '2022-12-10 14:22:57'
maj: '2022-12-10 14:33:00'
apres: formulaire
url_redirect: ''
````

Ref #240
6 months ago
Maïeul 2c1cd2248e fix: Accessibilité des onglets.
- Les onglet doivent avoir l'attribut `role="tab"` en plus du
`role='tablist'` sur le parents
- Les onglets masqués doivent avoir des
attributs `aria-selected="false"` et `tabindex='-1'` dès le début.

Ref : https://www.accede-web.com/notices/interface-riche/onglets/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
6 months ago
Maïeul 8399e70126 fix: Lorsqu'on a une erreur dans un ou plusieurs onglets, se rendre au premier onglet avec une erreur.
fix spip-contrib-extensions/auth_email#1
6 months ago
Maïeul 53c28d8a00 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_
6 months ago
Maïeul 357e5adc06 fix(#228): Corriger l'initilisation sous Chrome des `afficher_si` lorsque
le chargement d'une page implique un chargement ajax immédiat.

fix #228

Le problème venait du fait que certaines pages du privé chargent du
JS en ajax. `afficher_si_init()` était alors appelé :
- à chaque fois qu'un contenu ajax était chargé
- à la fin du chargement de la page

Mais comme tout cela se passe en asynchrone, `afficher_si_init()`
marquait
des forms non entièrement chargé comme initialisé du point de vue des
afficher_si.

La solution consiste à n'initialiser `onAjaxLoad(afficher_si_init)` qu'après la première execution de `afficher_si_init()`.

Effets secondaires :
  - fix #234 (afficher_si dans modalbox, bug indépendant
du navigateur) ;
  - fix probable #154 (afficher_si en ajax)
  - fix spip-contrib-extensions/noizetier#40
  (afficher si en modalebox pour noizetier)
6 months ago
Maïeul aaa9588c80 C'est `aria-labelledby` , pas `labelledby` 1 year ago
Maïeul 9a893d9bab Permettre les afficher_si sur les fieldset en onglet.
- Lorsqu'on masque un onglet avec afficher_si, on se rend sur un autre
onglet
- Lorsqu'on affiche un onglet avec afficher_si, si c'est le seul onglet
visible, alors on s'y rend
1 year ago
Maïeul 2ed49f3223 Afficher si :
- n'appeler les actions de masquage/demasquage que si on n'est pas déjà
masqué/démasqué
- quatre trigger possible :
  - afficher_si_visible_pre -> avant de rendre visible
  - afficher_si_visible_post -> après avoir rendu visible
  - afficher_si_masque_pre -> avant de masquer
  - afficher_si_masque_post -> après avoir masqué
1 year ago
Maïeul 2347c1b81c un log de debug qui trainait 1 year ago
Maïeul 2757e0afde Les fieldset en onglets restent à leur emplacement ; il est possible de mettre du contenu hors onglet entre deux fieldset 1 year ago
Maïeul 750887594c On affiche les saisies masquées par afficher_si avec erreur qu'au
chargement des afficher_si.

Normalement cette situation ne devrait jamais arrivé. Si cela arrive
c'est qu'il y a quelque part une incohérence entre l'évaluation JS et
l'évaluation PHP des afficher_si.
2 years ago
Maïeul 13ad3fc5e3 Fix spip-contrib-extensions/formidable#73
Le problème n'arrivait que si on n'avait pas encore choisi d'email pour
l'expediteur.

Lorsqu'un le fait un afficher_si de type `@champ@ == ''`, on avait un
comportement incohérent entre le JS et le PHP
- côté PHP, le test effectué était `null == ''`, dont résultat `true`.
- côté JS, le test effectué était `undefined == ''`, donc résultat
`false`.

Tout cela est lié à la manière tordue dont fonctionne
`.serializeArray()` en JS (pour récuperer les valeurs du form
courant)...

On corrige cela côté JS en transformant les `undefined` en `''` avant le
test.
2 years ago
tcharlss 0603db4557 Test plus robuste pour activer l'onglet par défaut (sinon erreur JS dans certains cas) 2 years ago
RastaPopoulos c84f57946a Ne lancer le JS d'afficher_si que sur les forms concernés + dans
l'écouteur ne travailler que si le champ a un name + quelques
commentaires pour mieux suivre ce qui est fait (mais il faudrait en
ajouter encore).

Fix #111
Close #112
2 years ago
Maïeul 6c84db71b6 En cas d'erreur, toujours afficher le champ, même s'il est dans un fieldset avec un afficher_si non rempli 2 years ago
Maïeul 59683c8999 Pb #95.
Pouvoir avoir des variantes pour la présentation des étapes, chaque variante étant dans un squelette spécifique.
Pour l'instant on a
  - 'defaut', qui est ce qui est proposé actuellement
  - 'courante', pour n'afficher que l'étape courante + le nb total
  d'étapes.

== Mode defaut
- Ne pas renvoyer les étapes passées masquées par afficher_si
- Passage des boutons de `<input>` à `<button name="aller_a_etape">`

== Mode courante
Je reprend le code de @nicod_, aux adaptations suivantes :
  - utiliser les mêmes conventions de nommage css que pour le modèle
  `defaut`
  - utiliser une chaine de langue à laquelle on passe :
    - le numéro de l'étape courante (déjà encapsulé)
    - le nbre totale d'étape (déjà encapsulé)
    - le nom de l'étape courante
  - on peut ainsi suivre plus facilement les conventions par langue;

Concernant la gestion des `afficher_si` :
  - le numéro de l'étape courante est calculé côté squelette en tenant
  compte des étapes passées qui sont masquées (vu que normalement une
  saisie dans l'étape actuellement ne peut pas changer le masquage des
  étapes masquées)
  - le nbr totale d'étape
    - n'inclut pas les étapes passées masquées par afficher_si
    - inclut toutes les étapes futures
    - est ajusté en JS au chargement + à chaque modification d'un champ
    en fonction des afficher_si
2 years ago
Maïeul cf981b8c8c Excursus : JS d'afficher_si : séparer l'évaluation du test d'afficher_si de l'execution de l'animation 2 years ago
Maïeul bcfa673ed2 Excursus : JS d'afficher si, argument qui ne sert à rien, sans doute trace d'essais passés. 2 years ago
Maïeul 3bc2fb539c Issue #89, pb 2 etape c.
Afficher_si sur le listing d'étape

Pour éviter un effet trop disgracieux, on se contente de masquer/demasquer, sans aucune transition.

Avant d'appliquer les afficher_si, figer la hauteur du bloc d'étapes, pour que lorsqu'une étape est masquée/demasquée cela ne fasse pas un effet de déplacement vertical sur le formulaire proprement dit.
2 years ago
Maïeul 4418513935 on console.log qui trainait 2 years ago
Maïeul cf7259fe5f fix #65, désactiver la validation navigateur lorsqu'on fait un retour à une étape précédente 2 years ago
Maïeul 8e70187e09 compteur de caractères restants : en statique + aussi dans l'espace privé 2 years ago
Maïeul de46bc1199 si une saisie a une erreur, ne jamais la masquée (cela ne devrait a prioriri pas arrivé, sauf bug de la part des dev dans saisies_verifier() 2 years ago
Maïeul bdc10b36f0 Si jamais pour une raison quelconque on a effectué un test sur une saisies masquées par afficher_si, on affiche cette saisies masquées 2 years ago
Maïeul f7d562169e @jluc me faisait remarqué 2 choses à propos de f390af9
- il ne permettait plus de choisir un autre séparateur que /
  - => en fait on ne pouvait pas avant
  - => par contre c'est vrai que cela faisait planter sur
  '/^https?:\/\//'
- il ne permettait plus d'avoir des modificateurs
  - => ca n'avait jamais été officiellement supportée
  - => mais en pratique cela l'était

On corrige donc ainsi :
  - retour des modificateurs, en les passant comme arg supplémentaire au
  à la fonction js `afficher_si()`
  - on maintien le seul `/` comme séparateur, pour avoir une syntaxe
  similaire PHP/JS
  - on revient sur la possibilité de ne pas mettre de séparateur, afin
  d'éviter les dérives partout. Et cela simplifie le support
  utilisateurice :)
2 years ago
Maïeul 65f104c858 Réécriture de la partie JS des afficher-si, pour pouvoir gérer plus
facilement les saisies perso sans avoir à déclarer de nouvelles
fonctions dans 99% des cas (pb #51)

1. Le `data-afficher-si` comporte des appelles à une fonction JS `afficher_si()` qui recoit
en paramètre certains résultats (car on applique un filtre) de l'analyse syntaxique du tests
de base.
2. Cette fonction se base sur `serializeArray()` de jQuery. Mais ce n'est pas des plus pratiques, car celui-ci ne renvoie pas de représentation tabulaire pour ce qui sera pourtant considérés comme un tableau en PHP. De plus, il faut tout restructurer pour pouvoir trouver facilement la valeur d'un champ.
Bref, ca nécessite quand même quelques contorsions.

une fonction qui filtre le résultat du parsage d'afficher_si, idéalement on traiterait cela directement au niveau du regex,... + adaptation du code

Il n'y a que la saisie `fichiers` conditionnante qui demande un traitement à part, que l'on déporte dans cvtupload.

fix #51 #71
2 years ago
Maïeul 6ed64e51ea On en profite pour mettre des aria-hidden (ping @nicod_ !) 2 years ago
Maïeul 55a5aeafcf pb #41
- ne plus mettre un display:none au chargement d'une saisie masquee
- mettre plutot une classe -afficher_si_masque_chargement en plus de
.afficher_si_masque (et donc si on demasque puis remasque, on aura
juster .afficher_si_masque)
- cette classe reprend le .offscreen de SPIP 3.3 :
  - on ne met pas une class offscreen car on ne peut pas supposer qu'elle est chargée sur tout les sites
  - de plus le .offscreen de la 3.2 ne résoud pas le problème (en tout cas pour la saisie carte)
- testé avec une saisie conditionnée de type carte, ca marche
2 years ago
tcharlss 3ce443b995 Ticket #69 : onglets scrollables.
Quand les onglets dépassent du menu, on le détecte en JS et on ajoute une classe pour l'indiquer.
Les onglets deviennent scrollables horizontalement :

* La barre de défilement n'apparaît qu'au survol
* On ajoute un masque avec un dégradé sur les côtés pour montrer qu'il y a du contenu masqué.
* On décale les onglets pour la même raison.

Il faudrait une indication visuelle supplémentaire, un chevron par exemple.
Mais avec le masque c'est compliqué, en attendant mieux ça fera le taff.
2 years ago
tcharlss 8803354643 Fix onglets : dans certains cas tous les fieldsets n'étaient pas transformés en onglets.
Il faut parser systématiquement tous les fieldsets : en cas de rechargement ajax le dom peut avoir changé et de nouveaux fieldsets peuvent avoir été ajoutés. C'est le cas avec le constructeur de formulaire. De plus, ce dernier imbriquant les .formulaire_spip, il vaut mieux ne parser que les fieldsets sinon ça foire (au lieu de parser d'abord les formulaires puis les fieldsets contenus à l'intérieur).

Incidemment on revoit légèrement le markup : préfixer toutes les classes par "saisies-" et encapsuler le menu (cf. commit suivant).
2 years ago
Maïeul 4cb7c3734c Un bug qui visiblement ne gênait pas grand monde : on ne pouvait faire
d'afficher si avec un textarea comme champ conditionnant !
2 years ago
tcharlss 9ff9c9d0da #64 / onglets : animation plus en douceur avec un simple fondu 2 years ago
tcharlss 13dae41fbb Onglets JS : laisser tranquilles les formulaires sans onglets + micro ajustements styles privé. 2 years ago
RastaPopoulos 8bc3230d7b Même si qu'un seul onglet, on a demandé explicitement un onglet donc c'est qu'on en veut un. Charge à l'appelant de pas le mettre s'il n'en veut pas quand il n'en a qu'un seul, mais pas au JS. 2 years ago
tcharlss d2e00b1d5b Les onglets deviennent persistants le temps de la session si **tous** les fieldsets d'un niveau ont un id ou un data-id. Ainsi lors d'un rechargement ajax, on ne perd pas le fil.
Quelques corrections :
* On n'active les onglets que s'il y a au moins 2 fieldsets concurrents.
* Échapper les charactères spéciaux des ids sinon jQuery couine (bien que ce soit accepté en html5 ).
* Bien parser tous les fieldsets imbriqués.
* Un peu de ménage : tout encapsuler dans des fonctions + on les met dans l'ordre logique.
2 years ago
tcharlss 6ef56abc85 Attention à ne pas écraser les éventuels ids existants. Et ne parlons pas de « panneaux » mais de « contenus » 2 years ago
tcharlss 03e6d9810d Ajustements des onglets :
* s'assurer de ne parser qu'une seule fois chaque fieldset, car il peut arriver que des formulaires soient imbriqués, comme le constructeur de formulaires.
* mettre les onglets au début du .editer-groupe qui contient les fieldsets, pas avant + léger ajustement css dans le privé
* préparer la possibilité future d'avoir des onglets verticaux : on met tout dans un conteneur général, et les fieldsets également.
* ajustements css du constructeur de form afin que les boutons d'action des fieldsets en onglets restent facilement cliquables
2 years ago
Maïeul d1db68f933 L'insertion du js d'afficher_si se faisait formulaire par formulaire.
Il s'agissait d'une scorie historique, lié au fait que le js était
dynamique.

Ce n'est plus le cas.

Or cette scorie pouvait poser problème dans le constructeur de saisies,
car le js était alors échappé.

On décide plutot de charger le js une bonne fois pour toute au
chargement de la page.

On adapte le code pour
1. Gérer le cas où l'on charge des formes en AJAX (type constructeur de
saisie)
2. Optimiser un peu le code
3. Avoir une nomenclatura plus cohérente

ping @tcharlss
2 years ago
tcharlss ee0fa72719 Ajoute une option `onglet` aux fieldsets pour les afficher sous forme d'onglet.
* Fonctionne quelque soit la position du fieldset et son niveau d'imbrication
* Fonctionne avec l'option pour activer les étapes
* Incompatible avec l'option `pliable`
2 years ago
nicod_ 1b2f9e9370 Pas de log 3 years ago
nicod_ 2d527ff5e1 Ajout du script et du readme 3 years ago
Maïeul 25d890d4a2 un console.log pour savoir en afficher si ce qu'on évalue, précisement 3 years ago
maieul@maieul.net 4b6b2e92c2 perf : éviter les js en squelette lorsque pas nécessaire (note en passant : faudra aussi voir à supprimer ces tests sur affichage_final, c'est bien bouffeur 4 years ago
maieul@maieul.net 9bf3d2a0cd afficher_si : nouvelle syntaxe '@checbox_x@:TOTAL > 3', permet de tester si le nombre total de case cochée est supérieur à 3 4 years ago
maieul@maieul.net 43fda3de6f --amend 4 years ago
maieul@maieul.net bda29cec20 un cache un peu long sur le js d'afficher_si (comme pour saisies.css.html) 4 years ago
jluc@no-log.org 95983de5cb quickfixons le fix des backticks 4 years ago
nicod@lerebooteux.fr 3e6bc57f35 Les backticks et la valeur par défaut du paramètre génèrent des erreurs et plantent les formulaires sur IE11
(oui, je sais, mais il y en a encore beaucoup dans les administrations)
4 years ago
maieul@maieul.net ef5508b23f si deux formes sur la même page, bien séparer les afficher_si 4 years ago