Module: alfresco/layout/Twister

alfresco/layout/Twister

This widget provides the means to dynamically reveal and hide its contents by clicking on its label. The open or closed state is indicated by a "twister" icon. The widget can be configured to render any other widget model as its contents. The twister can be configured to be intially open or closed by setting the initiallyOpen attribute to true (for open) or false (for closed).

It is also possible for the open or closed state to be stored to a users personal preferences. This can be done by configuring a preferenceName attribute and ensuring that the PreferenceService (or equivilant) is included on the page. A single preferenceName can be shared between multiple widgets but this will result in all those twisters being in the same state when the page loads. Using user preferences will override whatever initiallyOpen attribute has been configured.

It is also possible to configure an optional headingLevel to improve the overall accessibility of the page containing the twisters. The level provided should be a number between 1 and 6 and will control the HTML element that is used for the twister label (e.g. 1 will render an H1 element, etc).

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

Examples

Example twister that is initially closed

{
  name: "alfresco/layout/Twister",
  config: {
    label: "Initially Closed Twister",
    headingLevel: 3,
    initiallyOpen: false,
    widgets: [
      {
        id: "LOGO1",
        name: "alfresco/logo/Logo"
      }
    ]
  }
}

Example twister that uses user preferences to control the open/closed state

{
  name: "alfresco/layout/Twister",
  config: {
    label: "Twister State Based on User Preference",
    preferenceName: "Twister1",
    widgets: [
      {
        id: "LOGO1",
        name: "alfresco/logo/Logo"
      }
    ]
  }
}

Extends

Mixes In

Members

CLASS_CLOSED :string

The CSS class applied when the twister is closed (and removed when opened).
Type:
  • string
Default Value:
  • "alfresco-layout-Twister--closed"
Source:

CLASS_OPEN :string

The CSS class applied when the twister is opened (and removed when closed).
Type:
  • string
Default Value:
  • "alfresco-layout-Twister--open"
Source:

cssRequirements :object[]

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

headingLevel :number

Should the generated twister use a heading or div for it's heading?
Type:
  • number
Default Value:
  • null
Source:

initiallyOpen :boolean

The initial open/closed state of the twister. This value could be overridden by a previously stored user preference if a preferenceName is configured and the PreferenceService is included on the page.
Type:
  • boolean
Default Value:
  • true
Source:

preferenceName :string

The preference name to use for storing and retrieving the users preferred open/closed state for this twister. In order for this preference to be used it will also be necessary to ensure that the PreferenceService is included on the page.
Type:
  • string
Default Value:
  • null
Source:

preferencePrefix :string

This is the prefix that will be applied to all preferences. It can be optionally configured to a different value but this is typically not necessary. One possible reason to change the prefix would be to allow user preferences to be split across different client implementations.
Type:
  • string
Default Value:
  • "org.alfresco.share.twisters."
Source:

templateString :String

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

width :string

The width to make the twister. Units such as "px" should be included. By default all available horizontal width will be used.
Type:
  • string
Default Value:
  • "auto"
Source:

Methods

allWidgetsProcessed(widgets)

Iterates over the processed widgets and adds each one to the content node.
Parameters:
Name Type Description
widgets object[] The widgets that were created.
Source:

createTwister()

Creates a "disclosure twister" UI control from existing mark-up.
Source:

onSetTwistState(value)

Parameters:
Name Type Description
value boolean Whether or not the twister should be opened or closed.
Source:

onTwist(evt)

Handles requests to twist the twister open or closed.
Parameters:
Name Type Description
evt object The click or keyboard event triggering the twist
Source:

postCreate()

Processes any widgets defined in the configuration for this instance.
Source:

postMixInProperties()

Source: