Étiquette : matchMedia

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

17/02/2023 / admin

Ce post sur stack overflow qui explique très bien le problème et donne des solutions: How to handle events in jQuery UI widgets.

Cet autre post sur stack overflow qui explique comment solutionner le problème à l’aide de la méthode .bind(): Pass correct « this » context to setTimeout callback?.

Exemple de widget complet

$(document).on('click', <DOM element>, <JS function>.bind(this)); et setTimeout(function () { ... }.bind(this), 250);

L’objet this passé dans l’événement .on('click', ...) par l’intermédiaire de la méthode .bind() est bien celui du widget et pas la cible du click (récupérable au besoin dans la fonction _handleNewOptionSelection via un e.target.

define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.configurableProduct', {
        options: {
           attributeCodeArr: [],
        },

        /**
         * @private
         */
        _create: function () {
            this.productOptionsWrapperElem = $('#product-options-wrapper');
            this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

            this._initialize();
        },

        _initialize: function() {
            this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

            $(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));
        },

        _setKlarnaBannerVisibility: function (attributeCode) {
            for (var i = 0; i < attributeCode.length; i++) {
                if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {
                    this.element.attr('aria-hidden', true);
                    break;
                } else {
                    this.element.attr('aria-hidden', false);
                }
            }
        },

        _selectedSwatchOptionIsOutOfStock: function (attributeCode) {
            var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

            return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;
        },

        _handleNewOptionSelection: function() {
            setTimeout(function () {
                this._setKlarnaBannerVisibility(this.options.attributeCodeArr)
            }.bind(this), 250);
        }
    });

    return $.mage.configurableProduct;

});

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.configurableProduct', {

