@reachalpha/movable

This is an angular directive that helps you move HTMLElements in Angular.

How to use

Installing and Usage

npm install --save @reachalpha/movable

Add the libary to a module's imports' array (i.e. app.module.ts)

import {MovableModule} from '@reachalpha/movable';

@NgModule({
  imports: [ 
    (...)
    MovableModule,
    (...)
  ],
})

Add it to your HTML Element (i.e. app.component.html)

<div style="position: relative; width: 100%; height: 100%" #container>

  <div libMovable [relativeTo]="container" direction="left"
    style="position: absolute; left: 0; top: 0; width: 50px; height: 50px">
  </div>

</div>

Available configuration properties:

| Property | Description | Required / Default | Type | |---|---|---|---| | relativeTo | parent element | required | HTMLElement | | direction | direction the element is suposed to move | required | 'left', 'right', 'top' | | minSize | minimum size of the element after moving it | 0 or handlerSize | number (px) | | otherElement | element next to the one moving that adapts to it | void | HTMLElement | | handlerSize | size of the element that allows the moving | 10 | number (px) | | handlerInside | put the handler inside the element | false | boolean | | clickToggle | if clicking the handler opens or closes the element | true | boolean | | toggle | Element that opens / closes the element on click | null | HTMLElement | | classOpen | class that is added to the toggle when the element is opened | null | string | | classClose | class that is added to the toggle when the element is closed | null | string |

Available events:

| Event | Description | Type | |---|---|---| | positionChanged | Sends an event every time the element changes its position | number | | opened | sends an event if the element is considered open | void | | minSize | sends an event if the element is considered open | void |