<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documentation</title> <link rel="stylesheet" type="text/css" href="./css/documentation.css"> </head> <body> <div id="nav"> <div><a href="index.html">Home Page</a></div> <div><a href="examples.html">Examples</a></div> </div> <h1>Getting Started</h1> <p id="instructions"> 1. run npm install on the terminal <br> 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.<br> 3. No css documentation needed. However, be careful with the library overwriting the existing css properties. </p> <h1>Documentation</h1> <div id="body"> <h2>Classes</h2> <div id="classes"> <h3>Resizer</h3> <div id="resizer"> <div class="heads">Parameters</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> elementID </div> </div> <div class="columnTitle"> <div class="subheads">Type</div> <div class="content"> String </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> ID of the element that the resizability feature will be added to. </div> </div> </div> <div class="heads">Instances</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> this.element </div> </div> <div class="columnTitle"> <div class="subheads">Type</div> <div class="content"> HTML Object {Any} </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> The HTML element whose id is elementID </div> </div> </div> <div class="heads">Methods</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> buildBorders() </div> <div class="content"> removeBorders() </div> </div> <div class="columnTitle"> <div class="subheads">Parameters</div> <div class="content"> None </div> <div class="content"> None </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> Creates borders that appears on the edges of this.element to resize. </div> <div class="content"> Removes the resizing borders from this.element </div> </div> </div> </div> <h3>PopupMenu</h3> <div id="popup"> <div class="heads">Parameters</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> elementID </div> </div> <div class="columnTitle"> <div class="subheads">Type</div> <div class="content"> String </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> ID of the element that the resizability feature will be added to. </div> </div> </div> <div class="heads">Instances</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> this.element </div> <div class="content"> this.buttons </div> <div class="content"> this.menu </div> </div> <div class="columnTitle"> <div class="subheads">Type</div> <div class="content"> HTML Object {Any} </div> <div class="content"> [HTML Object {BUTTON}] </div> <div class="content"> HTML Object {DIV} </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> The HTML element whose id is elementID </div> <div class="content"> A list of buttons that will appear in the popup menu </div> <div class="content"> The popup menu block </div> </div> </div> <div class="heads">Methods</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> bindPopup() </div> <div class="content"> addButton(button) </div> <div class="content"> addButtons(buttonList) </div> </div> <div class="columnTitle"> <div class="subheads">Parameters</div> <div class="content"> None </div> <div class="content"> HTML Object {BUTTON} </div> <div class="content"> [String] </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> Connects/Binds the popup menu to the element this.element </div> <div class="content"> Adds 'button' to the popup menu. User may define its button with specified action and adds it to the popup menu. </div> <div class="content"> Adds the specified buttons to the popup menu. The strings in the input array should be valid actions that is defined in the library </div> </div> </div> </div> <h3>Generator</h3> <div class="heads">Methods</div> <div class="table"> <div class="columnTitle"> <div class="subheads">Name</div> <div class="content"> makeCircle() </div> <div class="content"> makeRect(button) </div> <div class="content"> makeCustom </div> </div> <div class="columnTitle"> <div class="subheads">Parameters</div> <div class="content"> None </div> <div class="content"> None </div> <div class="content"> None </div> </div> <div class="columnTitle"> <div class="subheads">Description</div> <div class="content"> Makes Circle </div> <div class="content"> Makes Rectangle </div> <div class="content"> Creates a custom object that the user assigned </div> </div> </div> </div> <h2>Global Functions</h2> <div id="functions" class="table"> <div class="columnTitle"> Name </div> <div class="content"> drag(e) </div> <div class="content"> resize(e) </div> <div class="content"> align(e) </div> <div class="content"> toggleSnapping(e, snapSize) </div> <div class="content"> toggleDraggable(e) </div> <div class="content"> toggleResizable(e) </div> <div class="content"> remove(e) </div> <div class="content"> togglePopup(e) </div> <div class="content"> toggleSelect(e) </div> <div class="content"> toggleSaver(e, id) </div> <div class="columnTitle"> Parameters </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event, snapSize {integer} </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event </div> <div class="content"> event, id </div> <div class="columnTitle"> Description </div> <div class="content"> 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. </div> <div class="content"> Callback function that resizes the selected object depending on the user's action. </div> <div class="content"> Aligns the objects with class 'selected' to the object the user calls the function from. The user can choose to align to different axes. </div> <div class="content"> Activates/Deactivates snapping so that either the object can move freely, or move to certain pixels, creating a "snapping" action. </div> <div class="content"> Activates/Deactivates the object to be dragged around. </div> <div class="content"> Activates/Deactivates the object to be resized from the resizer borders. </div> <div class="content"> Removes the object from the DOM when clicked. </div> <div class="content"> Displays the list of buttons on top of the object to interact with the element that is clicked. </div> <div class="content"> 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. </div> <div> Enables/Disables saving the current display of the page so that the display can be reloaded. </div> </div> <!-- <div id="methods"></div> --> </div> </body> </html>