Catégorie : Foundation 6

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

08/04/2020 / admin

Un product finder wizard qui pose une série de questions pour aider l’utilisateur à trouver le bon produit en fonction de ses besoins. La fonctionnalité est constituée de:

le Drilldown de Foundation 6 pour la mise en place du wizard <ul class="vertical menu drilldown product-finder-tree">
des boutons de navigation Précédent, Réinitialiser et Suivant <div class="product-finder-actions">
un fil d’Ariane qui se constitue à la volée en fonction des choix précédents de l’utilisateur <div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

Partie PHTML

Le code HTML qui constitue le menu n’est autre qu’une liste non-ordonnée d’éléments imbriqués. Il est conforme au markup générique fourni par Zurb pour la démo du composant Drilldown aux exceptions près que:

les éléments <a> portent une classe .question
les éléments <li> ont un ID questionID_ (généré via PHP dans notre exemple)

<?php
/** @var  \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {
    ?>
    <li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <ul>
            <li>
                <div id="optioignos-product-list-<?=$question["id"];?>"></div>
            </li>
        </ul>
    </li>
    <?php
}

function displayQuestion($question) {
    if (!$question['children']) {
        displayLeaf($question);
        return;
    }
    ?>
    <li id="questionID_<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <?php if(count($question["children"])): ?>
            <ul id="<?=$question["id"];?>">
                <?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>
            </ul>
        <?php endif; ?>
    </li>
    <?php
}

?>
<h2>Contenu des catégories et sous catégories</h2>

<div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

<div class="product-finder-actions">
    <button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>
    <button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>
    <button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>
</div>

<nav id="productFinder" class="product-finder">
    <ul class="vertical menu drilldown product-finder-tree">
        <?php displayQuestion($tree); ?>
    </ul>
</nav>

<?php

/** @var \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {

<li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">

<?=$question["label"];?>

</a>

<ul>

<li>

</li>

</ul>

</li>

<?php

}

function displayQuestion($question) {

if (!$question['children']) {

displayLeaf($question);

return;

}

<?=$question["label"];?>

</a>

<?php if(count($question["children"])): ?>

<?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>

</ul>

<?php endif; ?>

</li>

<?php

}

<h2>Contenu des catégories et sous catégories</h2>

<button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>

<button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>

<button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>

</div>

<?php displayQuestion($tree); ?>

</ul>

</nav>

Partie jQuery

Nous utilisons plusieurs méthodes natives du composant Drilldown de Foundation 6:

_hideAll pour réinitialiser le menu à son état initial.

Attention: cette méthode semble bugguée. Je l’ai peut-être aussi mal exploitée, mais j’ai dû écrire un fix; voir ci-dessous:

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:
// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
$('[aria-expanded="true"]', $productFinder).each(function(){
    $(this).attr('aria-expanded', false);
});

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

_showMenu pour rediriger l’utilisateur vers un choix précédent dans le DOM du menu (lorsqu’il clique sur le bouton Précédent).

Attention: il est important de pointer un élément UL (dans mon exemple, sur la classe .submenu) pour que cette méthode fonctionne!

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

1

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);
_show pour rediriger l’utilisateur plus en avant dans ses choix dans le DOM du menu (lorsqu’il clique sur le bouton Suivant).

Attention: il est important de pointer un élément LI (dans mon exemple, sur l’ID questionID_ se trouvant sur les LI) pour que cette méthode fonctionne!

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

1

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

<script type="text/javascript">
    require([
        "jquery",
        "foundation",
        "domReady!"
    ], function ($, Foundation) {
        'use strict';

        $(".optichoix-leaf").on("click", function () {
            optiChoixLoadProducts(this.getAttribute("data-category-id"));
        });
        function optiChoixLoadProducts (id) {
            $("#optichoix-product-list-"+id).load(
                "/expertise/productlist",
                "categoryId=" + id
            );
        }

        // Product Finder
        // https://get.foundation/sites/docs/drilldown-menu.html

        let $productFinder = $("#productFinder"),
            $productFinderDrilldown = new Foundation.Drilldown($productFinder),
            $productFinderBreadcrumb = $('#productFinderBreadcrumb'),
            $productFinderActionPrevious = $('#productFinderActionPrevious'),
            $productFinderActionReset = $('#productFinderActionReset'),
            $productFinderActionNext = $('#productFinderActionNext'),
            navHistory = [],
            currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

        // On réinitialise la totale
        function resetAll(){
            // On referme le menu
            $productFinder.foundation('_hideAll');

            // FIX d'un bug du composant Drilldown de Foundation:
            // à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $(this).attr('aria-expanded', false);
            });

            // On désactive les boutons Previous, Reset et Next
            $productFinderActionPrevious.prop('disabled', true);
            $productFinderActionReset.prop('disabled', true);
            $productFinderActionNext.prop('disabled', true);

            // On réinitialise l'historique de navigation
            navHistory = [];

            // On réinitialise la position courante dans l'historique de navigation
            currentPositionInNavHistory = -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();
        }

        // On génère le breadcrumb
        function updateBreadcrumb(){
            $productFinderBreadcrumb.empty();
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);
            });
        }

        // Au clic sur un choix proposé dans l'arbre des questions
        $('.product-finder-tree', $productFinder).on('click', '.question', function(){
            let $this = $(this);
            let $closestExpanded = $this.closest('[aria-expanded="true"]');

            // On pousse l'ID de la question cliquée dans le tableau navHistory
            navHistory.push({
               questionID: $closestExpanded.attr('id')
            });

            // On met à jour la position courante dans l'historique de navigation
            currentPositionInNavHistory = navHistory.length -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // On active les boutons Previous et Reset
            $productFinderActionPrevious.prop('disabled', false);
            $productFinderActionReset.prop('disabled', false);
        });

        // Au clic sur Reset button
        // ...on invoque la fonction resetAll
        $productFinderActionReset.on('click', resetAll);

        // Au clic sur Previous button
        $productFinderActionPrevious.on('click', function(){
            // On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory
            let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

            // On met à jour le menu
            // (dans le DOM, on remonte d'un cran dans l'arbre des questions)
            let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');
            $productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

            // -1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory -1;

            // Si la valeur de la position précédente est "-1", on réinitialise tout
            if(currentPositionInNavHistory == "-1"){
                resetAll();
            // Sinon...
            } else {
                // On met à jour le breadcrumb
                updateBreadcrumb();

                // On active le bouton Next
                $productFinderActionNext.prop('disabled', false);
            }
        });

        // Au clic sur Next button
        $productFinderActionNext.on('click', function(){
            // +1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory +1;

            // On met à jour le menu
            // (dans le DOM, on descend d'un cran dans l'arbre des questions)
            let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);
            $productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // Si la valeur de la position suivante correspond au dernier index du tableau navHistory
            // (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)
            let navHistoryLastIndex = navHistory.length -1;

            if(navHistoryLastIndex == currentPositionInNavHistory){
                // On désactive le button Next
                $productFinderActionNext.prop('disabled', true);
            } else {
                // Nada...
                return false;
            }
        });

    })
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

require([

"jquery",

"foundation",

"domReady!"

], function ($, Foundation) {

'use strict';

$(".optichoix-leaf").on("click", function () {

optiChoixLoadProducts(this.getAttribute("data-category-id"));

});

function optiChoixLoadProducts (id) {

$("#optichoix-product-list-"+id).load(

"/expertise/productlist",

"categoryId=" + id

);

}

// Product Finder

// https://get.foundation/sites/docs/drilldown-menu.html

let $productFinder = $("#productFinder"),

$productFinderDrilldown = new Foundation.Drilldown($productFinder),

$productFinderBreadcrumb = $('#productFinderBreadcrumb'),

$productFinderActionPrevious = $('#productFinderActionPrevious'),

$productFinderActionReset = $('#productFinderActionReset'),

$productFinderActionNext = $('#productFinderActionNext'),

navHistory = [],

currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

// On réinitialise la totale

function resetAll(){

// On referme le menu

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

// On désactive les boutons Previous, Reset et Next

$productFinderActionPrevious.prop('disabled', true);

$productFinderActionReset.prop('disabled', true);

$productFinderActionNext.prop('disabled', true);

// On réinitialise l'historique de navigation

navHistory = [];

// On réinitialise la position courante dans l'historique de navigation

currentPositionInNavHistory = -1;

// On met à jour le breadcrumb

updateBreadcrumb();

}

// On génère le breadcrumb

function updateBreadcrumb(){

$productFinderBreadcrumb.empty();

$('[aria-expanded="true"]', $productFinder).each(function(){

$('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);

});

}

// Au clic sur un choix proposé dans l'arbre des questions

$('.product-finder-tree', $productFinder).on('click', '.question', function(){

let $this = $(this);

let $closestExpanded = $this.closest('[aria-expanded="true"]');

// On pousse l'ID de la question cliquée dans le tableau navHistory

navHistory.push({

questionID: $closestExpanded.attr('id')

});

// On met à jour la position courante dans l'historique de navigation

currentPositionInNavHistory = navHistory.length -1;

// On met à jour le breadcrumb

updateBreadcrumb();

// On active les boutons Previous et Reset

$productFinderActionPrevious.prop('disabled', false);

$productFinderActionReset.prop('disabled', false);

});

// Au clic sur Reset button

// ...on invoque la fonction resetAll

$productFinderActionReset.on('click', resetAll);

// Au clic sur Previous button

$productFinderActionPrevious.on('click', function(){

// On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory

let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

// On met à jour le menu

// (dans le DOM, on remonte d'un cran dans l'arbre des questions)

let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

// -1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory -1;

// Si la valeur de la position précédente est "-1", on réinitialise tout

if(currentPositionInNavHistory == "-1"){

resetAll();

// Sinon...

} else {

// On met à jour le breadcrumb

updateBreadcrumb();

// On active le bouton Next

$productFinderActionNext.prop('disabled', false);

}

});

// Au clic sur Next button

$productFinderActionNext.on('click', function(){

// +1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory +1;

// On met à jour le menu

// (dans le DOM, on descend d'un cran dans l'arbre des questions)

let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

// On met à jour le breadcrumb

updateBreadcrumb();

// Si la valeur de la position suivante correspond au dernier index du tableau navHistory

// (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)

let navHistoryLastIndex = navHistory.length -1;

if(navHistoryLastIndex == currentPositionInNavHistory){

// On désactive le button Next

$productFinderActionNext.prop('disabled', true);

} else {

// Nada...

return false;

}

});

})

</script>

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

07/04/2020 / admin

Source: Foundation 6 Drilldown clickable parent link with sub-menu

HTML

<!--
Demo Header
-->
<div class="row collapse expanded">
  <div class="column">
    <h1 class="text-center">
      <span>Drilldown</span>Click
      <a target="_blank"
         href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">
        { Docs 6.3.1 }
      </a>
    </h1>
  </div>
</div>



<!--
DRILLDOWN MENU TEST
-->
<div class="row demo-text">
  <div class="columns small-12 text-center">
    <p>{ Its now posible click on parent menu items that have a sub menu }</p>
  </div>
</div>

<nav>
  <ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"
      data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>
    <li class="has-submenu">
      <a href="https://www.google.com" target="_blank">Item 1</a>
      <ul class="vertical menu">
        <li><a href="#item-1A">Item 1A</a></li>
        <li><a href="#Item-1B">Item 2A</a></li>
        <li><a href="#Item-1C">Item 3A</a></li>
      </ul>
    </li>
    <li><a href="#Item-2">Item 2</a></li>
    <li><a href="#Item-3">Item 3</a></li>
    <li><a href="#Item-4">Item 4</a></li>
    <li><a href="#Item-5">Item 5</a></li>
  </ul>
</nav>

<!--

Demo Header

-->

<span>Drilldown</span>Click

<a target="_blank"

href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">

{ Docs 6.3.1 }

</a>

</h1>

</div>

<!--

DRILLDOWN MENU TEST

-->

<p>{ Its now posible click on parent menu items that have a sub menu }</p>

</div>

<nav>

<ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"

data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>

</ul>

</li>

</ul>

</nav>

CSS

/*** <-- Foundation Palette & Setup --> ***/
$primary: #1779ba;
$secondary: #767676;
$success: #3adb76;
$warning: #ffae00;
$alert: #CC4B35;

