Skip to content

Galactic-Cat/catworks-swapper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Catworks Swapper

A simple JS package to create swappable parts of a webpage. Extremely lightweight. If you're a proffesional JS developer, maybe skip this one, it's undoubetly amateurish, maybe use React?

Setting up

Firstly , import the Swapper class.

import Swapper from 'catworks-swapper'

Then create the element, like you would. You'll have to bind it to a DOM element, so:

<html>
    <head>...</head>
    <body>
        <main id="root"></main>
    </body>
</html>
var swapper = new Swapper('./path/to/html/files/', '#root')

As you can see swapper expects your html files to be present in a single folder.
For instance

root/
    node_modules/
    pages/
        home.html
        about.html
    package.json
    index.html

Now setting your htmlPath to './pages/', you can swap to either home or about by using the swap method, namely:

swapper.swap('home')

If you wish you can also provide a callback to swap, which fires if the swap was succesful.

swapper.swap('home', () => { /* do something */ })

That's all for now folks!

About

A simple JS package to create swappable parts of a webpage. Extremely lightweight.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published