Module: alfresco/layout/AlfStackContainer

alfresco/layout/AlfStackContainer

This layout widget provides the ability to display stacked content a little like the pages (panes) of a book and where only one pane will be shown at a time. Panes can be dynamically added, selected and removed as required. Unless explicitly requested, only the content of the intially selected pane will be rendered - the content of the other panes will be rendered as they are selected. The height of the widget will grow and shrink based on the content of each pane by default unless the height is explicitly set to a non-percentage value.

If you want the widget to respond to publications to dynamically add, [select]{@link module:alfresco/layout/AlfStackContainer#paneSelectionTopic} or delete panes then you will need to configure the topics to subscribe to. Subscriptions will be made at the configured pubSubScope of the widget.

Pane selection can also be made by configuring a paneSelectionHashVar. When a hash changed event occurs and the hash contains the configured variable, should it match the title of one of the panes in the AlfStackContainer, that pane will be selected.

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

Examples

Basic configuration (first pane will be selected):

{
   name: "alfresco/layout/AlfStackContainer",
   config: {
      widgets: [
         {
            id: "PANE1",
            name: "alfresco/logo/Logo",
            title: "Pane with Alfresco Logo",
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "PANE2",
            name: "alfresco/logo/Logo",
            title: "Pane with Surf Logo",
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Use "delayProcessing" to force second pane to render before selection:

{
   name: "alfresco/layout/AlfStackContainer",
   config: {
      widgets: [
         {
            id: "PANE1",
            name: "alfresco/logo/Logo",
            title: "Pane with Alfresco Logo",
            selected: true,
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "PANE2",
            name: "alfresco/logo/Logo",
            title: "Pane with Surf Logo",
            delayProcessing: false,
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Use "selected" make the second pane initially selected:

{
   name: "alfresco/layout/AlfStackContainer",
   config: {
      widgets: [
         {
            id: "PANE1",
            name: "alfresco/logo/Logo",
            title: "Pane with Alfresco Logo",
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "PANE2",
            name: "alfresco/logo/Logo",
            title: "Pane with Surf Logo",
            selected: true,
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Define topics to dynamically manipulate panes:

{
   name: "alfresco/layout/AlfStackContainer",
   config: {
      paneSelectionTopic: "SELECT_PANE_TOPIC",
      paneAdditionTopic: "ADD_PANE_TOPIC",
      paneDeletionTopic: "DELETE_PANE_TOPIC",
      widgets: [
         {
            id: "PANE1",
            name: "alfresco/logo/Logo",
            title: "Pane with Alfresco Logo",
            selected
            config: {
               logoClasses: "alfresco-logo-only"
            }
         }
      ]
   }
}

Example publication to add a new pane (based on previous example topic):

{
   publishTopic: "ADD_PANE_TOPIC",
   publishPayload: {
      widgets: [
         {
            name: "alfresco/html/Label",
            title: "New",
            closable: true,
            selected: true,
            config: {
               label: "This pane was dynamically added"
            }
         }
      ]
   }
}

Define a paneSelectionHashVar:

{
   name: "alfresco/layout/AlfStackContainer",
   config: {
      paneSelectionHashVar: "view",
      widgets: [
         {
            id: "PANE1",
            name: "alfresco/logo/Logo",
            title: "Pane1",
            selected
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "PANE2",
            name: "alfresco/logo/Logo",
            title: "Pane2",
            selected: true,
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}
<p>If the hash was changed to #view=Pane2, PANE2 will be displayed</p>

Extends

Mixes In

Members

<private> _defaultPaneTitle :object

Variable to record the title of the selected pane at initialisation
Type:
  • object
Default Value:
  • null
Source:

doLayout :Boolean

Should StackContainer layout mathematics be invoked?
Type:
  • Boolean
Default Value:
  • false
Source:

height :string

Height of the finished AlfStackContainer as any recognised css size with units
Type:
  • string
Default Value:
  • "100%"
Source:

paneAdditionTopic :string

The topic whose publication should trigger the addition of a pane
Type:
  • string
Default Value:
  • null
Source:

paneDeletionTopic :string

The topic whose publication should trigger the deletion of a pane
Type:
  • string
Default Value:
  • null
Source:

paneSelectionHashVar :string

If this optional value is provided, a change to the hash of this variable will update the pane selection
Type:
  • string
Default Value:
  • null
Source:

paneSelectionTopic :string

The topic whose publication should trigger the selection of a pane
Type:
  • string
Default Value:
  • null
Source:

stackContainerWidget :object

This will hold a reference to the stack container widget.
Type:
  • object
Default Value:
  • null
Source:

templateString :string

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

width :string

Width of the finished AlfStackContainer as any recognised css size with units
Type:
  • string
Default Value:
  • "100%"
Source:

<inner> _delayedProcessingWidgets :array

This array is used to store widgets for delayed processing
Type:
  • array
Source:

Methods

<private> _paneChanged(name, oldPane, newPane)

Event triggered when the selected pane changes. Used to load delayed processing widgets.
Parameters:
Name Type Description
name string
oldPane object
newPane object
Source:

addWidget(widget, index)

This function adds widgets to the StackContainer widget
Parameters:
Name Type Argument Description
widget object The widget to add
index integer <optional>
 The index of the required pane position
Source:

onHashChanged(payload)

This function is called whenever the browser URL hash fragment is changed
Parameters:
Name Type Description
payload object
Source:

paneAdd(payload)

This function adds a new pane.
Parameters:
Name Type Description
payload object Details of the pane to add
Source:

paneDelete(payload)

This function deletes a pane based upon parameter "payload.index" or "payload.id" or "payload.title".
Parameters:
Name Type Description
payload object Details of the pane to delete
Source:

paneSelect(payload)

This function selects a pane based upon parameter "payload.index" or "payload.id" or "payload.title".
Parameters:
Name Type Description
payload object Details of the pane to select
Source:

postCreate()

Source: