Détecter le changement d'une requête média CSS avec JavaScript

La fonction MediaQueryChange() permet de détecter les changements de requêtes média CSS utilisées en responsive design.

MediaQueryChange()

Retourne un objet détecteur de changement de requête média.

Syntaxe

new MediaQueryChange(propriete, valeur);

Paramètres

propriete(String)

Le paramètre propriete de l'interface MediaQueryChange() définit la propriété CSS de la requête média que le détecteur prendra en compte en cas de changement de valeur.

valeur(string)

Le paramètre valeur de l'interface MediaQueryChange() définit la valeur CSS que le détecteur prendra en compte en cas de changement pour la propriété de la requête média.

Méthodes de l'instance

detecteur.addListener()

La méthode addListener() de l'interface MediaQueryChange() ajoute un écouteur au détecteur de changement de valeur pour la propriété de la requête média.

Syntaxe

detecteur.addListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode addListener() est un écouteur de changement de valeur de la propriété de la requête média, qui sera ajouté au détecteur.

detecteur.removeListener()

La méthode removeListener() de l'interface MediaQueryChange() supprime un écouteur du détecteur de changement de valeur de la requête média.

Syntaxe

detecteur.removeListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode removeListener() est un écouteur de changement de valeur de la propriété de la requête média, qui sera supprimé du détecteur.

var propriete = 'min-width';
var valeur    = '1000px';
var detecteur = new MediaQueryChange(propriete, valeur);

var ecouteur  = function(e) {
  console.log(e.matches); // renvoie : true ou false
  // detecteur.removeListener(ecouteur);
};

detecteur.addListener(ecouteur);

function MediaQueryChange(k,v){var _=this,a=[];
_.addListener=function(f){a.push(f);};
_.removeListener=function(f){var i=a.indexOf(f);
if(i>-1){a.splice(i,1);}};
window.matchMedia('('+k+': '+v+')')
.addEventListener('change',function(o){
for(var i=0,j=a.length;i<j;i++){a[i](o);}});
return _;}