Skip to content

Commit 4e0e627

Browse files
JadsonLucenaJadsonLucena
committed
refactor (scrollIntoView): scroll snap
1 parent 0761fd1 commit 4e0e627

File tree

2 files changed

+28
-131
lines changed

2 files changed

+28
-131
lines changed

‎assets/script/index.js‎

Lines changed: 26 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,16 @@ var result = document.querySelector('body > main > section#result');
88
let sections = Array.from(document.querySelectorAll('main > section'));
99

1010

11-
var currentTarget = type;
12-
window.onresize = () => {
13-
14-
currentTarget.scrollIntoView({
15-
behavior: 'smooth'
16-
});
17-
18-
};
19-
20-
21-
function waitTransition(section) {
11+
function scrollIntoView(section) {
2212

2313
return new Promise((resolve, reject) => {
2414

2515
try {
2616

17+
section.scrollIntoView({
18+
behavior: 'smooth'
19+
});
20+
2721
sections.forEach(element => element.classList.add('visible'));
2822

2923
let loop = setInterval(() => {
@@ -60,7 +54,7 @@ if (location.hash) {
6054

6155
if (section) {
6256

63-
waitTransition(section);
57+
scrollIntoView(section);
6458

6559
}
6660

@@ -102,12 +96,7 @@ type.querySelector('form').onsubmit = function(e) { e.preventDefault();
10296
footer.querySelector('form').refs.placeholder = 'a5c3785, jlord@a5c3785, jlord/sheetsee.js@a5c3785, ...';
10397
footer.querySelector('form').refs.required = true;
10498

105-
currentTarget = summary;
106-
summary.scrollIntoView({
107-
behavior: 'smooth'
108-
});
109-
110-
waitTransition(summary).then(() => summary.querySelector('form').summary.focus());
99+
scrollIntoView(summary).then(() => summary.querySelector('form').summary.focus());
111100

112101
} else {
113102

@@ -120,12 +109,7 @@ type.querySelector('form').onsubmit = function(e) { e.preventDefault();
120109
footer.querySelector('form').refs.placeholder = '#26, a5c3785, github/linguist#4039, jlord@a5c3785, jlord/sheetsee.js#26, jlord/sheetsee.js@a5c3785, ...';
121110
footer.querySelector('form').refs.required = false;
122111

123-
currentTarget = scope;
124-
scope.scrollIntoView({
125-
behavior: 'smooth'
126-
});
127-
128-
waitTransition(scope).then(() => scope.querySelector('form').scope.focus());
112+
scrollIntoView(scope).then(() => scope.querySelector('form').scope.focus());
129113

130114
}
131115

@@ -175,24 +159,10 @@ scope.querySelector('form').scope.oninput = function() {
175159
};
176160
scope.querySelector('form').onsubmit = function(e) { e.preventDefault();
177161

178-
currentTarget = summary;
179-
summary.scrollIntoView({
180-
behavior: 'smooth'
181-
});
182-
183-
waitTransition(summary).then(() => summary.querySelector('form').summary.focus());
184-
185-
};
186-
scope.querySelector('form').onreset = function() {
187-
188-
currentTarget = type;
189-
type.scrollIntoView({
190-
behavior: 'smooth'
191-
});
192-
193-
waitTransition(type).then(() => type.querySelector('input[checked]').focus());
162+
scrollIntoView(summary).then(() => summary.querySelector('form').summary.focus());
194163

195164
};
165+
scope.querySelector('form').onreset = () => scrollIntoView(type).then(() => type.querySelector('input[checked]').focus());
196166

197167

198168
summary.querySelector('form').summary.onblur = function() { // Standardize the message
@@ -222,26 +192,16 @@ summary.querySelector('form').summary.oninput = function() {
222192

223193
summary.querySelector('form > div > label > small').innerHTML = this.value.length +' / '+ this.maxLength + '<sub>50 - '+ (50 - this.maxLength) +'</sub>';
224194

225-
};
195+
}
226196
summary.querySelector('form').onsubmit = function(e) { e.preventDefault();
227197

228198
if (e.submitter.classList.contains('finish')) {
229199

230-
currentTarget = significantChange;
231-
significantChange.scrollIntoView({
232-
behavior: 'smooth'
233-
});
234-
235-
waitTransition(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
200+
scrollIntoView(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
236201

237202
} else {
238203

239-
currentTarget = body;
240-
body.scrollIntoView({
241-
behavior: 'smooth'
242-
});
243-
244-
waitTransition(body).then(() => body.querySelector('form').body.focus());
204+
scrollIntoView(body).then(() => body.querySelector('form').body.focus());
245205

246206
}
247207

@@ -250,21 +210,11 @@ summary.querySelector('form').onreset = function() {
250210

251211
if (type.querySelector('form').type.value == 'revert') {
252212

253-
currentTarget = type;
254-
type.scrollIntoView({
255-
behavior: 'smooth'
256-
});
257-
258-
waitTransition(type).then(() => type.querySelector('input[checked]').focus());
213+
scrollIntoView(type).then(() => type.querySelector('input[checked]').focus());
259214

260215
} else {
261216

262-
currentTarget = scope;
263-
scope.scrollIntoView({
264-
behavior: 'smooth'
265-
});
266-
267-
waitTransition(scope).then(() => scope.querySelector('form').scope.focus());
217+
scrollIntoView(scope).then(() => scope.querySelector('form').scope.focus());
268218

269219
}
270220

@@ -275,43 +225,24 @@ body.querySelector('form').onsubmit = function(e) { e.preventDefault();
275225

276226
if (e.submitter.classList.contains('finish')) {
277227

278-
currentTarget = significantChange;
279-
significantChange.scrollIntoView({
280-
behavior: 'smooth'
281-
});
282-
283-
waitTransition(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
228+
scrollIntoView(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
284229

285230
} else {
286231

287-
currentTarget = footer;
288-
footer.scrollIntoView({
289-
behavior: 'smooth'
290-
});
291-
292232
if (type.querySelector('form').type.value == 'revert') {
293233

294-
waitTransition(footer).then(() => footer.querySelector('form').refs.focus());
234+
scrollIntoView(footer).then(() => footer.querySelector('form').refs.focus());
295235

296236
} else {
297237

298-
waitTransition(footer);
238+
scrollIntoView(footer);
299239

300240
}
301241

302242
}
303243

304244
};
305-
body.querySelector('form').onreset = function() {
306-
307-
currentTarget = summary;
308-
summary.scrollIntoView({
309-
behavior: 'smooth'
310-
});
311-
312-
waitTransition(summary).then(() => summary.querySelector('form').summary.focus());
313-
314-
};
245+
body.querySelector('form').onreset = () => scrollIntoView(summary).then(() => summary.querySelector('form').summary.focus());
315246

316247

317248
for (let text of footer.querySelectorAll('form > div > label > input[type="text"]')) {
@@ -327,29 +258,18 @@ for (let text of footer.querySelectorAll('form > div > label > input[type="text"
327258
}
328259

329260
footer.querySelector('form').breakingChangeDescription.oninput = e => footer.querySelector('form').breakingChangeSummary.required = Boolean(e.target.value.trim());
330-
331261
footer.querySelector('form').onsubmit = function(e) { e.preventDefault();
332262

333263
significantChange.querySelector('form').significantChange.checked = Boolean(this.breakingChangeSummary.value.trim());
334264

335-
currentTarget = significantChange;
336-
significantChange.scrollIntoView({
337-
behavior: 'smooth'
338-
});
339-
340-
waitTransition(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
265+
scrollIntoView(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
341266

342267
};
343268
footer.querySelector('form').onreset = function() {
344269

345270
footer.querySelector('form').breakingChangeSummary.required = false;
346271

347-
currentTarget = body;
348-
body.scrollIntoView({
349-
behavior: 'smooth'
350-
});
351-
352-
waitTransition(body).then(() => body.querySelector('form').body.focus());
272+
scrollIntoView(body).then(() => body.querySelector('form').body.focus());
353273

354274
};
355275

@@ -387,30 +307,20 @@ significantChange.querySelector('form').onsubmit = function(e) { e.preventDefaul
387307

388308
result.querySelector('form > div > fieldset > code > span.value').innerHTML = `${result.querySelector('form').header.value.trim()}${result.querySelector('form').description.innerHTML.trim() ? (!body.querySelector('form').body.value.trim() && (footer.querySelector('form').coAuthoredBy.value.trim() || footer.querySelector('form').onBehalfOf.value.trim()) ? '\n\n\n' : '\n\n') + result.querySelector('form').description.innerHTML.replaceAll('<br>', '\n') : ''}`.replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;');
389309

390-
currentTarget = result;
391-
result.scrollIntoView({
392-
behavior: 'smooth'
393-
});
394-
395-
waitTransition(result);
310+
scrollIntoView(result);
396311

397312
};
398313
significantChange.querySelector('form').onreset = function(e) {
399314

400315
significantChange.querySelector('form').significantChange.checked = false;
401316

402-
currentTarget = footer;
403-
footer.scrollIntoView({
404-
behavior: 'smooth'
405-
});
406-
407317
if (type.querySelector('form').type.value == 'revert') {
408318

409-
waitTransition(footer).then(() => footer.querySelector('form').refs.focus());
319+
scrollIntoView(footer).then(() => footer.querySelector('form').refs.focus());
410320

411321
} else {
412322

413-
waitTransition(footer);
323+
scrollIntoView(footer);
414324

415325
}
416326

@@ -429,23 +339,9 @@ result.querySelector('form').onsubmit = function(e) { e.preventDefault();
429339
footer.querySelector('form').reset();
430340
significantChange.querySelector('form').reset();
431341

432-
currentTarget = type;
433-
type.scrollIntoView({
434-
behavior: 'smooth'
435-
});
436-
437-
waitTransition(type).then(() => type.querySelector('input[checked]').focus());
342+
scrollIntoView(type).then(() => type.querySelector('input[checked]').focus());
438343

439344
}
440345

441346
};
442-
result.querySelector('form').onreset = function() {
443-
444-
currentTarget = significantChange;
445-
significantChange.scrollIntoView({
446-
behavior: 'smooth'
447-
});
448-
449-
waitTransition(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());
450-
451-
};
347+
result.querySelector('form').onreset = () => scrollIntoView(significantChange).then(() => significantChange.querySelector('form').significantChange.focus());

‎assets/style/index.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
html, body {
1111
height: 100%;
1212
overflow: hidden;
13-
13+
scroll-snap-type: both mandatory;
1414
scroll-behavior: smooth;
1515
}
1616

@@ -25,6 +25,7 @@ main {
2525
width: 50%;
2626
height: calc(25% - 60px);
2727
overflow: hidden;
28+
scroll-snap-align: start;
2829

2930
display: flex;
3031
flex-flow: column;

0 commit comments

Comments
 (0)