modularload

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

modularload

Dead simple page transitions and lazy loading.

1.2.8

latest

source

npm

Version published: 3 years ago

Weekly downloads: 55; increased by511.11%

Maintainers: 2

Install size: 48.9 kB

Created: 5 years ago

Weekly downloads

Readme

Source

modularLoad

Dead simple page transitions and lazy loading.

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.

FAQs

What is modularload?

Is modularload popular?

Is modularload well maintained?

Last updated on 24 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install