Mois : mars 2016

[jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else

14/03/2016 / admin

Edit du 04/10/2017: le plug-in Bowser ayant montré ses limites également, j’ai créé un nouveau billet qui liste les plugins JS de détection de browser, version, OS et les pour et contres d’utilisation.

Edit du 31/08/2017: le plug-in Browser Detection fonctionne très bien mais ne détecte pas le navigateur Microsoft Edge. Se tourner vers Bowser – A Browser detector. Because sometimes, there is no other way, and not even good modern browsers always provide good feature detection mechanisms.

JS Fiddle de demo ici.

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

Dans l’exemple ci-dessous, on cherche à détecter l’utilisation de Safari et sa version. Pour les versions 8 et antérieures (signifiées par la valeur 600 ou moins en suffixe de la classe safari-* ajoutée à l’élément html par le plug-in browser-detection.js et pour les autres navigateurs, on ne lance pas la fonction maFonction.

    jQuery(document).ready(function(){
        // https://github.com/sub2home/browser-detection
        browserDetection({
          addClasses: true
        });

        function maFonction(){
          // ici, le code de votre fonction
        }

        var isSafari = jQuery('html.safari').length;
        if (isSafari == 1) {
          var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];
          if (getClassValue <= 600){
            // alert('<=600');
            // do nuffin'
          }
          else {
            // alert('>600');
            maFonction();
          }
        }
        else {
          maFonction();
        }
    });

jQuery(document).ready(function(){

// https://github.com/sub2home/browser-detection

browserDetection({

addClasses: true

});

function maFonction(){

// ici, le code de votre fonction

}

var isSafari = jQuery('html.safari').length;

if (isSafari == 1) {

var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

// alert('<=600');

// do nuffin'

}

else {

// alert('>600');

maFonction();

}

else {

maFonction();

}

});

[jQuery] Supprimer l’élément parent mais conserver ses enfants avec replaceWith

12/03/2016 / admin

Demo

Markup de départ :

<div class="list-wrapper">
  <ul class="list">
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
  </ul>
  <ul class="list">
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
  </ul>
  <ul class="list">
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
  </ul>  
</div>

<li class="item">hello</li>

</ul>

<li class="item">hello</li>

</ul>

<li class="item">hello</li>

</ul>

</div>

Résultat attendu :

<div class="list-wrapper">
  <ul class="list">
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
    <li class="item">hello</li>
  </ul>  
</div>

<li class="item">hello</li>

</ul>

</div>

jQuery :

jQuery(document).ready(function(){
	jQuery('.list').replaceWith(function() {
 		return jQuery('.item', this);
	});
  jQuery('.item').wrapAll('<ul class="list" />');
});

jQuery(document).ready(function(){

jQuery('.list').replaceWith(function() {

return jQuery('.item', this);

});

jQuery('.item').wrapAll('<ul class="list" />');

});

[jQuery] Utiliser Split pour récupérer la valeur contenue dans une classe et les opérateurs de comparaison pour agir en fonction de celle-ci

12/03/2016 / admin

Demo jsFiddle.net

<div class="safari-600"><!-- modifier cette valeur et relancer -->
  <p class="value"></p>
  <p class="result is-less-or-equal">Plus petit ou égal à 600</p>
  <p class="result is-more">Plus grand que 600</p>
</div>

<p class="result is-less-or-equal">Plus petit ou égal à 600</p>

<p class="result is-more">Plus grand que 600</p>

</div>

jQuery(document).ready(function(){
  var getClassValue = jQuery('*[class^="safari-"]').attr('class').split('safari-')[1];
  
  if (getClassValue <= 600){
  	jQuery('.is-more').hide();
  }
  else{
  	jQuery('.is-less-or-equal').hide();
  }
  
  jQuery('.value').text(getClassValue);
});

// [jQuery] get the class that starts with ...
// https://groups.google.com/forum/#!topic/jquery-en/cSkpulLxh3U

jQuery(document).ready(function(){

var getClassValue = jQuery('*[class^="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

jQuery('.is-more').hide();

}

else{

jQuery('.is-less-or-equal').hide();

}

jQuery('.value').text(getClassValue);

});

// [jQuery] get the class that starts with ...

// https://groups.google.com/forum/#!topic/jquery-en/cSkpulLxh3U

[jQuery] Utiliser la fonction each

03/03/2016 / admin

Dans notre exemple, on cherche dans chaque <li> à déplacer l’élément <input /> dans l’élément <span class="checkbox-wrapper" />.

Code HTML de départ :

<form action="">
  <ol>
    <li>
      <input type="checkbox" id="">
      <label for=""></label>
      <span class="checkbox-wrapper"></span>
    </li>
    <li>
      <input type="checkbox" id="">
      <label for=""></label>
      <span class="checkbox-wrapper"></span>      
    </li>
  </ol>
</form>

<ol>

<li>

</li>

<li>

</li>

</ol>

</form>

Code HTML voulu :

<form action="">
  <ol>
    <li>
      <label for=""></label>
      <span class="checkbox-wrapper">
        <input type="checkbox" id="">        
      </span>
    </li>
    <li>
      <label for=""></label>
      <span class="checkbox-wrapper">
        <input type="checkbox" id="">        
      </span>
    </li>
  </ol>
</form>

<ol>

<li>

</span>

</li>

<li>

</span>

</li>

</ol>

</form>

Code jQuery nécessaire :

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('form ol li').each(function(){
      jQuery(this).children('input[type="checkbox"]').prependTo(jQuery(this).children('.checkbox-wrapper'));
    });
  });
