enquire.js – devfrontend.info

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

16/12/2015 / admin

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

class= »link collapsed »
role= »button »
data-toggle= »collapse »
href= »${descendantUrl} »
aria-expanded= »false »
aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
data-desktop-target= »${descendantUrl} »

Exemple finalisé :

<a tal:condition="descendantUrl"
  class="link collapsed"
  role="button"
  data-toggle="collapse"
  data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"
  data-desktop-target="${descendantUrl}"
  href="${descendantUrl}"
  aria-expanded="false"
  aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

<a tal:condition="descendantUrl"

class="link collapsed"

role="button"

data-toggle="collapse"

data-mobile-target="collapseShelfSubMenuLevel2${repeat/entry/index}"

data-desktop-target="${descendantUrl}"

href="${descendantUrl}"

aria-expanded="false"

aria-controls="collapseShelfSubMenuLevel2${repeat/entry/index}">${entry/getLabelAsHtml}</a>

Sur l’élément à afficher/masquer :

class= »level${parent/getChildrenLevel} collapse »
id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

<ul class="level${parent/getChildrenLevel} collapse"
  tal:define="columns php:array_chunk(children, columnItemsLimit)"
  tal:repeat="column columns"
  id="collapseShelfSubMenuLevel2${repeat/entry/index}">

<ul class="level${parent/getChildrenLevel} collapse"

tal:define="columns php:array_chunk(children, columnItemsLimit)"

tal:repeat="column columns"

id="collapseShelfSubMenuLevel2${repeat/entry/index}">

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

(function($){
  $(document).ready(function(){
    enquire.register("screen and (max-width: 767px)", {
      match : function() {
        $('.main-menu > .level1 > li > a').on('click', function(e){
          $(this).attr('href', '#' + $(this).attr('data-mobile-target'));
        });
      },
      unmatch : function() {
        $('.main-menu > .level1 > li > a').each(function(e){
          $(this).attr('href', $(this).attr('data-desktop-target'));
        });
      }
    });
  });
})(jQuery);

(function($){

$(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

$('.main-menu > .level1 > li > a').on('click', function(e){

$(this).attr('href', '#' + $(this).attr('data-mobile-target'));

});

unmatch : function() {

$('.main-menu > .level1 > li > a').each(function(e){

$(this).attr('href', $(this).attr('data-desktop-target'));

});

}

});

})(jQuery);

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li>
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse" aria-expanded="false" style="height: 0px;">

<li>

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="#collapseShelfSubMenuLevel20" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

Vue Desktop, second niveau fermé :

<div class="main-menu">
  <ul class="level1">
    <li class=" store-menu no-highlight">
      <a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>
      <ul id="collapseShelfSubMenuLevel20" class="level2 collapse">

<a class="link collapsed" aria-controls="collapseShelfSubMenuLevel20" aria-expanded="false" href="http://mon-site.fr/fr/bijoux/par-famille" data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille" data-mobile-target="collapseShelfSubMenuLevel20" data-toggle="collapse" role="button">Bijoux</a>

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

23/07/2015 / admin

Existe-t’il un moyen d’annuler (à l’image de la méthode unbind) les effets sur des éléments du DOM d’un plug-in jQuery après son initialisation ?

Il n’existe malheureusement pas de méthode jQuery permettant d’annuler les effets d’un plug-in déjà initialisé, car ce dernier doit exécuter du code spécifique pour nettoyer les manipulations de DOM qu’il a entrainé. Nativement, jQuery ne peut anticiper ce que chaque plug-in va faire.

La méthode destroy

Avant de vous lancer dans des développements compliqués, vérifiez que le plug-in jQuery que vous souhaitez activer/désactiver ne bénéficie pas d’une méthode destroy. C’est par exemple le cas pour Superfish ou jQuery UI.

Tirer parti des namespaced events

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events

Ajouter et retirer des évènements sur les listeners

(pas testé) addEventListener et nettoyage avec removeEventListener

Encapsuler le plug-in dans une fonction

Encapsuler le plug-in dans une fonction et l’initialiser uniquement lorsque la largeur du viewport correspond à un certain breakpoint. Lorsqu’on sort du breakpoint prédéfini, on recharge la page à l’aide de document.location = document.location; et le plug-in n’est plus initialisé.

function toto() {
  // mon plug-in
}

function toto() {

// mon plug-in

}

jQuery(document).ready(function(){
  enquire.register("screen and (max-width: 767px)", {
    match : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      // ne fais rien
    },
    unmatch : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      // ne fais rien
    }
  });

  enquire.register("screen and (min-width: 768px)", {
    match : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      toto(); // initialise toto
    },
    unmatch : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px
    }
  });
});

