Overview

Left Panels are part of the LeftMenu. However, they are completely stand-alone components, which are only instantiated by the Left Menu. They take full control over their role to list WebForce Elements & Add-Ons, and also make them available for adding on Page.
Elements are all core SK objects (Text & Image, Form, Snippet, Section Group, etc.). Elements of certain type may vary in their content - for example, we can have Text & Image object with text & image as default content, or a Text & Image with Call to Action button, or Text & Image with just a horizontal line as default content, and so on. Elements Grid is based on ThumbsGrid and renders all elements within a Category.
Add-Ons, on the other hand, are all currently installed applications.
A single element instance may exist in both categories (Elements & Add-Ons).

 

Methods

 

Panel - SK.UI.LeftMenu.Panel

  • Panel (class) responsible for creating a new Left Panel. Panels manage Categories
  • Panel Instance (object) instance of the Panel, represents a single Left Panel (Elements, Add-Ons, Applications Settings)

 

Name Description Parameters Returns
inject Inject the root DOM node into the given placeholder. Default position is "bottom". DOMElement (Placeholder element)
String (Position of injecting)		 -
refresh Refreshes content (re-inits ThumbsGrid getting the data from the registry) - -

 

Category Registry - SK.UI.LeftMenu.Categories

  • Category (class) responsible for creating a new Category. Categories group Elements (Text & Image, Section Group, etc.) and list them into a Collapsible Section
  • Category Instance (object) instance of Category, represents group of Elements. Categories are "Text & Images", "Layouts", "Tables & Lists", etc.
  • Categories (object) registry, collection of all available Left Panel Categories

 

Name Description Parameters Returns
set Registers new Category String (ID)
Object (Meta)		 -
get Returns Category by ID String (ID) Object (Meta)
setMultiple Registers multiple Categories Object { id: meta } -
getByPanel Returns collection of Categories bound to a certain Panel String (Panel ID) Object { id: meta }

 

Element Registry - SK.UI.LeftMenu.Elements

  • Element (class) responsible for creating new element that can be added to Page
  • Element Instance (object) instance of Element, represents a single element from certain type (Text & Image, HTML Snippet, Application, etc.) that can be added on Page
  • Elements (object) registry, collection of all available Left Panel Elements

 

Name Description Parameters Returns
set Registers new Element String (ID)
Object (Meta)		 -
get Returns Element by ID String (ID) Object (Meta)
setMultiple Registers multiple Elements Object { id: meta } -
getByCategory Returns collection of Elements bound to a certain Category String (Category ID) Object { id: meta }

 

Examples

 

Create element in the left menu panel and refer it to the panel constructor.

 

SK.Singletons.left_menu.addItem({
   id: 'test',
   item_options: {
      caption: 'My Element'
   },
   order: 2,
   panel: {
      source: SK.UI.LeftMenu.Panel
   }
});

 

Create element in the left menu panel based on own constuctor.

 

SK.Singletons.left_menu.addItem({
   id: 'test',
   item_options: {
      caption: 'My Element',
      tooltip: 'This is My Element tooltip'
   },
   order: 2,
   panel: {
      source: new Class({
         inject : function ( placeholder ) {
            placeholder.grab( this.createContent() );
         },
         createContent : function () {
            return new Element('div', { html : '<h1>Hello, Panels!</h1>' });
         } 
      })
   }
});

 

Create category in the panel.

 

SK.UI.LeftMenu.Categories.set('test_category', {
   label          : 'Test Category',
   panels         : ['test'],
   grid_options   : {
      columns        : 2
   },
   order          : 1
});

 

Create element in the category. The property "categories" can accept multiple category identificators.

 

SK.UI.LeftMenu.Elements.set('test_element', {
   obj_id         : 111,
   icon_offset    : { x: '50%', y: '-60px' },
   label          : 'Text',
   tooltip        : 'Tooltip of the test_element',
   properties     : {},
   categories     : ['test_category'],
   order          : 10
});