Login Register

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.