breakpoints – devfrontend.info

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

18/10/2019 / admin

Source: Importing CSS Breakpoints Into JavaScript (adapté pour Magento 2).

!important: ce tuto demande à créer/modifier un certain nombre de fichiers. Le respect de l’organisation de ces derniers dans l’arborescence de votre thème est capital pour le bon fonctionnement de la fonctionnalité présentée. Vous pourrez bien-sûr modifier les emplacements des fichiers, mais pensez dans ce cas à mettre à jour tous les chemins en conséquence.

L’arborescence utilisée dans le code source fourni est mise à plat plus bas.

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Magento 2 permet, par le biais de l’outil matchMedia.js, de déclencher du code javascript/jQuery en fonction d’un point de rupture. Extrait de la documentation officielle à ce sujet:

 /*...*/
    mediaCheck({
        media: '(min-width: 768px)',
        // Switch to Desktop Version
        entry: function () {
            /* The function that toggles page elements from desktop to mobile mode is called here */
        },
        // Switch to Mobile Version
        exit: function () {
            /* The function that toggles page elements from mobile to desktop mode is called here*/
        }
    }); /*...*/

/*...*/

mediaCheck({

media: '(min-width: 768px)',

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

}

}); /*...*/

On remarque que la valeur du point de rupture est renseignée de manière statique (768px): media: '(min-width: 768px)'. Ce procédé a ses limites. Le jour où la valeur de ce breakpoint est modifiée dans la feuille de style, il faudra mettre à jour à la main toutes les déclarations faites avec matchMedia.

Le but est donc de rendre dynamique la valeur de media:.

Partie LESS:

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/ et y placer, à la racine, l’intégralité des fichiers disponibles sur ce repository Git.

A ce stade, il est surtout important que les fichiers for.less et for-each.less soient accessibles respectivement depuis les chemins suivants:

app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for.less
app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for-each.less
Note: le repo Git pouvant disparaître du jour au lendemain, un backup au format ZIP est disponible ici 😉.
Note #2: si vous regardez le code source du projet less-curious, vous remarquerez peut-être que ce dernier est déprécié et que l’auteur fournit un lien vers une version plus actuelle, full JS à intégrer avec un pré-processeur comme Grunt. Problème: j’ai eu beau suivre les bonnes pratiques d’intégration d’un plug-in pour grunt-contrib-less dans le système mis en place dans Magento 2, je n’ai rien réussi à compiler… UPDATE (pas testé) 05/11/2019: la solution se situe peut-être dans la mise en place d’une configuration custom de Grunt.

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/.

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/_js-mediaqueries.less et placez-y le code ci-dessous:

@import "../../vendor/less-curious/src/for.less";
//@import "../../vendor/less-curious/src/for-each.less";

body:before {
  content: "smartphone";
  display: none; // Prevent from displaying.
}

// Retrieve default breakpoints values from here:
// "lib/web/css/source/lib/variables/_responsive.less"
// (also, if any, add your custom breakpoints to the list too)
@breakpoints:
        screen__xxs @screen__xxs,
        screen__xs @screen__xs,
        screen__s @screen__s,
        screen__m @screen__m,
        screen__l @screen__l,
        screen__xl @screen__xl;

.for(@breakpoints); .-each(@value) {
  @breakpoint-key:  extract(@value, 1);
  @media (min-width: extract(@value, 2)) {
    body:before {
      content: "@{breakpoint-key}";
    }
  }
}



// Activate for front-end hints
.jsBreakpoints-hints {
  position: fixed;
  z-index: 99999;
  top: 10px;
  right: 10px;

  &.is-active {
    display: block;
  }

  &:hover {
    cursor: pointer;
  }

  .breakpoint {
    background-color: #ca322c;
    color: white;
    display: inline-block;
    padding: 2px 4px;
  }
}

@import "../../vendor/less-curious/src/for.less";

//@import "../../vendor/less-curious/src/for-each.less";

body:before {

content: "smartphone";

display: none; // Prevent from displaying.

}

// Retrieve default breakpoints values from here:

// "lib/web/css/source/lib/variables/_responsive.less"

// (also, if any, add your custom breakpoints to the list too)

@breakpoints:

screen__xxs @screen__xxs,

screen__xs @screen__xs,

screen__s @screen__s,

screen__m @screen__m,

screen__l @screen__l,

screen__xl @screen__xl;

