Home • Linkr API • Javascript

Linkr API: Javascript

Linkr uses the MooTools javascript library (included in everyJoomla installation) to display content. All AJAX requests are made through the Linkr variable "LinkrHelper".

Note: Joomla! uses MooTools 1.11

Related Readings:Skip to:

LinkrHelper Variables

There are some variables stored in the LinkrHelper object that might come in handy when building your extension:

LinkrHelper.loading
LinkrHelper.wideLoading

HTML for loading animation ....

LinkrHelper.siteRoot

Web Site root.

LinkrHelper.missingText

"Missing Text" message in current language. Generally used when inserting a link, displaying a pop-up if no text was selected for a link.

LinkrHelper.majorVersion
LinkrHelper.minorVersion
LinkrHelper.buildVersion (since 2.2.1)

Linkr version.

LinkrHelper.editorPlugin

Editor plugin used by author. Linkr currently supports:

LinkrHelper.language (since 2.2.3)

Loaded language.

LinkrHelper Functions

NOTE: All these functions are called through LinkrHelper. For example, to get the current version, you would use LinkrHelper.getVersion()

getVersion()

Returns current API version (e.g. 2.2.2). The value returned here is the same as the value passed in "onLinkrGetLinks" (see Linkr events).

addEvent()

Since 2.3.0 Linkr event handler (see MooTools reference).
Supported events:Example:
// The first argument is the event to listen to.
// The second is the function to call.
// "fooLoader" is a function that will be called
// once Linkr is loaded.
LinkrHelper.addEvent("onLoad", fooLoader);
 

getSelectedText( [bool] html )

Retrieves highlighted text from article.

test( [string] message )

This simply displays a popup message.

dump( [mixed] var, [bool] deep, [bool] return )

Since 2.2.3 PHP's equivalent to print_r.

idleDiv( [mixed] divID, [bool] wide )

Since 2.2.1 This inserts a loading animation inside the specified div.

createToggleLink( [mixed] divID, [object] toggleElement, [int] fxDuration )

This creates a slider div similar to the "Link Attributes" when linking an article.Example:
function createSlider()
{
    // The HTML element with the ID "toggleSettings"
    // will slide in or out the HTML element whose ID
    // is "setings" in 0.5 seconds when clicked
    var slide       = 'settings';
    var toggler     = $('toggleSettings');
    var millisec    = 500;
    LinkrHelper.createToggleLink(slide, toggler, millisec);
}
 

link( [string] url, [string] text )

This is a shortcut to insert a link and close the lightbox.

insert( [string] text )

Inserts a string into the article, at the position of the cursor. It will replace any highlighted text.

insertAtEnd( [string] text )

Same as LinkrHelper.insert(), but ignores highlighted text and inserts at the end of an article. Note that this function only works with TinyMCE or JoomlaFCK. In any other editor, this is exactly the same as LinkrHelper.insert().

dbList( [string] query, [int] start, [int] limit, [func] callback )

Since 2.2.2 Returns a list of database objectsExample:
function getUserList()
{
    // SQL query
    var query   = 'SELECT id, name FROM #__users';
 
    // Start index and limit
    var start   = 0;
    var limit   = 20;
 
    // Query database
    LinkrHelper.dbList(query, start, limit, handleResult);
}
 
// Function that will handle result
function handleResult(dbResult)
{
    // Check for errors
    if (dbResult.status != 'ok') {
        var msg = dbResult.status +': '+ dbResult.msg;
        alert(msg);
        return;
    }
 
    // Show results. For "each" function see:
    // http://docs111.mootools.net/Native/Array.js#Array.each
    // This will display user IDs and names
    var list    = dbResult.result;
    list.each(function(user){
        alert('User '+ user.id +' is called '+ user.name);
    });
}
 

dbObject( [string] query, [func] callback )

Since 2.2.2 Returns a database objectExample:
function getUser( userID )
{
    // SQL query
    var query   =
    'SELECT username, email FROM #__users '+
    'WHERE id = '+ userID;
 
    // Query database
    // NOTE: Linkr 2.2.2 returns an array containing
    // the object instead of the object itself.
    LinkrHelper.dbObject(query, handleResult);
}
 
// Function that will handle result
function handleResult(dbResult)
{
    // Check for errors
    if (dbResult.status != 'ok') {
        var msg = dbResult.status +': '+ dbResult.msg;
        alert(msg);
        return;
    }
 
    // Handle result
    var u   = dbResult.result;
 
    // Linkr 2.2.2 bug. For "$type" function see:
    // http://docs111.mootools.net/Core/Core.js#$type
    if ($type(u) == 'array') {
        u   = u[0];
    }
 
    // Show username and email
    var r   = u.username +'\'s email is: "'+ u.email +'"'
    alert( r );
}
 

isError( [mixed] obj )

Since 2.2.3 Determines if a database result is valid

isDBRO( [mixed] obj )

Since 2.2.3 Determines if a variable is a database object

htmlLayout( [string] title, [mixed] content )