$back-col: #ffffff;
$font-col: #666;
$base-font: 16px;


/*** <-- Layout Styles --> ***/
body{
  background: $back-col;
  color: $font-col;
  font-size: $base-font;
}

/*** <-- Demo Header --> ***/
h1{
  margin-bottom: 4rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 300;
  border-bottom: 1px dashed #e2e2e2;
  span{ color: $primary; }
  a{
    display: block;
    margin-top: .5rem;
    font-weight: normal;
    font-size: .5em;
    text-transform: uppercase;
    color: #888;
    transition: color .4s;
    &:hover{
      color: $primary;
    }
  }
}
.demo-text{
  margin-bottom: 1rem;
}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/
nav{
  width: 30rem;
  max-width: 100%;
  margin: 0 auto 4rem;
  background: #333;
  .is-drilldown-submenu {
    background: #333;
  }
  .has-submenu{
    position: relative;
    .parent-lab{
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      a{
        display: inline-block;
        padding: .7rem 1rem;   //same as menu links
        line-height: 1;        //same as menu links
        color: red;
      }
    }
  }
}

/*** <-- Foundation Palette & Setup --> ***/

$primary: #1779ba;

$secondary: #767676;

$success: #3adb76;

$warning: #ffae00;

$alert: #CC4B35;

