Getting Started

1. run npm install on the terminal
2. Include the following line in the head section: <{script defer type="text/javascript" src='*/live_interact.js'}><{/script}> where */live_interact.js is the path to the library, and remove the curly brackets from the tags.
3. No css documentation needed. However, be careful with the library overwriting the existing css properties.

Documentation

Classes

Resizer

Parameters
Name
elementID
Type
String
Description
ID of the element that the resizability feature will be added to.
Instances
Name
this.element
Type
HTML Object {Any}
Description
The HTML element whose id is elementID
Methods
Name
buildBorders()
removeBorders()
Parameters
None
None
Description
Creates borders that appears on the edges of this.element to resize.
Removes the resizing borders from this.element

PopupMenu

Generator

Methods
Name
makeCircle()
makeRect(button)
makeCustom
Parameters
None
None
None
Description
Makes Circle
Makes Rectangle
Creates a custom object that the user assigned

Global Functions

Name
drag(e)
resize(e)
align(e)
toggleSnapping(e, snapSize)
toggleDraggable(e)
toggleResizable(e)
remove(e)
togglePopup(e)
toggleSelect(e)
toggleSaver(e, id)
Parameters
event
event
event
event, snapSize {integer}
event
event
event
event
event
event, id
Description
Callback function passed into to event listener for when the user clicks and holds the element to drag it. If 'snapping' is activated, the function will move the object to the closest offset coordinate.
Callback function that resizes the selected object depending on the user's action.
Aligns the objects with class 'selected' to the object the user calls the function from. The user can choose to align to different axes.
Activates/Deactivates snapping so that either the object can move freely, or move to certain pixels, creating a "snapping" action.
Activates/Deactivates the object to be dragged around.
Activates/Deactivates the object to be resized from the resizer borders.
Removes the object from the DOM when clicked.
Displays the list of buttons on top of the object to interact with the element that is clicked.
Selects the object, displays align axes and align button. Align axes is a drop down menu from which user can choose for aligning criteria. "align" button executes the action. To be able to use align on multiple objects, all objects that is required to be aligned must have the "select" button enabled.
Enables/Disables saving the current display of the page so that the display can be reloaded.