Étiquette : media-queries

[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] Exploiter matchMedia pour passer des paramètres différents à un widget javascript en fonction du breakpoint

17/10/2019 / admin

Ressources en ligne:

HOW TO USE THE MAGENTO2 MODAL WIDGET – code. Montre bien comment passer des options et exécuter des méthodes lors d’un événement.

Attention: en work-in-progress… Au chargement de la page, selon qu’on soit en vue Mobile ou Desktop, les paramètres correspondants sont bien pris en compte mais il reste encore pas mal de soucis.

Doc officielle de Magento 2 relative à l’utilisation de matchMedia: JavaScript in Magento responsive design.

Fichier du core de Magento 2 à étudier: lib/web/mage/menu.js qui exploite matchMedia via l’alias mediaCheck et la brique $.ui.menu de jQueryUI.

Ressources externes, documentation…

[Magento2 devdocs] (officielle) jQuery widget coding standard, instanciation
La version 1.9 de jQuery UI (si, si…)

TODOs

lorsqu’on change de breakpoint sans recharger la page, les paramètres du widget ne sont pas mis à jour pour la nouvelle vue correspondante (voir pour une méthode destroy ou (mieux) refresh (edit: refresh semble ne pas vouloir fonctionner avec Magento 2).
la fonction bindAccordion ne permet pas l’ajout de méthodes ou d’événements (edit: j’ai dégagé la fonction)
cherry on the cake: le breakpoint courant devrait être détecté automatiquement (changement après chargement de page compris)

Mise en place:

\app\design\frontend\<Vendor_name>\<theme_name>\web\js\accordion-config.js

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

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

        var $accordionEl = $('#narrow-by-list');

        var bpMobileOptions = {
            openedState: "active-mobile",
            collapsible: false,
            multipleCollapsible: false
        };
        var bpDesktopOptions = {
            openedState: "active-desktop",
            collapsible: true,
            multipleCollapsible: true
        };

        // 1st init of widget, with no particular options.
        $accordionEl.accordion();

        // Prevent scroll to top when clicking on a[href="#"]
        $('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){
            e.preventDefault();
        });

        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 tomato');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpDesktopOptions);
            },
            // 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 aqua');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpMobileOptions);
            }
        });
    });
});

require([

'jquery',

'matchMedia',

'accordion'

], function($, mediaCheck){

'use strict';

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

var $accordionEl = $('#narrow-by-list');

var bpMobileOptions = {

openedState: "active-mobile",

collapsible: false,

multipleCollapsible: false

};

var bpDesktopOptions = {

openedState: "active-desktop",

collapsible: true,

multipleCollapsible: true

};

// 1st init of widget, with no particular options.

$accordionEl.accordion();

// Prevent scroll to top when clicking on a[href="#"]

$('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){

e.preventDefault();

});

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 tomato');

$accordionEl

.accordion('destroy')

.accordion(bpDesktopOptions);

// 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 aqua');

$accordionEl

.accordion('destroy')

.accordion(bpMobileOptions);

}

});

\app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js

var config = {

    map: {
        '*': {
            'configAccordion': 'js/accordion-config'
        }
    },

    // 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: {
        'configAccordion': {
            deps: ['jquery']
        }
    }

};

var config = {

map: {

'*': {

'configAccordion': 'js/accordion-config'

}

// 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: {

'configAccordion': {

deps: ['jquery']

}

};

\app\design\frontend\<Vendor_name>\<theme_name>\Magento_LayeredNavigation\templates\layer\view.phtml

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

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

</script>

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

<button id="modal-btn">Click me</button>
<div id="modal-content">
	<div class="modal-inner-content">
		<h2>Modal Title</h2>
		<p>Modal content…..</p>
	</div>
</div>

<button id="modal-btn">Click me</button>

<h2>Modal Title</h2>

<p>Modal content…..</p>

</div>

JS

<script type="text/javascript">
    require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {
        var options = {
            type: 'popup', // popup or slide
            responsive: true, // true = on smaller screens the modal slides in from the right
            title: 'Modal main title',
            buttons: [{ // Add array of buttons within the modal if you need.
                text: $.mage.__('Dismiss & Continue'),
                class: '',
                click: function () {
                    this.closeModal(); // This button closes the modal
                }
            }]
        };

        var popup = modal(options, $('#modal-content'));
        $("#modal-btn").click(function() {
            $('#modal-content').modal('openModal');
        });
    });
