Follow

JavaScript API

The JavaScript API allows custom functionality to be built into your publications.

Events

ptiOverrideConfig(config)
This is the first event raised and allows configuration properties to be overridden. Please be aware that certain properties may well be overwritten after this event has been raised.

Example:

<script type="text/javascript">

    function ptiOverrideConfig(config)
    {
        config.traceLog = true;

        config.onNavigationRendered = navigationRendered;
        config.onFlashVersionLoaded = flashVersionLoaded;
        config.onHtmlVersionLoaded = htmlVersionLoaded;
        config.onSinglePageView = singlePageView;
        config.onDoublePageView = doublePageView;
        config.onPagesViewed = pagesViewed;
        config.onLinkClicked = linkClicked;
        config.onVideoPlayed = videoPlayed;
    }
</script>

ptiOverrideConfigPostLoad(config)
Raised once the issue data has been downloaded from the PageTiger servers. Once the issue data has been retrieved and stored, some configuration changes made in the ptiOverrideConfig method may have been overwritten. This is the last chance to override the config before the issue is rendered.

Example:

<script type="text/javascript">

    function ptiOverrideConfigPostLoad(config)
    {
        ptiTrace("ptiOverrideConfigPostLoad");
        config.scrollTopOnPaging = false;
    }
</script>

onNavigationRendered(containerElementID)
Raised as soon as the navigation markup is rendered but before the initial pages are loaded. This gives the opportunity to customise the markup before the issue becomes visible.

Example:

<script type="text/javascript">

    function ptiOverrideConfig(config)
    {
        config.traceLog = true;
        config.onNavigationRendered = navigationRendered;
    }

    function navigationRendered(containerElementID)
    {
        ptiTrace("onNavigationRendered: " + containerElementID);
        // hides navigation bar page numbers
        jQuery(".ptinav_page").hide();
    }
</script>

onFlashVersionLoaded(containerElementID)
Raised once the Flash version has been loaded.

Example:

<script type="text/javascript">
    function ptiOverrideConfig(config)
    {
        config.onFlashVersionLoaded = flashVersionLoaded;
    }
    function flashVersionLoaded(containerElementID)
    {
        jQuery("#CustomStatusLeft").remove();
        jQuery("#" + containerElementID).after("<span id=\"CustomStatusLeft\" style=\"z-index: 10000; position: fixed; left: 0; bottom: 0; border: solid 1px #ccc; color: #333; line-height: 20px; padding: 0 10px;\">Flash Version</span>");
    }
</script>

onHtmlVersionLoaded(containerElementID)
Raised once the html version has been loaded. The html version is usually only loaded if the PC/device does not support flash, however it is possible to force the html version to be rendered by appending the ptih=y parameter to your issue url.

Example:

<script type="text/javascript">
    function ptiOverrideConfig(config)
    {
        config.onHtmlVersionLoaded = htmlVersionLoaded;
    }

    function htmlVersionLoaded(containerElementID)
    {
        jQuery("#CustomStatusLeft").remove();
        jQuery("#" + containerElementID).after("<span id=\"CustomStatusLeft\" style=\"z-index: 10000; position: fixed; left: 0; bottom: 0; border: solid 1px #ccc; color: #333; line-height: 20px; padding: 0 10px;\">HTML Version</span>");
    }
</script>

onSinglePageView(containerElementID)
Raised when the viewing mode is changed from double page to single page.

Example:

<script type="text/javascript">

    function ptiOverrideConfig(config)
    {
        config.onSinglePageView = singlePageView;
    }

    function singlePageView(containerElementID)
    {
        jQuery("#CustomStatusRight").remove();
        jQuery("#" + containerElementID).after("<span id=\"CustomStatusRight\" style=\"z-index: 10000; position: fixed; right: 0; bottom: 0; border: solid 1px #ccc; color: #333; line-height: 20px; padding: 0 10px;\">Single Page View</span>");
    }
</script>

onDoublePageView(containerElementID)
Raised when the viewing mode is changed from single page to double page.

Example:

