Differences

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

--- 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:27] – [Adding javascript into a page] kjdon
@@ Line 226: / Line 226: @@
 ==== 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 **<xsl:text disable-output-escaping="yes">** tags.
+<code>
+<script type="text/javascript">
+  <xsl:text disable-output-escaping="yes">
+    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/1024.0)+ " KB";
+      }
+      return filesize;
+    }
+  </xsl:text>
+</script>
+</code>
+There are multiple places you can use to add some javascript into your library.
+  * **All pages, all collections**
+**web/interfaces/default/transform/layouts/header.xsl** contains global templates used in the headers of all pages in the library. The **create-html-header** template sets up the header for each page. If you add your script element into here, it will appear in all pages in your library.
+  * **Only classifier pages, all collections**
+The **create-html-header** template calls an additional template **additionalHeaderContent**, which can be used to customise which pages get the extra javascript. For example, if we only want this function to be available for classifier pages, we can edit **web/interfaces/default/transform/pages/classifier.xsl**. Copy the **<xsl:template name="additionalHeaderContent">** element from the header.xsl file into the classifier.xsl file. Add the new script tag into it.
+  * **All pages, single collection**
+The **additionalHeaderContent** template calls further specifric templates, including **additionalHeaderContent-collection**. This template can be added into the collection's collectionConfig.xml file to modify the header just for that collection. If you want the javascript to be available for all pages in this collection, add the template to the global format statement. In GLI, select global. In the file, it is the top level <format> element.
+<code>
+<xsl:template name="additionalHeaderContent-collection">
+  <script type="text/javascript">
+    <xsl:text disable-output-escaping="yes">
+    function humanReadableFileSize(bytes)
+    {
+      .. function content here...
+    }
+    </xsl:text>
+  </script>
+</xsl:template>
+</code>
+  * **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 ====
@@ Line 251: / Line 303: @@
 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>
@@ Line 273: / Line 325: @@
 </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
+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/>">.
+**<td id="<gsf:OID/>">**.
-To set an element's text, we use document.getElementById("id").innerHTML = "xxx".
+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.
+**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>.
+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 the above <xsl:text> construction.
+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.