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/09/26 22:58] – [Linking metadata to a search] kjdon | en:user:gs3_sample_format_statements [2016/10/09 23:11] – [Adding javascript into a page] kjdon | ||
---|---|---|---|
Line 183: | Line 183: | ||
< | < | ||
Search for Authors: < | Search for Authors: < | ||
- | < | + | < |
+ | amp; | ||
+ | < | ||
</ | </ | ||
</ | </ | ||
Line 189: | Line 191: | ||
< | < | ||
+ | Use double quotes around the query value if you want exact matching, i.e. | ||
+ | < | ||
+ | s1.query="< | ||
+ | </ | ||
The parameters are: | The parameters are: | ||
* qs=1 - this search is a quick search. Can omit if you want to be taken to the TextQuery search page (equivalent to clicking the TextQuery link under the quick search form) | * qs=1 - this search is a quick search. Can omit if you want to be taken to the TextQuery search page (equivalent to clicking the TextQuery link under the quick search form) | ||
Line 197: | Line 203: | ||
* s1.index=CR | * s1.index=CR | ||
+ | ===== Using javascript to change the display ===== | ||
+ | |||
+ | As an example of using javascript, we will see how to output the document filesize in a human readable form. For example, instead of displaying " | ||
+ | |||
+ | A basic javascript method to do this is the following: | ||
+ | |||
+ | < | ||
+ | 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 ==== | ||
+ | |||
+ | There are multiple places you can use to add some javascript into your library. | ||
+ | |||
+ | * All pages, everywhere | ||
+ | |||
+ | web/ | ||
+ | ==== 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 valign=" | ||
+ | < | ||
+ | </td> | ||
+ | <td> | ||
+ | < | ||
+ | </td> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | We will modify the third <td> element to display a human readable form. | ||
+ | |||
+ | During development, | ||
+ | |||
+ | < | ||
+ | <td> | ||
+ | <script type=" | ||
+ | </ | ||
+ | </td> | ||
+ | </ | ||
+ | |||
+ | 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. | ||
+ | |||
+ | < | ||
+ | <td> | ||
+ | < | ||
+ | <script type=" | ||
+ | document.getElementById(< | ||
+ | </ | ||
+ | </td> | ||
+ | </ | ||
+ | |||
+ | 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