Module: alfresco/layout/HorizontalWidgets

alfresco/layout/HorizontalWidgets

This should be used to lay widgets out in a horizontal line. If no specific widths are requested by the child widgets then each will be allotted an equal amount of the available space. However, it is possible for each widget to request a width in either pixels or percentage (and it is possible to mix and match). Pixel dimensions will be allocated first and the percentages will be of the remaining available width after fixed sizes are deducted. Any widgets that do not request a specific width will be allocated an equal amount of whatever is left.

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: It is not possible to use this module to control the layout of controls within a form. If you wish to create a form containing horizontally aligned controls then you should use the ControlRow widget

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

Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Example

Sample usage:

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

Extends

Mixes In

Members

_hasInitialDimensions :boolean

Indicates whether or not the widget has dimensions to work with when created. This mainly refers to the available width and when there is no width to consume then is not "safe" to create child widgets.
Type:
  • boolean
Since:
  • 1.0.46
Default Value:
  • false
Source:

baseClass :string

The CSS class (or a space separated list of classes) to include in the DOM node.
Type:
  • string
Default Value:
  • "horizontal-widgets"
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/HorizontalWidgets.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:

widgetWidth :string

This will be set to a percentage value such that each widget displayed has an equal share of page width.
Type:
  • string
Default Value:
  • null
Source:

Methods

allWidgetsProcessed(widgets)

Extends the inherited function to set up subscriptions for the visibilityRuleTopics that are returned by calling getVisibilityRuleTopics on the first pass through the doWidthProcessing function. The subscriptions need to be created after the widgets have been created in order that their visibility is adjusted before the onResize function that is bound to is called.
Parameters:
Name Type Description
widgets object[] The widgets that have been created
Since:
  • 1.0.33
Source:

createWidget(config, domNode, callback, callbackScope, index)

Parameters:
Name Type Description
config object The configuration for the widget
domNode element The DOM node to attach the widget to
callback function A function to call once the widget has been instantiated
callbackScope object The scope with which to call the callback
index number The index of the widget to create (this will effect it's location in the _processedWidgets array)
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

doWidthProcessing(widgets, firstPass)

Calculates the widths of each widget based on the requested sizes defined in either pixels or percentage. The pixel widths take precedence and the percentages are calculated as the percentage of whatever remains. If a widget has not requested a width then it will get an even share of whatever horizontal space remains.
Parameters:
Name Type Description
widgets array The widgets or widget configurations to process the widths for
firstPass boolean Indicates whether this is the first pass (this determines whether to look at visibility rule configuration or DOM node visibility).
Source:

onResize(evt)

Updates the sizes of each widget when the window is resized.
Parameters:
Name Type Description
evt object The resize event.
Source:

postCreate()

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