off-canvas – devfrontend.info

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

  // Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local
  const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),
        IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

  $IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);
  // fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

// Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),

IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

$IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);

// fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

<div id="inPageNavigation" class="InPageNavigation" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

</button>

<p>Accès rapide:</p>

<ul>

<li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>

<li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>

<li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>

<li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>

<li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>

</ul>

</div>

Source JS (jQuery)

/**
 * "Naked UI Toggle" jQuery plug-in
 * @author: Frank LANG (https://github.com/franklang/)
 *
 * Usage:
 * $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));
 */
;( function ( $, window, undefined ) {
  $.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

    var defaults = {
      triggerElement: triggerElement,
      storedValue: localStorageDefaultValue
    };

    var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

    // Get a dynamic local storage KEY named after given #targetElement
    const $_THIS = this,
          $_SELECTOR = $_THIS.selector,
          LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

    // On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).
    let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );


    // Local Storage
    // If a KEY/VALUE pair is already set...
    if ( localStorageValue !== null ) {
        // console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);
      // ...append VALUE to selector's aria-expanded attribute in the HTML.
      $_THIS.attr('aria-expanded', localStorageValue);

    // Else...
    } else {
        // console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);
      // ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.
      localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

      // If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...
      if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {
        // ...make it match in the HTML.
        $_THIS.attr('aria-expanded', defaults.storedValue);
      }
    }



    // On Click
    // When clicking on given triggerElement...
    $(defaults.triggerElement, $_THIS).on('click', function(){
      // ...store HTML selector's current aria-expanded value.
      const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

      // If selector's aria-expanded value is true...
      if ( ARIA_EXPANDED_VALUE === 'true' ) {
        // ...set it to false...
        $_THIS.attr('aria-expanded', false);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, false );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

      // Else...
      } else {
        // ...set it to true...
        $_THIS.attr('aria-expanded', true);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, true );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );
      }
    });
  };
}( jQuery, window ));

/**

* "Naked UI Toggle" jQuery plug-in

* @author: Frank LANG (https://github.com/franklang/)

* Usage:

* $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));

;( function ( $, window, undefined ) {

$.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

var defaults = {

triggerElement: triggerElement,

storedValue: localStorageDefaultValue

};

var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

// Get a dynamic local storage KEY named after given #targetElement

const $_THIS = this,

$_SELECTOR = $_THIS.selector,

LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

// On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).

let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );

// Local Storage

// If a KEY/VALUE pair is already set...

if ( localStorageValue !== null ) {

// console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);

// ...append VALUE to selector's aria-expanded attribute in the HTML.

$_THIS.attr('aria-expanded', localStorageValue);

// Else...

} else {

// console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);

// ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.

localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

// If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...

if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {

// ...make it match in the HTML.

$_THIS.attr('aria-expanded', defaults.storedValue);

}

// On Click

// When clicking on given triggerElement...

$(defaults.triggerElement, $_THIS).on('click', function(){

// ...store HTML selector's current aria-expanded value.

const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

// If selector's aria-expanded value is true...

if ( ARIA_EXPANDED_VALUE === 'true' ) {

// ...set it to false...

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

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, false );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

// Else...

} else {

// ...set it to true...

$_THIS.attr('aria-expanded', true);

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, true );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

}

});

};

}( jQuery, window ));

Source CSS

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: #fff;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

* Off-Canvas in-page navigation component

/* Core */

.InPageNavigation {

position: fixed;

z-index: 10000;

}

.btn-InPageNavigation--toggle {

position: absolute;

}

/* Skin */

.InPageNavigation {

top: 10px;

padding: 10px;

width: 250px;

border: 1px solid #bfbfbf;

background: #fff;

}

.InPageNavigation[aria-expanded="true"] {

right: 10px;

}

.InPageNavigation[aria-expanded="false"] {

right: -250px;

}

.btn-InPageNavigation--toggle,

.btn-InPageNavigation--toggle:hover {

top: -1px;

left: -40px;

width: 40px;

height: 40px;

text-align: center;

border: 1px solid #bfbfbf;

border-right: none;

background: #fff;

font-size: 1.2em;

}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,

.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {

display: none;

}

/* fin: Off-Canvas in-page navigation component */

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

#offCanvasRight.is-open {
  transform: translateX(0) !important;
}

#offCanvasRight.is-open {

transform: translateX(0) !important;

}

jQuery

;(function ($, window, undefined){
  
  /**
   * foundation.widerOffcanvas.js plugin
   *
   * Extends "Foundation for Sites" v6.4.1 off-canvas plugin
   * to provide a wider than 250px-standard width off-canvas.
   *
   * [WARNING] Tested for right-positioned off-canvas only so far.
   *
   * Required third-party components:
   * - foundation.core.js
   * - foundation.offcanvas.js
   * - foundation.util.box.js
   *
   * Usage:
   * $(document).widerOffcanvas({
   *   triggeringBreakpoint: 'medium',
   *   offCanvasID: '#offCanvasRight',
   *   pageID: '#page-wrapper'
   * });
   */

  $.fn.widerOffcanvas = function(options){

    var defaults = {
      triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)
      offCanvasID: '#offCanvasRight', // target offcanvas element ID
      pageID: '#page-wrapper' // page ID
    }

    var settings = $.extend({}, defaults, options);

    /**
     * Destroy function (more of a DOM reset actually...)
     */
    function destroyWiderOffCanvas() {
      $(settings.offCanvasID, settings.pageID).attr('style', '');
    }

    /**
     * Set wider off-canvas specific width
     */
    function setWiderOffCanvasWidth() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;
      console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);
      
      $(settings.offCanvasID).css({
        'width': widerOffCanvasWidth,
        '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        'transform': 'translateX(' + widerOffCanvasWidth + 'px)'
      });
    }

    /**
     * Set page indent value (page slides to the opposite side regarding where off-canvas opens)
     */
    function setPageIndentValue() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      
      $(settings.offCanvasID).on('opened.zf.offcanvas', function() {
        $(settings.pageID).css({
          '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'
        });
      }).on('closed.zf.offcanvas', function() {
        $(settings.pageID).attr('style', ' ');
      });
    }

    /**
     * On document ready...
     */
    if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
      setWiderOffCanvasWidth();
      setPageIndentValue();
    }    

    /**
     * On window resize...
     */
    $(window).on('resize', function() {
      destroyWiderOffCanvas();
      
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

      if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
        setWiderOffCanvasWidth();
        setPageIndentValue();
      }
    });
  };

}(jQuery, window));

100

;(function ($, window, undefined){

/**

* foundation.widerOffcanvas.js plugin

* Extends "Foundation for Sites" v6.4.1 off-canvas plugin

* to provide a wider than 250px-standard width off-canvas.

* [WARNING] Tested for right-positioned off-canvas only so far.

* Required third-party components:

* - foundation.core.js

* - foundation.offcanvas.js

* - foundation.util.box.js

* Usage:

* $(document).widerOffcanvas({

* triggeringBreakpoint: 'medium',

* offCanvasID: '#offCanvasRight',

* pageID: '#page-wrapper'

* });

$.fn.widerOffcanvas = function(options){

var defaults = {

triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)

offCanvasID: '#offCanvasRight', // target offcanvas element ID

pageID: '#page-wrapper' // page ID

}

var settings = $.extend({}, defaults, options);

/**

* Destroy function (more of a DOM reset actually...)

function destroyWiderOffCanvas() {

$(settings.offCanvasID, settings.pageID).attr('style', '');

}

/**

* Set wider off-canvas specific width

function setWiderOffCanvasWidth() {

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

var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;

console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);

$(settings.offCanvasID).css({

'width': widerOffCanvasWidth,

'-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'transform': 'translateX(' + widerOffCanvasWidth + 'px)'

});

}

/**

* Set page indent value (page slides to the opposite side regarding where off-canvas opens)

function setPageIndentValue() {

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

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

$(settings.offCanvasID).on('opened.zf.offcanvas', function() {

$(settings.pageID).css({

'-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'

});

}).on('closed.zf.offcanvas', function() {

$(settings.pageID).attr('style', ' ');

});

}

/**

* On document ready...

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

/**

* On window resize...

$(window).on('resize', function() {

destroyWiderOffCanvas();

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

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

});

};

}(jQuery, window));

Articles récents

Catégories

Archives

Méta

Étiquette : off-canvas

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Description

Usage:

Adapter à votre source HTML

Source HTML

Source JS (jQuery)

Source CSS

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

HTML

SASS

jQuery