Skip to content

Extending the Toolkit

Jump to bottom Edit New page
Kyle Jaebker edited this page Mar 24, 2015 · 4 revisions

#Extending the Toolkit

The OSCI Toolkit Frontend was built with extensibility to allow developers to modify all aspects of the reading experience. The OSCI toolkit javascript files come in a minified version that can be included in a page with the customizations added in additional includes.

<html>
    <head>
    	<!-- javascript provided by the OSCI Toolkit -->
    	<script src="OSCI-Toolkit-0.1.0-dependencies.min.js"></script>
    	<script src="OSCI-Toolkit-0.1.0.min.js"></script>
    	<!-- custom javascript for this application -->
    	<script src="my-custom-view.js"></script>
    	<script src="my-custom-model.js"></script>
    	<script src="my-custom-collection.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

The following libraries are included in the OSCI-Toolkit-0.1.0-dependencies.min.js file:

##Overriding a View/Model/Collection

The OSCI Toolkit is built on top of Backbone views/models/collections. All of these are documented in this wiki see.

To override the entire functionality of these components just replace the class in one of your custom javascript files.

For instance, to override the Table of Contents view the following code would be included after including the OSCI Toolkit javascript.

OsciTk.views.Toc = OsciTk.views.BaseView.extend({
	id: 'toc-view',
	template: OsciTk.templateManager.get('aic-toc'),
	…
});

##Overriding a Template

Compiled underscore.js templates are included with the minified version of the OSCI toolkit javascript. There are two possible ways to override one of the default templates:

Option 1: Override the view that uses the template and define a template with a new name.

OsciTk.views.Footnotes = OsciTk.views.BaseView.extend({
	id: 'footnotes',
	template: OsciTk.templateManager.get('my-custom-footnotes-template')
});

Option 2: Override the compiled template with a new template. All of the compiled templates are added to OsciTk.templates, allowing for the replacement of one of the existing compiled template.

OsciTk.templates['title'] = OsciTk.templateManager.get("my-custom-title-template");

##Using Events to extend the toolkit

To allow the OSCI Toolkit components to communicate between each other an event system was implemented. (see here for more info) The event system is built using Backbones event system and all events are routed through Backbone.

To add additional events to the system use the following:

Backbone.trigger("my new custom event");

To listen for events use the following:

this.listenTo(Backbone, "my new custom event", function() {
	"do something here"
});
Add a custom footer

Table of Contents

Other Links

Clone this wiki locally