Added toggle for horizontal scrolling
the_architech -
r70:221851e41ce1
Not Reviewed
Show More
Add another comment
TODOs: 0 unresolved 0 Resolved
COMMENTS: 0 General 0 Inline
@@ -15,6 +15,6 export default () => {
15 "<footer class='footer inner-wrap'>",
15 "<footer class='footer inner-wrap'>",
16 `v${siteVersion}`,
16 `v${siteVersion}`,
17 "</footer>",
17 "</footer>",
18 "<script src='/assets/scripts/app.js'></script>"
18 `<script src="/assets/scripts/app.js?v=${siteVersion}"></script>`
19 ].join("");
19 ].join("");
20 };
20 };
@@ -9,7 +9,12 export default (render, model) => {
9 <!DOCTYPE html>
9 <!DOCTYPE html>
10 <html lang="en">
10 <html lang="en">
11 <head>${model.head}</head>
11 <head>${model.head}</head>
12 <body data-scroll="yes">${model.body}</body>
12 <body data-scroll="yes">
13 ${model.body}
14 <button class="scroll-toggle" id="toggle">
15 Disable ↔ scrolling
16 </button>
17 </body>
13 </html>
18 </html>
14 `;
19 `;
15 };
20 };
@@ -2,38 +2,74
2
2
3
3
4
4
5 enableScrollChecker();
5 // U T I L S
6
7 const horizontalScrollEnabler = document.querySelector("body").dataset.scroll;
8 const isTouchDevice = ("ontouchstart" in document.documentElement || window.DocumentTouch && document instanceof DocumentTouch);
9 // const wrapper = document.getElementById("wrapper"); // We'd usually use a variable but we need a fresh instance
10 let isScrollingPermitted = JSON.parse(localStorage.getItem("webb-scrolling"));
11
12
13
14 // P R O G R A M
6
15
7 // Automatically open external links in new tabs
8 document.querySelectorAll("a[href^=http]").forEach(anchor => {
16 document.querySelectorAll("a[href^=http]").forEach(anchor => {
17 // Automatically open external links in new tabs
9 if (anchor.href.indexOf(location.hostname) === -1) {
18 if (anchor.href.indexOf(location.hostname) === -1) {
10 anchor.rel = "noopener noreferrer";
19 anchor.rel = "noopener noreferrer";
11 anchor.target = "_blank";
20 anchor.target = "_blank";
12 }
21 }
13 });
22 });
14
23
15 // Initialize horizontal scrolling
24 window.onload = function() {
16 function enableScrollChecker() {
25 // Horizontal scrolling, the scourge of Hacker News
17 const horizontalScrollEnabler = document.querySelector("body").dataset.scroll;
26 if (!isScrollingPermitted)
18 const wrapper = document.querySelector("#wrapper");
27 disableHorizontalScrolling();
19
28 else
20 const isTouchDevice = (
29 enableHorizontalScrolling();
21 "ontouchstart" in document.documentElement ||
30
22 window.DocumentTouch && document instanceof DocumentTouch
31 document.getElementById("toggle").onclick = function() {
23 );
32 toggleHorizontalScrolling();
24
25 switch(true) {
26 case horizontalScrollEnabler === "no":
27 case isTouchDevice:
28 case window.innerWidth < 1000:
29 document.querySelector("body").dataset.scroll = "no";
30 return;
31
32 default:
33 document.querySelector("body").dataset.scroll = "yes";
34 if (document.querySelector("post > *:last-child"))
35 document.querySelector("post > *:last-child").classList.add("last-element");
36 horwheel(wrapper);
37 return;
38 }
33 }
39 }
34 }
35
36
37
38 // H E L P E R S
39
40 function disableHorizontalScrolling() {
41 localStorage.setItem("webb-scrolling", false);
42 isScrollingPermitted = JSON.parse(localStorage.getItem("webb-scrolling"));
43
44 document.querySelector("body").dataset.scroll = "no";
45 document.getElementById("toggle").innerText = "Enable ↔ scrolling";
46
47 // via https://stackoverflow.com/questions/4386300/javascript-dom-how-to-remove-all-events-of-a-dom-object#comment92511918_39026635
48 document.getElementById("wrapper").outerHTML = document.getElementById("wrapper").outerHTML;
49 }
50
51 function enableHorizontalScrolling() {
52 localStorage.setItem("webb-scrolling", true);
53 isScrollingPermitted = JSON.parse(localStorage.getItem("webb-scrolling"));
54
55 document.querySelector("body").dataset.scroll = "yes";
56 document.getElementById("toggle").innerText = "Disable ↔ scrolling";
57
58 if (document.querySelector("post > *:last-child"))
59 document.querySelector("post > *:last-child").classList.add("last-element");
60
61 horwheel(document.getElementById("wrapper"));
62 }
63
64 function toggleHorizontalScrolling() {
65 if (isScrollingPermitted)
66 disableHorizontalScrolling();
67 else
68 enableHorizontalScrolling();
69 }
70
71
72
73 // The next iteration of my blog will be built with Svelte/Sapper
74 // so some of this hackery will be smoothed out. Or, I'll come up
75 // with another interesting design that has regular scrolling. 🕸
@@ -166,6 +166,21 iframe {
166 }
166 }
167 }
167 }
168
168
169 .scroll-toggle {
170 padding: 0.5rem 0.75rem;
171 bottom: 2rem; left: 2rem;
172
173 background-color: rgba($gray, 0.9);
174 border: 1px solid $gray;
175 color: $white;
176 position: fixed;
177 z-index: 5;
178
179 @media (max-width: 999px) {
180 display: none;
181 }
182 }
183
169 ::selection {
184 ::selection {
170 background-color: rgba($yellow, 0.3);
185 background-color: rgba($yellow, 0.3);
171 color: rgba($black, 0.85);
186 color: rgba($black, 0.85);
@@ -6,7 +6,7
6 white-space: normal;
6 white-space: normal;
7
7
8 [data-scroll="no"] & {
8 [data-scroll="no"] & {
9 padding: 14rem 2.5rem 0;
9 padding: 14rem 2.5rem 2.5rem;
10 margin-bottom: 3rem;
10 margin-bottom: 3rem;
11
11
12 &::after {
12 &::after {
@@ -18,6 +18,7
18 "fastify-compress": "^1.1.0",
18 "fastify-compress": "^1.1.0",
19 "fastify-helmet": "^3.0.2",
19 "fastify-helmet": "^3.0.2",
20 "fastify-static": "^2.5.1",
20 "fastify-static": "^2.5.1",
21 "feed": "^4.0.0",
21 "marked": "^0.7.0"
22 "marked": "^0.7.0"
22 },
23 },
23 "description": "Blog of Paul Anthony Webb",
24 "description": "Blog of Paul Anthony Webb",
@@ -88,7 +89,7
88 "test:lint": "standardx --verbose | snazzy",
89 "test:lint": "standardx --verbose | snazzy",
89 "test:sass": "stylelint '**/*.scss'",
90 "test:sass": "stylelint '**/*.scss'",
90 "watch": "npm run css;run-p watch:*",
91 "watch": "npm run css;run-p watch:*",
91 "watch:sass": "sass --load-path=node_modules --watch app/sass:app/dist/css --style compressed",
92 "watch:sass": "sass --watch app/sass:app/dist/css --style compressed",
92 "watch:server": "export NODE_ENV=development;nodemon --ignore 'app/dist/'"
93 "watch:server": "export NODE_ENV=development;nodemon --ignore 'app/dist/'"
93 },
94 },
94 "standardx": {
95 "standardx": {
@@ -96,5 +97,5
96 "app/dist"
97 "app/dist"
97 ]
98 ]
98 },
99 },
99 "version": "2019.12.02.1"
100 "version": "2019.12.03"
100 }
101 }
Comments 0
You need to be logged in to leave comments. Login now