https://github.com/itisnajim/ngx-bubble

An angular bubble component inspired from facebook chat heads, with the help of interactjs.
https://github.com/itisnajim/ngx-bubble

angular bubble button chat-head component draggable fab interactjs ionic mobile ngx-bubble pwa web

Last synced: about 1 month ago
JSON representation

An angular bubble component inspired from facebook chat heads, with the help of interactjs.

• Host: GitHub
• URL: https://github.com/itisnajim/ngx-bubble
• Owner: itisnajim
• License: mit
• Created: 2021-03-23T20:04:53.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-25T19:05:32.000Z (almost 4 years ago)
• Last Synced: 2024-11-12T23:35:46.716Z (about 2 months ago)
• Topics: angular, bubble, button, chat-head, component, draggable, fab, interactjs, ionic, mobile, ngx-bubble, pwa, web
• Language: TypeScript
• Homepage:
• Size: 2.08 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://img.shields.io/npm/v/ngx-bubble.svg)](https://www.npmjs.com/package/ngx-bubble) [![downloads](https://img.shields.io/npm/dm/ngx-bubble.svg)](https://www.npmjs.com/package/ngx-bubble)

# ngx-bubble

An angular bubble component inspired from facebook chat heads, with the help of [interactjs](https://www.npmjs.com/package/interactjs).

## Preview

![preview](https://github.com/itisnajim/ngx-bubble/blob/main/preview.gif)  

## Installation

```

npm i -S ngx-bubble

```

## Usage Example

### Import the module first

```typescript

import { NgxBubbleModule } from 'ngx-bubble';

@NgModule({

    ...

    imports: [

        NgxBubbleModule,

        ...

    ],

    ...

```

```html



    

        Hide

    



```


## Inputs and Outputs

```typescript 

// Initial position x relative to the parent(container), default = 0

x: number;

// Initial position y relative to the parent(container), default = 0

y: number;

// see https://interactjs.io/docs/action-options

dragOptions: Object;

// Callback/Event fired when the bubble draging start.

bubbleMoveStart: ({x: number, y: number}) => void; 

// Callback/Event fired whenever the bubble is on dragging and moving.

bubbleMoving : ({x: number, y: number}) => void;

// Callback/Event fired when the bubble draging end.

bubbleMoveEnd : ({x: number, y: number}) => void;

```

### Full usage !

```html

Show the bubble



    

        Hide

    



```

```typescript

hidden = false;


dragOptions = {

    speed: 300 // milliseconds

}

bubbleMoveStart(position: {x: number, y: number}): void{

    console.log('the bubble start move from (' + String(position.x) + ',' + String(position.y) + ')');

}

bubbleMoving(position: {x: number, y: number}): void{

    console.log('the bubble position is (' + String(position.x) + ',' + String(position.y) + ')');

}

bubbleMoveEnd(position: {x: number, y: number}): void{

    console.log('the bubble moved to (' + String(position.x) + ',' + String(position.y) + ')');

}

```

#### Prevent Window from scrolling/moving/reloading while dragging ngx-bubble on mobile devices.

```typescript

this.isBubbleDragging = false;

window.addEventListener('touchmove', (e) => this.touchBehavior(e), {passive: false});

bubbleMoveStart(_: {x: number, y: number}): void{

    this.isBubbleDragging = true;

}

bubbleMoveEnd(_: {x: number, y: number}): void{

    this.isBubbleDragging = false;

}

touchBehavior(e: Event){

    if (this.isBubbleDragging) { e.preventDefault(); }

}

```

## Author

itisnajim, [email protected]

## License

ngx-bubble is available under the MIT license. See the LICENSE file for more info.