Skip to content

Commit 2625e82

Browse files
Mugen87Mugen87
authored
Docs: Highlight selected links and move them into view. (mrdoob#30460)
1 parent a573413 commit 2625e82

File tree

3 files changed

+117
-71
lines changed

3 files changed

+117
-71
lines changed

‎utils/docs/template/publish.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ function buildClassNav( items, itemsSeen, linktoFn ) {
362362

363363
}
364364

365-
itemNav += `<li>${linktoFn( item.longname, displayName.replace( /\b(module|event):/g, '' ) )}</li>`;
365+
itemNav += `<li data-name="${item.longname}">${linktoFn( item.longname, displayName.replace( /\b(module|event):/g, '' ) )}</li>`;
366366

367367
itemsSeen[ item.longname ] = true;
368368

@@ -429,7 +429,7 @@ function buildGlobalsNav( globals, seen ) {
429429

430430
if ( kind !== 'typedef' && ! hasOwnProp.call( seen, longname ) && Array.isArray( tags ) && tags[ 0 ].title === 'tsl' ) {
431431

432-
tslNav += `<li>${linkto( longname, name )}</li>`;
432+
tslNav += `<li data-name="${longname}">${linkto( longname, name )}</li>`;
433433

434434
seen[ longname ] = true;
435435

@@ -447,7 +447,7 @@ function buildGlobalsNav( globals, seen ) {
447447

448448
if ( kind !== 'typedef' && ! hasOwnProp.call( seen, longname ) ) {
449449

450-
globalNav += `<li>${linkto( longname, name )}</li>`;
450+
globalNav += `<li data-name="${longname}">${linkto( longname, name )}</li>`;
451451

452452
}
453453

‎utils/docs/template/static/scripts/page.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const panel = document.getElementById( 'panel' );
2+
const panelScrim = document.getElementById( 'panelScrim' );
3+
const expandButton = document.getElementById( 'expandButton' );
4+
const clearSearchButton = document.getElementById( 'clearSearchButton' );
5+
const filterInput = document.getElementById( 'filterInput' );
6+
7+
// Functionality for hamburger button (on small devices)
8+
9+
expandButton.onclick = function ( event ) {
10+
11+
event.preventDefault();
12+
panel.classList.toggle( 'open' );
13+
14+
};
15+
16+
panelScrim.onclick = function ( event ) {
17+
18+
event.preventDefault();
19+
panel.classList.toggle( 'open' );
20+
21+
};
22+
23+
// Functionality for search/filter input field
24+
25+
filterInput.onfocus = function () {
26+
27+
panel.classList.add( 'searchFocused' );
28+
29+
};
30+
31+
filterInput.onblur = function () {
32+
33+
if ( filterInput.value === '' ) {
34+
35+
panel.classList.remove( 'searchFocused' );
36+
37+
}
38+
39+
};
40+
41+
filterInput.oninput = function () {
42+
43+
const term = filterInput.value.trim();
44+
45+
// eslint-disable-next-line no-undef
46+
search( term ); // defined in search.js
47+
48+
};
49+
50+
clearSearchButton.onclick = function () {
51+
52+
filterInput.value = '';
53+
filterInput.focus();
54+
// eslint-disable-next-line no-undef
55+
hideSearch(); // defined in search.js
56+
57+
};
58+
59+
//
60+
61+
window.addEventListener( 'DOMContentLoaded', updateNavigation );
62+
window.addEventListener( 'hashchange', updateNavigation );
63+
64+
function updateNavigation() {
65+
66+
// unselected elements
67+
68+
const selected = document.querySelectorAll( 'nav a.selected' );
69+
selected.forEach( link => link.classList.remove( 'selected' ) );
70+
71+
// determine target
72+
73+
const filename = window.location.pathname.split( '/' ).pop();
74+
const pagename = filename.split( '.' )[ 0 ];
75+
76+
let target = pagename;
77+
78+
if ( pagename === 'global' ) {
79+
80+
target = window.location.hash.split( '#' ).pop();
81+
82+
}
83+
84+
if ( target === '' ) return;
85+
86+
// select target and move into view
87+
88+
const liElement = document.querySelector( `li[data-name="${target}"]` );
89+
90+
if ( liElement !== null ) {
91+
92+
const aElement = liElement.firstChild;
93+
94+
aElement.scrollIntoView( { block: 'center' } );
95+
aElement.classList.add( 'selected' );
96+
97+
}
98+
99+
}
100+
101+
// eslint-disable-next-line no-undef
102+
prettyPrint();
103+
104+
console.log( [
105+
' __ __',
106+
' __/ __\\ / __\\__ ____ _____ _____',
107+
'/ __/ /\\/ / /___\\/ ____\\/ _____\\/ _____\\',
108+
'\\/_ __/ / _ / / __/ / __ / / __ /_ __ _____',
109+
'/ / / / / / / / / / / / ___/ / ___/\\ _\\/ __\\/ _____\\',
110+
'\\/__/ \\/__/\\/__/\\/__/ \\/_____/\\/_____/\\/__/ / / / ___/',
111+
' / __/ / \\__ \\',
112+
' \\/____/\\/_____/'
113+
].join( '\n' ) );

‎utils/docs/template/tmpl/layout.tmpl

+1-68
Original file line numberDiff line numberDiff line change
@@ -61,75 +61,8 @@
6161
</div>
6262
</div>
6363

64-
<script>
65-
66-
const expandButton = document.getElementById( 'expandButton' );
67-
const clearSearchButton = document.getElementById( 'clearSearchButton' );
68-
const fliterInput = document.getElementById( 'filterInput' );
69-
70-
// Functionality for hamburger button (on small devices)
71-
72-
expandButton.onclick = function ( event ) {
73-
74-
event.preventDefault();
75-
panel.classList.toggle( 'open' );
76-
77-
};
78-
79-
panelScrim.onclick = function ( event ) {
80-
81-
event.preventDefault();
82-
panel.classList.toggle( 'open' );
83-
84-
};
85-
86-
// Functionality for search/filter input field
87-
88-
fliterInput.onfocus = function () {
89-
90-
panel.classList.add( 'searchFocused' );
91-
92-
};
93-
94-
fliterInput.onblur = function () {
95-
96-
if ( fliterInput.value === '' ) {
97-
98-
panel.classList.remove( 'searchFocused' );
99-
100-
}
101-
102-
};
103-
104-
filterInput.oninput = function () {
105-
106-
const term = filterInput.value.trim();
107-
search( term ); // defined in search.js
108-
109-
};
110-
111-
clearSearchButton.onclick = function () {
112-
113-
fliterInput.value = '';
114-
fliterInput.focus();
115-
hideSearch(); // defined in search.js
116-
117-
};
118-
119-
prettyPrint();
120-
121-
console.log( [
122-
' __ __',
123-
' __/ __\\ / __\\__ ____ _____ _____',
124-
'/ __/ /\\/ / /___\\/ ____\\/ _____\\/ _____\\',
125-
'\\/_ __/ / _ / / __/ / __ / / __ /_ __ _____',
126-
'/ / / / / / / / / / / / ___/ / ___/\\ _\\/ __\\/ _____\\',
127-
'\\/__/ \\/__/\\/__/\\/__/ \\/_____/\\/_____/\\/__/ / / / ___/',
128-
' / __/ / \\__ \\',
129-
' \\/____/\\/_____/'
130-
].join( '\n' ) );
131-
</script>
13264
<script src="scripts/linenumber.js"></script>
65+
<script src="scripts/page.js"></script>
13366
<script src="scripts/search.js"></script>
13467
</body>
13568
</html>

0 commit comments

Comments
 (0)