jQuery(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

// ne fais rien

unmatch : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

// ne fais rien

}

});

enquire.register("screen and (min-width: 768px)", {

match : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

toto(); // initialise toto

unmatch : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px

}

});

Avantages et inconvénients

+ Nous n’avons ni à ré-écrire des parties du code natif du plug-in, ni à maintenir du code que nous aurions écrit spécifiquement pour pallier aux manipulations de DOM générées par l’initialisation du plug-in.
+ Gain de temps énorme en terme de développement.
– On recharge la page lorsqu’on change de breakpoint. Si l’utilisateur était en-train de remplir un formulaire à ce moment là, les informations sont perdues.

Nullifier le plug-in

(pas testé) destroy a function in javascript (jquery) – nullify the function

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

(pas testé – suggéré dans un fil de discussion stack overflow sans donner d’exemple de code…) One solution may be to cache a pre-plugin .clone() of the element(s) that you could revert back to if/when needed (assuming the plugin doesn’t have « undo » capability).

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)

Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind) .

Reinitializing NivoSlider after simulating destroy

Ok the best way is to forget about all the destroying thing and replace the silder with it’s initial state. suppose the initial state of silder is:

<div id="silder" class="nivoSlider"></div>

1	<div id="silder" class="nivoSlider"></div>

Then the best way to do the destroying and initializing at one step is to do something like:

$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

1	$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

Quelques ressources d’intérêt sur le sujet :

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events
(pas testé) Remove jQuery Plugin Instances
(pas testé) Element Destroyed (a jQuery Special Event)
(pas testé) Shorthand methods for unbind
(pas testé) Removing a Whole Set of Event Handlers
(pas testé) addEventListener et nettoyage avec removeEventListener
Unbind – Remove – Kill a jQuery plugin
(pas testé) destroy a function in javascript (jquery) – nullify the function
(pas testé) Remove jQuery plugins at runtime
(pas testé) Reinitializing NivoSlider after simulating destroy
Tracing Event Binding And Event Triggering In jQuery

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

26/06/2014 / admin

Superfish intègre une méthode destroy (depuis la version 1.7.3 au moins… à vérifier pour des versions antérieures mais dans le cas contraire, mettre à jour son plug-in) qu’on peut appeler en fonction de la largeur du viewport. La navigation peut ensuite être re-stylée via CSS et les mediaqueries.

Avec enquire.js

enquire.register("screen and (max-width: 767px)", {
  match : function() {
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish('destroy');
    });
  },
  unmatch : function() {
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({ //options });
    });
  }
});

enquire.register("screen and (max-width: 767px)", {

match : function() {

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish('destroy');

});

unmatch : function() {

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish({ //options });

});

}

});

Sans enquire.js

Source : http://stackoverflow.com/questions/6748301/disable-superfish-on-resize-event

var sf, body;
var breakpoint = 600;
jQuery(document).ready(function($) {
    body = $('body');
    sf = $('ul.sf-menu');
    if(body.width() >= breakpoint) {
      // enable superfish when the page first loads if we're on desktop
      sf.superfish();
    }
    $(window).resize(function() {
        if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {
            // you only want SuperFish to be re-enabled once (sf.hasClass)
            sf.superfish('init');
        } else if(body.width() < breakpoint) {
            // smaller screen, disable SuperFish
            sf.superfish('destroy');
        }
    });
});

var sf, body;

var breakpoint = 600;

jQuery(document).ready(function($) {

body = $('body');

sf = $('ul.sf-menu');

if(body.width() >= breakpoint) {

// enable superfish when the page first loads if we're on desktop

sf.superfish();

}

$(window).resize(function() {

if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {

// you only want SuperFish to be re-enabled once (sf.hasClass)

sf.superfish('init');

} else if(body.width() < breakpoint) {

// smaller screen, disable SuperFish

sf.superfish('destroy');

}

});

Articles récents

Catégories

Archives

Méta

Étiquette : enquire.js

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Sur le lien qui active la partie masquée à afficher :

Sur l’élément à afficher/masquer :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

La méthode destroy

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

Encapsuler le plug-in dans une fonction

Avantages et inconvénients

Nullifier le plug-in

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)

Reinitializing NivoSlider after simulating destroy

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

Avec enquire.js

Sans enquire.js

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Sur le lien qui active la partie masquée à afficher :

Sur l’élément à afficher/masquer :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

La méthode destroy

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

Encapsuler le plug-in dans une fonction

Avantages et inconvénients

Nullifier le plug-in

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes bind et unbind)

Reinitializing NivoSlider after simulating destroy

Avec enquire.js

Sans enquire.js

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)