Working with js or css libraries

Defining a library

You can define a library in theme-js-definitions.

There are already many definitions for common libraries. You can define libraries as per your project

You can define multiple css and js files.

cdnjs and cdncss is used in preference to css and js.

In case of localhost css and js is given preference.

Use cdnjs.com for finding cdn hosted libraries

Example

 Defining functions for a library

You can define additional functions for any library including core.

 Loading a Library

A library can be loaded using the libname:load command. All functions automatically load the library before firing the command so this line is not required if you are firing a command after load

 Setting up the library with default settings

This will load the library and then execute the set_defaults function. Use set_defaults to do the default settings or bindings.
[ aw2_spa spa_activity='fancybox:set_defaults' /]

Running a predefined function for a library

This will load the library and then fire the fancybox.close() function. You can pass any parameters.
All parameters will be available in obj.model of the definition.

This will load the library, run the set_defaults and then run the close() func

Running a non defined function

This will load the library and then run the JavaScript

 Loading Multiple libraries

This will load the libraries a,b,c and then run the script

This will load the dependencies, load fancybox and then fire the command

All Parameters

spa_activity: the command to run. Always of the format libname:function
The library is always loaded before the command is fired.
if spa_activity = libname:load  will load the library
if spa_activity = libname:set_defaults  will load the library and then set the default settings
lib='dependancy1, dependancy2' will load the dependency libraries before running the command
set_defaults='true' will set the default setting before firing the command.

 Core Library

Get and Set Page Level Data

Get and Set any Page level Data. Will get destroyed after call to get_spa_uri

The Default Values are stored. And incase you pass a empty value the default value is used

 Building URLs on the client Side

Build URLs and push into history to allow back and forward.

Important to prevent having to open in a new window

Allows you to create urls after ajax calls like : next page/ load more etc

You can put a link like Back to Search Results using window.history.back()

Set the Parts of the URL as page level data.

You can then send a parameterised url to set_history_url to the resolved url

 Running a Script Safely

For full details see core:run_script

This will get executed every time the page is loaded or retrieved from cache

core:set_document_title

Set the document title on the client side

core:set_history_url

set the history url

 

You can also give it a parameterised url. See Building URLs on the client Side

core:run_script

See Execution Steps for the complete flow of core:run_script

core:insert_html

Inserts HTML Content into the DOM

html_selector: Selects the HTML Block from the HTML Block. It selects the inner HTML

target_selector: Where to put the HTML Block

append: ‘true’/’false’: Will append or overwrite the block

 

core:replace_html

Replace the HTML Block in the DOM with the new Block in the same place. It selects the outer HTML

html_selector: The html Selector. It should be there both in the Body and also in the content

 core:get_spa_uri

Gets a uri from the Server. The uri must be unique and return the same value on every call.

The uri will get cached and will not be called again till the page is refreshed.

This is not an admin-ajax call. It is a direct call.

Once the data is returned it will replace the current <div class=spa_main></div> with the incoming <div class=spa_main></div> 

See Overall Flow of SPA for detailed flow.

On the server you will get in the request

spa_call=true
spa_uri=true

It will look for the URI to call in the following places:

Against the spa_activity

Against the Bound element (data-uri)

the href element if the bound element is ‘a’ tag

when=’on_event’ bind_event=’click’ bind_selector=’.back_results’ will bind the event to the button or link

uri : The uri to call

spinner_lib: The spinner lib to show or hide

scroll: Where to scroll to when the page is loaded. defaults to .spa_main

 

core:get_ajax_uri

This is to get a block of content. Eg getting more content for Read More. The uri will get cached and will not be called again till the page is refreshed.

This is not an admin ajax call. It is a direct call.

On the server you will get in the request

spa_call=true

ajax=true

The parameters are same as get_spa_uri.

core:get_ajax

It is an ajax call through admin ajax.

It will not be cached and will be called every time.

On the server you will get in the request

ajax=true

A slug is required. The slug must be available in aw_block CPT.