Javascript Reference - mithra62/ee_debug_toolbar GitHub Wiki

The Debug Toolbar (EEDT) loads a javascript library called eedt.js. The eedt.js library handles the entire EEDT lifecycle but also exposes an API that allows you to do the following:

  • Listen for toolbar events, such as init and ready
  • Listen for panel events, such as init, open and close
  • Communicate via AJAX with server side PHP scripts
  • Dynamically load CSS & JS assets

The library is available as the eedt JS global object.

Loading on demand

In order to keep the EEDT's footprint on the page as small as possible, the contents of each debug panel, its CSS and JS resources are all loaded on demand when the user clicks on the respective toolbar button.

Hence when providing JS with your EEDT panel, you must bind to a panel event such the init. This will ensure that your JS initializes at the correct time but just as importantly, that it doesn't initialize if it is not needed.

Eedt API

ajax()

eedt.ajax(class_name, method_name [, callback])
  • class_name - Name of PHP class to be loaded and instantiated
  • method_name - Name of PHP method to be called
  • callback - Optional, Function to be invoked on request finishes
  • return - jQuery.Deferred

Perform an asynchronous HTTP (AJAX) request with a specified PHP class & method.

Callback receives a single argument: the returned data from the PHP script.

NB: EEDT implements a security protocol whereby the class specified in the class_name argument must have a public array property called $eedt_act that contains a list of all method names that can be called by the eedt library. If the class specified does not contain the method name specified in the method_name argument, an error will be returned.

Example

eedt.ajax('Eedt_memory_history_ext', 'fetch_memory_and_sql_usage', function(){
    //Code
});

//Or

eedt.ajax('Eedt_memory_history_ext', 'fetch_memory_and_sql_usage').done(function(){
    //Code
});

closePanels()

eedt.closePanels()
  • return - Null

Close all EEDT panels

loadCss()

eedt.loadCss(css_url [, callback])
  • css_url - Full URL of the CSS file to be loaded
  • callback - Optional, Function to be invoked on request finishes
  • return - jQuery.Deferred

Load CSS file into current page.

Method will parse provided URL to attempt to determine if the URL is local or not. If local, the full URL to the site themes/third_party folder will be prepended to the provided URI.

Example

eedt.loadCss('https://raw.github.com/jquery/jquery-ui/master/themes/base/jquery.ui.base.css', function() {
    //Code
});

loadScript()

eedt.loadScript(script_url [, callback])
  • script_url - Full URL of the JS file to be loaded
  • callback - Optional, Function to be invoked on request finishes
  • return - jQuery.Deferred

Load javascript file into current page.

Method will parse provided URL to attempt to determine if the URL is local or not. If local, the full URL to the site themes/third_party folder will be prepended to the provided URI.

Example

eedt.loadScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js', function() {
    //Code
});

//Relative URLs are assumed to be relative to third_party themes
eedt.loadScript('custom_toolbar_extension/js/script.js', function() {
    //Script is loaded from:
    //http://example.com/themes/third_party/custom_toolbar_extension/js/script.js
});

//Since method returns Deferred object, and alternate syntax is also available:
eedt.loadScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js').done(function() {
    //Code
});

on()

eedt.on(panel_name, event_name, callback)
  • panel_name - Name of the panel to listen for events
  • event_name - Name of the event
  • callback - Function to be invoked on request finishes
  • return - Null

Attach an event handler to a panel event.

Callback receives a single argument: the Eedt_panel instance for the specified panel in the panel_name argument.

Since debug panel contents are only fetched and inserted into the toolbar when the panel toolbar button is clicked, if you wish to perform any setup or trigger functionality when the your panel is opened and closed, you must attach event handlers to your panel.

Valid panel events are:

  • init
  • open
  • close

NB: The first time a panel is opened, the init method is called, but the open event is not triggered, even though the panel has opened for the first time. The open method only fires from the second opening of the panel. This is due to the asynchronous nature of the panel loading (the panel has already opened by the time the init event fires).

Example

eedt.on('memory_history', 'init', function(){
    //Code
})

panel()

eedt.panel(panel_name)
  • panel_name - Name of the panel to be retrieved
  • returns - Eedt_panel instance

Retrieve a loaded panel instance.

This method allows you to retrieve the panel instance (and hence panel API) used internally by the eedt library.

Example

var memoryPanel = eedt.panel('memory_history');
memoryPanel.open();
memoryPanel.close();
memoryPanel.toggle(); // Toggle open / close
memoryPanel.loading(true); //Show loading indicator
memoryPanel.loading(false); // Hide loading indicator

ready()

eedt.ready(callback)
  • callback - Function to be invoked when eedt library is ready
  • return - Null

Specify a function to be called when the eedt library is fully loaded. Callback recieves two arguments: jQuery object and the eedt object.

Since the eedt.js library depends on jQuery (and will load it dynamically if not present on the page) this method is useful for running code that depends on jQuery being present or that needs to communicate with PHP scripts using the eedt.ajax() method.

Example

eedt.ready(function($, eedt){
	//Code
})

Eedt_panel API

Internally, eedt handles all panels as instances of the Eedt_panel JS class. You can retrieve a panel instance by calling the eedt.panel('panel_name').

close()

eedt.open();
  • return - Null

Closes the panel

Example

eedt.panel('panel_name').close();

loading()

eedt.loading(show);
  • show - Boolean, specifies whether to show (true) or hide (false) the loading indicator
  • return - Null

Toggles the panel open or closed

Example

eedt.panel('panel_name').loading(true);

on()

eedt.on(event_name, callback);
  • event_name - Name of the event
  • callback - Function to be invoked on request finishes
  • return - Null

Attach an event handler to a panel event.

Callback receives a single argument: the Eedt_panel instance for the specified panel in the panel_name argument.

Since debug panel contents are only fetched and inserted into the toolbar when the panel toolbar button is clicked, if you wish to perform any setup or trigger functionality when the your panel is opened and closed, you must attach event handlers to your panel.

Valid panel events are:

  • init
  • open
  • close

NB: The first time a panel is opened, the init method is called, but the open event is not triggered, even though the panel has opened for the first time. The open method only fires from the second opening of the panel. This is due to the asynchronous nature of the panel loading (the panel has already opened by the time the init event fires).

Example

eedt.panel('panel_name').on('init', function(){
	//Code
});

open()

eedt.open();
  • return - Null

Opens the panel

Example

eedt.panel('panel_name').open();

toggle()

eedt.toggle();
  • return - Null

Toggles the panel open or closed

Example

eedt.panel('panel_name').toggle();