modularload

v1.2.8

Published

2 years ago

Dead simple page transitions and lazy loading.

0High
0Medium
0Low

jerek0

antoineboulanger

devenini

Installation

npm install modularload

Why

Simple
Lightweight
Minimal configuration
No dependencies

Usage

import modularLoad from 'modularload';

this.load = new modularLoad({
    enterDelay: 300
});

<div data-load-container>
    <h1>Hello</h1>
    <a href="/blog">Read more</a>
</div>

With custom transitions

import modularLoad from 'modularload';

this.load = new modularLoad({
    enterDelay: 300,
    transitions: {
        transitionName: {
            enterDelay: 450
        },
        transitionTwoName: {
            enterDelay: 600
        }
    }
});

<html data-page="home">
   <body> 
        <nav>
            <a href="/contact" data-load="transitionName">Contact</a>
        </nav>
        <div data-load-container>
            <h1>Hello</h1>
            <a href="/blog" data-load="transitionTwoName">Read more</a>
        </div>
   </body>
</html>

With custom container

import modularLoad from 'modularload';

this.load = new modularLoad({
    enterDelay: 600,
    transitions: {
        article: {
            enterDelay: 300
        }
    }
});

<div data-load-container>
    <div data-load-container="article">
        <h1>Article One</h1>
        <p>Text</p>  
    </div>
    <a href="/blog/article-one" data-load="article">Article One</a> 
    <a href="/blog/article-two" data-load="article">Article Two</a> 
</div>

With lazy images

import modularLoad from 'modularload';

this.load = new modularLoad();

<div data-load-container>
    <header data-load-style="background-image: url('images/header.jpg');">
        <h1>Hello</h1>
    </header>
    <main>
        <img data-load-src="images/img.jpg">
        <a href="/blog">Read more</a>
    </main>
</div>

With events

import modularLoad from 'modularload';

this.load = new modularLoad();

this.load.on('loaded', (transition, oldContainer, newContainer) => {
    console.log('👌');

    if (transition == 'transitionName') {
        console.log('🤙');
    }
});

With methods

import modularLoad from 'modularload';

this.load = new modularLoad();

this.load.goTo('/page', 'transitionName');

Options

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | name | string | 'load' | Data attributes name | | loadingClass | string | 'is-loading' | Class when a link is clicked. | | loadedClass | string | 'is-loaded' | Class when the new container enters. | | readyClass | string | 'is-ready' | Class when the old container exits. | | transitionsPrefix | string | 'is-' | Custom transitions class prefix. | | transitionsHistory | boolean | true | Redo the custom transitions while using the back button. | | enterDelay | number | 0 | Minimum delay before the new container enters. | | exitDelay | number | 0 | Delay before the old container exists after the new enters. | | loadedDelay | number | 0 | Delay before adding the loaded class. For example, to wait for your JS DOM updates. | | transitions | object | {} | Custom transitions options. |

Attributes

| Attribute | Values | Description | | --------- | ------ | ----------- | | data-load-container | , string | Container you want to load with optional string. | | data-load | string, false | Transition name or disable transition. | | data-load-url | boolean | Update url without loading container. | | data-load-src | string | Lazy load src attribute. | | data-load-srcset | string | Lazy load srcset attribute. | | data-load-style | string | Lazy load style attribute. | | data-load-href | string | Lazy load href attribute. |

Events

| Event | Arguments | Description | | ----- | --------- | ----------- | | loading | transition, oldContainer | On link click. | | loaded | transition, oldContainer, newContainer | On new container enter. | | ready | transition, newContainer | On old container exit. | | images | | On all images load. |

Methods

| Method | Description | | ------ | ----------- | | goTo('href'[, 'transition'][, true]) | Go to href. With optional transition name and boolean for url update only. |