Module: alfresco/layout/CenteredWidgets

alfresco/layout/CenteredWidgets

This should be used to arrange widgets horizontally and centred. For centre alignment to work each widget contained within this widget must declare a widthCalc value which is used to calculate the size of the container and therefore the size of the margins required.

It is also possible to define gaps between widgets by using the widgetMarginLeft and widgetMarginRight attributes (but you should bear in mind that if using both attributes then the gap between 2 widgets will be the combination of both values).

PLEASE NOTE: Resize operations are not currently handled - this will be addressed in the future

{
   "name": "alfresco/layout/CenteredWidgets",
   "config": {
      "widgetMarginLeft": 10,
      "widgetMarginRight": 10
      "widgets": [
         {
            "name": "alfresco/logo/Logo",
            "widthCalc" 300
         },
         {
            "name": "alfresco/logo/Logo",
            "widthCalc" 50
         }
      ]
   }
}

Author:
  • Richard Smith
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Extends

Members

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/CenteredWidgets.css"}]
Source:

templateString :string

The HTML template to use for the widget.
Type:
  • string
Source:

widgetMarginLeft :number

This is the size of margin (in pixels) that will appear to the left of every widget added.
Type:
  • number
Default Value:
  • null
Source:

widgetMarginRight :number

This is the size of margin (in pixels) that will appear to the right of every widget added.
Type:
  • number
Default Value:
  • null
Source:

Methods

allWidgetsProcessed()

Iterate over the created widgets Work out the total width and max height and then set those as styles on layout elements
Source:

createWidgetDomNode(widget, rootNode, rootClassName) → {element}

This overrides the default implementation to ensure that each each child widget added has the appropriate CSS classes applied such that they appear horizontally. It also sets the width of each widget appropriately (either based on the default generated width which is an equal percentage assigned to each child widget) or the specific width configured for the widget.
Parameters:
Name Type Description
widget object The widget definition to create the DOM node for
rootNode element The DOM node to create the new DOM node as a child of
rootClassName string A string containing one or more space separated CSS classes to set on the DOM node
Source:
Returns:
A new DOM node for the widget to be attached to
Type
element

onResize(evt)

Parameters:
Name Type Description
evt object The resize event.
Source:

overallHeight()

Calculate the overall height of a node
Source:

overallWidth()

Calculate the overall width of a node
Source:

postCreate()

Sets up the default width to be allocated to each child widget to be added.
Source: