Differences

This shows you the differences between two versions of the page.

--- en:user:gs3_sample_format_statements [2016/10/09 22:51] – [Using javascript to change the display] kjdon
+++ en:user:gs3_sample_format_statements [2016/10/09 23:11] – [Adding javascript into a page] kjdon
@@ Line 227: / Line 227: @@
 ==== Adding javascript into a page ====
+There are multiple places you can use to add some javascript into your library.
+  * All pages, everywhere
+web/interfaces/default/transform/layouts/header.xsl contains global templates used in the headers of all pages in the library.
 ==== Using the javascript in the format statement ====
@@ Line 234: / Line 239: @@
 <code>
-      <gsf:template match="documentNode">
+<gsf:template match="documentNode">
-	<td valign="top">
+  <td valign="top">
-	  <gsf:link type="document">
+    <gsf:link type="document">
-	    <gsf:icon type="document"/>
+      <gsf:icon type="document"/>
-	  </gsf:link>
+    </gsf:link>
-	</td>
+  </td>
-	<td valign="top">
+  <td valign="top">
-          <gsf:metadata name="dc.Title"/>
+    <gsf:metadata name="dc.Title"/>
-	</td>
+  </td>
-        <td>
+  <td>
-          <gsf:metadata name="FileSize"/>
+    <gsf:metadata name="FileSize"/>
-        </td>
+  </td>
-      </gsf:template>
+</gsf:template>
 </code>
 We will modify the third <td> element to display a human readable form.
-During development, we can use the simple document.write() method to output the result:
+During development, we can use the simple **document.write()** method to output the result:
 <code>
 <td>
-<script type="text/javascript">document.write(humanReadableFileSize(<gsf:metadata name="FileSize"/>));</script>
+<script type="text/javascript">document.write(humanReadableFileSize(<gsf:metadata name="FileSize"/>));
+</script>
 </td>
 </code>
+This lets us check that our function is correct and we are getting the right metadata. However, using "document.write" is not considered good practice.
+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.
+<code>
+<td>
+  <xsl:attribute name="id"><gsf:OID/>-fs</xsl:attribute>
+  <script type="text/javascript">
+    document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).innerHTML= humanReadableFileSize(<gsf:metadata name="FileSize"/>);
+  </script>
+</td>
+</code>
+Element ids need to be unique, so in this case we will use the document id (**<gsf:OID/>**) with **-fs** just in case the OID has been used as an id elsewhere in the page. Because we are not assigning a simple string to the id attribute, we need to use the **<xsl:attribute>** element. We cannot write
+**<td id="<gsf:OID/>">**.
+To set an element's text, we use **document.getElementById("id").innerHTML = "xxx"**.
+**document.getElementById** finds the specified element, and **element.innerHTML = "xxx"** sets its text.
+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("<gsf:OID/>-fs")**. However, the XSL transform process will escape the double quotes with &quot; and then the javascript will be invalid. To get around this, we use **<xsl:text disable-output-escaping="yes">"</xsl:text>**.
+i.e. **document.getElementById(<xsl:text disable-output-escaping="yes">"</xsl:text><gsf:OID/>-fs<xsl:text disable-output-escaping="yes">"</xsl:text>)
+**
+Greenstone provides a shorthand: **<gsf:html>"</gsf:html>**, which gets resolved to <xsl:text> with the disable-output-escaping attribute set.