Viewport Manager

Viewport manager contains a collection of available screen types that can be used on the theme. Also responsible for triggering event viewport:change through mediator, when change the type of screen. Possibility subscribe to event viewport:change in view and create a logic based on the viewport changes. For example DOM Relocation View already implemented functionality based by Viewport Manager.

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 will 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 inherited screen type need 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

Screen type used for describe some viewport size range. It provides an opportunity to describe the parameters like name, max size of 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.