MListView

MListView ⇐ Trait#

The ListView is a trait that adds the capabilities to a View to manage a list of children (named items).

Kind: global mixin
Extends: Trait
Mixes: MFocus
Properties

Example

// Full declarative ListView
$View.declare("FullDeclarativeListView", {
  traits: [$MListView],

  properties: {
     prefix: "myItem",
     "myItem#<i>": {
         class: $FullDeclarativeListViewItem, // should inherit from MListViewItem to have access to its index and previous item reference
         width: ({parent}) => parent.width,
         height: ({parent}) => parent.height,
         x: ({index}) => index * 100
     }
  },

  states: {
     "myItem#<i>": {
         translateX: ({index}) => -index * 100
     }
  },

  transitions: {
     "myItem#<i>": {
         translateX: {duration: 250}
     }
  }
});

// Item factory ListView
$View.declare("ItemFactoryListView", {
  traits: [$MListView],
  statics: {
     declare: function(classPath, definition) {
         var parameterizedDefinition = $MListView.$$methods.declare(definition);
         var TheClass = $View.declare.apply(this, arguments);
         Object.assign(TheClass.prototype, parameterizedDefinition);
         return TheClass;
     }
  },
  methods: {
     itemFactory: function (itemData, index, dataCollection, options) {
         return {
             properties: {
                 class: $ItemFactoryListViewItem, // should inherits from MListViewItem to have access to its index and previous item reference
                 width: ({parent}) => parent.width,
                 height: ({parent}) => parent.height,
                 x: ({index}) => index * 100
             },
             states: {
                 translateX: () => -index * 100
             },
             transitions: {
                 translateX: {duration: 250}
             }
         };
      }
    }
});

• MListView ⇐ Trait
  • .declare(definition) ⇒ Object
  • ._buildAfterRenderingContext()
  • .setData(data, [options])
  • .itemFactory(itemData, index, dataCollection, options) ⇒ * | Object
  • .itemDestructor(index)
  • .selectItem(index, [options]) ⇒ boolean
  • .unselectItem(index, [options])
  • .getItem(index) ⇒ Item
  • .getItemView(index) ⇒ View
  • .getNextItem() ⇒ *
  • .next(options) ⇒ boolean
  • .getPreviousItem() ⇒ *
  • .previous(options) ⇒ boolean
  • .getNbOfItems() ⇒ number
  • .getItemIdFromIndex(itemIndex) ⇒ String
  • ._getChildToFocus()
  • ._onFocusChanged()
  • ._callFactory(options, itemData, index, dataCollection)

declare(definition) ⇒ Object#

Function to call before view declaration to avoid parametrized data to be computed by real children property declaration (see example in Trait description)

Kind: instance method of MListView
Returns: Object - Object containing parametrized children definition (if exist) to merge to prototype

_buildAfterRenderingContext()#

Keep the definition of the parametrized definitions into separates variables

Kind: instance method of MListView

setData(data, [options])#

Set the data

IMPORTANT setItems remove previously created items, as well as their states & transitions

Kind: instance method of MListView

itemFactory(itemData, index, dataCollection, options) ⇒ * | Object#

Build the child view description from item data You must implement this method.

Kind: instance method of MListView
Returns: * | Object - Object definition for child view

itemDestructor(index)#

Extension point to allow to remove all custom things done about a specified item /!\ No need to remove child view or states managed by MListView

Kind: instance method of MListView

selectItem(index, [options]) ⇒ boolean#

Select the item by it’s index Will focus related item view if parent is focused, if not states selected will be added to item view

Kind: instance method of MListView
Returns: boolean - Returns true if the item has been focused, false else ; If the item is already focused, return false
Emits: MListView.event:selectionChange

unselectItem(index, [options])#

Allows to unselect current item

Kind: instance method of MListView

getItem(index) ⇒ Item#

Get the item at the given index. Return the current focused item if no index is given.

Kind: instance method of MListView
Returns: Item - Returns the item at the given index

getItemView(index) ⇒ View#

Get the item view at the given index. Return the current focused item view if no index is given.

Kind: instance method of MListView
Returns: View - Returns the item view at the given index

getNextItem() ⇒ *#

Allows to retrieve next data item

Kind: instance method of MListView
Returns: * - Next data item or null if current is the last and list is not cyclic

next(options) ⇒ boolean#

Focus the next item.

Kind: instance method of MListView
Returns: boolean - Returns true if the next item is focused, false else (out of bound)

getPreviousItem() ⇒ *#

Allows to retrieve previous data item

Kind: instance method of MListView
Returns: * - Previous data item or null if current is the first and list is not cyclic

previous(options) ⇒ boolean#

Focus the previous item.

Kind: instance method of MListView
Returns: boolean - Returns true if the previous item is focused, false else (out of bound)

getNbOfItems() ⇒ number#

Get the number of items.

Kind: instance method of MListView
Returns: number - Returns the number of items.

getItemIdFromIndex(itemIndex) ⇒ String#

Helper to retrieve a children item id from its index RQ: no test is made to verify if children item really exists

Kind: instance method of MListView
Returns: String - Corresponding item id

_getChildToFocus()#

When the list is focused, the child that is tied to the current item is focused

Kind: instance method of MListView

_onFocusChanged()#

When a child of the list is focused, the item that is tied to the child becomes the current item

Kind: instance method of MListView

_callFactory(options, itemData, index, dataCollection)#

Kind: instance method of MListView
Access: protected