@thibka/ajaxio v1.2.1

Install

npm i ajaxio

Table of Contents

1. Webpack Configuration
   1. Create an .htaccess
   2. Load each html page with html-webpack-plugin
2. Usage
   1. Init
   2. Options
   3. Methods
   4. Properties

Webpack Configuration

Create an .htaccess

Create an .htaccess in your webpack source folder with the following content.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /index.html [L]

To load into your webpack production build, use copy-webpack-plugin in your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');
let config = {
    // ...
    plugins: [
        // ...
        new CopyWebpackPlugin({
			patterns: [
				{ from: 'src/.htaccess' },
			]
		})
    ]
}

Load each html page with html-webpack-plugin

Ajaxio works by:

• retrieving content from other html pages
• loading this content into index.html

So we need webpack to load each page from the source folder to the build.
To do so, use html-webpack-plugin in your webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
    plugins: [
        //...

        // First we load the main html template
        new HtmlWebpackPlugin({ 
            filename: './index.html',
            template: './src/index.html'
        }),
        // Then, every other asynchronously loaded contents
        new HtmlWebpackPlugin({
            filename: './page-content-1.html',
            template: './src/page-content-1.html',
            inject: false // <- this has to be set to false for any other page than index.html
        }),
        new HtmlWebpackPlugin({
            filename: './page-content-2.html',
            template: './src/page-content-2.html',
            inject: false // <- this has to be set to false for any other page than index.html
        })
    ]
}

Usage

Init

import Ajaxio from 'ajaxio'

Ajaxio.init();

Options

The following options can be passed in the init() method.
Example :

Ajaxio.init({
    root: '/root-folder/',
    // Specifies the appropriate subfolder path if the website is not at the root of the domain.
    // Default is '/'.

    containerSelector: '#load-content-here',
    // CSS selector of the element receiving the ajax loaded HTML content.
    // Default is 'body'.

    targetSelector: '#retreive-me',
    // CSS selector of the target element where Ajaxio should retrieve content in the external html files.
    // Default is empty (which means the whole file content is retrieved).

    fileExtension: '.php',
    // Specifies what kind of files will be used to retrieve content.
    // Default is '.html'

    homeId: 'welcome',
    // Specifies the id of the home page to prevent displaying it in the url.
    // For instance when ajaxio loads "home.html" we don't want the url to be "domain.com/home".
    // Default is 'home'

    onFirstLoad: currentPageId => { 
        console.log(currentPageId + ' has been loaded');
    }
    // Callback function triggered on first page load.
    // This function will only be triggered once, unless the browser page is refreshed,
    // and provides the current page id as parameter.
});

Methods

changePage

Loads an HTML page from a given name.

Ajaxio.changePage('pageId'); // Will load "./pageId.html"

beforePageChange

Ajaxio.beforePageChange.add((done, previousPageId, nextPageId) => {            
    // Triggered before a new page is loaded.
    // The "done" parameter is a callback function that needs to be manually called once.
    // This will allow you to control when the page change will actually be triggered.
    done();
});

afterPageChange

Ajaxio.afterPageChange.add((nextPageId, previousPageId) => {
    // Triggered once the new page has been loaded.
});

Properties

pageScripts

Ajaxio.pageScript is an array used to declare callback functions tied to pages.
Each callback is triggered when the page sharing its name is loaded, right after the afterChange hook.

src/js/home.js

import Ajaxio from 'ajaxio'

export default function home() {
    document.getElementById('link').addEventListener('click', ()=>{
        Ajaxio.changePage('page2');
    });
}

src/index.js

import home from './js/home'

Ajaxio.pageScripts['home'] = home;