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 21:46] – [Linking metadata to a search] kjdon | en:user:gs3_sample_format_statements [2016/10/09 23:27] – [Adding javascript into a page] kjdon | ||
---|---|---|---|
Line 203: | Line 203: | ||
* s1.index=CR | * s1.index=CR | ||
- | ==== adding in new javascript ==== | + | ===== Using javascript |
- | Displaying | + | As an example of using javascript, we will see how to output the document filesize in a human readable |
- | < | + | A basic javascript |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | + | ||
- | <script type=" | + | |
- | | + | |
- | bytes =</ | + | |
- | var filesize = bytes + " bytes"; | + | |
- | if (bytes > 1048576) { | + | |
- | filesize = Math.round(bytes / 1048576.0) + " MB"; | + | |
- | } | + | |
- | else if (bytes > 1024) { | + | |
- | filesize = Math.round(bytes/ | + | |
- | } | + | |
- | document.write(filesize); | + | |
- | </ | + | < |
- | </ | + | 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | So, we have a javascript function, but how do we get it into the page? And how do we call it? | ||
+ | |||
+ | ==== 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; | ||
+ | } | ||
+ | | ||
+ | </script> | ||
+ | |||
+ | </ | ||
+ | |||
+ | 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 ==== | ||
+ | |||
+ | Now that we have the function included in the page, we can use it to modify our filesize display. | ||
+ | |||
+ | Lets modify a classifier format statement to use this function. The following is a simple format statement that displays an icon linking to the document, the title, and the filesize. | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <td valign=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
</td> | </td> | ||
- | </ | + | <td valign=" |
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | We will modify the third <td> element to display a human readable form. | ||
+ | |||
+ | During development, | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | This lets us check that our function is correct and we are getting the right metadata. However, using " | ||
+ | |||
+ | Instead, we will need to set the innerHTML of the td element. This means we need to give the td element an id so we can find it again. | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | document.getElementById(< | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Element ids need to be unique, so in this case we will use the document id (**< | ||
+ | **<td id="< | ||
+ | |||
+ | To set an element' | ||
+ | **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. | ||
+ | |||
+ | One further tricky part. We want to write **document.getElementById("< | ||
+ | |||
+ | 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