Iceberg - globules-io/OGX.JS GitHub Wiki

OGX.Iceberg represents a single container containing up to 5 placeholders; one placeholder (main) has the same size as its container, and the other placeholders all have a smaller size. Swiping left, right, up or down, depending on your config, slides the main view to reveal an hidden container.

Iceberg with 80% left and 150px right

Stack

Extends

 Uxi, Touch, Placeholder

OML

 {"selector:Iceberg":{CONFIG}}

Create

 let config = {
      el:_SELECTOR_, 
      left:_WIDTH_ or _OBJECT_, //Optional
      top:_HEIGHT_ or _OBJECT_, //Optional
      main:_OBJECT_, //Optional
      right:_WIDTH_ or _OBJECT_, //Optional
      bottom:_HEIGHT_ or _OBJECT_, //Optional
 };

As an OML node

 OGX.OML.render(this, [node]);

On the fly, from an Object extending Uxi

 let iceberg = this.create('Iceberg', config);

Independently

 let iceberg = OGX.Object.create('Iceberg', config);

If you wish to create simple panels and deal with adding content later, simply pass a percentage or a width in pixels -('40%' or '40px') for left or/and right. The main prorperty is not required.

  let config = {..., left:'50%', right:'100px'};

If you wish to create panels and add html content, then left and/or right must be defined as follow:

  let config = {..., left:{width:'50%', html:'<span>My Content</span>' ...}};

If you use HTML templates and your templates are stored in the templater, you can do

  let config = {..., left:{width:'50%', html:OGX.Templater.getTemplate('whatever') ...}};

If you wish to auto instantiate objects within the components, pass an OML node, such as

 let config = {
      el:_SELECTOR_, 
      left:{width:"50%", "node:OML":{"default:Views.MyView":{template:"SomeTemplate"}}},      
      main:{"node:OML":{"default:Views.MyView":{template:"SomeTemplate"}}},
      right:{width:"200px", "node:OML":{"default:Views.MyView":{html:'<div class="myclass"></div>'}}}
 };

 let iceberg = this.create('Iceberg', config);

Events

  OGX.Iceberg.READY 
  OGX.Iceberg.SWIPE
  OGX.Iceberg.SWIPE_LEFT 
  OGX.Iceberg.SWIPE_RIGHT     
  OGX.Iceberg.SWIPE_UP 
  OGX.Iceberg.SWIPE_DOWN
  OGX.Iceberg.RESTORE

Destroy

 iceberg.destroy();

Note that calling destroy will also remove/destroy any view from the app if the component was used to instantiate views.

⚠️ **GitHub.com Fallback** ⚠️