Numerous Packages Multiply

    ajaxio

    1.3.9 • Public • Published

    Demo

    https://thibka.github.io/ajaxio/public/

    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
    3. Limitation

    Webpack Configuration

    Create an .htaccess

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

    <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    </IfModule>

    If your files are in a subdirectory (for example https://mysite.com/myproject/), set your htaccess this way and don't forget to set the root option accordindly during initialisation.

    <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /myproject
    RewriteRule ^/myproject/index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /myproject/index.html [L]
    </IfModule>

    Webpack tip: to load the htaccess from your src folder to your 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' },
    			]
    		})
        ]
    }

    Snowpack tip: to load the htaccess from your src folder to your production build, use snowpack-plugin-copy in your snowpack.config.js:

    module.exports = {
        // ...
        plugins: [
            // ...
            [
                'snowpack-plugin-copy',
                {
                    patterns: [
                        {
                            source: 'src/.htaccess',
                            destination: 'build'
                        }
                    ],
                },
            ]
        ]
    }

    Also, if you use Snowpack, set it up to accept html fragments.

    module.exports = {
        // ...
        buildOptions: {
            htmlFragments: true
        }
    }

    Load each html page with html-webpack-plugin

    Ajaxio works by:

    1. Receiving the name of the page the user wants to access (either from the method changePage, or from the url)
    2. Retrieving html content from other pages (other html files)
    3. 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
            })
        ]
    }

    Or you could also do it this way

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    let config = {
        plugins: [
            //...
            // First we load the main html template
            new HtmlWebpackPlugin({
    			template: './src/index.html'
    		}),
            // Then, every other asynchronously loaded contents
            ...(['page-content-1', 'page-content-2'].map((file) => new HtmlWebpackPlugin({
    			filename: `./${file}.html`,
    			template: `./src/${file}.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. Only the content of the selected element will be loaded.
        // 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'
    
        languagesUrl: ['fr', 'it'],
        // Optionnaly set languages when the url accepts languages code.
        // Exemple myurl.com/fr/, myurl.com/fr/projects
    
        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", unless another file extension has been defined in the initialization options.

    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;

    Limitation of Ajaxio

    Even if the url changes, ajaxio uses the index.html page only.
    This means that each page will share the same <head> tag.

    Keywords

    Install

    npm i ajaxio

    DownloadsWeekly Downloads

    2

    Version

    1.3.9

    License

    ISC

    Unpacked Size

    13.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • thibka