Important
You are browsing upcoming documentation for version 6.0 of OroCommerce, OroCRM, and OroPlatform, scheduled for release in 2024. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.
See our Release Process documentation for more information on the currently supported and upcoming releases.
Viewport Manager
Viewport manager contains a collection of available screen types that can be used on the theme.
It is also responsible for triggering event viewport:change
through the mediator, when the type of the screen changes.
You can subscribe to the event viewport:change
in the view and create a logic based on the viewport changes (for example, DOM Relocation View).
You can also subscribe to a specific event viewport:desktop
, viewport:tablet
or any other registered media type in scss.
Viewport manager has several public methods:
isApplicable(mediaTypes)
: the method accepts a string or an array of strings of media types as arguments.- For example:
viewportManager.isApplicable('tablet')
viewportManager.isApplicable('tablet', 'tablet-small')
viewportManager.isApplicable(['tablet', 'tablet-small'])
getBreakpoints(context)
: returns an object with all registered breakpoints from css property--breakpoints
. You can pass thecontext
of the document as an argument.getMediaType(mediaType)
: returnsMediaQueryList
bymediaType
argument.
Screen Map
By default these settings for list of screen types synchronized with scss breakpoints.
// Desktop Media Breakpoint
$breakpoint-desktop: 1100px;
// iPad mini 4 (768*1024), iPad Air 2 (768*1024), iPad Pro (1024*1366)
$breakpoint-tablet: $breakpoint-desktop - 1px;
$breakpoint-tablet-small: 992px;
// iPhone 6s (375*667), iPhone 6s Plus (414*763)
$breakpoint-mobile-big: 767px;
$breakpoint-mobile-landscape: 640px;
$breakpoint-mobile: 414px;
$oro-breakpoints: (
'desktop': '(min-width: ' + $breakpoint-desktop + ')',
'tablet': '(max-width: ' + $breakpoint-tablet + ')',
'strict-tablet': '(max-width: ' + $breakpoint-tablet + ') and (min-width: ' + ($breakpoint-tablet-small + 1) + ')',
'tablet-small': '(max-width: ' + $breakpoint-tablet-small + ')',
'strict-tablet-small': '(max-width: ' + $breakpoint-tablet-small + ') and (min-width: ' + ($breakpoint-mobile-landscape + 1) + ')',
'mobile-landscape': 'screen and (max-width: ' + $breakpoint-mobile-landscape + ')',
'strict-mobile-landscape': '(max-width: ' + $breakpoint-mobile-landscape + ') and (min-width: ' + ($breakpoint-mobile + 1) + ')',
'mobile': '(max-width: ' + $breakpoint-mobile + ')',
'mobile-big': '(max-width: ' + $breakpoint-mobile-big + ')',
);
Default scss breakpoints are converted to the following object:
mediaTypes: {
'desktop': '(min-width: 1100px)',
'tablet': '(max-width: 1099px)',
'strict-tablet': '(max-width: 1099px) and (min-width: 993px)',
'tablet-small': '(max-width: 992px)',
'strict-tablet-small': '(max-width: 992px) and (min-width: 641px)',
'mobile-big': '(max-width: 767px)',
'strict-mobile-big': '(max-width: 767px) and (min-width: 641px)',
'mobile-landscape': '(max-width: 640px)',
'strict-mobile-landscape': '(max-width: 640px) and (min-width: 415px)',
'mobile': '(max-width: 414px)'
}
You can override these breakpoints via scss variables.
Media Types
A media type is used to describe a named media query;
For example:
{
'screen-type': '(max-width: 1024px)'
}
Events
viewport:change
Event: MediaQueryListEvent
Media Query of the changed media type. Additionally contains a mediaType field with the name of the media type.