Mois : octobre 2017

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

31/10/2017 / admin

Ajouter les sources de Modernizr comme dépendances NPM

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

npm install --save-dev modernizr

1	npm install --save-dev modernizr

Installer également le paquet gulp-modernizr.

npm install --save-dev gulp-modernizr

1	npm install --save-dev 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

{
  "plugins": {
    "modernizr": {
      "options" : [
        "setClasses"
      ],
      "tests" : [
        "touchevents"
      ]
    }
  }, 
}

{

"plugins": {

"modernizr": {

"options" : [

"setClasses"

"tests" : [

"touchevents"

]

}

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:

{
  "crawl": false,
  "customTests": [],
  "dest": "/PATH/TO/modernizr-output.js",
  "tests": [
    "touchevents"
  ],
  "options": [
    "setClasses"
  ],
  "uglify": true
}

{

"crawl": false,

"customTests": [],

"dest": "/PATH/TO/modernizr-output.js",

"tests": [

"touchevents"

"options": [

"setClasses"

"uglify": true

}

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:

var modernizr = require('gulp-modernizr');

1	var modernizr = require('gulp-modernizr');

Puis initialiser la tâche de build:

gulp.task('build:modernizr', function() {
  gulp.src('./js/*.js')
    .pipe(modernizr('modernizr-custom.js', config.plugins.modernizr))
    .pipe(gulp.dest(config.paths.scripts.dest))
});

gulp.task('build:modernizr', function() {

gulp.src('./js/*.js')

.pipe(modernizr('modernizr-custom.js', config.plugins.modernizr))

.pipe(gulp.dest(config.paths.scripts.dest))

});

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

30/10/2017 / admin

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

  .footer {
    padding: $global-padding 0;
    @include flex-grid-row(
      $gutters: 0);

    &-column {
      @include flex-grid-size(
        $columns:  22.22222%);
      &:last-child {
        @include flex-grid-size(
          $columns: 33.33333%);
      }    
    }
  }

.footer {

padding: $global-padding 0;

@include flex-grid-row(

$gutters: 0);

&-column {

@include flex-grid-size(

$columns: 22.22222%);

&:last-child {

@include flex-grid-size(

$columns: 33.33333%);

}

Une rangée basée sur 8 colonnes

.row-8 {
  @include flex-grid-row($columns: 8);
  .column {
    @include flex-grid-column($columns: 1/8);
    &.large-6 {
      @include flex-grid-column($columns: 6/8);
    }
  }
  .columns {
    @extend .column;
  }
}

.row-8 {

@include flex-grid-row($columns: 8);

.column {

@include flex-grid-column($columns: 1/8);

&.large-6 {

@include flex-grid-column($columns: 6/8);

}

.columns {

@extend .column;

}

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

30/10/2017 / admin

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:

  /*
   * Foundation plugins initialization
   */
  Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>';
  $(document).foundation();

* Foundation plugins initialization

Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>';

$(document).foundation();

Via un data-attribute HTML

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

data-back-button='<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>'

1	data-back-button='<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>'

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

19/10/2017 / admin

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:

Uncaught TypeError: Cannot read property "concat" of undefined

1	Uncaught TypeError: Cannot read property "concat" of undefined

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:

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

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

19/10/2017 / admin

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:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

var argv = require('yargs').argv;

gulp.task('my-task', function() {

return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)

.pipe(sass({style:'nested'}))

.pipe(autoprefixer('last 10 version'))

.pipe(concat('style.css'))

.pipe(gulp.dest(options.SCSS_DEST));

});

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:

var argv = require('yargs').argv,
    gulpif = require('gulp-if'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('out.js'))
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulpif(argv.production, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist/'));
});

var argv = require('yargs').argv,

gulpif = require('gulp-if'),

rename = require('gulp-rename'),

uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {

gulp.src('src/**/*.js')

.pipe(concat('out.js'))

.pipe(gulpif(argv.production, uglify()))

.pipe(gulpif(argv.production, rename({suffix: '.min'})))

.pipe(gulp.dest('dist/'));

});

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:

.pipe(plugins.if(!argv.dev, plugins.uglify()))

1	.pipe(plugins.if(!argv.dev, plugins.uglify()))

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

11/10/2017 / admin

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

Mes propres expériences avec les MutationObserver:

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

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().

$('#content').on('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

$('#content').on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

// Content change handler

}

});

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

11/10/2017 / admin

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

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

$('#special').on('click', function(e) {

e.stopPropagation();

});

$(document).on('click', function (e) {

// Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.

});

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

var stop = false;
// do your logic here
if(stop){
    event.stopPropagation();
}

var stop = false;

// do your logic here

if(stop){

event.stopPropagation();

}

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

Utiliser la méthode .off().

$(document).on('click', function(e) {
  console.log("This will be displayed only once.");
  $(this).off(e);
});

$(document).on('click', function(e) {

console.log("This will be displayed only once.");

$(this).off(e);

});

[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

11/10/2017 / admin

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 :

<p><button class="button" data-toggle="showNavAndSwitchlanguageForMobile">Menu</button></p>

<div class="full reveal" id="showNavAndSwitchlanguageForMobile" data-reveal>
  <ul class="vertical menu accordion-menu" data-accordion-menu>
    <li>
      <a href="#">Item 1</a>
      <ul class="menu vertical nested">
        <li><a href="#">Item 1A</a></li>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

<li>

</ul>

</li>

</ul>

</div>

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:

// Global vars
var $mobileNavModal = $('#showNavAndSwitchlanguageForMobile');

1 2	// Global vars var $mobileNavModal = $('#showNavAndSwitchlanguageForMobile');

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).

var mobileHeaderInfo = Foundation.Box.GetDimensions(document.getElementById('mobileHeader'));
function printMobileHeaderHeight(){
  $mobileNavModal.attr('data-v-offset', mobileHeaderInfo.height);
}

// Si la fenêtre est redimensionnée, on réinitialise la valeur.
$('window').on('resize', printMobileHeaderHeight());

var mobileHeaderInfo = Foundation.Box.GetDimensions(document.getElementById('mobileHeader'));

function printMobileHeaderHeight(){

$mobileNavModal.attr('data-v-offset', mobileHeaderInfo.height);

}

// Si la fenêtre est redimensionnée, on réinitialise la valeur.

$('window').on('resize', printMobileHeaderHeight());

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

$(document).foundation();

1	$(document).foundation();

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.

.reveal.full {
  height: 100%;
  height: 100vh;
  min-height: 100vh;
}

.reveal.full {

height: 100%;

height: 100vh;

min-height: 100vh;

}

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

<div class="full reveal without-overlay" 
     id="showNavAndSwitchlanguageForMobile" 
     data-reveal="95bnsl-reveal" 
     data-v-offset="65" 
     role="dialog" 
     aria-hidden="false" 
     data-yeti-box="showNavAndSwitchlanguageForMobile" 
     data-resize="showNavAndSwitchlanguageForMobile" 
     style="display: block; top: 65px; left: 0px; margin: 0px;" 
     tabindex="-1">

<div class="full reveal without-overlay"

id="showNavAndSwitchlanguageForMobile"

data-reveal="95bnsl-reveal"

data-v-offset="65"

role="dialog"

aria-hidden="false"

data-yeti-box="showNavAndSwitchlanguageForMobile"

data-resize="showNavAndSwitchlanguageForMobile"

style="display: block; top: 65px; left: 0px; margin: 0px;"

tabindex="-1">

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 :

$mobileNavModal.on('open.zf.reveal', function(){
  var elementStandardStyle = $(this).attr('style');
  var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

  $(this)
    .attr('style', '')
    .attr('style', elementStandardStyle + elementCustomStyle);
});

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + 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).

function closeMobileNavModal(){
  $mobileNavModal.foundation('close');
}

function closeMobileNavModal(){

$mobileNavModal.foundation('close');

}

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).

$mobileNavModal.on('open.zf.reveal', function(){
  $('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){
    e.stopPropagation();
  });

  $(document).on('click', 'html', function(e){
    closeMobileNavModal();
    $(this).off(e);

    // [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas
    // automatiquement en haut de page
    if ($('html.iphone').length == 1){
      $(window).scrollTop(0);
    }
  });
});

$mobileNavModal.on('open.zf.reveal', function(){

$('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){

e.stopPropagation();

});

$(document).on('click', 'html', function(e){

closeMobileNavModal();

$(this).off(e);

// [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas

// automatiquement en haut de page

if ($('html.iphone').length == 1){

$(window).scrollTop(0);

}

});

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.

html.iphone {
  cursor: pointer;
}

html.iphone {

cursor: pointer;

}

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:

$mobileNavModal.on('open.zf.reveal', function(){
  var elementStandardStyle = $(this).attr('style');
  var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

  $(this)
    .attr('style', '')
    .attr('style', elementStandardStyle + elementCustomStyle);

  $('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){
    e.stopPropagation();
  });

  $(document).on('click', 'html', function(e){
    closeMobileNavModal();
    $(this).off(e);

    // [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas
    // automatiquement en haut de page
    if ($('html.iphone').length == 1){
      $(window).scrollTop(0);
    }
  });
});

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + elementCustomStyle);

