add swup scroll plugin

This commit is contained in:
Ray Elliott 2020-03-28 22:03:17 +00:00
parent 8224df1a1c
commit 9f154150ea
4 changed files with 28 additions and 8 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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();
}); });

View File

@ -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"