Mois : octobre 2017

[NPM][Gulp] Ajouter un custom build de Modernizr à un projet

Ajouter les sources de Modernizr comme dépendances NPM

Source: Modernizr documentation > Downloading Modernizr > Command Line Config.

Installer également le paquet gulp-modernizr.

Ce plugin permet tout un tas de paramétrages détaillés ici. Pour l’heure, nous exploiterons uniquement les champs options et tests.

gulpconf.json

Ici je créer un custom build avec uniquement la feature touchevents à déclarer sous tests.

Connaître les options requises en fonction des features qu’on souhaite embarquer

Pour vous aider à savoir quelles sont les options requises en fonction des features que vous souhaitez utiliser, vous pouvez créer votre custom build via l’interface en ligne disponible sur modernizr.com.

Choisissez par exemple la feature touchevents et cliquez sur BUILD (bouton rose en haut à droite). Une modale apparaît. Sous Grunt config cliquez sur « Copy to clipboard ». Le code suivant apparaît:

Les champs options et tests révèlent les pré-requis à renseigner dans la configuration de votre plugin Gulp.

gulpfile.js

Déclarer gulp-modernizr:

Puis initialiser la tâche de build:

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

Une rangée basée sur 8 colonnes

[Foundation 6] Customiser le libellé du lien « Back » (retour) du composant Drilldown

2 solutions possibles, mais le truc à savoir c’est qu’il faut également préciser quel markup HTML va venir englober le libellé. Si on précise uniquement un libellé, le markup englobant mis par défaut (et le lien de retour qui va avec) disparaîtront.

Via javaScript

Avant d’initialiser vos plug-ins Foundation:

Via un data-attribute HTML

Pas testé; pose probablement un problème de caractères ", '.

[jQuery] Utiliser jQuery Migrate pour rendre compatible du code écrit pour d’anciennes versions de jQuery avec une version plus récente

J’ai souhaité utiliser des fonctionnalités de jQuery Mobile, mais cette suite d’outils n’était pas compatible avec la version de jQuery en place dans mon projet (trop récente). La console me remontait une erreur de type:

Je me suis tourné vers le plug-in jQuery Migrate. jQuery Migrate est disponible en CDN ici. Via Bower, je n’ai pu télécharger que des sources non-exploitables. J’ai donc préféré récupérer le CDN.

Pour utiliser jQuery Migrate, il faut d’abord déclarer la version de jQuery qu’on utilise dans son projet, puis déclarer ensuite le plug-in jQuery Migrate. Exemple:

Ici, j’utilise jQuery-3.0.0, mais charger jquery-migrate-3.0.1 (3.0.1 est la version du plug-in, pas le numéro de version de jQuery qui est sensé être simulé) juste après me permettra de rendre compatible du code écrit pour jQuery 1.x ou 2.x.

ATTENTION: seule le version minifiée n’affiche pas de logs dans la console à chaque fois que le script détecte du code JS déprécié.

[Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if

Source: Is it possible to pass a flag to Gulp to have it run tasks in different ways?

Yargs

Gulp doesn’t offer any kind of util for that, but you can use one of the many command args parsers. I like yargs. Should be:

Combinaison de Yargs et de Gulp-if

You can also combine it with gulp-if to conditionally pipe the stream, very useful for dev vs. prod building:

And call with gulp my-js-task or gulp my-js-task --production.

Remarque: selon les cas, on peut vouloir n’exécuter une tâche que dans le cas ou l’argument --dev n’a pas été précisé. Il suffit de mettre un caractère ! (signifiant « différent de ») devant la condition:


Autre alternative (moins pratique, mais qui fonctionne aussi) : gulp-options.

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:


Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

Source: jQuery bind click *ANYTHING* but *ELEMENT*

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

Utiliser la méthode .off().

[Foundation 6] Contourner le bug du composant Modal en full screen qui empêche de scroller jusqu’en bas si on utilise l’attribut optionnel data-v-offset

Présentation du problème

Voir en fin de ce billet le paragraphe « Améliorations ».

Demande pour un site Responsive avec un menu qui, en vue Mobile:

  • S’ouvre en cliquant sur une icône Sandwich placée dans le bandeau
  • S’ouvre immédiatement sous le bandeau (pas de off-canvas) et par-dessus le contenu de la page (comprendre: sans s’intercaler entre le bandeau et le contenu de page, donc sans pousser ce dernier vers le bas).
  • Le menu doit être en accordéon

J’ai eu l’idée d’utiliser le composant Modal de Foundation 6 qui intègre une option full-screen et la possibilité de faire débuter la modale à x pixels du haut de la fenêtre (pour laisser le bandeau apparent). La modale de Foundation étant scrollable, je me suis dit « Bingo! ». Le code de ma modale ressemble à peu près à ceci :

Problème: la modale semble mal calculer les hauteurs lorsqu’on utilise l’attribut optionnel data-v-offset pour faire débuter la modale à x pixels du haut de la fenêtre. On ne peut pas scroller jusqu’en bas lorsque le contenu de celle-ci est plus haut que la hauteur totale de la fenêtre!!!

Mise en place de la solution

(optimisation) On stocke l’ID affecté à l’élément Modal dans une variable, car on va l’appeler à plusieurs reprises ensuite:

On commence par récupérer la hauteur du bandeau (en utilisant la très pratique javascript Utility BOX fournie avec Foundation 6) pour l’affecter à la modale via l’attribut optionnel data-v-offset du plugin Reveal (lui aussi fourni avec Foundation 6).

Seulement ensuite, on initialise le plugin Reveal de Foundation 6 (ou tous les plugins d’un coup dans notre exemple) :

De base, la modale Foundation a une hauteur et une hauteur minimale fixées à 100% ou 100vh pour les navigateurs les plus récents. Ces styles sont affectés à l’élément Modal via CSS.

D’autres styles sont affectés à l’élément Modal, lors de son ouverture, via javascript (voir l’attribut style="") :

Pour éviter le bug nous concernant, il faut surcharger les valeurs de height et de min-height en les recalculant via javaScript en fonction de la valeur de data-v-offset récupérée plus haut. On stocke les styles existants dans une variable elementStandardStyle et on ajoute les nouvelles valeurs de hauteur via une variable elementCustomStyle :

Optimisations d’ordre ergonomiques

Refermer la modale (le menu) au clic n’importe où d’autre sur l’écran

On commence par créer une fonction qui ferme la modale (cf. doc de Foundation).

Puis on exécute du code à l’événement open.zf.reveal (une fois la modale est ouverte) :

  • Pour une sélection d’éléments, la modale ne se refermera pas si on clique dessus.
  • Pour tout le reste du document, on exécute la fonction closeMobileNavModal() qui referme la modale.
  • Le 2ème point n’est exécuté qu’une seule fois grâce au $(this).off(e); (sinon, on ne peut plus ré-ouvrir la modale).

ATTENTION!!! Sur iPhone, il existe un bug connu qui empêche le clic sur l’ensemble du $(document). Il faut impérativement ajouter la propriété cursor: pointer; sur l’élément ciblé par le clic.

Dans l’exemple ci-dessous, je lance une détection de l’appareil servant à l’internaute et j’affiche une classe en conséquence sur l’élément html via le plugin browser-detection.

Améliorations (pas testé)

J’appelle deux fois l’événement open.zf.reveal. On peut optimiser ça en ne l’appelant qu’une seule fois:


On peut conserver le menu ouvert sur la page en cours (à condition d’avoir les classes standard d’un menu Change .in-path, .current) en ajoutant le code suivant:

Juste en dessous de l’initialisation des plug-ins Foundation ($(document).foundation();) :

…puis à l’événement open.zf.reveal (le if ($(primaryNav)) :

[Drupal 7][Drush] Astuces, commandes utiles

Activer un module précédemment installé

drush en -y <nom_du_module>

Obtenir des FILE NAME SUGGESTIONS

drush vset theme_debug 1 génère dans le DOM du front:

… où x node.tpl.php représente le fichier utilisé actuellement.

Si on crée le fichier node--view--roederer-home-actualites.tpl.php, les FILE NAME SUGGESTIONS sont modifiées dans le DOM du front:

Résolution d’erreurs front via Drush

User warning: The following module is missing from the file system: .

[Javascript] Détecter l’OS, le navigateur, sa version et autres avec un plugin JS

Attention: détecter un browser, sa version, le système d’exploitation, etc… via JS est une pratique qui montre ses limites. En effet, vous allez créer un site pour des navigateurs modernes et qui utilise les dernières versions de bibiothèques comme jQuery, Bootstrap, etc… La présence dans la source d’une bibliothèque comme jQuery 3.x, par exemple, va générer des erreurs en console et empêcher un script comme browser-detection de s’exécuter. Les classes ie, ie-8, etc... ne s’afficheront pas et vous ne pourrez déclencher ni JS, ni CSS si vous tablez sur leur présence.

browser-detection

Plug-in jQuery browser-detection.js sur GitHub.

Affecte les classes suivantes à l’élément html: win chrome chrome-61.

  • Les +
    • Nomenclature très front-end-dev-friendly !!! Les classes sont tout en minuscules, les mots au sein d’une même classe sont séparés par des tirets, les termes sont minimalistes et pertinents.
    • Edit du 06/10/2017: détecte les navigateurs EDGE depuis le tag 0.3.4. Evolution réalisée par kermit6000 (Thomas).
  • Les –
    • Ne détecte pas EDGE :/ (détecte Edge 15 comme win chrome chrome-52).

Platform

Les sources de Platform (A platform detection library that works on nearly all JavaScript platforms) sur GitHub.

Affecte les classes suivantes à l’élément html: Chrome 61.0.3163.100 Windows 10 64-bit.

  • Les +
    • Détecte EDGE
  • Les –
    • Nomenclature pas du tout front-end-dev-friendly: inclut des majuscules, des espaces et des points dans les noms des classes (Chrome, Windows 10 64-bit, 61.0.3163.100) et les versions des navigateurs peuvent être trop précises (61.0.3163.100).

Bowser

Les sources de Bowser (a browser detector by Lance Dikson) sur GitHub.

Affecte les classes suivantes à l’élément html: Chrome 61.0.

  • Les +
    • Détecte EDGE
  • Les –
    • N’ai pas réussi à afficher le type d’OS, mais uniquement sa version…

From scratch

How to find the operating system version using JavaScript

Detect MacOS, iOS, Windows, Android and Linux OS with JS

JavaScript iOS version detection