Documentation

Namespace: AJAX

AJAX

An AJAX class that picks up on links and turns them into AJAX links.

This class assumes that you want to run your AJAX via html attributes on your links and that your website can run just as well without these links. It should also provide additional functionality that allows the class to run programatically, thereby giving the programmer the ability and options to create the websote however they want to.

Version:
  • 0.5
Author:

Extends

Members

<static> attributeAjax :string

(getter/setter) The attribute used to determine whether a link should be run via the AJAX class.

Type:
  • string
Default Value:
  • 'data-wtc-ajax'

<static> attributeTarget :string

(getter/setter) The attribute used to determine where a link should place it's resultant GET. This attribute should be in the form of a selector, ie: .ajax-target

Type:
  • string
Default Value:
  • 'data-wtc-ajax-target'

<static> attributeSelection :string

(getter/setter) The attribute used to slice the resultant GET. This attribute should be in the form of a selector, ie: .ajax-selection

Type:
  • string
Default Value:
  • 'data-wtc-ajax-selection'

<static> classBaseTransition :string

(getter/setter) The classname to use as the basis for transitions. Default will be wtc-transition. So this will then be used for all 3 states: .wtc-transition .wtc-transition-out .wtc-transition-out-start .wtc-transition-out-end .wtc-transition-out-finish .wtc-transition-in .wtc-transition-in-start .wtc-transition-in-end .wtc-transition-in-finish

Type:
  • string
Default Value:
  • 'wtc-transition'

<static> attributeShouldNavigate :string

(getter/setter) The attribute used to slice the resultant GET. This attribute should be in the form of a selector, ie: .ajax-selection

Type:
  • string
Default Value:
  • 'data-wtc-ajax-selection'

<static, readonly> requestObject

returns a new requestObject. Wrapping placeholder for now waiting on enhancements.

<static> lastChangedTarget

returns a new last changed target. This is used to determine what to changed when navigating back via history.

Default Value:
  • null

<static> resolveTimeout

The resolve timeout. This is the time that is to ellapse between an transition completing and the new content being added. This is applied both to the outward element and the inward.

Default Value:
  • 0

<static> state

The state that the AJAX object is in, as determined from a list of constants:

  • OK Idle, ready for a state load.
  • CLICKED Clicked, but not yet fired.
  • LOADING Loading page.
  • TRANSITIONING Transitioning state
  • LOADED Content loaded.
Default Value:
  • STATE.OK

<static> lastParsedURL

The last URL to be parsed by the AJAX object. Generally speaking, this is the last URL to be loaded or attempted loaded.

Default Value:
  • null

<static> animationDepth

The depth to check for transitions. This is to allow you to set the depth to check for transitions on based on deep transitions that are longer or have a much larger delay than intended.

Default Value:
  • null

Methods

Initialise the links in the document.

This will look through the links in the document as denoted by the attributeAjax property and apply a click listener to it that will attempt to determine what and how to load.

A simple mechansim for this would be something like:

     <a href="page1.html"
        data-wtc-ajax="true"
        data-wtc-ajax-target='#link2-target'
        data-wtc-ajax-selection=".link1-selection"
        data-wtc-ajax-should-navigate="false">Link 1</a>

The adtributes equate as follows:

  • (attributeAjax) data-wtc-ajax

    Denotes that this link is an AJAX link.

  • (attributeTarget) data-wtc-ajax-target

    Denotes the target into which to load the result. Should take the form of a selector.

  • (attributeSelection) data-wtc-ajax-selection

    Denotes the selection of data to pull from the loaded document. Should take the form of a selector.

  • (attributeShouldNavigate) data-wtc-ajax-should-navigate

    True / False as to whether the link should update the history object. Only necessary if false.

In addition, attributeTarget and attributeSelection accept basic JSON syntax so that you can load moltiple pieces of content from the source.

Parameters:
Name Type Description
rootDocument DOMElement

The DOM element to find links in. Defaults to body.

<static> ajaxGet(URL, target, selection [, linkTarget], fromPop [, data])

This builds out an AJAX request, normally based on the clicking of a link, but it can alternatively be called directly on the AJAX object.

Parameters:
Name Type Argument Default Description
URL string

The URL to get. This will be parsed into an appropriate fomat by the object.
target string

The target for the loaded content. This can be a string (selector), or a JSON array of selector strings.
selection string

This is a selector (or JSON of selectors) that determines what to cut from the loaded content.
linkTarget DOMElement <optional>

The target of the link. This is useful for setting active states in callback.
fromPop boolean false

Indicates that this GET is from a pop
data object <optional>
 {}

The data to pass to the AJAX call.
Returns:

  • A promise that represents the GET.

    Type
    Promise

  • The resolve method. Passes the loaded content down through it's thenables, finally resolving to the parse commend via a second, private Promise.

    Type
    loadResolve

  • The reject method. Results in an error

    Type
    loadReject

<private, static> _popstate(e)

Listener for the popstate method

Parameters:
Name Type Description
e object

the passed event object
Returns:

void

Trigger an ajax link as determined by a click callback. This should only ever be called from a click event as added via the AJAX object or a child thererof.

Parameters:
Name Type Description
e object

the event object passed from the click event.

<private, static> _parseResponse(content, target, selection [, linkTarget])

This responds to the ajax load event and is responsible for building the result, injecting it into the page, running callbacks and detecting and delaying transitions and animations as necessary/

Parameters:
Name Type Argument Description
content string

The loaded page content, this comes from the AJAX call.
target string

The target for the loaded content. This can be a string (selector), or a JSON array of selector strings.
selection string

This is a selector that determines what to cut from the loaded content.
linkTarget DOMElement <optional>

The target of the link. This is useful for setting active states in callback.
Returns:

An object representing both the main document and the subdocument

Type
AJAXDocument

<private, static> _completeTransfer(content, target, selection, fromPop)

This completes the transition of content. This removes the old content and adds the new

Parameters:
Name Type Description
content AJAXDocument

The DOM nodes to add to the element
target DOMNode

The target to add the new content to
selection string

This is a selector that determines what to cut from the loaded content.
fromPop boolean

Indicates that this load is from a history pop

<private, static> _error(readyState, status)

Trigger an error log

Parameters:
Name Type Description
readyState type

description
status type

description
Returns:

description

Type
type