Documentation
Menu Panel
Description
This module allows users to create multiple double state buttons that can be organized in a hierarchical structure.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Menu Items List | Id – Unique name identifying this particular button element. Used in events and commands. Title (optional) – Text that is to be displayed inside the button. Parent Id (optional) – Id of the parent element. If provided, this button will not be displayed by default, unless the parent element has the "Is Expanded" property enabled. Is Expanded – After selecting this property, elements that are relative to this element will be shown by default. Is Selected – Determines whether this button should be selected by default. Is Disabled – Determines whether this button should be disabled by default. |
| Horizontal Alignment | This property is used to select the initial horizontal position of the module. |
| Auto Expand | After selecting this property, the module will automatically expand and contract elements upon clicking to provide access to all available elements. |
| Disable | Allows disabling the module so that the user is not able to interact with it. |
Note: "Id" and "Parent Id" values can contain only alphanumerical characters with no spaces allowed.
Supported commands
| Command name | Params | Description |
|---|---|---|
| show | --- | Shows the addon. |
| hide | --- | Hides the addon. |
| disable | item (optional) | Disables a particular item if provided, otherwise disables the whole module. |
| enable | item (optional) | Enables a particular item if provided, otherwise enables the whole module (in this case, the element that was disabled before, will not be enabled) |
| select | item | Mark item as selected. |
| deselect | item | Mark item as deselected. |
| setAlignment | horizontal,vertical | Places the module next to a page border. Available parameters for "horizontal" are: "left", "center" and "right", for "vertical": "top", "center" and "bottom". |
| expand | item | Use this command to display children elements of the selected item (if there are any). |
| contract | item | Use this command to hide children elements of the selected item (if there are any). |
| toggleExpand | item | If this element has children elements and they are expanded, they will be contracted. If they are contracted, you will expand them. |
Advanced Connector integration
Example Advanced Connector code:
EVENTSTART
Name:PageLoaded
SCRIPTSTART
presenter.playerController.getModule('MenuPanel1').expand(‘1a’);
SCRIPTEND
EVENTEND
EVENTSTART
Source:MenuPanel1
SCRIPTSTART
if(event.value == '1'){
presenter.playerController.getModule('MenuPanel1').expand(event.item);
}else{
presenter.playerController.getModule('MenuPanel1').contract(event.item);
}
SCRIPTEND
EVENTEND
Events
Menu Panel sends ValueChanged type events to Event Bus when either user selects or deselects it’s elements.
| Field name | Description |
|---|---|
| Item | Id of the clicked element. |
| Value | 1 for selection, 0 for deselection |
| Score | N/A |
CSS Classes
| Class name | Description |
|---|---|
| menu-panel-wrapper | DIV surrounding all other elements. |
| menu-panel-item | Basic element class |
| menu-panel-item selected/disabled |
menu-panel-item element gets also a "selected" class when selected and analogically for disabled |
| children | DIV containing menu-panel-item elements that are children to an element above |
Sample presentation styles
.MenuPanel_dev_Example{
}
.MenuPanel_dev_Example .menu-panel-wrapper{
background: #e3e2df;
}
.MenuPanel_dev_Example .disabled{
opacity: 0.5;
cursor: default;
}
.MenuPanel_dev_Example .menu-panel-item{
display: inline-block;
border: 2px solid #c4d2c5;
border-radius: 10px;
background: #deddcd;
background-size: 288px 48px;
margin: 10px 10px 0px 10px;
width: 80px;
height: 20px;
padding: 8px;
}
.MenuPanel_dev_Example .menu-panel-item:hover{
border: 2px solid #abd2ae;
}
.MenuPanel_dev_Example .menu-panel-item.selected{
border: 2px solid #7fd285;
}
.MenuPanel_dev_Example .menu-panel-item img{
position: absolute;
width: 20px;
height: 20px;
right: 20px;
}
.MenuPanel_dev_Example .children{
position: absolute;
background: #e8edf1;
width: 100px;
padding: 0 10px 10px 10px;
margin-top: -50px;
-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
}
.MenuPanel_dev_Example .menu-panel-wrapper.horizontal-left .children{
left: 70px;
}
.MenuPanel_dev_Example .menu-panel-wrapper.horizontal-right .children{
left: auto;
right: 68px;
}
.MenuPanel_dev_Example .children .menu-panel-item{
margin: 10px 0px 0px 0px;
}
Demo presentation
Demo presentation contains examples of how to use the Menu Panel addon.