Tappy.js

A simple, fast, and easy to use library for making elements more interactive

Currently supported:

• draggable elements
• element linking
• element transformations
• events

Installation

npm

npm i @dvnkboi/tappy.js

yarn

yarn add @dvnkboi/tappy.js

Draggable

const element = document.querySelector('#element');
const options = {
  ease:true
}
const draggable = new Draggable(element, options);

usage

| option | value | | ------------- | --------------------------------------------------------------------------------------------------------- | | maxX | (number) maximum value the x coordinate can go to default=Infinity | | maxY | (number) maximum value the y coordinate can go todefault=Infinity | | ease | (boolean) wether to smoothly folow the mouse/touch or set it directlydefault=true | | easeTime | (number) amount of easing higher = slower moving elementdefault=0.05 | | holdTime | (number) ammount of time to lock the element before allowing it to follow the mouse/touchdefault=10ms | | maxIterations | (number) maximum number of iterations the update cycle should run before stoppingdefault=10 |

| Event | | | ----------- | -------------------------------------------------------------------------------------------------------------- | | initialized | runs after all initalization functions have completed | | hold | runs when element is held for less than the holdTime specified in options (element is held but unable to move) | | down | runs when element is held and is ready to move ( held more than holdtime ) | | dragging | runs once when element has started to move | | moving | runs continuously while element is moving | | up | runs when element has been released |

| classes | | | ----------------- | ---------------------------------------------------------- | | original-elmnt | applied to the original element on initialization | | mirror-elmnt | applied to the mirror element on initialization | | transformer-elmnt | applied to the transformer element on initialization | | mirror-hold | applied to the mirror element following the hold event | | mirror-down | applied to the mirror element following the down event | | mirror-dragging | applied to the mirror element following the dragging event | | mirror-up | applied to the mirror element following the up event |

Properties

• isTouch: boolean - is the event a touch or mouse event
• posError: number - the difference between the current position and the target position
• interactionPos: {x:number, y:number} - the position of the touch/mouse event
• interactionPos: {x:number, y:number} - the transform offset applied to the element
• interactionPos: BoundingBox - the boundaries of the element (x,y,width,height...)
• transformerOffset: {x:number, y:number} - the offset of the transformer element relative to the mirror element
• relativeOffset: {x:number, y:number} - the offset of the transformer element relative to the element
• initialOffset: {x:number, y:number} - the initial offset of the element when it was first initialized
• nonCorrectedPos: {x:number, y:number} - the position of the element before any corrections

Methods

• on(event, callback) - adds an event listener to the element
• off(event, callback) - removes an event listener from the element
• once(event, callback) - adds an event listener to the element that will only run once
• destroy() - removes all event listeners and removes the element from the DOM
• attach(Draggable) - creates a link between two draggable elements example: draggable1.attach(draggable2)

Explination

while it is possible to use the Draggable element directly without the use of a transformer element, I opted to use it as a way to make the element more interactive. Because transformations are done on the mirror element, we can't use transform to scale, rotate or rotate the mirror element, so the transformer element could be used instead as follows.

.mirror-hold .transformer-elmnt {
  transform: scale(1.05);
}

.mirror-down .transformer-elmnt {
  transform: scale(0.9);
}

.mirror-dragging .transformer-elmnt {
  transform: scale(0.75);
}

.mirror-up .transformer-elmnt {
  transform: scale(1);
}

Link

Usage

const element1 = document.querySelector('#element1');
const element2 = document.querySelector('#element2');
const options = {
  ease: true
}
const draggable1 = new Draggable(element1, options);
const draggable2 = new Draggable(element2, options);
draggable1.attach(draggable2);

| option | value | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fill | (string) fill of the link default='none' | | stroke | (string) stroke color of the link default='#000' | | strokeWidth | (number) stroke width of the linkdefault=1 | | innerOffsetStart | (number) the amount the link will be offset inside the element, a negative value will mean the link end connected to the start will be farther away from the element default=40 | | innerOffsetEnd | (number) the amount the link will be offset inside the element, a negative value will mean the link end connected to the end will be farther away from the elementdefault=40 |

Methods

• destroy - destroys the link and removes it from the DOM
• attachStart(Draggable) - attack the start of the link to a draggable element
• attachStart(Draggable) - attack the end of the link to a draggable element