<script type="text/javascript">
    function ptiOverrideConfig(config)
    {
        config.onDoublePageView = doublePageView;
    }

    function doublePageView(containerElementID)
    {
        jQuery("#CustomStatusRight").remove();
        jQuery("#" + containerElementID).after("<span id=\"CustomStatusRight\" style=\"z-index: 10000; position: fixed; right: 0; bottom: 0; border: solid 1px #ccc; color: #333; line-height: 20px; padding: 0 10px;\">Double Page View</span>");
    }
</script>

onPagesViewed(containerElementID, leftPageIndex, rightPageIndex)
Raised each time a different page is viewed. Please note that the page indexes (rather than numbers) are past to the event and the index starts at 0, therefore the index of the first page would be 0. If there is no left or right page being viewed a page index of -1 past. -1 would only occur if the visitor is viewing either the front/back cover, or the issue is being viewed in single page mode.

Example:

<script type="text/javascript">


    var loadSecondPage = false;
    var loadFirstPage= false;

    function ptiOverrideConfig(config)
    {
        config.onPagesViewed = pagesViewed;
    }

    function pagesViewed(containerElementID, leftPageIndex, rightPageIndex)
    {
        if ((leftPageIndex == 0 || rightPageIndex == 0) && !loadFirstPage)
        {
            // Show the contents popup as soon as the first page is shown for the first time.        
            ptiContents(containerElementID);
            loadFirstPage= true;
        }
        else if ((leftPageIndex == 1 || rightPageIndex == 1) && !loadSecondPage)
        {        
            // Simulate the clicking of a given in page clickable link
            // 3 seconds after first time that the second page is shown.
            window.setTimeout("ptiLinkClicked('" + containerElementID + "', 8, 100);", 3000);
            loadSecondPage = true;
        }
    }
</script>

onLinkClicked(containerElementID, pintType, pintID)
Raised every time an in-page link is clicked by the visitor. This is a useful event for developers to discover the “type” and “ID” required to call the ptiLinkClicked method.

Example:

<script type="text/javascript">
    function ptiOverrideConfig(config)
    {
        config.traceLog = true;
        config.onLinkClicked = linkClicked;
    }

    function linkClicked(containerElementID, type, id)
    {
        ptiTrace("onLinkClicked: : " + containerElementID + ", Module:" + type.toString() + ", ID:" + id.toString());
    }
</script>

onVideoPlayed(containerElementID, pintID)
Raised every time a video is played. The ID of the video is passed allowing custom functionality to be executed when a particular video is played.

Example:

<script type="text/javascript">
    function ptiOverrideConfig(config)
    {
        config.traceLog = true;
        config.onVideoPlayed = videoPlayed;
    }

    function videoPlayed(containerElementID, id)
    {
        ptiTrace("onVideoPlayed: " + containerElementID + ", ID:" + id.toString());
    }
</script>

Methods

  • ptiClosePopup(containerElementID, callbackFunction)
  • ptiClosePopupGotoPage(containerElementID, pageIndex)
  • ptiClosePopupGotoPageSlow(containerElementID, pageIndex)
  • ptiClosePopupLinkClicked(containerElementID, type, id)
  • ptiContents(containerElementID)
  • ptiDoublePageView(containerElementID)
  • ptiEnterPageNumber(containerElementID)
  • ptiGetConfig(containerElementID)
  • ptiGetPages(containerElementID)
  • ptiGotoPage(containerElementID, pageIndex)
  • ptiGotoPageIfOnCover(containerElementID, pageIndex)
  • ptiGotoPageClickLink(containerElementID, pageIndex, type, id)
  • ptiGotoPageSlow(containerElementID, pageIndex)
  • ptiIssues(containerElementID)
  • ptiLinkClicked(containerElementID, type, id)
  • ptiLinkClickedUsingTitle(containerElementID, type, pageIndex, moduleTitle)
  • ptiNextPage(containerElementID)
  • ptiPauseVideos(pstrContainerElementID)
  • ptiPreviousPage(containerElementID)
  • ptiShare(containerElementID)
  • ptiSinglePageView(containerElementID)
  • ptiTools(containerElementID)
  • ptiClosePopup(containerElementID)
  • ptiPauseVideos(containerElementID)
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.