To infinity and beyond

TopExtending iBox

iBox is built on it's plug-in handling. All document types that it handles by default are actually built as plug-ins. The default plug-in if nothing matches is the Document handler.

Creating Plugins

Creating your own plug-ins is simple, and requires very little JavaScript knowledge. The first thing you'll want to do is create a file to hold your plug-ins. This file must be loaded after ibox.js is loaded. After you've got a workspace available, let's go ahead and create the plug-in.

You will need to decide on a name, that doesn't conflict with any existing plug-in names. Default Plugin's are stored in a special namespace so you won't have to worry about that.

var iBoxPlugin_YouTube = function() {}

Now, you need to write your plug-in's match function, which is where we check the URL against something else in order to verify if this plug-in should be used. This function is called match and one argument, the url.

var _private = {
youtube_url: 
/(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
}
var _public = {
match: function(url)
{
  return url.match(_private.youtube_url);
},
}

Once our matching works, we need to add the rendering code. This functions is called render and has two arguments: url, and params.

render: function(url, params)
{
  id = url.match(_private.youtube_url)[1];
  params.width = 425;
  var html = '<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/' + 
id + '"></param><param name="wmode" value="transparent"></param><embed 
src="http://www.youtube.com/v/' + id + '" type="application/x-shockwave-flash" wmode="transparent" width="425" 
height="355"></embed></object>';
  iBox.html(html, params);
}

Now that you've got your rendering and matching, all that's left is to register, via iBox.plugins.register(function). Below is the full example including the registration code.

var iBoxPlugin_YouTube = function()
{
  var _private = {
    youtube_url: 
/(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
  }
  var _public = {
    match: function(url)
    {
      return url.match(_private.youtube_url);
    },

    render: function(url, params)
    {
      id = url.match(_private.youtube_url)[1];
      params.width = 425;
      var html = '<object width="425" height="355"><param name="movie" 
value="http://www.youtube.com/v/' + id + '"></param><param name="wmode" 
value="transparent"></param><embed src="http://www.youtube.com/v/' + id + '" 
type="application/x-shockwave-flash" wmode="transparent" width="425" 
height="355"></embed></object>';
      iBox.html(html, params);
    }
  }
  return _public;
}();
iBox.plugins.register(iBoxPlugin_YouTube);

New in iBox 2.11

There is now an unload function available on plug-ins. This is called when the plug-in is unloaded.

Plugin Parameters

One of the common variables you'll see passed around is our params object. This contains all of the currently active options and parameters. These are set initially, but may be overwritten inside of your plug-in. Below are some common parameters.

Events (New in 2.17)

iBox allows you to bind to certain events, just as you would to normal events in your document, using the iBox.addEvent(event_name, object, callback) method. This method can also be used to bind to general events in your document. iBox currently consists of a few events on the object itself:

  • show
    Fired when the iBox becomes visible.
  • hide
    Fired when the iBox is closed.

© 2005-2017 Enthropia Inc