</script>

jQuery(document).ready(function(){

jQuery('form ol li').each(function(){

jQuery(this).children('input[type="checkbox"]').prependTo(jQuery(this).children('.checkbox-wrapper'));

});

</script>

[Change 3.x] Comment rajouter un fichier javascript dans un module change ?

03/03/2016 / admin

Où déclarer le fichier pour qu’il soit chargé ?

Y’a 3 solutions à ma connaissance :

1. modules/mon_module/lib/blocks/mon_BlockAction.class.php

mais pour ça il faudra te tourner vers un dev (qui te dire probablement que c’est un mauvais choix car tu chargeras ton JS comme un bourrin malpropre à chaque fois que le bloc sera utilisé, peu importe le thème)

2. themes/mon_theme/install.xml

dans :

<pagetemplate byCodename="responsive/tplNosidebar" doctype="HTML-5"
  js="themes.mon_theme.js.mon_js"

1 2	<pagetemplate byCodename="responsive/tplNosidebar" doctype="HTML-5" js="themes.mon_theme.js.mon_js"

Là, tu peux charger ton JS pour un gabarit de page donné; il sera chargé pour toutes les pages de ton thème qui utilisent ce gabarit

3. dans le template de bloc dans lequel tu souhaites l’appeler (si il n’est utilisé que par ce seul template)

modules/mon_module_spé/templates/mon_template.all.all.html
ou override/mon_module/templates/mon_template.all.all.html
ou themes/mon_theme/modules/mon_module/templates/mon_template.all.all.html

Préfixe head : pour ajouter ton JS au fichier page.js chargé en en-tête de document et qui regroupe et minifie l’ensemble des JS appelés avec ce préfixe dans les templates de blocs présents dans la page.

<script change:javascript="head 'modules.mon_module.lib.js.mon_js'"></script>

1	<script change:javascript="head 'modules.mon_module.lib.js.mon_js'"></script>

Préfixe src : pour ajouter ton JS en l’état de ta source et directement dans le code HMTL de ton template. Le JS sera visible à l’endroit où tu le déclares dans le DOM.

<script change:javascript="src 'modules.mon_module.lib.js.mon_js'"></script>

1	<script change:javascript="src 'modules.mon_module.lib.js.mon_js'"></script>

C’est selon l’utilisation que tu veux faire de ce JS et ça te laisse également le choix de l’emplacement dans lequel tu veux placer ton fichier JS dans l’arbo (en fonction de l’utilisation qui en sera faite). Essaye d’éviter la solution 1, c’est pas flexible.

Et en fonction de ça, tu peux stocker ton fichier JS dans le dossier :

modules/mon_module/lib/js
override/modules/mon_module/lib/js
themes/mon_theme/js

Articles récents

Catégories

Archives

Méta

Mois : mars 2016

[jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else

[jQuery] Supprimer l’élément parent mais conserver ses enfants avec replaceWith

[jQuery] Utiliser Split pour récupérer la valeur contenue dans une classe et les opérateurs de comparaison pour agir en fonction de celle-ci

[jQuery] Utiliser la fonction each

[Change 3.x] Comment rajouter un fichier javascript dans un module change ?

1. modules/mon_module/lib/blocks/mon_BlockAction.class.php

2. themes/mon_theme/install.xml

3. dans le template de bloc dans lequel tu souhaites l’appeler (si il n’est utilisé que par ce seul template)