cantoo-api

Creating a new connection

To create a new connection with the cantoo api you must call the static method CantooApi.connect(). This method will create an iframe on the provided DOM node and return a new CantooApi instance. Don't forget to call destroy before getting rid of the CantooApi instance.

CantooApi.connect() receives an Object as param. The object should have the following properties:

key	type	required	description
domElement	HTMLElement	required	The DOM element which the iframe will be attached to. It should use display:flex;
accessToken	string	required	The token of the user that wants to interact with the api (as received from the GAR)
fileId	string	optional	The file id that is going to be edited (as received in the "ready" and "completed" events)
title	string	optional	The title of the file that will be created. Should not be set if fileId is set
env	'prod' | 'preprod' | 'develop'	required	The environment that the client will connect to
readOnly	boolean	required	Should the user be able to edit the file, or is it only a viewer?

const api = await CantooAPI.connect({domElement, env: 'develop', accessToken: '1', fileId: '10', readOnly: true})

The CantooApi instance

Once the connection is done you can interact with the cantoo api through the following methods:

name	type	description
loadDocument	(id: string, readOnly?: boolean | undefined) => Promise<void>	Loads a new document on the Iframe
addEventListener	(eventName: 'ready', callback: (event: { id: string, userId: string, fileId: string }) => void) => void	Adds a new listener to the 'ready' event
addEventListener	(eventName: 'completed', callback: (event: { id: string, title: string, userId: string }) => void) => void	Adds a new listener to the 'completed' event
addEventListener	(eventName: 'destroyed', callback: () => void) => void	Adds a new listener to the 'destroyed' event
addEventListener	(eventName: 'logout', callback: (event: { id: string, userId: string }) => void) => void	Adds a new listener to the 'logout' event
removeEventListener	(eventName: 'ready|completed|destroyed|logout', callback) => void	Removes a listener that is attached to some event. The callback is the function instance that was previously added to the listener
destroy	() => void	Closes the connection with the api. This function also removes all listeners and call the listerners that were attached to the 'destroyed' event

The connection state

The CantooApi holds the connection state on the readOnly attribute state.

There are 4 possible states:

name	description
launching	The iframe was attached to the DOM and is loading its content
ready	The document id is ready for edition
completed	The document id has been created and can be retrieved or shared
destroyed	The iframe was destroyed and detached