Documentation » Plugins

HTML Head

Plugins

Using Plugins

Creating Plugins

When creating a plugin, you'll often include css and/or javascript to make it function properly. There are a number of options for how to do this which we'll explain and show example of below.

Add With Addon.ini

It is possible to add elements to the <head>...</head> portion of Typesetter pages with nothing more than a line or two of code in the Addon.ini file of your plugin.

html_head = '<link rel="stylesheet" href="{$addonRelativeCode}/style.css" type="text/css" />';

This line of code will add a link for the style.css file of your plugin to all Typesetter pages.

Note the use of {$addonRelativeCode}. This is one of a few variables available in the Addon.ini file.

Add to Combine.php

To make Typesetter pages load faster, javascript and css files are combined into two compressed files before being sent to the user. Your plugin can add files to these compressed files in a number of ways.

Hooks

For a plugin to add css and js files to the combined and compressed files, it needs to add an entry to the $page->css_admin, $page->css_user or $page->head_js arrays. This can be done in a number of ways and below is an example of how to do so using the GetHead hook. (The GetHead hook will be available in 2.0b3.)

YourPlugin/Addon.ini

...
[GetHead]
script = script.php
method = plugin_function

YourPlugin/script.php

function plugin_function($js_files){
	global $addonRelativeCode,$page;
	$page->head_js[] = $addonRelativeCode.'/javascript.js';
}

Because gadgets are often called after the <head> section of a page is generated, the GetHead hook is the best way to add javascript and css files to the combined outputs.

$page->css_admin vs $page->css_user The only difference between $page->css_admin or $page->css_user is the order in which they are used. CSS files in the $page->css_user array will be loaded before other Typesetter specific css files including the css file for the current theme. CSS files in the $page->css_admin array are loaded last giving the css rules in these files higher importance in the document. If you're not sure which one to use, start with $page->css_user, it's very easy to change it down the road.

JS Events

editor:loaded

/* example how to use the 'editor:loaded' event */

$(document).on('editor:loaded', function(evt, data){

console.log('editor:loaded triggered');

console.log('evt = ', evt);

console.log('data = ', data);

});

editor_area:loaded
admin: +event.type
gp_gallery_add
gp_position
section_clipboard:loaded
section_sorting:loaded
section_options:loaded
section_options:closed
SectionAdded
SectionSorted
SectionRemoved
SectionCopied
PreviewAdded
PreviewRemoved