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 */ })