add swup scroll plugin
This commit is contained in:
parent
8224df1a1c
commit
9f154150ea
|
@ -66,6 +66,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@swup/preload-plugin": "^1.0.3",
|
"@swup/preload-plugin": "^1.0.3",
|
||||||
|
"@swup/scroll-plugin": "^1.0.6",
|
||||||
"glob-all": "^3.2.1",
|
"glob-all": "^3.2.1",
|
||||||
"swup": "^2.0.9",
|
"swup": "^2.0.9",
|
||||||
"tailwindcss": "^1.2.0"
|
"tailwindcss": "^1.2.0"
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="{{ .Site.BaseURL }}">Home</a></li>
|
<li><a href="{{ .Site.BaseURL }}">Home</a></li>
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
19
src/index.js
19
src/index.js
|
@ -5,9 +5,7 @@ import "./css/main.css";
|
||||||
// TODO - is there a more appropriate place for this?
|
// TODO - is there a more appropriate place for this?
|
||||||
import Swup from "swup";
|
import Swup from "swup";
|
||||||
import SwupPreloadPlugin from "@swup/preload-plugin";
|
import SwupPreloadPlugin from "@swup/preload-plugin";
|
||||||
const swup = new Swup({
|
import SwupScrollPlugin from "@swup/scroll-plugin";
|
||||||
plugins: [new SwupPreloadPlugin()]
|
|
||||||
});
|
|
||||||
|
|
||||||
const blockInterval = null;
|
const blockInterval = null;
|
||||||
|
|
||||||
|
@ -28,11 +26,16 @@ function initBlocks() {
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const swup = new Swup({
|
||||||
|
plugins: [new SwupPreloadPlugin(), new SwupScrollPlugin()]
|
||||||
|
});
|
||||||
|
|
||||||
|
// DOMContentLoaded is not triggered on page reloads via swup.js
|
||||||
|
swup.on("contentReplaced", () => {
|
||||||
initBlocks();
|
initBlocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
// DOMContentLoaded is not triggered on page reloads via swup.js
|
initBlocks();
|
||||||
swup.on("contentReplaced", () => {
|
swup.scrollTo(document.getElementById("#contact"));
|
||||||
initBlocks();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
13
yarn.lock
13
yarn.lock
|
@ -752,6 +752,14 @@
|
||||||
delegate "^3.2.0"
|
delegate "^3.2.0"
|
||||||
swup "^2.0.0"
|
swup "^2.0.0"
|
||||||
|
|
||||||
|
"@swup/scroll-plugin@^1.0.6":
|
||||||
|
version "1.0.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/@swup/scroll-plugin/-/scroll-plugin-1.0.6.tgz#9a0b28a7f47750c6d5e69e988e42da31264e385e"
|
||||||
|
integrity sha512-uUzgbFYdkLIKCk0DiIrkQwYQYkI2lh4NwJlY28nOhmgivgyYRCRgGHXSHyvJEJwDDVSW7w48myq5b1g9HrVeEg==
|
||||||
|
dependencies:
|
||||||
|
"@swup/plugin" "^1.0.0"
|
||||||
|
scrl "^1.0.0"
|
||||||
|
|
||||||
"@types/anymatch@*":
|
"@types/anymatch@*":
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
|
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
|
||||||
|
@ -7628,6 +7636,11 @@ schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6
|
||||||
ajv "^6.10.2"
|
ajv "^6.10.2"
|
||||||
ajv-keywords "^3.4.1"
|
ajv-keywords "^3.4.1"
|
||||||
|
|
||||||
|
scrl@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/scrl/-/scrl-1.0.0.tgz#b225915f29d72807c48b2e116b12f14b15d14e55"
|
||||||
|
integrity sha512-nTS2W6UyxYfvOOjeXGXM1j140bm2ZUIjt0mEyGUHecFz2zU1CMYJ71dWPdlnSJR2mYOojY1R5qpo4Fi83O7tog==
|
||||||
|
|
||||||
scss-tokenizer@^0.2.3:
|
scss-tokenizer@^0.2.3:
|
||||||
version "0.2.3"
|
version "0.2.3"
|
||||||
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
|
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
|
||||||
|
|
Reference in New Issue