options: {

attributeCodeArr: [],

/**

* @private

_create: function () {

this.productOptionsWrapperElem = $('#product-options-wrapper');

this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

this._initialize();

_initialize: function() {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

$(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));

_setKlarnaBannerVisibility: function (attributeCode) {

for (var i = 0; i < attributeCode.length; i++) {

if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {

this.element.attr('aria-hidden', true);

break;

} else {

this.element.attr('aria-hidden', false);

}

_selectedSwatchOptionIsOutOfStock: function (attributeCode) {

var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;

_handleNewOptionSelection: function() {

setTimeout(function () {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr)

}.bind(this), 250);

}

});

return $.mage.configurableProduct;

});

Autres manières d’utiliser des événements:

this.searchLabel.on('click', function (e) {
    // allow input to lose its' focus when clicking on label
    if (this.isExpandable && this.isActive()) {
        e.preventDefault();
    }
}.bind(this));

this.searchLabel.on('click', function (e) {

// allow input to lose its' focus when clicking on label

if (this.isExpandable && this.isActive()) {

e.preventDefault();

}

}.bind(this));

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:
/**
 * Sets state of the search field to provided value.
 *
 * @param {Boolean} isActive
 */
setActiveState: function (isActive) {
    this.searchLabel.toggleClass('active', isActive);

    if (this.isExpandable) {
        this.element.attr('aria-expanded', isActive);
    }

    if(isActive) {
        this.autoComplete.show();
    } else  {
        this.autoComplete.hide();
    }
},

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:

/**

* Sets state of the search field to provided value.

* @param {Boolean} isActive

setActiveState: function (isActive) {

this.searchLabel.toggleClass('active', isActive);

if (this.isExpandable) {

this.element.attr('aria-expanded', isActive);

}

if(isActive) {

this.autoComplete.show();

} else {

this.autoComplete.hide();

}

ATTENTION: dans l’exemple ci-dessus, la présence du paramètre true dans this.element.on('focus', this.setActiveState.bind(this, true)); peut dans certains cas faire que la fonction cible ne soit pas exécutée!
A ce moment, essayer ceci:

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));
[...]
_setEngagementButtonVisibility: function(data) {
    alert(data.state);
}

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));

[...]

_setEngagementButtonVisibility: function(data) {

alert(data.state);

}

Cas d’utilisation de `.bind()` avec `setInterval()`:

_initialize: function() {
    var checkLpTagVariableAvailability = setInterval(function() {
        if (lpTag != undefined) {
            clearInterval(checkLpTagVariableAvailability);

            this._bindLpTagEvents();
            this._handleFiltersMobileBtnVisibility();
        }
    }.bind(this), 1000);
},

_initialize: function() {

var checkLpTagVariableAvailability = setInterval(function() {

if (lpTag != undefined) {

clearInterval(checkLpTagVariableAvailability);

this._bindLpTagEvents();

this._handleFiltersMobileBtnVisibility();

}

}.bind(this), 1000);

Cas avec l’utilisation de matchMedia/mediaCheck

Notez la présence de .bind(this) après chaque fonction (entry, exit).

define([
    'jquery',
    "matchMedia",
    'jquery-ui-modules/widget'
], function ($, mediaCheck) {
    'use strict';

    $.widget('mage.mwSearch', {
        options: {
            isExpandable: null
        },

        _create: function () {
            this.isExpandable = this.options.isExpandable;

            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

            mediaCheck({
                media: '(max-width: 768px)',
                entry: function () {
                    this.isExpandable = true;
                }.bind(this),
                exit: function () {
                    this.isExpandable = false;
                }.bind(this)
            });

define([

'jquery',

"matchMedia",

'jquery-ui-modules/widget'

], function ($, mediaCheck) {

'use strict';

$.widget('mage.mwSearch', {

options: {

isExpandable: null

_create: function () {

this.isExpandable = this.options.isExpandable;

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

mediaCheck({

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

entry: function () {

this.isExpandable = true;

}.bind(this),

exit: function () {

this.isExpandable = false;

}.bind(this)

});

Utiliser la méthode `.bindAll` de Underscore

La méthode dans le code source du framework Underscore (version 1.8.2):

// Bind a number of an object's methods to that object. Remaining arguments
// are the method names to be bound. Useful for ensuring that all callbacks
// defined on an object belong to it.
_.bindAll = function(obj) {
var i, length = arguments.length, key;
if (length <= 1) throw new Error('bindAll must be passed function names');
for (i = 1; i < length; i++) {
  key = arguments[i];
  obj[key] = _.bind(obj[key], obj);
}
return obj;
};

// Bind a number of an object's methods to that object. Remaining arguments

// are the method names to be bound. Useful for ensuring that all callbacks

// defined on an object belong to it.

_.bindAll = function(obj) {

var i, length = arguments.length, key;

if (length <= 1) throw new Error('bindAll must be passed function names');

for (i = 1; i < length; i++) {

key = arguments[i];

obj[key] = _.bind(obj[key], obj);

}

return obj;

};

Dans les faits:

define([
    'jquery',
    'underscore',
    'jquery-ui-modules/widget'
], function ($, _) {
    'use strict';

    $.widget('mage.toto', {
        options: {},

        _create: function () {
            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');
        },

        /**
         * Executes when the search box is submitted. Sets the search input field to the
         * value of the selected item.
         * @private
         * @param {Event} e - The submit event
         */
        _onSubmit: function (e) {
            var value = this.element.val();

            if (isEmpty(value)) {
                e.preventDefault();
            }
        },

        /**
         * Executes when keys are pressed in the search input field. Performs specific actions
         * depending on which keys are pressed.
         * @private
         * @param {Event} e - The key down event
         * @return {Boolean} Default return type for any unhandled keys
         */
        _onKeyDown: function (e) {
            var keyCode = e.keyCode || e.which;
            switch (keyCode) {
                case $.ui.keyCode.HOME:
                    ...
                default:
                    return true;
            }
        },

        /**
         * Executes when the value of the search input field changes. Executes a GET request
         * to populate a suggestion list based on entered text. Handles click (select), hover,
         * and mouseout events on the populated suggestion list dropdown.
         * @private
         */
        _onPropertyChange: function () {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);
        },

