en:user:gs3_sample_format_statements
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:user:gs3_sample_format_statements [2016/10/09 23:05] – [Using the javascript in the format statement] kjdon | en:user:gs3_sample_format_statements [2016/10/09 23:26] – [Adding javascript into a page] kjdon | ||
---|---|---|---|
Line 226: | Line 226: | ||
==== Adding javascript into a page ==== | ==== Adding javascript into a page ==== | ||
+ | |||
+ | To add the javascript into an XSL file, you encase it in script tags. And because XSL will escape double quotes by default, you need to put it inside **< | ||
+ | |||
+ | < | ||
+ | <script type=" | ||
+ | < | ||
+ | function humanReadableFileSize(bytes) | ||
+ | { | ||
+ | var filesize = bytes + " bytes"; | ||
+ | if (bytes > 1048576) { | ||
+ | filesize = Math.round(bytes / 1048576.0) + " MB"; | ||
+ | } | ||
+ | else if (bytes > 1024) { | ||
+ | filesize = Math.round(bytes/ | ||
+ | } | ||
+ | return filesize; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | There are multiple places you can use to add some javascript into your library. | ||
+ | |||
+ | * **All pages, all collections** | ||
+ | |||
+ | **web/ | ||
+ | |||
+ | * **Only classifier pages, all collections** | ||
+ | |||
+ | The **create-html-header** template calls an additional template **additionalHeaderContent**, | ||
+ | |||
+ | * **All pages, single collection** | ||
+ | |||
+ | The **additionalHeaderContent** template calls further specifric templates, including **additionalHeaderContent-collection**. This template can be added into the collection' | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | < | ||
+ | function humanReadableFileSize(bytes) | ||
+ | { | ||
+ | .. function content here... | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * **single page, single collection** | ||
+ | * | ||
+ | Say you just want to use this new javascript on the classifier pages, then add the template into the main classifier format element. Or add it into the format element of a specific classifier and it will only be available for that single classifier. | ||
==== Using the javascript in the format statement ==== | ==== Using the javascript in the format statement ==== | ||
Line 251: | Line 303: | ||
We will modify the third <td> element to display a human readable form. | We will modify the third <td> element to display a human readable form. | ||
- | During development, | + | During development, |
< | < | ||
Line 273: | Line 325: | ||
</ | </ | ||
- | Element ids need to be unique, so in this case we will use the document id (< | + | Element ids need to be unique, so in this case we will use the document id (**< |
- | <td id="< | + | **<td id="< |
- | To set an element' | + | To set an element' |
- | document.getElementById finds the specified element, and element.innerHTML = " | + | **document.getElementById** finds the specified element, and **element.innerHTML = " |
We set the text to be the result of calling our function on the filesize metadata. | We set the text to be the result of calling our function on the filesize metadata. | ||
- | One further tricky part. We want to write document.getElementById("< | + | One further tricky part. We want to write **document.getElementById("< |
- | + | ||
- | i.e. document.getElementById(< | + | |
- | Greenstone provides a shorthand: < | + | i.e. **document.getElementById(< |
+ | ** | ||
+ | Greenstone provides a shorthand: | ||
en/user/gs3_sample_format_statements.txt · Last modified: 2023/03/13 01:46 by 127.0.0.1