.for(@breakpoints); .-each(@value) {

@breakpoint-key: extract(@value, 1);

@media (min-width: extract(@value, 2)) {

body:before {

content: "@{breakpoint-key}";

}

// Activate for front-end hints

.jsBreakpoints-hints {

position: fixed;

z-index: 99999;

top: 10px;

right: 10px;

&.is-active {

display: block;

}

&:hover {

cursor: pointer;

}

.breakpoint {

background-color: #ca322c;

color: white;

display: inline-block;

padding: 2px 4px;

}

Dans le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/_theme.less, ajouter la ligne suivante JUSTE EN-DESSOUS des potentielles surcharges que vous avez faites des variables pré-déclarées dans le(s) thème(s) parent(s) dont votre thème va hériter:

// Import _js-mediaqueries.less from _theme.less,
// RIGHT AFTER declarations (overrides) of existing variables.
@import "../source/devtools/_js-mediaqueries.less";

// Import _js-mediaqueries.less from _theme.less,

// RIGHT AFTER declarations (overrides) of existing variables.

@import "../source/devtools/_js-mediaqueries.less";

Partie JS:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/js/js-mediaqueries.js:

require([
    'jquery'
], function($){
    'use strict';

    $(function () { // to ensure that code evaluates on page load

        var breakpoint = {};

        breakpoint.refreshValue = function () {
            this.value = window.getComputedStyle(
                document.querySelector('body'), ':before'
            ).getPropertyValue('content').replace(/\"/g, '');
        };

        // Activate for front-end hints
        $('<div id="jsBreakpoints" class="jsBreakpoints-hints"><span class="breakpoint breakpoint-isCurrent"></span></div>').appendTo('body');

        $(window).resize(function () {
            breakpoint.refreshValue();

            // Activate for front-end hints
            $('.breakpoint-isCurrent', '#jsBreakpoints').html(breakpoint.value);
        }).resize();

        // Activate for front-end hints
        $('#jsBreakpoints').on('click', function(){
           $(this).remove();
        });
    });
});

require([

'jquery'

], function($){

'use strict';

$(function () { // to ensure that code evaluates on page load

var breakpoint = {};

breakpoint.refreshValue = function () {

this.value = window.getComputedStyle(

document.querySelector('body'), ':before'

).getPropertyValue('content').replace(/\"/g, '');

};

// Activate for front-end hints

$('<div id="jsBreakpoints" class="jsBreakpoints-hints"><span class="breakpoint breakpoint-isCurrent"></span></div>').appendTo('body');

$(window).resize(function () {

breakpoint.refreshValue();

// Activate for front-end hints

$('.breakpoint-isCurrent', '#jsBreakpoints').html(breakpoint.value);

}).resize();

// Activate for front-end hints

$('#jsBreakpoints').on('click', function(){

$(this).remove();

});

Créer ou adapter le fichier app/design/frontend/<Vendor_name>/<theme_name>/requirejs-config.js:

// How To add JS file in frontend for all pages
// https://magento.stackexchange.com/a/131635
var config = {

    map: {
        '*': {
            'jsMediaqueries': 'js/js-mediaqueries'
        }
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'jsMediaqueries': {
            deps: ['jquery']
        }
    }

};

// How To add JS file in frontend for all pages

// https://magento.stackexchange.com/a/131635

var config = {

map: {

'*': {

'jsMediaqueries': 'js/js-mediaqueries'

}

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'jsMediaqueries': {

deps: ['jquery']

}

};

Partie XML:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml:

Note: si ce fichier existe déjà dans votre thème, ajouter simplement la ligne <script src="js/js-mediaqueries.js" /> entre les balises <head>.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/js-mediaqueries.js" />
    </head>
</page>

<head>

</head>

</page>

Commandes à exécuter en bash:

Un cache:clean
$ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

Un process Grunt doit tourner ou une compilation des assets front-end via une commande Magento doit être faite.

Arborescence complète, selon les fichiers de ce tuto:

app/design/frontend/[Vendor_name]/[theme_name]/
- Magento_Theme/
  - layout/
    - default_head_blocks.xml
- web/
  - css/
    - source/
      - devtools/
        
        _js-mediaqueries.less
      - vendor/
        
        less-curious/
        
        src/
        
        for.less
        
        for-each.less
      - _theme.less
  - js/
    - js-mediaqueries.js
- requirejs-config.js

[Magento 2] Utiliser des media queries, points de rupture, en LESS (CSS) et en javascript avec matchMedia

16/10/2019 / admin

Exploiter les media queries dans les fichiers styles LESS (CSS)
Avoir recours aux media queries dans les fichiers JS

Exploiter les media queries dans les fichiers styles LESS (CSS)

Variables de breakpoints

Les surcharges de valeurs de breakpoints existants (déjà déclarés dans un thème parent) se font dans le fichier _theme.less de votre thème enfant.

Utilisation des mixins `.media-width` fournis par Magento 2 et code compilé

Les fichiers CSS styles-m.less et styles-l.less sont auto-générés par Magento 2 lors de la compilation des fichiers *.less. Il ne faut PAS les recréer à la main dans vos thèmes enfants. Si on respecte les bonnes pratiques de déclaration des media-queries dictées par la doc officielle, on peut déclarer autant de fois qu’on veut un même breakpoint dans nos sources *.less et toutes nos déclarations seront regroupées sous une seule dans les fichiers *.css finaux. Exemple:

# Source LESS
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    border: 12px solid red;
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    background-color: pink;
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    font-size: 26px;
  }
}


# Rendu CSS généré
@media only screen and (max-width: 639px) {
  body {
    border: 12px solid red;
  }
  body {
    background-color: pink;
  }
  body {
    font-size: 26px;
  }
}

# Source LESS

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

// your code

body {

border: 12px solid red;

}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

// your code

body {

background-color: pink;

}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

// your code

body {

font-size: 26px;

}

# Rendu CSS généré

@media only screen and (max-width: 639px) {

body {

border: 12px solid red;

}

body {

background-color: pink;

}

body {

font-size: 26px;

}

Avoir recours aux media queries dans les fichiers JS avec `matchMedia`

Doc officielle – JavaScript in Magento responsive design.

Utiliser `matchMedia` directement dans une vue *.phtml

Le code ci-dessous affiche une bordure rose sur les écrans de Mobile (dont la résolution est inférieure à 768px) et bleue sur les écrans dont la résolution est plus large.

<script>
    requirejs([
        'jquery',
        'matchMedia'
    ], function($, mediaCheck){
        'use strict';

        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid aqua');
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid pink');
            }
        });
    });
</script>

requirejs([

'jquery',

'matchMedia'

], function($, mediaCheck){

'use strict';

mediaCheck({

media: '(min-width: 768px)',

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

$('body').css('border', '12px solid aqua');

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

$('body').css('border', '12px solid pink');

}

});

</script>

Utiliser `matchMedia` depuis un fichier *.js

Attention: de part la nature « protectrice » de requireJS, le code encapsulé dans votre fichier Js ne sera pris en compte qu’après avoir été déclaré dans une vue *.phtml ou (mauvaise pratique) dans un JS inclus à l’arrache (dans app\design\frontend\<Vendor_name>\<theme_name>\Magento_Theme\layout\default_head_blocks.xml par exemple) et non-contrôlé par requireJS.

Dans mon exemple, je crée un fichier app\design\frontend\<Vendor_name>\<theme_name>\web\js\mediaqueries.js:

Attention, à retenir: il faut bien encapsuler le code qui doit être exécuté au chargement de la page dans une fonction anonyme $(function(){ // mon code ici... });. Sinon, pas d’exécution. C’est du jQuery 😉

require([
    'jquery',
    'matchMedia'
], function($, mediaCheck){
    'use strict';

    $(function () { // to ensure that code evaluates on page load
        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid aqua');
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid pink');
            }
        });
    });
});

require([

'jquery',

'matchMedia'

], function($, mediaCheck){

'use strict';

$(function () { // to ensure that code evaluates on page load

mediaCheck({

media: '(min-width: 768px)',

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

$('body').css('border', '12px solid aqua');

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

$('body').css('border', '12px solid pink');

}

});

Dans le fichier app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js, je déclare mon nouveau fichier mediaqueries.js et je le rends disponible pour requireJS:

var config = {

    map: {
        '*': {
            'jsMediaqueries': 'js/mediaqueries'
        }
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'jsMediaqueries': {
            deps: ['jquery']
        }
    }

};

var config = {

map: {

'*': {

'jsMediaqueries': 'js/mediaqueries'

}

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'jsMediaqueries': {

deps: ['jquery']

}

};

Dans un fichier *.phtml, je fais exécuter le code se trouvant dans le fichier mediaqueries.js:

<script>
    requirejs(['jquery', 'jsMediaqueries'], function($, jsMediaqueries){});
</script>

requirejs(['jquery', 'jsMediaqueries'], function($, jsMediaqueries){});

</script>

[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 : breakpoints

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Partie LESS:

Partie JS:

Partie XML:

Commandes à exécuter en bash:

Arborescence complète, selon les fichiers de ce tuto:

[Magento 2] Utiliser des media queries, points de rupture, en LESS (CSS) et en javascript avec matchMedia

Exploiter les media queries dans les fichiers styles LESS (CSS)

Variables de breakpoints

Utilisation des mixins `.media-width` fournis par Magento 2 et code compilé

Avoir recours aux media queries dans les fichiers JS avec `matchMedia`

Utiliser `matchMedia` directement dans une vue *.phtml

Utiliser `matchMedia` depuis un fichier *.js

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

Avec enquire.js

Sans enquire.js

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Partie LESS:

Partie JS:

Partie XML:

Commandes à exécuter en bash:

Arborescence complète, selon les fichiers de ce tuto:

Exploiter les media queries dans les fichiers styles LESS (CSS)

Variables de breakpoints

Utilisation des mixins .media-width fournis par Magento 2 et code compilé

Avoir recours aux media queries dans les fichiers JS avec matchMedia

Utiliser matchMedia directement dans une vue *.phtml

Utiliser matchMedia depuis un fichier *.js

Avec enquire.js

Sans enquire.js

Utilisation des mixins `.media-width` fournis par Magento 2 et code compilé

Avoir recours aux media queries dans les fichiers JS avec `matchMedia`

Utiliser `matchMedia` directement dans une vue *.phtml

Utiliser `matchMedia` depuis un fichier *.js