Skip to content

Javascript

Jump to bottom
gtbu edited this page Jul 3, 2024 · 7 revisions

Typesetter uses jquery and some custom JavaScript for site functions, but if you're looking to do a little more, JavaScript can be added to Typesetter sites multiple ways.

Adding to a File

Javascript can be added directly to a file in Typesetter. This is the best option for users wanting to add scripting to just a few pages. To add <script> tags, start editing your page by clicking the "Edit" button and then click "Source" in the editor once it has loaded. Here you'll be able to see all the HTML of your file and you can add your <script> content as needed. The settings.php of the templates allows to add specific Javascripts of the template.

Note: Typesetter uses HTML Tidy when available to clean the html of your pages. To keep HTML Tidy from removing your <script> content, don't add it as the first part of your document. HTML Tidy prefers, for some reason, to have some HTML before Javascript.

Note: As of Typesetter 5+ you cannot use jQuery inside <script> tags in the content anymore, because jQuery is only loaded later, at the end of the <body> element.
 

Adding to template.php

Adding <script> tags to the template.php file will be most familiar to anyone who has experience with javascript. The template.php file is essentially an html file with some php calls like <?php gpOutput::GetHead() ?>. Here's what an example of a simple template.php file.

So taking that simple template.php example, all we need to do to add some more javascript is add a <script> tag to the <head> section of the template.php file.

1
2
3
4
<head>
    <?php gpOutput::GetHead(); ?>
    <script> alert('hello world'); </script>
</head>

Important: Since Typesetter version 5, javascript files will be loaded at the end of the <body> element. While the example above will still work as long as you write plain javascript, it will not when you try to use jQuery. That’s because jQuery will only be loaded later. So the following example will cause an error:

1
2
3
4
5
6
7
<head>
    <?php gpOutput::GetHead(); ?>
    <script>
        /* ### IN TYPESETTER 5+ THE FOLLOWING CODE WILL NOT WORK HERE! ### */
        $(document).ready( function(){ /* your script code */ });
    </script>
</head>

So for any jQuery code do not use a <script> tag in the head section anymore but use $page->jQueryCode (see below).


Adding to $page->head

If you're designing a plugin for Typesetter, you won't have access to the template.php. You can add javascript by using the $page->head variable. While using this method, be sure to append to the $page->head variable.

1
$page->head .= '<script>alert("hello world")</script>';

Loading external scripts using $page->head

This method can also be used to load external JavaScripts (e.g. from a CDN):

1
$page->head .= '<script src="https://somecdn.com/some-jquery-plugin.js"></script>';


Adding to $page->head_script

Instead of $page->head you can also use the $page->head_script variabe. Omit the <script> tags in this case.

1
$page ->head_script .= 'alert("hello world");' ;


Adding to $page->jQueryCode

For any JavaScript or jQuery that should be executed when the DOM is ready, append your code to the $page->jQueryCode variable.

1
$page->jQueryCode .= '$(".myElement").on("click", function(){ alert("Click!"); });';

Since everything here will only be executed after the document.ready event fired, you do not need to wrap your code into $(document).ready( function(){ /* ... */ } );

Loading script files using $page->head_js[]

To load JavaScript from a separate file, the best way is to use the $page->head_js array. This way Typesetter will be able to add your script file to the combined JavaScript file (if "Combine JS Files" is activated in the system configuration).

1
$page->head_js[] = '/path/to/your/script.js';

or inside php : $this->page->head_js[] = '/include/js/auto_width.js';

Adding to Addon.ini

Very similarly to $page->head, this option can be used to add strings of text to Typesetter pages. The primary difference between this option and $page->head is that any text added to html_head will be included in all pages once the plugin is installed.

1
2
;used to add css/js/feed elements to the installation
html_head = '<link rel="alternate" type="application/atom+xml" href="../data/_addondata/{$addon}/feed.atom" />'

** Since Typesetter 5.2 the style of a template is a new point of the addon.ini.

[FrontEndFramework]

name = Css

version = 3

  • For bootstrap 4 it would be

[FrontEndFramework]

name = Bootstrap

version = 4

ColorBox

Typesetter also comes installed with support for colorbox. Colorbox can be used to display elements (like images, forms, messages, etc) as an overlay.

Functions

1
common::AddColorBox();

As of Typesetter 5+ use

1
\gp\tool::AddColorBox();

Add the above php code before

1
gpOutput::GetHead();

As of Typesetter 5+ it might also be

1
\gp\tool\Output::GetHead();

 

Loadable Components

Typesetter also implements a lot of other components you might want to load and use in your theme or plugin. You can load a single component or multiple ones in one go using a comma separated value. A complete list of all available components can be found here.

1
2
\gp\tool::LoadComponents('fontawesome');
\gp\tool::LoadComponents('fontawesome,respondjs,bootstrap3-js');
Clone this wiki locally