</script>

require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {

var options = {

type: 'popup', // popup or slide

responsive: true, // true = on smaller screens the modal slides in from the right

title: 'Modal main title',

buttons: [{ // Add array of buttons within the modal if you need.

text: $.mage.__('Dismiss & Continue'),

class: '',

click: function () {

this.closeModal(); // This button closes the modal

}

}]

};

var popup = modal(options, $('#modal-content'));

$("#modal-btn").click(function() {

$('#modal-content').modal('openModal');

});

</script>

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

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

20/08/2015 / admin

Attention : astuce valable pour Fancybox à partir de sa version: 2.1.5 (Fri, 14 Jun 2013).

Source : Need to add a surrounding div to fancybox or add a class to body when clicked

You can bind all your fancyboxes to the same selector so you won’t need to have a different script for each fancybox. You can add an extra class to your links to separate each fancybox like :

<a class="fancybox i300"...>..</a>
<a class="fancybox i420"...>...</a>

1 2	<a class="fancybox i300"...>..</a> <a class="fancybox i420"...>...</a>

Then you can declare different API options of each fancybox in separated variables like :

// settings for fancybox 300
var f300 = {
    maxWidth: 320,
    maxHeight: 569,
    minWidth: 300
};
// settings for fancybox 420
var f420 = {
    maxWidth: 480,
    maxHeight: 600,
    minWidth: 420
};

// settings for fancybox 300

var f300 = {

maxWidth: 320,

maxHeight: 569,

minWidth: 300

};

// settings for fancybox 420

var f420 = {

maxWidth: 480,

maxHeight: 600,

minWidth: 420

};

…and use a single script with the common shared options AND using the afterLoad callback to apply each individual setting, depending on the class as well as adding the corresponding class to the fancybox overlay like

$(".fancybox").fancybox({
    // common API options
    fitToView: false,
    width: '90%',
    height: '90%',
    autoSize: false,
    closeClick: false,
    openEffect: 'none',
    closeEffect: 'none',
    padding: 0,
    afterLoad: function () {
        if ($(this.element).hasClass("i300")) {
            $.extend(this, f300);
            $(".fancybox-overlay").addClass("iphone_300");
        } else if ($(this.element).hasClass("i420")) {
            $.extend(this, f420);
            $(".fancybox-overlay").addClass("iphone_420");
        }
    }
});

$(".fancybox").fancybox({

// common API options

fitToView: false,

width: '90%',

height: '90%',

autoSize: false,

closeClick: false,

openEffect: 'none',

closeEffect: 'none',

padding: 0,

afterLoad: function () {

if ($(this.element).hasClass("i300")) {

$.extend(this, f300);

$(".fancybox-overlay").addClass("iphone_300");

} else if ($(this.element).hasClass("i420")) {

$.extend(this, f420);

$(".fancybox-overlay").addClass("iphone_420");

}

});

Notice we are adding classes either iphone_300 or iphone_420 to the fancybox overlay, which may have different styles within your own css stylesheet like

.iphone_300 {
    background: rgba(58, 42, 45, 0.8)
}
.iphone_420 {
    background: rgba(0, 0, 0, 0.2)
}

.iphone_300 {

background: rgba(58, 42, 45, 0.8)

}

.iphone_420 {

background: rgba(0, 0, 0, 0.2)

}

Simulation jsfiddle.net

when i put these in a rel=gallery, that when i click next it doesnt remove the previous addclass

Just add this as first line inside the afterLoad callback :

$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420");

1	$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420");

Simulation jsfiddle.net

[Enquire.js] Astuces d’utilisation de la solution JavaScript de media queries callbacks

06/03/2015 / admin

Sources :

Déclaration de base :

Attention : pour une raison que j’ignore, je n’ai eu aucun succès avec les déclarations de ce type (pourtant donnée en exemple sur css-tricks.com) :

enquire.register("min-width: 992px", function() {
  alert("toto");
});

enquire.register("min-width: 992px", function() {

alert("toto");

});

Afin de pouvoir bénéficier de la magie d’enquire.js, il faut au minimum préciser le contexte dans lequel les styles doivent être appliqués à savoir (screen pour les écrans, print pour la version imprimable, etc…

  enquire.register("screen and (min-width: 992px)", function() {
    alert("toto");
  });

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

alert("toto");

});

Plus proche de la logique Media Queries avec `match` et `unmatch` :

Enquire.js laisse la possibilité d’activer/désactiver des évènements en fonction de la résolution ciblée à l’aide de match et unmatch.

  enquire.register("screen and (min-width: 992px)", {
    match : function() {
      alert("toto");
    },
    unmatch : function() {
    }
  });

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

match : function() {

alert("toto");

unmatch : function() {

}

});

