Differences

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

--- en:user:gs3_sample_format_statements [2016/10/09 23:11] – [Adding javascript into a page] 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, everywhere
+  * **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.
-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 ====