The connectors are objects responsible for retrieving the HTML content that will be displayed in the panels.

Each connector is composed of at least 5 functions and is declared like this :

 

{

  name        : "connector name"

  init        : function($kaiten) { },

  destroy    : function($kaiten) { },

  connectable  : function(href, $link) { return true/false; },

  getData    : function(href, $link) { return { "key":"value" }; },

  loader    : function(data, $panel, $kaiten) {

    return 'html'/$('<div />');/$.ajax({...});

  },

  cssFile : 'thisconnector.css'

}

 

1. init, optional : An initialization callback function, that will be executed only once, the first time the connector is used.

It allows you to initialize some specific behaviour, for instance, event delegation related to the content that will be loaded.

Context : the connector object itself.

 

2. destroy, optional : A destroy callback function, that will be called only if the connector is unregistered.

Context : the connector object itself.

 

3. connectable, optional : A test function operating on the link (<a> tag) being clicked by the user. By inspecting the link, this function decides if the connector can be used to load new content.

When a click occurs, Kaiten loops through all connectors by calling each "connectable" function and when true is returned, Kaiten knows which connector to use.

If no connector is found, Kaiten chooses to open the link in an iframe.

Context : The jQuery object referencing the link being clicked.

 

4. getData, optional : The function responsible for getting data that will be passed to the loader function.

If the "connectable" function returns true, this function is executed to get the data that will be passed to the loader function.

Usually, this data is stored in the href attribute of the link or in data attached to the DOM element ('data-load').

Context : The jQuery object referencing the link being clicked.

 

5. loader : The function responsible for retrieving each panel content.

This function takes a data object as argument and returns an HTML string, a jQuery object or the jQuery Ajax object.

Indeed, retrieving HTML content can be done by making an AJAX request or by returning static or dynamic HTML content.

Context : the connector object itself.

 

By default, Kaiten provides 4 connectors :

 

a. "html.string" :  for setting "static" HTML content.

b. "html.page" :  for getting HTML content from the server.

c. "html.dom" :  for getting HTML content from DOM elements.

d. "iframe" :      for loading external URLs in an iframe.

 

It is a good practice to prefix your connector name with a namespace, to avoid collision with other connectors. It also helps organizing the connectors into families or collections. For instance : wikipedia.search, wikipedia.page, wikipedia.image, etc.

 

Optionnaly, you can also specify a css file that will be dynamically loaded when the connector is registered.

 

See our various demos examples for code details.