Mois : juin 2017

[Foundation 6] Permuter une icone lorsqu’on affiche/masque des éléments avec le plug-in Toggler

Source : Toggle Icon when Toggler Fires?

[jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons

Un formulaire est susceptible de contenir plusieurs boutons, par exemple dans le cas d’un formulaire sur plusieurs étapes avec un bouton prev, un bouton next pour naviguer d’une étape à l’autre et un bouton submit pour soumettre le formulaire.

Si on passe par une validation des champs étape par étape (les champs doivent être correctement renseignés sur une étape donnée avant de pouvoir passer à la suivante) et qu’on utilise (par exemple), le plug-in Abide de Foundation 6 for sites, la présence de l’attribut type="submit"> est obligatoire sur les boutons prev et next pour valider les champs saisis à l’étape en cours avant de pouvoir accéder à la suivante.

Problème: cette présence obligatoire de l’attribut type="submit"> sur les boutons prev et next a pour fâcheux résultat de soumettre le formulaire au clic sur ces derniers.

Solution: intercepter l’événement submit avec la méthode .bind().

Ce code aura pour effet d’annuler la soumission du formulaire sur tous les boutons de celui-ci. Ce n’est pas tout-à-fait ce que l’on souhaite puisqu’arrivé à la fin de notre formulaire, il faut pouvoir soumettre les données.

Pour ce faire, on va commencer par masquer le vrai bouton de soumission :

On va ensuite créer un faux bouton à l’aide d’un élément a (qui ne pourra rien soumettre) :

Puis, au moment ou on souhaite laisser la possibilité à l’utilisateur de soumettre, on lance au clic sur notre faux bouton un .unbind() de l’événement submit et et un trigger-click sur le vrai bouton de soumission (qui reste toujours masqué) :

L’intérêt de cette solution réside dans le fait qu’on continue d’empêcher les boutons prev et next d’envoyer le formulaire, ce qui se produirait à la dernière étape si on unbindait l’événement submit sur l’ensemble des boutons et que l’utilisateur décidait, au lieu de soumettre, de repasser à l’étape précédente.

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

Source : jquery detect which button submitted form

Attention: ne fonctionne qu’avec l’élément <input />, pas avec les éléments <a />, <button />.

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

Source: Form Submission without page refresh

[Change 3.6.x] Surcharger proprement un fichier .class.php

Dans un projet, j’utilise le module Survey qui sert à générer des formulaires d’enquêtes de satisfaction depuis le backoffice de Change 3.6.x.

Les différents champs de formulaire sont générés via un fichier modules/website/lib/helpers/FormHelper.class.php. Ce fichier ne se surcharge pas comme un template de bloc via override/modules/website/lib/helpers/FormHelper.class.php, mais dans le module du projet.

Convention: Pour ce tutoriel, notre projet s’appelle toto. Voici la liste des fichiers à modifier et des commandes à exécuter pour que les modifications prennent effet:

config/aop.xml

modules/toto/lib/aop/FormHelper.class.php

Copier le fichier source modules/website/lib/helpers/FormHelper.class.php et le coller à l’identique dans modules/toto/lib/aop/FormHelper.class.php, puis modifier la 2ème ligne comme suit:

Vous pourrez ensuite modifier comme bon vous semble ce fichier pour les affichages spécifiques à votre projet.

Les commandes à exécuter

  • cconf ou compile-config
  • ua ou update-autoload

[Foundation 6] Un habillage Custom pour le composant Tabs

Le markup standard du composant Tabs de Foundation 6 est conservé. On adapte juste les styles.

Ou sous forme de composant supplémentaire en rajoutant la classe tabs-table au <ul class="tabs"> standard :

[Foundation 6] Un mixin SASS utilisant une fonction étendue de map-get pour obtenir un effet sur une icône

Le but ici est d’associer à un titre une combinaison de deux icônes issues d’une police d’icônes: une grande et une petite calée en bas à droite de la grande.

HTML:

SASS:

Importer la librairie Sassy Maps de Hugo Giraudel

Nous allons utiliser la fonction map-deep-get de cette librairie dans notre mixin.

Créer le mixin SASS:

Ce mixin SASS récupère dans le tableau de variables ci-dessous la valeur font-size définie pour un élément HTML Hx en fonction d’un breakpoint:

Il calcule ensuite la taille de la grande et de la petite icône.

Utiliser ce mixin SASS: