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. It is possible to subscribe to event viewport:change in view and create a logic based on the viewport changes (for example, DOM Relocation View).

Screen Map

By default these settings for list of screen types synchronized with scss breakpoints.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 // 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 4s (320*480), iPhone 5s (320*568), iPhone 6s (375*667), iPhone 6s Plus (414*763)
 $breakpoint-mobile-big: 767px;
 $breakpoint-mobile-landscape: 640px;
 $breakpoint-mobile: 414px;
 $breakpoint-mobile-small: 360px;

 $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 array:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 screenMap: [
     {
         name: 'desktop',
         min: 1100
     },
     {
         name: 'tablet',
         max: 1099
     },
     {
         name: 'strict-tablet',
         max: 1099,
         min: 993
     },
     {
         name: 'tablet-small',
         max: 992
     },
     {
         name: 'strict-tablet-small',
         max: 992,
         min: 641
     },
     {
         name: 'mobile-big',
         max: 767
     },
     {
         name: 'strict-mobile-big',
         max: 767,
         min: 641,
     },
     {
         name: 'mobile-landscape',
         max: 640
     },
     {
         name: 'strict-mobile-landscape',
         max: 640,
         min: 415
     },
     {
         name: 'mobile',
         max: 414
     },
     {
         name: 'mobile-small',
         max: 360
     }
 ]

You can override these breakpoints via scss variables.

Overriding via js Module Config for a Theme

This config has the highest priority:

{% import '@OroAsset/Asset.html.twig' as Asset %}
{{ Asset.js_modules_config({
        'oroui/js/viewport-manager': {
            screenMap: [
                {
                    name: 'tablet',
                    max: 640
                },
                {
                    name: 'desktop',
                    max: 1260
                },
                {
                    name: 'desktop-hd',
                    max: 1920
                }
            ]
        }
}); }}

To delete an inherited screen type, set skip: true for a specific screen name:

{% import '@OroAsset/Asset.html.twig' as Asset %}
{{ Asset.js_modules_config({
        'oroui/js/viewport-manager': {
            screenMap: [
                {
                    name: 'tablet',
                    skip: true
                },
                {
                    name: 'desktop',
                    max: 1260
                }
            ]
        }
    }
}); }}

Screen Types

A screen type is used to describe a viewport size range; it provides an opportunity to describe the parameters like name, max size of the screen type.

For example:

1
2
3
4
 {
     name: 'screen-type',
     max: 1024
 }

name

Type: String

Set name for screen type.

max

Type: Number

Set max viewport size for screen type

min

Type: Number

Set min viewport size for screen type

Events

viewport:change

Event Data: Object

Data Structure:

  • type: Object

Current viewport screen type.

  • width: Number

Current viewport width.