HTML Archive and Table of Contents – Zmags Publicator Community

Live Demo and Download
Code and Explanation

In this demonstration, we will show how to implement our Javascript API to add a custom Table of Contents and Archive to your publication using HTML / CSS. This is useful for integration with your own website / branding, or when the functionality of our built in Archive and Table of Contents isn't doing precisely what you would like it to.

The following is an example usage of the Zmags Embedded Viewer API. It is assumed that readers have general knowledge of embedding the viewer already. If not, feel free to click the link above for more information.

Note: This is no longer the easiest way to do an HTML archive for the Verge Viewer. It is suggested to look at this tutorial first:
HTML Archive via the Schedule API

Live Demo and Download

Click here to view the example in action
Click here to download the example code

Code and Explanation

To start with, it is necessary to get a few things set up. This section declares our document type (the standards by which browsers will display the page), our HTML type, and character set. This is all for cross-browser compatibility purposes.

This section also sets the page title and calls the script for the embedded viewer API.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Archive and TOC</title>
    <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
</head>

The next major block of code uses a regular expression for extracting parameters from the URL. You don't really need to worry about how this works, but it is useful to understand what it does. Look at the following URL, for example:

http://supportdk.zmags.com/CommunityPortal/examples/toc_archive/?id=f1e5b839

In this URL, the part tacked on after the '?' mark is a "URL parameter". It is named "id" and has a value of "cce6e87c". We will need to be able to read parameters like this in the next part of the example. The way this block of code is used is we give it a parameter name, and it gives us back the value of that parameter.

function getUrlVars(name){
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if(results == null)
        return "";
    else
        return results[1];
}

This part of the code is where we set up our embedded viewer. Using the "getUrlVars" function discussed a moment ago, we check for a publication ID specified in the URL, and display that publication if so. If there is no ID specified, we fall back on a default ID instead.

If you are looking to implement this code for your own publications, you should set the ID (marked in red below) to whatever you want the first publication displayed to be.

// Set publication ID.
var viewer = new com.zmags.api.Viewer();
var pubID = getUrlVars("id");
if(pubID != ""){
    viewer.setPublicationID(pubID); // Use ID from URL.
}
else {
    viewer.setPublicationID("4d7f4063"); // Default publication ID.
}

viewer.setParentElementID("myViewerContent");
viewer.show();

This block of code makes room for the div that will contain the Archive and Table of Contents to the right of the publication. We do this using Javascript, after the viewer is loading, because attempting to set the height and width in this fashion before the viewer is loaded will cause a "white screen" error.

function sizeViewer(){
    var width = window.innerWidth || document.documentElement.clientWidth;
    document.getElementById('myViewerContent').style.width = String(width-140)+"px";
    viewer.resize();
}
viewer.addEventListener(com.zmags.api.Viewer.VIEWER_LOADED, sizeViewer);
window.onresize = sizeViewer;

This block is another function, which will serve to prepare the URL parameters discussed above. When a publication is clicked in the archive, this code is used to place the appropriate publication ID in the URL and load the page again.

function changePub(id){
    var filename = window.location.pathname.split( '/' ).pop();
    filename = filename + "?id=" + id;
    window.location.href = filename;

}

The next block of code is in HTML rather than Javascript, and it handles displaying links that will turn the publication pages when clicked:

<a href="#" onClick='viewer.gotoPage(1)'>Pages 1-2</a><br>
<a href="#" onClick='viewer.gotoPage(3)'>Pages 3-4</a><br>
<a href="#" onClick='viewer.gotoPage(5)'>Pages 5-6</a><br>
[ . . . ]

If you would like to create your own "change page" link, use the following format:

<a href="#" onClick='viewer.gotoPage(page_number)'>Any_text_here.</a>

The next HTML section handles displaying links that will change publication when clicked:

<div style="width:116px; font-size:small;">
<a href="#" onClick='changePub("4d7f4063")'>
    <img src="./images/toc_archive/techguide_icon.png" style="width:65px; height:auto;"><br>
    Zmags Technical Guide<br><br></a>
<a href="#" onClick='changePub("f1e5b839")'>
    <img src="./images/toc_archive/experience_icon.png" style="width:65px; height:auto;"><br>
    Sample 1<br><br></a>
<a href="#" onClick='changePub("fd4ad7ab")'>
    <img src="./images/toc_archive/designtips_icon.png" style="width:65px; height:auto;"><br>
    Training PDF<br><br></a>

If you would like to create your own "change publication" link, use the following format:

<a href="#" onClick='changePub("pub_id_here")'>link_content_here</a>

The ID of your publication can be found by clicking on your publication in the "All Publications" list of the Zmags Publicator. The "link content" can be whatever you would like. In our example we use a icon with accompanying text.

The last HTML tag in our example is the div which houses the publication. It starts out set to fill the entire window, but this is adjusted after the viewer is loaded to make room for the Archive and Table of Contents along the right side. (See above.)

<div id="myViewerContent" style="position:fixed; top:0px; left:0px; width:100%; height:100%;"></div>

Related articles