Important

You are browsing the documentation for version 3.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. 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. 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, the settings for the list of screen types has the following parameters:

 1 screenMap: [
 2     {
 3         name: 'desktop',
 4         max: Infinity
 5     },
 6     {
 7         name: 'tablet',
 8         max: 1099
 9     },
10     {
11         name: 'tablet-small',
12         max: 992
13     },
14     {
15         name: 'mobile-landscape',
16         max: 640
17     },
18     {
19         name: 'mobile',
20         max: 414
21     },
22 ]

You can override this config for a specific theme.

require({
 config: {
     'oroui/js/viewport-manager': {
            screenMap: [
                {
                    name: 'tablet',
                    skip: true
                },
                {
                    name: 'desktop',
                    max: 1260
                }
            ]
        }
    }
});

Screen Types

Screen types are used to describe a viewport size range. It provides an opportunity to describe the parameters like name, max size of screen type. For example:

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

name

Type: String

Set name for screen type.

max

Type: Number

Set max viewport size for screen type

min

Type: Number

Default: Infinity

Set max viewport size for screen type

Events

viewport:change

Event Data: Object

Data Structure:

  • type: Object

Current viewport screen type.

  • width: Number

Current viewport width.