$('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){

e.stopPropagation();

});

$(document).on('click', 'html', function(e){

closeMobileNavModal();

$(this).off(e);

// [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas

// automatiquement en haut de page

if ($('html.iphone').length == 1){

$(window).scrollTop(0);

}

});

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();) :

    function openChildren($child){
        if ($($child).attr('aria-expanded') === "false") {
            $($child).children('a').first().trigger('click');
        }

        if ($($child).find('.inpath').length){
            openChildren($($child).find('.inpath').first());
        }
    }

function openChildren($child){

if ($($child).attr('aria-expanded') === "false") {

$($child).children('a').first().trigger('click');

}

if ($($child).find('.inpath').length){

openChildren($($child).find('.inpath').first());

}

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

  $mobileNavModal.on('open.zf.reveal', function(){
    var elementStandardStyle = $(this).attr('style');
    var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';
    var primaryNav = $('#primaryNav-mobile');

    $(this)
      .attr('style', '')
      .attr('style', elementStandardStyle + elementCustomStyle);

      if ($(primaryNav).find('.inpath').first().length) {
          openChildren($(primaryNav).find('.inpath').first());
      }
  });

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

var primaryNav = $('#primaryNav-mobile');

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + elementCustomStyle);

if ($(primaryNav).find('.inpath').first().length) {

openChildren($(primaryNav).find('.inpath').first());

}

});