define([

'jquery',

'underscore',

'jquery-ui-modules/widget'

], function ($, _) {

'use strict';

$.widget('mage.toto', {

options: {},

_create: function () {

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

/**

* Executes when the search box is submitted. Sets the search input field to the

* value of the selected item.

* @private

* @param {Event} e - The submit event

_onSubmit: function (e) {

var value = this.element.val();

if (isEmpty(value)) {

e.preventDefault();

}

/**

* Executes when keys are pressed in the search input field. Performs specific actions

* depending on which keys are pressed.

* @private

* @param {Event} e - The key down event

* @return {Boolean} Default return type for any unhandled keys

_onKeyDown: function (e) {

var keyCode = e.keyCode || e.which;

switch (keyCode) {

case $.ui.keyCode.HOME:

...

default:

return true;

}

/**

* Executes when the value of the search input field changes. Executes a GET request

* to populate a suggestion list based on entered text. Handles click (select), hover,

* and mouseout events on the populated suggestion list dropdown.

* @private

_onPropertyChange: function () {

clearTimeout(this.searchTimer);

this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

03/02/2023 / admin

Ressource: How to loop through array in jQuery?. très bien expliqué avec des exemples spécifiques pour du javasqcript vanilla (ES5, ES6, …) et l’utilisation avec this.

Dans mon exemple, je cherche simplement à ré-initialiser un carousel Slick Slider dès qu’un nouveau breakpoint est rencontré. Il est important de comprendre que c’est le même code qui est exécuté à chaque fois.

Si vous souhaitez utiliser des paramètres différents en fonction de vos vues (Mobile, Tablet, Desktop) avec Slick Slider, il faut utiliser l’option responsive.

var slickBreakpoints = [
    '(max-width: 639px)',
    '(min-width: 640px) and (max-width: 959px)',
    '(min-width: 960px)'
];

$.each(slickBreakpoints, function(index, breakpoint) {
    mediaCheck({
        media: breakpoint,
        entry: function () {
            msgContainer
                .slick('unslick')
                .slick(slickConfig);
        }
    });
});

var slickBreakpoints = [

'(max-width: 639px)',

'(min-width: 640px) and (max-width: 959px)',

'(min-width: 960px)'

];

$.each(slickBreakpoints, function(index, breakpoint) {

mediaCheck({

media: breakpoint,

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

…revient à déclarer ceci:

mediaCheck({
    media: '(max-width: 639px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 640px) and (max-width: 959px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 960px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({

media: '(max-width: 639px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

media: '(min-width: 640px) and (max-width: 959px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

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

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

Attention à ne pas oublier le .bind(this) si vous voulez accéder à l’objet ‘this’

mediaCheck({
    media: '(min-width: 960px)',
    entry: function () {
        this.footerHeight = this._getFooterHeight();
    }.bind(this)
});

mediaCheck({

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

entry: function () {

this.footerHeight = this._getFooterHeight();

}.bind(this)

});

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[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'),

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>

Articles récents

Catégories

Archives

Méta

Étiquette : matchMedia

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

Exemple de widget complet

Autres manières d’utiliser des événements:

Cas d’utilisation de `.bind()` avec `setInterval()`:

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode `.bindAll` de Underscore

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

Attention à ne pas oublier le .bind(this) si vous voulez accéder à l’objet ‘this’

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode `listen()` avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

[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

Exemple de widget complet

Autres manières d’utiliser des événements:

Cas d’utilisation de .bind() avec setInterval():

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode .bindAll de Underscore

Attention à ne pas oublier le .bind(this) si vous voulez accéder à l’objet ‘this’

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

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

Cas d’utilisation de `.bind()` avec `setInterval()`:

Utiliser la méthode `.bindAll` de Underscore

Utiliser la méthode `listen()` avec un breakpoint unique

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