The Textus viewer application.
The Textus viewer is a pure HTML + Javascript application for viewing Textus format texts. It is part of the Textus project.
Demo
Check out:
http://okfnlabs.org/textus-viewer/
Usage
Include all the relevant vendor libraries (see vendor directory):
<script src="vendor/jquery-1.7.2.js"></script>
<script src="vendor/jquery.ui-1.8.22.js"></script>
<script src="vendor/underscore-1.3.3.js"></script>
<script src="vendor/backbone-0.9.2.js"></script>
<script src="vendor/backbone.forms-0.10.0.js"></script>
<script src="vendor/bootstrap.js"></script>
<script src="vendor/bootstrap.modal-1.4.0.js"></script>
<script src="vendor/jquery.ui.colorPicker.js"></script>
Include Textus Viewer JS in your app:
<script src="http://okfnlabs.org/textus-viewer/js/textus.js"></script>
<script src="http://okfnlabs.org/textus-viewer/js/model.js"></script>
<script src="http://okfnlabs.org/textus-viewer/js/annotation.js"></script>
<script src="http://okfnlabs.org/textus-viewer/js/viewer.js"></script>
Now boot the viewer:
jQuery(document).ready(function() {
// Create a Text object with some fixture data
var text = new Textus.Model.Text({
// id is needed if new annotations will be allowed
id: 'text-1',
textUrl: # url to your text in textus format
typographyUrl: # textus typography
annotationsUrl: # url to load annotations from
});
// Load the text
text.fetch(function(err) {
// you could check the err if you want to be sure text has loaded ok
// set up the viewer
var viewer = new Textus.Viewer({
el: $('.textus-viewer-here'),
text: text,
router: null,
user: {
id: 'bob'
}
});
// and now render it
viewer.render();
});
});
Note: we are in the process of reinstating support for loading and saving to a proper Textus compatiable annotations API.
For Contributors
You can try the app out test it during development by opening index.html in your browser but note that you will need to have it loaded at a proper http:// url not a file:/// one (with file:/// urls you won't be able to load the fixture data).
Code Organization
vendor/ # dev
js/ # js code
css/ # css code