Pastpresentfuture NPM

PastPresentFuture

A JavaScipt library for manipulating browser history with pushState and AJAX.

Introduction

PastPresentFuture is a JavaScript library for interacting with history.pushState() while loading internal URLs with AJAX. The goal is to maintain a single load of CSS and JS assets per user session, speeding up page changes for time-on-site retention with increased page views. Below you will find documentation on its configuration and usage.

Installation

Bower

Use the Bower package manager to install PastPresentFuture into your project. To do so you can either use the CLI:

$ bower install pastpresentfuture --save

Or define it in your bower.json manifest:

    "dependencies": {
        "pastpresentfuture": "latest"
    }

npm

Similarly, PastPresentFuture can be installed using npm. To do so you can either use the CLI:

$ npm install pastpresentfuture --save

Or define it in your package.json manifest:

    "dependencies": {
        "pastpresentfuture": "latest"
    }

Direct download

If package managers are not your thing, the library can be downloaded directly from GitHub using the Download ZIP button.

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PastPresentFuture Usage</title>
    <script src="jquery.js"></script>
    <script src="PastPresentFuture.min.js"></script>
</head>
<body>
    <!--
    This is the main container with content that can be changed.
    -->
    <div class="page_content_holder"></div>

    <script type="text/javascript">
        ( function () {

            PastPresentFuture();

        } () );
    </script>
</body>
</html>

Configuration

key	type
`content`	String
`ajaxContainer`	String
`prefetchCacheLimit`	Integer
`ajaxCacheLimit`	Integer
`onParseHtml`	Function

Example Configuration:

{
    content: '.page_content_holder',
    ajaxContainer: '.page_content_holder',
    prefetchCacheLimit: 15,
    ajaxCacheLimit: 15
}

`content`

Type: String

Default: '.page_content_holder'

Description: The wrapper that contains the dynamic aspects of the page to be replaced.

event	trigger source
`PastPresentFuture:AfterInitState`	internal
`PastPresentFuture:PushState`	internal
`PastPresentFuture:NewState`	internal
`PastPresentFuture:PopState`	internal
`PastPresentFuture:LoadingReveal`	internal
`PastPresentFuture:LoadingComplete`	internal
`PastPresentFuture:GotoUrl`	both
`PastPresentFuture:RecordPageview`	internal
`PastPresentFuture:RenderUrl`	internal
`PastPresentFuture:FetchedData`	internal
`PastPresentFuture:BeforeTransition`	internal
`PastPresentFuture:AnimateTransition`	internal
`PastPresentFuture:ResetPage`	internal

name	type	description
`url`	String	The url to push into the brower’s history.
`popstate`	Boolean	Whether this is a popstate event. Optional.
`title`	String	The page title for the new url. Optional.

name	type	description
`url`	String	The url of the page to go to.
`popstate`	Boolean	Optional, set to `false` by default.
`options`	Object	Optional, specifically used for pushState.

name	type	description
`contentHolder`	Array	jQuery selection for the content element.
`ajaxContainer`	Array	jQuery selection for the ajax container element.