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 22:40] – [adding in new javascript] kjdon | en:user:gs3_sample_format_statements [2016/10/09 23:05] – [Using the javascript in the format statement] kjdon | ||
---|---|---|---|
Line 223: | Line 223: | ||
</ | </ | ||
- | So, we have a javascript function, but how do we get it into the page? | + | So, we have a javascript function, but how do we get it into the page? And how do we call it? |
- | Displaying human readable filesize. | + | |
- | < | + | ==== Adding |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | + | ||
- | <script type="text/javascript"> | + | |
- | | + | |
- | 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); | + | |
- | </xsl:text> | + | ==== Using the javascript in the format statement ==== |
- | </script> | + | |
+ | 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. | ||
+ | |||
+ | <code> | ||
+ | <gsf:template match=" | ||
+ | <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: 2024/07/05 01:00 by kjdon