Documentation

Stream

Description

Class for handling list of timeline elements. 

BX.UI.Timeline.Stream

All timeline elements - descendant for Item class.

All editors - descendants for Editor.

Timeline consists of four parts:

  • editors;
  • scheduled;
  • attached;
  • all elements.

Elements from Scheduled section are not displayed in general list, they cannot be attached.

Elements from the Attached list are duplicates of elements from general list (i. e. single element has two instances, one in general list, second in attached list).

These elements will have the same identifier, but they are two different objects.

Elements in general section are grouped by days, with separator at the start of each day (it has separate methods to handle it).

The timeline itself only performs the rendering, it doesn't executes any queries. User actions call events, and handlers for these events execute their ajax queries.

Methods

Method Description Available from version
constructor(params: {}) Constructor.

Параметры:

params - has the following structure:

  • items - array with data about elements;
  • users -array with data about users;
  • nameFormat - user name format;
  • pageSize - page size;
  • tasks - array with data about elements to be displayed in the Scheduled section;
  • editors - array with editors;
  • itemClasses - list, where key is element type code and the value is javascript descendant class Item, that must render the list.
createItem(data: {}, itemClassName: ?Function): ?Item Creates new element, when passing correct data.
  • data - list with element data. Content may vary depending on element type. See more details in Item descendants constructors;
  • itemClassName - name for javascript descendant class Item to create an element.
addItem(item: Item): Stream Adds a new element into array of elements. When required, element is cloned into attached element list.
  • item - element.
getItems(): Array Returns array of all elements.
getItem(id: string|number): ?Item Returns element by its ID.
  • id - element ID.
getPinnedItems(): Array Returns array of all attached elements.
getPinnedItem(id: string|number): ?Item Returns attached element by its ID.
  • id - attached element ID.
getTasks(): Array Returns array of all elements from array Scheduled.
getPinnedItem(id: string|number): ?Item Returns element from Scheduled section by its ID.
  • id - element ID from Scheduled section.
render(): Element Renders timeline and returns DOM element.
getContainer(): ?Element Returns container with rendered timeline (when it was rendered).
updateTasks(tasks: Array) Fully re-renders Scheduled section with new elements. Animation is used for deleting old and adding new elements.
  • tasks - element data in the Scheduled section.
static getDayFromDate(date: Date): ?string Returns string day presentation for the date .
  • date - date.
getDateSeparator(day: string): ?Elemen Returns existing separator, if available.
  • day - string day presentation.
createDateSeparator(day: string): Element Creates new separator, but won't be placed in DOM.
  • day - string day presentation.
static isToday(date: Date): boolean Returns true, when date is today.
  • date - date.
insertItem(item: Item): this Adds new element item to start of animation. When required, adds a separator.
  • item - element.
pinItem(item: Item): Stream Adds an element item to the list of attached elements with animation.
unPinItem(item: Item): Stream Removes item element from the list of attached items with animation.
deleteItem(item: Item) Deletes item element with animation, despite in which section its located.
startProgress() Shows loader and saves ajax query processing status.
stopProgress() Hides loader and resets ajax query processing status.
getLoader() Returns object BX.Loader.
enableLoadOnScroll() Enables scroll event handling for element list. When scrolling to the end of the list, calls the event onScrollToTheBottom.
disableLoadOnScroll() Disables scrolling event handling for element list.

Events

Event Description
namespace: BX.UI.Timeline.Stream
onAfterInitThrows event at the end of constructor execution. It can be used to get access to list object.
  • stream - event data will contain object BX.UI.Timeline.Stream.

For example, you have elements with action equal to delete_section and we need for these elements to operate via the class MyModule.Timeline.SectionDelete.

To do that, register event handler:

```javascript
BX.Event.EventEmitter.subscribe('BX.UI.Timeline.Stream:onAfterInit', (event) => {
    const stream = event.getData().stream;

    stream.itemClasses.set('delete_section', MyModule.Timeline.DeleteSection);
});
```

To capture the rest of events, an available object is required. That's why the handler onAfterInit must save it to use upon subscription.

```javascript
stream.subscribe('onAfterRender', () => {
    const container = stream.getContainer();
    
    // all the rest of nodes are located in stream.layout
});
```
onAfterRenderEvent is thrown after timeline rendering.

Event handler can get container via the method getContainer().

onScrollToTheBottomEvent is thrown when scrolling to bottom end of general element list.

onPinClickEvent is thrown when clicking on element pin symbol.
  • item - element which pin symbol was clicked.


© «Bitrix24», 2001-2024