libs/cq/gui/components/authoring/editors/clientlibs/core/js/

Namespace: responsive

Granite.author. responsive

Namespace of the Responsive mode

Also contains utilities

Source:
responsive/responsive.js

Classes

Layer
Overlay
Toolbar

Namespaces

EditableActions

Members

<static> DEFAULT_COLUMN_CSS_CLASS :String

Css class of the responsive column elements (children of responsive grid)

Type:
Source:
responsive/responsive.js

<static> DEFAULT_CSS_PREFIX :String

Css prefix for the responsive grid

Type:
Source:
responsive/responsive.js

<static> NN_RESPONSIVE :String

JCR node name for the responsive config

Type:
Source:
responsive/responsive.js

Methods

<static> getBreakpoint(name)

gets a breakpoint config by name

Parameters:
Name Type Description
name
Source:
responsive/responsive.js
Returns:
Type
Object

<static> getBreakpoints()

Returns all set breakpoints on the page

Source:
responsive/responsive.js
Returns:
Type
Object

<static> getCurrentBreakpoint()

Returns the name of the currently active breakpoint

Source:
responsive/responsive.js
Returns:
Type
String

<static> getCurrentResponsiveBehavior(editable)

Returns the currently ACTIVE behavior for an editable for the currently active breakpoint

Parameters:
Name Type Description
editable
Source:
responsive/responsive.js
Returns:
Type
String

<static> getCurrentResponsiveConfig(editable)

Returns the currently ACTIVE configuration for an editable for the currently active breakpoint

Parameters:
Name Type Description
editable
Source:
responsive/responsive.js
Returns:
Type
Object

<static> getDeviceBreakpoint(deviceWidth)

gets the breakpoint for a given device width

Parameters:
Name Type Description
deviceWidth
Source:
responsive/responsive.js
Returns:
Type
Object

<static> getGridWidth(gridEditable)

Parameters:
Name Type Description
gridEditable
Source:
responsive/responsive.js
Returns:

amount of grid cells for the current breakpoint

Type
number

<static> getHiddenChildren(editable, breakpoint)

returns a list of hidden children of the responsive grid component

Parameters:
Name Type Description
editable
breakpoint
Source:
responsive/responsive.js
Returns:
Type
Array

<static> getOrderedBreakpoints()

Source:
responsive/responsive.js
Returns:

ordered list of breakpoint names (by width)

Type
Array.String

<static> getResponsiveConfig(editable, breakpointName)

Returns the selected configuration for a given editable

Parameters:
Name Type Description
editable Granite.author.Editable

Editable from which to extract a responsive configuration
breakpointName string

Name of the breakpoint
Source:
responsive/responsive.js
Returns:
Type
Object

<static> getResponsiveCssClasses(editable)

Returns the list of CSS classes which will decorate a component in a responsive grid

Parameters:
Name Type Description
editable Granite.author.Editable

Editable to be decorated
Deprecated:
  • Yes
Source:
responsive/responsive.js
Returns:
Type
string | Array.<string>

<static> isInResponsiveGrid(editable)

function to test if a editable is located in an responsive grid

Parameters:
Name Type Description
editable
Source:
responsive/responsive.js
Returns:
Type
boolean

<static> isResponsive(editable)

Is the given Editable a responsive component

Parameters:
Name Type Description
editable Granite.author.Editable
Source:
responsive/responsive.js
Returns:
Type
boolean

<static> isResponsiveGrid(editable)

function to test if an editable is a responsive grid

Parameters:
Name Type Description
editable
Source:
responsive/responsive.js
Returns:
Type
boolean

<static> refresh(editable)

Refreshes the given editable and its DOM with its responsive column attributes

Called by the responsive grid component afterchildinsert property

Parameters:
Name Type Description
editable Granite.author.Editable
Source:
responsive/responsive.js

<static> setCurrentBreakpoint(breakpoint)

Sets a breakpoint to be active

Parameters:
Name Type Description
breakpoint

name to be activated
Source:
responsive/responsive.js

<static> setDeviceBreakpoint(deviceWidth)

Sets a breakpoint active based on the passed width of the device

Parameters:
Name Type Description
deviceWidth
Source:
responsive/responsive.js

<static> updateDom(editable, newDomElement)

Updates the DOM for the given editable with the latest responsive attributes

Parameters:
Name Type Description
editable Granite.author.Editable

Editable representing the responsive column to be updated
newDomElement HTMLElement

Latest version of the column DOM element
Source:
responsive/responsive.js