0

is the matchMedia function available for LockerService?

Calling a function using matchMedia returns [TypeError: window.matchMedia is not a function] as the error.

I need access to matchMedia as my responsive design depends on it; There is only so much you can do with pure CSS.

The code below hides the button if the window is smaller than 640 pixels. It works correctly without LockerService, but with LockerService, it throws [TypeError: window.matchMedia is not a function].

TestApp2.app

<aura:application >
  <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.doInit}"/>
  <ltng:require styles="/resource/custom"/>
    <ui:button aura:id="buttonA" buttonTitle="Test button" class="button" label="Test" press="{!c.toggle}"/>
</aura:application>

TestApp2Controller.js

({
    doInit : function(cmp)
    {
        window.setTimeout(
            $A.getCallback(function() {
                resizeContent();
                $(window).resize(function() {
                    resizeContent();
                });
                        function resizeContent() {
                            if (window.matchMedia('(max-width: 639px)').matches){
                            $A.util.addClass(cmp.find('buttonA'), "toggleVis");
                            } else {
                                $A.util.removeClass(cmp.find('buttonA'), "toggleVis");
                            }
                        }
                }), 1
        );
    },
    toggle : function(component, event, helper) {

    }
})

custom.resource

.toggleVis {
    display: none !important;
}
2

Window.matchMedia is not exposed yet. I am in the process of resolving some of those issue this week, and will post once done.

That said, you have other options that will probably work better for most cases. Here is why:

  • With the proliferation of device formats and screen resolutions, the media queries are getting more and more complex to write and are harder and harder to maintain.
  • If your component is embedded on a Salesforce mobile or desktop app, you probably want to pivot using the same rules, and by that I mean that you want your responsive design to change at the same time that the Salesforce design is changing, so you can show a phone layout, a tablet layout, or a desktop layout when the rest of the app is on the same mode.

If that matches your needs, you can use the $Browser global value provider to help you adapt to the form factor. For example:

var formFactor = $A.get("$Browser.formFactor"); // DESKTOP, PHONE, TABLET

Alternatively:

var isTablet = $A.get("$Browser.isTablet"); // TRUE, FALSE

You can find all relevant details about $Browser here:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm

I would be very interested to know how this is solving your need, and to get more insight on your specific use case for media queries. Feel free to respond with more information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.