Overview

The Left Menu is part of the Admin interface. It contains the most of functionality for manipulation with the site elements, applications, settings and etc. Some of the options are:

  • adding new content ("Elements")
  • configuring site & settings ("Site Settings")

The Left Menu is fully configurable from the outworld. Through a client-side API, 3rd party developers & resellers are able to configure it (add custom buttons, remove default buttons).

 

 

Methods

Name Description Parameters Returns
configure Configures (& re-draws) Menu. Allows to add multiple items of this type as a hash: Item Properties Object (of menu items' hashes) -
getConfiguration Returns a copy of Menu configuration - Object (of menu items' hashes)
addItem Adds new menu item (in case the Menu has not yet been injected in DOM, only registers the item) Object (properties) -
removeItem Removes existing menu item (in case the Menu has not yet been injected in DOM - just removes it from the configuration) String (Item ID) -
expand Expands (activates) menu item (forces "click" event) with the specified delay String (Item ID)
Number (Delay)		 -
collapse Collapses currently active Panel Number (Delay) -
show Shows the Menu - -
hide Hides the Menu - -
enable Enables the Menu: sets "enabled" visibility state, all enabled menu items are clickable - -
disable Disables the Menu: sets "disabled" visibility state, all menu items are not clickable - -
enableItem Enables menu item (visually & functionally) String (Item ID) -
disableItem Disables menu item (visually & functionally) String (Item ID) -
showItem Shows menu item String (Item ID) -
hideItem Hides menu item String (Item ID) -

 

Configuration

An array whose items are objects (hash) and has the following:

 

Item Properties

  • id - Property of the object. It is unique string.
  • item_options - Object that contains hash of parameters that will be passed to the handler constructor when creating new instance
    • caption - String that specifies a button caption
    • tooltip - Text that will be set in the tooltip
    • class - Class name of the button root container
    • icon_url - URL to an icon or a sprite image
    • icon_offset Object that properties scecifies left and top sprite offsets ({ x:0, y:0 })
    • handler - Class, responsible for creating the new instance (by default it is SK.UI.LeftMenu.Button)
  • order - Sets an order of the item in the menu
  • panel - Optional object with the following properties:
    • source - Among the followings:
      • String - An iframe with the following url string as "src" is created
      • Class - A new object of that class will be instantiated
      • Object - Will be used as the Panel (currently not supported)
      • Element - DOM element to be injected into the root Panel container (currently not supported)
    • width - CSS width of the root Panel container
  • onclick - Callback function that should be executed on click (optional)

 

Default Configuration

Element ID Caption Order
elements Elements 0
addons Add-Ons 1
pages Pages 2
customize Customize 3
design Change Design 4
app-settings Applications Settings 5
site-settings Site Settings 6
account My Account 7
logout Logout 8

 

NOTE: If you want to plug your own element, you should reference its "order" property to the desired position and the other elements will reposition to it.

 

Examples

Remove an element from the menu - to remove an element, we should pass it's id to the "removeItem" method.

SK.Singletons.left_menu.removeItem('item_id');

 

Insert custom Left Menu element that should remove "Channge Design" and "Customize" elements and will be at position #4.

// remove Change Design & Customize
SK.Singletons.left_menu.removeItem('design');
SK.Singletons.left_menu.removeItem('customize');
SK.Singletons.left_menu.addItem({
   id             : 'my-element',
   item_options   : {
      caption        : 'My Element',
      tooltip        : 'My Element tooltip',
      'class'        : 'lm-item-myelement'
   },
   order          : 4,
   panel          : {
      source         : SK.UI.LeftMenu.Panel
   },
   onclick        : function ( button_id ) {
         console.log( 'Hello from button with id ' + button_id );
      }
});