API

Focuspoint : object

Focuspoint API

Kind: global namespace

• Focuspoint : object
  • .View
    • new Focuspoint.View(element, options)
    • .current : Object
    • .set : function
    • .kill : function
  • .Edit
    • new Focuspoint.Edit(element, options)
    • .current : Object
    • .set : function
    • .on ⇒ Number
    • .off : function
    • .kill : function

Focuspoint.View

Kind: static class of Focuspoint

• .View
  • new Focuspoint.View(element, options)
  • .current : Object
  • .set : function
  • .kill : function

new Focuspoint.View(element, options)

View constructor

Param	Type	Description
element	Element	The View component element
options	Object	The options for the View component
options.x	Number	X coordinate to start with (number between 0 and 1)
options.y	Number	Y coordinate to start with (number between 0 and 1)

Example

var view_element = document.querySelector('.lfy-focuspoint-view');
var focuspoint = new Focuspoint.View(view_element, {
    x: 0.752,
    y: 0.251
});

View.current : Object

Holds the current x and y values

Kind: static property of View Read only: true Example

var x = focuspoint.current.x;

View.set : function

Changes the x and y. This will:

• Change the binded background-position
• Update the coordinates in focuspoint.current

Kind: static property of View Example

focuspoint.set(0.345, 0.577);

View.kill : function

Kills the View instance, unbinds event handlers when present

Kind: static property of View Example

focuspoint.kill();
delete focuspoint; // To fully kill the object, use 'delete focuspoint;' afterwards

Focuspoint.Edit

Kind: static class of Focuspoint

• .Edit
  • new Focuspoint.Edit(element, options)
  • .current : Object
  • .set : function
  • .on ⇒ Number
  • .off : function
  • .kill : function

new Focuspoint.Edit(element, options)

Edit constructor

Param	Type	Description
element	Element	The Edit component element
options	Object	The options for the Edit component
[options.x]	Number	X-coordinate to start with (number between 0 and 1)
[options.y]	Number	Y-coordinate to start with (number between 0 and 1)
[options.view_elm]	Element/Array	The view element(s) to bind to the Edit component
[options.button_elm]	Element	The button element when not using the class "lfy-focuspoint-button" or when the button is not inside the Edit component element
[options.hide_cursor]	Boolean	Whether the cursor should be hidden while moving the button
[options.no_cursor_class]	String	The class used to disable the cursor

Example

var edit_element = document.querySelector('.lfy-focuspoint-edit');
var view_element = document.querySelector('.lfy-focuspoint-view');

var focuspoint = new Focuspoint.Edit(edit_element, {
    view_elm: view_element
});

Edit.current : Object

Holds the current x and y values

Kind: static property of Edit Read only: true Example

var x = focuspoint.current.x;

Edit.set : function

Changes the x and y. This will:

• Change the button position
• Change the possibly binded background-positions
• Update the coordinates in focuspoint.current
• Trigger the 'change' event

Kind: static property of Edit Example

focuspoint.set(0.345, 0.577);

Edit.on ⇒ Number

Binds a handler to an event

Kind: static property of Edit Returns: Number - id - The event handler identification you'll need to unbind the handler

Param	Type	Description
event	String	Can be 'change', 'drag:start', 'drag:move' and 'drag:end'
handler	function	The passed arguments of the handler will always be [x, y].

Example

var id = focuspoint.on('drag:end', function () {
    // for example: some API call to save the new focuspoint
});

Edit.off : function

Unbinds a handler from an event

Kind: static property of Edit

Param	Type	Description
id	Number	The event handler identification of the handler you want to unbind

Example

focuspoint.off(id);

Edit.kill : function

Kills the Edit instance, unbinds event handlers

Kind: static property of Edit Example

focuspoint.kill();
delete focuspoint; // To fully kill the object, use 'delete focuspoint;' afterwards