Attachable behaviors

Pip.WebUI.Behaviors module contains behaviors that can be attached to existing controls or pages

Focusable

Allows to navigate over focusable controls using arrow keys

Using

To make the div orange by pressing arrow buttons

<div pipFocused focusedColor="orange">
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
    <div class="pip-focusable">Focusable</>
</div>

More generalized example on the image

Selectable

Allows to navigate over non-focuseable elements using arrow keys

Using

<pip-selected (onSelect)="selectedIndex = $event.index" [index]="selectedIndex">
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
    <div pipSelectable>Selectable</>
</pip-selected>

Example of selected component with using angular-material mat-nav-list on the image

Draggable

Implements drag & drop functionality

Using

Simple example of draggable component to swap containers.

Template:

<div class="drag-scroll-test">
	<div *ngFor="let obj of content; let i = index"
		[scrollContainer]="'.drag-scroll-test'"
		pipDrop="true"
		pipDrag="true"
		(dropSuccess)="onDropSuccess($event, i)">
		<div>
			<p >{{ obj.name }}</p>
		</div>
	</div>
</div>

Handler:

onDropSuccess(event, index) {
    const otherObj = this.content[index];
    const otherIndex = this.content.indexOf(event.data);
    if (otherIndex === index || otherIndex === -1) return;

    this.content.splice(otherIndex, 1);
    if (index > otherIndex) this.content.splice(index, 0, event.data);
    else this.content.splice(index + 1, 0, event.data);
}

Styles:

[pipDrag] div {
    padding: 8px;
    box-sizing: border-box;
    transition: all .35s ease;
    height: 85px;
}

[pipDrag].pip-dragging {
    opacity: 0.95;
}

[pipDrag].pip-dragging div {
    height: 85px ;
}

[pipDrop] {
	position: relative;
}

[pipDrop] {
    transition: padding .35s ease;
}

[pipDrop].pip-drag-enter:not(.virtual) {
    padding-bottom: 85px !important;
}

Result on the image

Infinite Scroll

Allows to upload data in chunks while user is scrolling

Using

Template:

<div class="app-infinite-scroll pip-scroll" style="margin-left: 0px;">
    <div class="item-container" pipInfiniteScroll (onInfiniteScroll)="generateItems(10)" 
        scrollContainer="'.app-infinite-scroll'"
        scrollDistance="0.1">
        <div class="item" *ngFor="let item of items" >
            {{ item.name }}
        </div>
    </div>
</div>

Handler:

generateItems(count) {
    for (let i = 0; i < count; i++) {
      let item = {
        id: this._itemCount,
        name: 'Item ' + this._itemCount
      };
      this._itemCount++;

      this.items.push(item);
    }
};

Installation

To install this module using npm:

npm install pip-webui2-behaviors --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.