Skip to content

Commit e4e4435

Browse files
riccardoscalcoriccardoscalco
authored
Merge pull request #2 from nextbitlabs/fix-slide-scroll
Fix slide scroll on window resize
2 parents 706e262 + 5f9ea72 commit e4e4435

File tree

2 files changed

+152
-96
lines changed

2 files changed

+152
-96
lines changed

‎template/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes">
66
<link href="src/index.css" rel="stylesheet" type="text/css">
7-
<script src="src/index.js"></script>
7+
<script src="src/index.js" defer></script>
88
</head>
99
<body>
1010
<main>

‎template/src/index.js‎

Lines changed: 151 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,158 @@
1-
/*
2-
Get configuration parameters and initialize the web page;
3-
*/
4-
5-
(async function () {
6-
const fecthResult = await fetch('./onepunch.json');
7-
const config = await fecthResult.json();
8-
init(config);
9-
})();
1+
(function () {
2+
/*
3+
Describe the app state.
4+
*/
5+
6+
const state = {
7+
pageIndex: guessPageIndex(),
8+
};
9+
10+
/*
11+
Get configuration parameters and initialize the web page;
12+
*/
13+
14+
(async function () {
15+
const fecthResult = await fetch('./onepunch.json');
16+
const config = await fecthResult.json();
17+
init(config);
18+
})();
19+
20+
/*
21+
Initialize services
22+
*/
1023

11-
/*
12-
Initialize services
13-
*/
14-
15-
function init(config) {
16-
addEventListeners(config);
17-
setBorders(config.width, config.height);
18-
addProgress(config);
19-
}
20-
21-
/*
22-
Add event listeners
23-
*/
24-
25-
function addEventListeners(config) {
26-
window.addEventListener(
27-
'keydown',
28-
handleOnkeydown,
29-
);
30-
window.addEventListener(
31-
'resize',
32-
() => setBorders(config.width, config.height),
33-
);
34-
}
35-
36-
/*
37-
Set article borders
38-
*/
39-
40-
function setBorders(width, height) {
41-
const articles = document.querySelectorAll('main > article');
42-
const borderLeft = Math.max(0, (window.innerWidth - width) / 2);
43-
const borderTop = Math.max(0, (window.innerHeight - height) / 2);
44-
articles.forEach(elt => {
45-
elt.style.borderWidth = `${borderTop}px ${borderLeft}px`;
46-
});
47-
}
48-
49-
/*
50-
Change slide with arrow keys
51-
*/
52-
53-
function handleOnkeydown(event) {
54-
const {keyCode} = event;
55-
const LEFT = 37;
56-
const UP = 38;
57-
const RIGHT = 39;
58-
const DOWN = 40;
59-
switch (keyCode) {
60-
case RIGHT:
61-
case DOWN:
62-
window.scrollBy(0, window.innerHeight);
63-
break;
64-
case UP:
65-
case LEFT:
66-
window.scrollBy(0, -window.innerHeight);
67-
break;
68-
// No default
24+
function init(config) {
25+
addEventListeners(config);
26+
setBorders(config.width, config.height);
27+
addProgress(config);
6928
}
70-
}
7129

72-
/*
73-
Add progress to each slide based on config
74-
*/
30+
/*
31+
Add event listeners
32+
*/
7533

76-
function addProgress(config) {
77-
if(!config.progress || config.progress === 'none') {
78-
return;
34+
function addEventListeners(config) {
35+
window.addEventListener(
36+
'keydown',
37+
handleOnkeydown,
38+
);
39+
window.addEventListener(
40+
'resize',
41+
() => {
42+
setBorders(config.width, config.height);
43+
updateScroll();
44+
},
45+
);
7946
}
8047

81-
const articles = [...document.querySelectorAll()('main > article')];
82-
83-
if(config.progress === 'line') {
84-
articles.forEach((article, index) => {
85-
const line = document.createElement('div');
86-
line.classList.add("progress-line");
87-
article.appendChild(line);
88-
89-
line.style.backgroundColor = 'var(--primary-color, #000)';
90-
91-
line.style.height = '3px';
92-
line.style.position = 'absolute';
93-
94-
line.style.bottom = '0';
95-
line.style.left = '0';
96-
97-
const normIndex = index / (articles.length - 1);
98-
99-
line.style.width = `${config.width * normIndex}px`;
100-
})
48+
/*
49+
Set article borders
50+
*/
51+
52+
function setBorders(width, height) {
53+
const articles = getSlides();
54+
const borderLeft = Math.max(0, (window.innerWidth - width) / 2);
55+
const borderTop = Math.max(0, (window.innerHeight - height) / 2);
56+
articles.forEach(elt => {
57+
elt.style.borderWidth = `${borderTop}px ${borderLeft}px`;
58+
});
59+
}
60+
61+
/*
62+
Change slide with arrow keys
63+
*/
64+
65+
function handleOnkeydown(event) {
66+
const {keyCode} = event;
67+
const LEFT = 37;
68+
const UP = 38;
69+
const RIGHT = 39;
70+
const DOWN = 40;
71+
switch (keyCode) {
72+
case RIGHT:
73+
case DOWN:
74+
state.pageIndex = Math.min(state.pageIndex + 1, numberOfSlides());
75+
updateScroll();
76+
break;
77+
case UP:
78+
case LEFT:
79+
state.pageIndex = Math.max(state.pageIndex - 1, 0);
80+
updateScroll();
81+
break;
82+
// No default
83+
}
10184
}
102-
}
85+
86+
/*
87+
Add progress to each slide based on config
88+
*/
89+
90+
function addProgress(config) {
91+
if (!config.progress || config.progress === 'none') {
92+
return;
93+
}
94+
95+
const articles = getSlides();
96+
97+
if (config.progress === 'line') {
98+
articles.forEach((article, index) => {
99+
const line = document.createElement('div');
100+
line.classList.add('progress-line');
101+
article.append(line);
102+
103+
line.style.backgroundColor = 'var(--primary-color, #000)';
104+
105+
line.style.height = '3px';
106+
line.style.position = 'absolute';
107+
108+
line.style.bottom = '0';
109+
line.style.left = '0';
110+
111+
const normIndex = index / (articles.length - 1);
112+
113+
line.style.width = `${config.width * normIndex}px`;
114+
});
115+
}
116+
}
117+
118+
/*
119+
Return the correct scroll position.
120+
*/
121+
122+
function getScroll() {
123+
return state.pageIndex * window.innerHeight;
124+
}
125+
126+
/*
127+
Update scroll position on resize events.
128+
*/
129+
130+
function updateScroll() {
131+
window.scroll(0, getScroll());
132+
}
133+
134+
/*
135+
Return the number of slides.
136+
*/
137+
138+
function numberOfSlides() {
139+
return getSlides().length;
140+
}
141+
142+
/*
143+
Guess page index from the scroll position.
144+
*/
145+
146+
function guessPageIndex() {
147+
const index = Math.round(document.documentElement.scrollTop / window.innerHeight);
148+
return Math.max(0, Math.min(index, numberOfSlides()));
149+
}
150+
151+
/*
152+
Return the list of slides
153+
*/
154+
155+
function getSlides() {
156+
return [...document.querySelectorAll('main > article')];
157+
}
158+
})();

0 commit comments

Comments
 (0)