Utiliser `destroy` pour annuler un évènement :

  enquire.register("screen and (min-width: 992px)", {
    match : function() {
      // desktop ONLY !
      $(".second-nav-group").sticky({
        zIndex:3,
        topSpacing: 0
      });
    },
    unmatch : function() {
      $(".second-nav-group").sticky('destroy');
    }
  });

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

match : function() {

// desktop ONLY !

$(".second-nav-group").sticky({

zIndex:3,

topSpacing: 0

});

unmatch : function() {

$(".second-nav-group").sticky('destroy');

}

});

Un template de base pour utiliser Enquire.js avec jQuery

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

  enquire.register("screen and (min-width: 768px)", {
    match : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
    },
    unmatch : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
    }
  });
});

jQuery(document).ready(function(){

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

match : function() {

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

unmatch : function() {

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

}

});

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

match : function() {

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

unmatch : function() {

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

}

});

Utiliser les variables des breakpoints de la grille Bootstrap avec enquire.js

Source jsFiddle.net : enquire JS + bootstrap grid breakpoints as global vars

// breakpoints global vars
  // bootstrap grid bps
  var bs_screen_sm_min = '768';
  var bs_screen_md_min = '992';
  var bs_screen_xs_max = bs_screen_sm_min - 1;
  var bs_screen_sm_max = bs_screen_md_min - 1;
  
  // enquire JS bps
  var bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
  var bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
  var bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';


// enquire JS
enquire.register(bpSmartphone, {
  match : function() {
    console.log('bpSmartphone');
  },
  unmatch : function() {}
});

enquire.register(bpTablet, {
  match : function() {},
  unmatch : function() {}
});

enquire.register(bpDesktop, {
  match : function() {},
  unmatch : function() {}
});

// breakpoints global vars

// bootstrap grid bps

var bs_screen_sm_min = '768';

var bs_screen_md_min = '992';

var bs_screen_xs_max = bs_screen_sm_min - 1;

var bs_screen_sm_max = bs_screen_md_min - 1;

// enquire JS bps

var bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

var bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

var bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// enquire JS

enquire.register(bpSmartphone, {

match : function() {

console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {},

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {},

unmatch : function() {}

});

[CSS] Media queries de référence dans Bootstrap 3

05/03/2015 / admin

Source : Bootstrap 3 Tips and Tricks You Might Not Know – Media Query Break Points.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

/*==================================================

= Bootstrap 3 Media Queries =

==================================================*/

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */

@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */

@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */

@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */

@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */

@media only screen and (min-width : 1200px) {

}

/*========== Non-Mobile First Method ==========*/

/* Large Devices, Wide Screens */

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

}

/* Medium Devices, Desktops */

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

}

/* Small Devices, Tablets */

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

}

/* Extra Small Devices, Phones */

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

}