Since 2.2.3 Loads a layout directly through JavaScript.HTML string example:
function loadLayout()
{
    // HTML code. NOTE: W3C validated HTML can't have
    // HTML elements inside a javascript code.
    var html   = unescape(
    '%3Cdiv id="content"%3E
        Some HTML Code...
    %3C/div%3E');
 
    // Load layout
    LinkrHelper.htmlLayout('Title', html);
}
 
DOM element example (MooTools reference):
function loadLayout()
{
    // DOM element
    var html   = new Element('div', {
        'id' : 'content',
        'styles' : {
            'padding' : 5
        }
    }).setHTML('Some HTML code');
 
    var subTitle   = new Element('div', {
        'id' : 'title'
    }).setHTML('Sub Title');
 
    var txt   = new Element('div', {
        'id' : 'text'
    }).setHTML('Some Text');
 
    // Add "subTitle" to "html"
    subTitle.injectInside(html);
 
    // Add "txt" after "subTitle"
    txt.injectAfter(subTitle);
 
    // Load layout
    LinkrHelper.htmlLayout('DOM Example', html);
}

htmlContent( [mixed] divID, [mixed] content )

Since 2.2.3 Loads content directly through JavaScript (see LinkrHelper.htmlLayout()).

htmlInput( [string] name, [string] value, [object] options )

Since 2.2.3 Creates a form input.Example:
var name    = 'username';
var default = 'guest';
var options = {'class' : 'inputbox'};
var input   = LinkrHelper.htmlInput(name, default, options);
 

htmlSelect( [array] list, [string] name, [func] onChange, [object] styles )

Since 2.2.3 Creates a select list.Example:
// Creating a select list
// Each option is an array containing the
// value, text, and info
var name    = 'users';
var list    = [
    [0, '-- pick --', 'selected'], // Option will be selected
    [1, 'guest', 'disabled'], // Option will be disabled
    [2, 'admin'],
    [3, 'test user']
];
var select  = LinkrHelper.htmlSelect(list, name);
 

htmlSelectCustom( [array] list, [object] options )

Since 2.2.3 Creates a select list.

htmlConfig( [string] url, [array] settings, [string] title )

Since 2.2.3 Creates a configuration DIV, similar to the "Link Attributes".Example:
// Creating a configuration box
function getConfig()
{
    // URL to link e.g. a calendar component
    var url = 'index.php?option=com_calendar';
 
    // Title for the configuration box
    var title   = 'Link Config';
 
    // Settings. Each parameter is an array like this:
    // [inputID, inputLabel, inputValue]
    // where "inputValue" is either the default
    // value or an array for a select list
    // (see LinkrHelper.htmlSelect)
    var settings	= [
        ['linkText', 'Text', LinkrHelper.getSelectedText()],
        ['target', 'Link Target', [
            ['_self', 'self', 'selected'],
            ['_blank', 'blank page']
        ]],
        ['linkTitle', 'Title'],
        ['linkClass', 'Class'],
        ['linkRelation', 'Rel']
    ];
 
    // Return configuration
    return LinkrHelper.htmlConfig(url, settings, title);
}
 
NOTE: These elements, excluding "linktText", are the minimum needed to use the shortcut LinkrHelper.link()

htmlConfigLink( [string] url, [string] title, [array] extra )

Since 2.2.3 Same as LinkrHelper.htmlConfig(), but loads all the link settings by default.

htmlTBLinks( [array] links, [object] options )

Since 2.2.3 Creates navigation links similar to the "Link Attributes"'s.
// Example
var links	= [];
var foo		= 'example';
 
// Include some links like this:
// [id, value, onClick]
links.include(['linka', 'Link A', functionA]);
links.include(['linkb', 'Link B']);
links.include(['linkc', 'Link C', 'functionc('+ foo +')']);
// etc...
 
// Create toolbar links
var tb	= LinkrHelper.htmlTBLinks(links);
 
// Load links into layout
LinkrHelper.htmlLayout('Foo & Bar', tb);
 

jText( [func] func, [mixed] text, [bool] javascript, [string] extension )

Since 2.2.3 Translates a string into the currently loaded language.Example:
function getSearchMessage(text)
{
    // Originally, "text" is null
    if (!text)
    {
        // Callback function (use this same function)
        var f   = getSearchMessage;
 
        // Text to translate
        var t   = 'SEARCH_MESSAGE';
 
        // Extension to load the language for
        var ext = 'com_search';
 
        // Translate the text
        return LinkrHelper.jText(f, t, false, ext);
    }
 
    // This alerts "Search term must be a minimum of 3
    // characters and a maximum of 20 characters" in english
    alert(text.result);
}
 

Displaying Content

extLayout( [string] requestURL, [func] onComplete )

Displays the layout through an AJAX requestExample:
function getFooLayout()
{
    var url = 'your-url-here';
    LinkrHelper.extLayout( url );
    /* By now the layout is loaded into Linkr */
}
 

extContent( [string] requestURL, [mixed] updateDiv, [func] onComplete )

Loads content through an AJAX requestExample:
function getFooContent()
{
    var url='your-url-here';
    LinkrHelper.idleDiv('content'); // Show loading icon
    LinkrHelper.extContent(url,'content'); // Request content
}
 
last updated nov 29 2008