[Drupal 7][Drush] Astuces, commandes utiles

03/10/2017 / admin

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:

<!-- THEME DEBUG -->
<!-- CALL: theme('node') -->
<!-- FILE NAME SUGGESTIONS:
   * node--view--roederer-home-actualites--block-1.tpl.php
   * node--view--roederer-home-actualites.tpl.php
   * node--208--homepage-actualite.tpl.php
   * node--208.tpl.php
   * node--actualites--homepage-actualite.tpl.php
   * node--actualites.tpl.php
   x node.tpl.php
-->
<!-- BEGIN OUTPUT from 'modules/node/node.tpl.php' -->

<!-- FILE NAME SUGGESTIONS:

* node--view--roederer-home-actualites--block-1.tpl.php

* node--view--roederer-home-actualites.tpl.php

* node--208--homepage-actualite.tpl.php

* node--208.tpl.php

* node--actualites--homepage-actualite.tpl.php

* node--actualites.tpl.php

x node.tpl.php

-->

… 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:

<!-- THEME DEBUG -->
<!-- CALL: theme('node') -->
<!-- FILE NAME SUGGESTIONS:
   * node--view--roederer-home-actualites--block-1.tpl.php
   x node--view--roederer-home-actualites.tpl.php
   * node--208--homepage-actualite.tpl.php
   * node--208.tpl.php
   * node--actualites--homepage-actualite.tpl.php
   * node--actualites.tpl.php
   * node.tpl.php
-->
<!-- BEGIN OUTPUT from 'sites/all/themes/custom/roederer/templates/node/node--view--roederer-home-actualites.tpl.php' -->

<!-- FILE NAME SUGGESTIONS:

* node--view--roederer-home-actualites--block-1.tpl.php

x node--view--roederer-home-actualites.tpl.php

* node--208--homepage-actualite.tpl.php

* node--208.tpl.php

* node--actualites--homepage-actualite.tpl.php

* node--actualites.tpl.php

* node.tpl.php

-->

Résolution d’erreurs front via Drush

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

User warning: The following module is missing from the file system: ultimate_cron. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /home/intlangf/drupal/roederer-autonome/includes/bootstrap.inc).

1	User warning: The following module is missing from the file system: ultimate_cron. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /home/intlangf/drupal/roederer-autonome/includes/bootstrap.inc).

$ drush updb

1	$ drush updb

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

03/10/2017 / admin

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
Platform
Bowser
From scratch

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.

$('html').addClass(platform.name+' '+platform.version+' '+platform.os);

1	$('html').addClass(platform.name+' '+platform.version+' '+platform.os);

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.

$('html').addClass(bowser.name+' '+bowser.version);

1	$('html').addClass(bowser.name+' '+bowser.version);

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

console.log(navigator);

1	console.log(navigator);

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

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

alert(getOS());

function getOS() {

var userAgent = window.navigator.userAgent,

platform = window.navigator.platform,

macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],

windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],

iosPlatforms = ['iPhone', 'iPad', 'iPod'],

os = null;

if (macosPlatforms.indexOf(platform) !== -1) {

os = 'Mac OS';

} else if (iosPlatforms.indexOf(platform) !== -1) {

os = 'iOS';

} else if (windowsPlatforms.indexOf(platform) !== -1) {

os = 'Windows';

} else if (/Android/.test(userAgent)) {

os = 'Android';

} else if (!os && /Linux/.test(platform)) {

os = 'Linux';

}

return os;

}

alert(getOS());

JavaScript iOS version detection

/*
 * Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad
 * Possible values include:
 *	3 - v3.0
 *	4.0 - v4.0
 *	4.14 - v4.1.4
 *	false - Not iOS
 */
 
var iOS = parseFloat(
	('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
	.replace('undefined', '3_2').replace('_', '.').replace('_', '')
) || false;

* Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad

* Possible values include:

* 3 - v3.0

* 4.0 - v4.0

* 4.14 - v4.1.4

* false - Not iOS

var iOS = parseFloat(

('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])

.replace('undefined', '3_2').replace('_', '.').replace('_', '')

) || false;

Articles récents

Catégories

Archives

Méta

Mois : octobre 2017

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

Ajouter les sources de Modernizr comme dépendances NPM

gulpconf.json

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

gulpfile.js

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

Une rangée basée sur 8 colonnes

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

Via javaScript

Via un data-attribute HTML

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

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

Yargs

Combinaison de Yargs et de Gulp-if

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

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

Annuler les effets d’event.stopPropagation()

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

[Drupal 7][Drush] Astuces, commandes utiles

Activer un module précédemment installé

Obtenir des FILE NAME SUGGESTIONS

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

browser-detection

Platform

Bowser

From scratch

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

JavaScript iOS version detection