/* Custom, iPhone Retina */

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

}

[Bootstrap 3] Un site ciblant uniquement le support Desktop en désactivant les classes responsive déclarées dans votre code HTML avec les media-queries

15/12/2014 / admin

Source doc officielle : Disabling responsiveness.

Méthode #3

Pas encore testée : idée au-réveil-ce-matin…

Conserver l’ensemble des classes .col-xs-, .col-sm, .col-md, .col-lg dans la CSS mais supprimer les media-queries. Attention : si le site comporte des composants responsive hors grille, il faudra également vérifier la présence de media-queries au niveau des styles qui servent à les afficher.
Pour résumer : vos CSS doivent être exemptes de toute media-querie.

Méthode #2 :

Achtung! Après un test rapide, n’a pas l’air de fonctionner mais je n’ai peut-être pas tout bien fait comme il fallait … A re-tester éventuellement.

Source : How to remove responsive features in Twitter Bootstrap 3?

Utiliser l’éditeur en ligne Customize and download pour générer une grille non responsive.
Sous Media queries breakpoints entrer les paramètres suivants :

Attention : ne pas inclure les responsive utilities dans vos styles osus peine de voir s’appliquer les classes de type .hidden-xs ou .visible-xs.

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  1px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  2px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  3px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  9999px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// Media queries breakpoints

// --------------------------------------------------

// Extra small screen / phone

// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1

@screen-xs: 1px;

@screen-xs-min: @screen-xs;

@screen-phone: @screen-xs-min;

// Small screen / tablet

// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1

@screen-sm: 2px;

@screen-sm-min: @screen-sm;

@screen-tablet: @screen-sm-min;

// Medium screen / desktop

// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1

@screen-md: 3px;

@screen-md-min: @screen-md;

@screen-desktop: @screen-md-min;

// Large screen / wide desktop

// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1

@screen-lg: 9999px;

@screen-lg-min: @screen-lg;

@screen-lg-desktop: @screen-lg-min;

Test #1 :

Attention : solution expérimentale encore non-testée, mais sachant que je ne trouvais pas de solution à ma convenance sur le net…
Ne fonctionne pas.

Cette astuce consiste à conserver l’ensemble des classes responsive dans votre code HTML (pas besoin de retirer la succession de classes col-xs-12 col-sm-6 col-md-6 col-lg-4).
Avec quelques lignes de CSS, vous pourriez donc très bien partir systématiquement de vos templates HTML conçues pour un affichage fluide sans les modifier pour obtenir un affichage figé Desktop.

Admettons que le breakpoint ciblé correspond aux classes préfixées par col-md- (Medium devices : Desktops (≥992px) défini par défaut à 970px dans la grille Bootstrap.)

@media (min-width: 0px) and (max-width: 1170px) {
  .container{
    max-width: none !important;
    width: 970px;
  }
}