$back-col: #ffffff;

$font-col: #666;

$base-font: 16px;

/*** <-- Layout Styles --> ***/

body{

background: $back-col;

color: $font-col;

font-size: $base-font;

}

/*** <-- Demo Header --> ***/

h1{

margin-bottom: 4rem;

padding: 1rem;

text-transform: uppercase;

font-size: 2em;

font-weight: 300;

border-bottom: 1px dashed #e2e2e2;

span{ color: $primary; }

display: block;

margin-top: .5rem;

font-weight: normal;

font-size: .5em;

text-transform: uppercase;

color: #888;

transition: color .4s;

&:hover{

color: $primary;

}

.demo-text{

margin-bottom: 1rem;

}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/

nav{

width: 30rem;

max-width: 100%;

margin: 0 auto 4rem;

background: #333;

.is-drilldown-submenu {

background: #333;

}

.has-submenu{

position: relative;

.parent-lab{

z-index: 1;

position: absolute;

top: 0;

left: 0;

display: inline-block;

padding: .7rem 1rem; //same as menu links

line-height: 1; //same as menu links

color: red;

}

JS

/**
 * Clickable Parent Link with sub-menu
 *
 * NB: must be placed BEFORE foundation's plugins initialisation.
 */
$('.has-submenu > a').each(function(){
    $(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');
});

/**
 * Initialise Foundation's plugins
 */
$(document).foundation();

/**

* Clickable Parent Link with sub-menu

* NB: must be placed BEFORE foundation's plugins initialisation.

$('.has-submenu > a').each(function(){

$(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');

});

/**

* Initialise Foundation's plugins

$(document).foundation();

[Foundation] Démarrez vos développements front-end avec un starter kit incluant le moteur de templates Twig (Twig.js) et le framework JavaScript Vue.js

04/06/2018 / admin

Source: Foundation’s ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework by Frank LANG on GitHub.

Vue.js et Foundation 6 for Sites

Vue + Foundation. This is a demo integration of Foundation for Sites 6.3 in a VueJS 2.2 single-page application.
Setting up Vue 2 and Foundation 6 et version PDF pour la postérité.

[NPM] vue2-foundation – Vue 2.x component wrappers for Foundation 6 widgets. Sources du projet vue2-foundation sous GitHub.

Icônes SVG

Icônes SVG avec Twig

Embedding SVG Icons with Twig Macro

Icônes SVG avec Vue.js

vue-svgicon – An NPM tool to create svg icon components. (vue 2.x)
Dynamically Loading SVG Icons with Vue.js et les sources du projet sous Git

[Foundation 6] Habiller proprement un input type= »file »

18/12/2017 / admin

Source: Adding Filename Feedback to (Stylized) Foundation File Upload Buttons sur Foundation forum.

The Problem:

Foundation has support for stylizing file inputs by adding a label element — but currently — after the user chooses a file from his/her system, there is no feedback that shows that a file was selected. The button’s text remains the same (e.g. « Upload File ») and doesn’t display the filename the user selected, causing the user to wonder if the file was actually selected.

The Solution:

To add feedback, you can add a small amount of JS code. Here’s an example that targets all input files using the example that Foundation uses on their Forms page.

HTML:

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

1 2	<label for="exampleFileUpload" class="button">Upload File</label> <input type="file" id="exampleFileUpload" class="show-for-sr">

JS:

(function(){

    // Attach the change event listener to change the label of all input[type=file] elements
    var els = document.querySelectorAll("input[type=file]"),
        i;
    for (i = 0; i < els.length; i++) {
        els[i].addEventListener("change", function() {
            var label = this.previousElementSibling;
            label.innerHTML = this.files[0].name;
        });
    }

})();

(function(){

// Attach the change event listener to change the label of all input[type=file] elements

var els = document.querySelectorAll("input[type=file]"),

for (i = 0; i < els.length; i++) {

els[i].addEventListener("change", function() {

var label = this.previousElementSibling;

label.innerHTML = this.files[0].name;

});

}

})();

Tested working in Foundation 6.3.0

(Note: If using this code, you may want to use a named function instead of recreating an anonymous function in each iteration of the for loop.)

You may want to do some quick validation on this.files before setting the label’s innerHTML or leave the label’s innerHTML alone to keep the button as is and write the file name in another div next to it. There are also other things to consider such as multiple file uploads (in which you could signify the number of files as feedback for that use-case). It would be great if Foundation could possibly add this feature in the future.

Hope this helps,

Roy

[Foundation 6] Astuces, bonnes pratiques, ressources en ligne

28/11/2017 / admin

Thèmes

SD UI Foundation Themes – Free themes for the most advanced responsive front-end framework in the world (merci Gilles).

[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>'

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

}

});

[Foundation 6] Erreur « Error: Syntax error, unrecognized expression: ##panel2 » avec le composant Tabs

18/09/2017 / admin

Si vous avez cette erreur en utilisant le code de base du composant Tabs de Foundation 6 for Sites :

app.js:15667 Error: Syntax error, unrecognized expression: ##panel2
    at Function.Sizzle.error (app.js:1597)
    at Sizzle.tokenize (app.js:2226)
    at Sizzle.select (app.js:2644)
    at Function.Sizzle [as find] (app.js:941)
    at jQuery.fn.init.find (app.js:2882)
    at jQuery.fn.init (app.js:2979)
    at jQuery (app.js:170)
    at HTMLLIElement.<anonymous> (app.js:13916)
    at Function.each (app.js:439)
    at jQuery.fn.init.each (app.js:232)

app.js:15667 Error: Syntax error, unrecognized expression: ##panel2

at Function.Sizzle.error (app.js:1597)

at Sizzle.tokenize (app.js:2226)

at Sizzle.select (app.js:2644)

at Function.Sizzle [as find] (app.js:941)

at jQuery.fn.init.find (app.js:2882)

at jQuery.fn.init (app.js:2979)

at jQuery (app.js:170)

at HTMLLIElement.<anonymous> (app.js:13916)

at Function.each (app.js:439)

at jQuery.fn.init.each (app.js:232)

…il faut retirer l’attribut data-tabs-target="#panel2" du code qui est donné en exemple. C’est lui qui fout la m*&$e.

[jQuery][Foundation 6] Détecter la direction du scroll et agir sur des éléments Sticky

05/09/2017 / admin

Plug-in scrollDirection disponible sur GitHub: https://github.com/franklang/detect-scroll-direction.

Les bases de la mise en place

Appliquer une animation et un délais

Résolution d’erreurs, bugs…
Même solution en vanilla JS (mais avec Lodash)
Cas particulier: les éléments sticky disparaissent totalement en haut de l’écran (avec effet d’animation) avant de réapparaître brutalement

Les bases de la mise en place

Le composant Sticky de Foundation 6 for Sites permet de fixer des éléments dans la fenêtre. La technique est utilisée par de nombreux sites pour, par exemple, laisser le bandeau affiché lorsque l’utilisateur scrolle vers le bas de la page.

Il manque cependant une fonctionnalité très ergonomique, notamment sur les plus petits devices (smartphones, petites tablettes) qui consiste à masquer le bandeau lorsque l’utilisateur scrolle vers le bas de la page et à l’afficher dès qu’il scrolle vers le haut (afin qu’il n’ait pas besoin de scroller jusqu’au haut de page pour atteindre le menu, par exemple). Et cette seconde technique est présente sur de plus en plus de sites (https://wpformation.com/ – visionner avec un Smartphone, http://www.eurosport.fr/cyclisme/ – visionner avec un Smartphone).

On commence par mettre en place le composant Sticky (jusque là, pas de dev spé : tout est disponible dans Foundation.

Ensuite, on ajoute en spé (via jQuery) un data-attribute nommé data-scroll-direction sur l’élément HTML de la page. La valeur de ce data-attribute sera down ou up selon que l’utilisateur scrolle vers le bas ou vers le haut de la page.

/*
 * Detect scroll direction (up/down)
 */
var scrollDir = 0;
$(window).scroll(function () {
  var curScrollDir = $(this).scrollTop();
  if (curScrollDir > scrollDir) {
    /* Scrolling Down */
    $('html').attr('data-scroll-direction', 'down');
  } else {
    /* Scrolling Up */
    $('html').attr('data-scroll-direction', 'up');
  }
  scrollDir = curScrollDir;
});

* Detect scroll direction (up/down)

var scrollDir = 0;

$(window).scroll(function () {

var curScrollDir = $(this).scrollTop();

if (curScrollDir > scrollDir) {

/* Scrolling Down */

$('html').attr('data-scroll-direction', 'down');

} else {

/* Scrolling Up */

$('html').attr('data-scroll-direction', 'up');

}

scrollDir = curScrollDir;

});

On cible ensuite les éléments à masquer au scroll down.

  // On scroll down, hide page header 1st row
  [data-scroll-direction="down"] {
    .header {
      &-wrapper {
        &.sticky {
          .header {
            &-left-col,
            &-right-col {
              display: none;
            }
          }
        }
      }
    }
  }

// On scroll down, hide page header 1st row

[data-scroll-direction="down"] {

.header {

&-wrapper {

&.sticky {

.header {

&-left-col,

&-right-col {

display: none;

}

Illustration:

1. L’utilisateur arrive sur la page; elle se présente comme ceci:

2. L’utilisateur a scrollé vers le bas. Dans notre exemple, une partie seulement du bandeau est masquée. On laisse en Sticky le moteur de recherche car il est très important sur ce site.

3. L’utilisateur a scrollé vers le haut (1px de scroll vers le haut suffit). La partie masquée du bandeau réapparait.

Appliquer une animation et un délais

Utilisation du projet animate.css

Importer le projet https://daneden.github.io/animate.css/ dans votre propre projet (j’utilise npm pour celà). On charge uniquement les animations dont on a besoin:

@import '~animate.css/source/sliding_exits/slideOutUp.css';
@import '~animate.css/source/sliding_entrances/slideInDown.css';

1 2	@import '~animate.css/source/sliding_exits/slideOutUp.css'; @import '~animate.css/source/sliding_entrances/slideInDown.css';

Agir sur votre élément Sticky en invoquant les animations et en ajoutant un temps d’exécution:

[data-scroll-direction="down"] {
  .page-header.sticky {
    animation: slideOutUp 0.3s;
  }
}
[data-scroll-direction="up"] {
  .page-header.sticky {
    animation: slideInDown 0.3s;
  }
}

[data-scroll-direction="down"] {

.page-header.sticky {

animation: slideOutUp 0.3s;

}

[data-scroll-direction="up"] {

.page-header.sticky {

animation: slideInDown 0.3s;

}

La fonction `hideWithDelay`

Permet d’appliquer une classe .hide (qui n’est autre qu’un display: none;) issue de Foundation 6 for Sites au bout de x secondes, qui correspond au temps qu’il faut à votre animation CSS pour se terminer. Dans notre exemple, l’animation CSS mettra 300ms à s’exécuter mais on ajoute la classe .hide au bout de 290ms pour éviter un effet de flash à l’écran:

var scrollDir = 0,
    $_HTML = $('html'),
    $_PAGE_HEADER = $('#pageHeader').find('.page-header');

function hideWithDelay(scrollDirection, delay) {
    setTimeout(function(){
        if ( scrollDirection === 'down' ) {
            $_PAGE_HEADER.addClass('hide');
        } else {
            $_PAGE_HEADER.removeClass('hide');
        }
    }, delay);
}

$(window).scroll(function () {
    var curScrollDir = $(this).scrollTop();
    if (curScrollDir > scrollDir) {
        /* Scrolling Down */
        $_HTML.attr('data-scroll-direction', 'down');

        hideWithDelay('down', 290); // ici, le délais doit être un peu plus réduit que celui déclaré dans la feuille de style pour l'animation
    } else {
        /* Scrolling Up */
        $_HTML.attr('data-scroll-direction', 'up');

        hideWithDelay('up', 290);
    }
    scrollDir = curScrollDir;
});

var scrollDir = 0,

$_HTML = $('html'),

$_PAGE_HEADER = $('#pageHeader').find('.page-header');

function hideWithDelay(scrollDirection, delay) {

setTimeout(function(){

if ( scrollDirection === 'down' ) {

$_PAGE_HEADER.addClass('hide');

} else {

$_PAGE_HEADER.removeClass('hide');

}

}, delay);

}

$(window).scroll(function () {

var curScrollDir = $(this).scrollTop();

if (curScrollDir > scrollDir) {

/* Scrolling Down */

$_HTML.attr('data-scroll-direction', 'down');

hideWithDelay('down', 290); // ici, le délais doit être un peu plus réduit que celui déclaré dans la feuille de style pour l'animation

} else {

/* Scrolling Up */

$_HTML.attr('data-scroll-direction', 'up');

hideWithDelay('up', 290);

}

scrollDir = curScrollDir;

});

Résolution d’erreurs, bugs…

Des éléments de la page ou l’ascenseur de la fenêtre se mettent à clignoter (flickering, blinking)

Source: sticky header blinking.

Testé et fonctionnel sur un projet en prod: il suffit de mettre une hauteur fixe à l’élément sticky. Si votre site/appli est Responsive, que la hauteur est différente d’un breakpoint à l’autre et que vous avez la chance d’utiliser Foundation For Sites (v6 dans mon exemple) :

// FIX avoid element/scrollbar flickering
function avoidFlickering(stickyElementID) {
    var $_STICKY_ELEMENT = $('#'+stickyElementID);

    $_STICKY_ELEMENT.removeAttr('style');

    var STICKY_ELEMENT_DIMENSIONS = Foundation.Box.GetDimensions(document.getElementById(stickyElementID)),
        STICKY_ELEMENT_HEIGHT = STICKY_ELEMENT_DIMENSIONS.height;

    $_STICKY_ELEMENT.css('height', STICKY_ELEMENT_HEIGHT);
}

$(document).ready(function() {
    avoidFlickering('pageHeader');
});

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    avoidFlickering('pageHeader');
});

// FIX avoid element/scrollbar flickering

function avoidFlickering(stickyElementID) {

var $_STICKY_ELEMENT = $('#'+stickyElementID);

$_STICKY_ELEMENT.removeAttr('style');

var STICKY_ELEMENT_DIMENSIONS = Foundation.Box.GetDimensions(document.getElementById(stickyElementID)),

STICKY_ELEMENT_HEIGHT = STICKY_ELEMENT_DIMENSIONS.height;

$_STICKY_ELEMENT.css('height', STICKY_ELEMENT_HEIGHT);

}

$(document).ready(function() {

avoidFlickering('pageHeader');

});

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {

avoidFlickering('pageHeader');

});

Même solution en vanilla JS (mais avec Lodash)

/*
 * Detect scroll direction (up/down)
 */
const DIRECTION_UP = 'up',
    DIRECTION_DOWN = 'down';

let scrollDir = 0,
    isHidden = false,
    $_WINDOW = $(window),
    $_HTML = $('html'),
    $_PAGE_HEADER = $('#pageHeader').find('.page-header');

const debounce = require('lodash.debounce');

function toggleHeaderDisplay(scrollDirection) {
    if (scrollDirection === DIRECTION_DOWN && !isHidden) {
        $_PAGE_HEADER.addClass('hide');
        isHidden = true;
    } else if (scrollDirection === DIRECTION_UP && isHidden) {
        $_PAGE_HEADER.removeClass('hide');
        isHidden = false;
    }
}

if ($_PAGE_HEADER) {
    const scroll = function () {
        const computeHeader = $_PAGE_HEADER.hasClass('sticky');
        const curScrollDir = $_WINDOW.scrollTop();
        if (curScrollDir < 0) {
            // -- iPhone/Safari allows to go "above" page top, do not treat this case
            return;
        }
        const direction = (curScrollDir > scrollDir) ? DIRECTION_DOWN : DIRECTION_UP;

        const curDir = $_HTML.attr('data-scroll-direction');
        if (direction !== curDir) {
            $_HTML.attr('data-scroll-direction', direction);
        }
        if (computeHeader) {
            toggleHeaderDisplay(direction);
        }
        scrollDir = curScrollDir;
    };

    const debouncedScroll = debounce(scroll, 25);
    $(window).scroll(debouncedScroll);
}

* Detect scroll direction (up/down)

const DIRECTION_UP = 'up',

DIRECTION_DOWN = 'down';

let scrollDir = 0,

isHidden = false,

$_WINDOW = $(window),

$_HTML = $('html'),

$_PAGE_HEADER = $('#pageHeader').find('.page-header');

const debounce = require('lodash.debounce');

function toggleHeaderDisplay(scrollDirection) {

if (scrollDirection === DIRECTION_DOWN && !isHidden) {

$_PAGE_HEADER.addClass('hide');

isHidden = true;

} else if (scrollDirection === DIRECTION_UP && isHidden) {

$_PAGE_HEADER.removeClass('hide');

isHidden = false;

}

if ($_PAGE_HEADER) {

const scroll = function () {

const computeHeader = $_PAGE_HEADER.hasClass('sticky');

const curScrollDir = $_WINDOW.scrollTop();

if (curScrollDir < 0) {

// -- iPhone/Safari allows to go "above" page top, do not treat this case

return;

}

const direction = (curScrollDir > scrollDir) ? DIRECTION_DOWN : DIRECTION_UP;

const curDir = $_HTML.attr('data-scroll-direction');

if (direction !== curDir) {

$_HTML.attr('data-scroll-direction', direction);

}

if (computeHeader) {

toggleHeaderDisplay(direction);

}

scrollDir = curScrollDir;

};

const debouncedScroll = debounce(scroll, 25);

$(window).scroll(debouncedScroll);

}

Cas particulier: les éléments sticky disparaissent totalement en haut de l’écran (avec effet d’animation) avant de réapparaître brutalement

ATTENTION: on part bien du composant Sticky de Foundation for Sites v6, animé via la bibliothèque animate.css (et plus précisément l’animation slideOutUp). Ce cas particulier peut éventuellement vous donner des pistes si vous utilisez un autre composant sticky et une autre bibliothèque d’animation, mais il existe aujourd’hui d’autres moyens de produire un effet de smooth scroll qu’il vaut mieux privilégier.

Pour ce qui est de la qualité de cette soultion, ne la cherchez pas… Mais elle a le mérite de fonctionner!

Dans ce cas là, les animations proposées par la bibliothèque Animate.css peuvent ne pas convenir. Dans la déclaration CSS transform: translate3d(0, -100%, 0); la valeur de -100% correspond à la hauteur de l’élément. C’est ce fait qu’on voit l’élément sticky scroller entièrement hors-champ avant de réapparaître brutalement.

Mon idée: appliquer temporairement (le temps de l’animation) un margin-top de la hauteur de l’élément à ce dernier afin qu’il s’arrête aux limites de la fenêtre, puis retirer ce style.

Ressources en ligne:

Using Multi-Step Animations and Transitions sur CSS Tricks
Apply style after CSS animation without JS – You do need to use animation-fill-mode: forwards

Nouvelle version:

Ma nouvelle animation:

$slide-up-common-duration: 0.3s;

  // Custom animations for .page-header, .page-leftColumn and .page-searchBar "smooth" sticky
  @keyframes slideOutUp_pageHeader {
    0% {
      transform: translate3d(0, 0, 0);
    }
    99.999999% {
      transform: translate3d(0, -100%, 0);
    }
    100% {
      visibility: hidden;
    }
  }
  .slideOutUp_pageHeader {
    animation-name: slideOutUp_pageHeader;
  }
  [data-scroll-direction="down"] {
    .page-header.sticky {
      animation: slideOutUp_pageHeader $slide-up-common-duration forwards;
    }
  }
  @keyframes slideOutUp_leftColumnAndSearchBar {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -100%, 0);
    }
  }
  .slideOutUp_leftColumnAndSearchBar {
    animation-name: slideOutUp_leftColumnAndSearchBar;
  }
  [data-scroll-direction="down"] {
    .page-leftColumn.sticky,
    .page-searchBar.sticky {
      animation: slideOutUp_leftColumnAndSearchBar $slide-up-common-duration forwards;
    }
    //.page-leftColumn.sticky {
    //  animation: slideOutUp_leftColumnAndSearchBar 0.64s forwards;
    //}
    //.page-searchBar.sticky {
    //  animation: slideOutUp_leftColumnAndSearchBar 1.0s forwards;
    //}
  }

$slide-up-common-duration: 0.3s;

// Custom animations for .page-header, .page-leftColumn and .page-searchBar "smooth" sticky

@keyframes slideOutUp_pageHeader {

0% {

transform: translate3d(0, 0, 0);

}

99.999999% {

transform: translate3d(0, -100%, 0);

}

100% {

visibility: hidden;

}

.slideOutUp_pageHeader {

animation-name: slideOutUp_pageHeader;

}

[data-scroll-direction="down"] {

.page-header.sticky {

animation: slideOutUp_pageHeader $slide-up-common-duration forwards;

}

@keyframes slideOutUp_leftColumnAndSearchBar {

0% {

transform: translate3d(0, 0, 0);

}

100% {

transform: translate3d(0, -100%, 0);

}

.slideOutUp_leftColumnAndSearchBar {

animation-name: slideOutUp_leftColumnAndSearchBar;

}

[data-scroll-direction="down"] {

.page-leftColumn.sticky,

.page-searchBar.sticky {

animation: slideOutUp_leftColumnAndSearchBar $slide-up-common-duration forwards;

}

//.page-leftColumn.sticky {

// animation: slideOutUp_leftColumnAndSearchBar 0.64s forwards;

//}

//.page-searchBar.sticky {

// animation: slideOutUp_leftColumnAndSearchBar 1.0s forwards;

//}

}

Une fonction javascript qui s’occupe d’appliquer le `margin-top` (qui peut posséder une valeur dynamique):

function adjustSticky() {
    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)),
        searchBarHeight = $('.page-searchBar').closest('.sticky-container').attr('style'),
        regex = /[^0-9.]/g;
    // console.log(leftColumnHeight+', '+searchBarHeight.replace(regex, ''));

    $('#adjustSticky').remove();
    $('<style id="adjustSticky" type="text/css">@media screen and (min-width: 64em) { .page-leftColumn.sticky[style*="0em"]{ margin-top: '+leftColumnHeight+'px !important } .page-searchBar.sticky[style*="0em"]{ margin-top: '+searchBarHeight.replace(regex, '')+'px !important } }</style>').appendTo('body');
}

function adjustSticky() {

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)),

searchBarHeight = $('.page-searchBar').closest('.sticky-container').attr('style'),

regex = /[^0-9.]/g;

// console.log(leftColumnHeight+', '+searchBarHeight.replace(regex, ''));

$('#adjustSticky').remove();

$('<style id="adjustSticky" type="text/css">@media screen and (min-width: 64em) { .page-leftColumn.sticky[style*="0em"]{ margin-top: '+leftColumnHeight+'px !important } .page-searchBar.sticky[style*="0em"]{ margin-top: '+searchBarHeight.replace(regex, '')+'px !important } }</style>').appendTo('body');

}

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

adjustSticky();

1	adjustSticky();

Ancienne version:

Ma nouvelle animation:

  // Custom animation for .page-leftColumn and .page-searchBar "smooth" sticky
  @keyframes slideOutUp_leftColumnAndSearchBar {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -100%, 0);
    }
  }
  .slideOutUp_leftColumnAndSearchBar {
    animation-name: slideOutUp_leftColumnAndSearchBar;
  }

// Custom animation for .page-leftColumn and .page-searchBar "smooth" sticky

@keyframes slideOutUp_leftColumnAndSearchBar {

0% {

transform: translate3d(0, 0, 0);

}

100% {

transform: translate3d(0, -100%, 0);

}

.slideOutUp_leftColumnAndSearchBar {

animation-name: slideOutUp_leftColumnAndSearchBar;

}

…appliquée à mes éléments avec l’ajout de `forwards`:

  [data-scroll-direction="down"] {
    .page-leftColumn.sticky[style*="0em"],
    .page-searchBar.sticky[style*="0em"] {
      animation: slideOutUp_leftColumnAndSearchBar 0.3s forwards;
    }
    //Ajuster la durée des animation pour caler les éléments si ils ne sont pas de la même hauteur
    //.page-leftColumn.sticky[style*="0em"] {
    //  animation: slideOutUp_leftColumnAndSearchBar 0.64s forwards;
    //}
    //.page-searchBar.sticky[style*="0em"] {
    //  animation: slideOutUp_leftColumnAndSearchBar 1.0s forwards;
    //}
  }

[data-scroll-direction="down"] {

.page-leftColumn.sticky[style*="0em"],

.page-searchBar.sticky[style*="0em"] {

animation: slideOutUp_leftColumnAndSearchBar 0.3s forwards;

}

//Ajuster la durée des animation pour caler les éléments si ils ne sont pas de la même hauteur

//.page-leftColumn.sticky[style*="0em"] {

// animation: slideOutUp_leftColumnAndSearchBar 0.64s forwards;

//}

//.page-searchBar.sticky[style*="0em"] {

// animation: slideOutUp_leftColumnAndSearchBar 1.0s forwards;

//}

}

Une fonction javascript qui s’occupe d’appliquer le `margin-top` (qui peut posséder une valeur dynamique):

function adjustSticky() {
    let leftColumnHeight = $('.page-leftColumn').closest('.sticky-container').attr('style'),
        searchBarHeight = $('.page-searchBar').closest('.sticky-container').attr('style');
    // console.log(leftColumnHeight.replace(/\D+/g, '')+', '+searchBarHeight.replace(/\D+/g, ''));

    $('#adjustSticky').remove();
    $('<style id="adjustSticky" type="text/css">@media screen and (min-width: 64em) { .page-leftColumn.sticky[style*="0em"]{ margin-top: '+leftColumnHeight.replace(/\D+/g, '')+'px !important } .page-searchBar.sticky[style*="0em"]{ margin-top: '+searchBarHeight.replace(/\D+/g, '')+'px !important } }</style>').appendTo('body');
}

function adjustSticky() {

let leftColumnHeight = $('.page-leftColumn').closest('.sticky-container').attr('style'),

searchBarHeight = $('.page-searchBar').closest('.sticky-container').attr('style');

// console.log(leftColumnHeight.replace(/\D+/g, '')+', '+searchBarHeight.replace(/\D+/g, ''));

$('#adjustSticky').remove();

$('<style id="adjustSticky" type="text/css">@media screen and (min-width: 64em) { .page-leftColumn.sticky[style*="0em"]{ margin-top: '+leftColumnHeight.replace(/\D+/g, '')+'px !important } .page-searchBar.sticky[style*="0em"]{ margin-top: '+searchBarHeight.replace(/\D+/g, '')+'px !important } }</style>').appendTo('body');

}

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

setTimeout(adjustSticky(), 50);

1	setTimeout(adjustSticky(), 50);

Partie PHTML

Partie jQuery

HTML

CSS

JS

Vue.js et Foundation 6 for Sites

Icônes SVG

Icônes SVG avec Twig

Icônes SVG avec Vue.js

The Problem:

The Solution:

HTML:

JS:

Thèmes

Une rangée basée sur 8 colonnes

Via javaScript

Via un data-attribute HTML

Présentation du problème

Mise en place de la solution

Optimisations d’ordre ergonomiques

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

Améliorations (pas testé)

Les bases de la mise en place

Appliquer une animation et un délais

Utilisation du projet animate.css

La fonction hideWithDelay

Résolution d’erreurs, bugs…

Des éléments de la page ou l’ascenseur de la fenêtre se mettent à clignoter (flickering, blinking)

Même solution en vanilla JS (mais avec Lodash)

Cas particulier: les éléments sticky disparaissent totalement en haut de l’écran (avec effet d’animation) avant de réapparaître brutalement

Nouvelle version:

Ma nouvelle animation:

Une fonction javascript qui s’occupe d’appliquer le margin-top (qui peut posséder une valeur dynamique):

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

Ancienne version:

Ma nouvelle animation:

…appliquée à mes éléments avec l’ajout de forwards:

Une fonction javascript qui s’occupe d’appliquer le margin-top (qui peut posséder une valeur dynamique):

…qu’on applique avec un tout petit délais histoire de laisser le temps au DOM de se mettre à jour:

La fonction `hideWithDelay`

Une fonction javascript qui s’occupe d’appliquer le `margin-top` (qui peut posséder une valeur dynamique):

…appliquée à mes éléments avec l’ajout de `forwards`:

Une fonction javascript qui s’occupe d’appliquer le `margin-top` (qui peut posséder une valeur dynamique):