@media (min-width: 0px) and (max-width: 1170px) {

.container{

max-width: none !important;

width: 970px;

}

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

11/12/2014 / admin

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

…et ajouter les classes suivantes :

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

1	<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

$product-column-spacing : espace entre les colonnes (valeur en px).
$productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

@include bp(min-width, 960px) {
    @include product-grid(4, 960);
    @include product-grid(5, 960);
    @include product-grid(6, 960);
}

@include bp(min-width, 960px) {

@include product-grid(4, 960);

@include product-grid(5, 960);

@include product-grid(6, 960);

}

…et ajouter juste en dessous :

@include bp(min-width, 993px) {
    @include product-grid(3, 993);
}

@include bp(max-width, 992px) {
    @include product-grid(2, 992);
}

@include bp(max-width, 360px) {
    @include product-grid(1, 360);
}

@include bp(min-width, 993px) {

@include product-grid(3, 993);

}

@include bp(max-width, 992px) {

@include product-grid(2, 992);

}

@include bp(max-width, 360px) {

@include product-grid(1, 360);

}

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns -->
<action method="setColumnCount"><count>3</count></action>

1 2	<!-- Since the addColumnCountLayoutDepend does not work, we are manually setting the max columns --> <action method="setColumnCount"><count>3</count></action>

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

<action method="setTemplate"><template>page/1column.phtml</template></action>

</reference>

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

<?php $_columnCount = $this->getColumnCount(); ?>

1	<?php $_columnCount = $this->getColumnCount(); ?>

…et la remplacer par :

<?php $_columnCount = 3  ?>

1	<?php $_columnCount = 3 ?>

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

[Bootstrap 3] Un fix simple pour bénéficier de la grille responsive sous IE8 avec les polyfills html5shiv.js et respond.js appellés depuis le CDN

01/12/2014 / admin

Source : http://support.ourboard.org/viewtopic.php?f=80&t=2358Simple Fix for IE8 Responsive Features not Working with Twitter Bootstrap 3 from CDN.

You want to get started with Twitter Bootstrap 3 and you want to make use of the CDN provided because it lessens the demands on your server and delivers resources fast. Everything goes well … until you test responsive features in IE8, only to find them not working. This is simply because

You look at the documentation and find that you have two choices:

Host the bootstrap CSS on your own server.
Use a proxy, to make respond.js work cross-domain.

Some people have found alternatives to respond.js but these are regarded as slower and still need to be hosted and served.

If you are using the MaxCDN option, you do not have access to the CDN in order to upload your proxy. In short, the whole lot is rather self-defeating. You want the CDN and you want IE8 to work.

Step back a little … respond.js attempts to reload the bootstrap CSS via AJAX, when all that is not working is the @media query in IE8. The simple solution is to serve a cut-down version of the CSS, with only the @media queries, to IE8 and below, from a local source. This is slightly inefficient because it is serving the same CSS twice but it is more efficient because it is only re-serving approx 15% of the payload. You get the best of all worlds.

How do you apply it?

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="bootstrap4ie8.css" rel="stylesheet">
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

You can make your own bootstrap4ie8.css by stripping down your version of boostrap.css. You can probably optimize it further by removing parts you do not use.

Articles récents

Catégories

Archives

Méta

Étiquette : media-queries

[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] Exploiter matchMedia pour passer des paramètres différents à un widget javascript en fonction du breakpoint

Ressources externes, documentation…

TODOs

Mise en place:

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

JS

[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

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

[jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents

[Enquire.js] Astuces d’utilisation de la solution JavaScript de media queries callbacks

Déclaration de base :

Plus proche de la logique Media Queries avec `match` et `unmatch` :

Utiliser `destroy` pour annuler un évènement :

Un template de base pour utiliser Enquire.js avec jQuery

Utiliser les variables des breakpoints de la grille Bootstrap avec enquire.js

[CSS] Media queries de référence dans Bootstrap 3

[Bootstrap 3] Un site ciblant uniquement le support Desktop en désactivant les classes responsive déclarées dans votre code HTML avec les media-queries

Méthode #3

Méthode #2 :

Test #1 :

[Bootstrap 3] Un fix simple pour bénéficier de la grille responsive sous IE8 avec les polyfills html5shiv.js et respond.js appellés depuis le CDN

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:

Ressources externes, documentation…

TODOs

Mise en place:

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

JS

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

Déclaration de base :

Plus proche de la logique Media Queries avec match et unmatch :

Utiliser destroy pour annuler un évènement :

Un template de base pour utiliser Enquire.js avec jQuery

Utiliser les variables des breakpoints de la grille Bootstrap avec enquire.js

Méthode #3

Méthode #2 :

Test #1 :

Méthode #1 : vous avez une contrainte responsive

list.phtml

_product-list.scss

Pour info : les variables prédéfinies à exploiter

Méthode #2 : vous n’avez pas de contrainte responsive

catalog.xml :

Méthode #3 (bidouille – ne pas utiliser)

catalog.xml :

list.phtml :

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

Plus proche de la logique Media Queries avec `match` et `unmatch` :

Utiliser `destroy` pour annuler un évènement :