Merge pull request #20553 from Mugen87/dev51

Docs: Make list.js to a JSON file.

docs/index.html

@@ -42,10 +42,28 @@
 
 		<iframe name="viewer"></iframe>
 
-		<script src="list.js"></script>
-
 		<script>
 
+		const panel = document.getElementById( 'panel' );
+		const content = document.getElementById( 'content' );
+		const expandButton = document.getElementById( 'expandButton' );
+		const exitSearchButton = document.getElementById( 'exitSearchButton' );
+		const panelScrim = document.getElementById( 'panelScrim' );
+		const filterInput = document.getElementById( 'filterInput' );
+		let iframe = document.querySelector( 'iframe' );
+
+		const pageProperties = {};
+		const titles = {};
+		const categoryElements = [];
+
+		let navigation;
+
+		init();
+
+		async function init() {
+
+			const list = await ( await fetch( 'list.json' ) ).json();
+
 			const hash = window.location.hash.substring( 1 );
 
 			// Localisation
@@ -70,8 +88,6 @@
 
 			}
 
-			//
-
 			const languageSelect = document.getElementById( 'language' );
 			languageSelect.value = language;
 			languageSelect.addEventListener( 'change', function () {
@@ -84,26 +100,12 @@
 
 				language = value;
 
-				createNavigation();
+				createNavigation( list, language );
 				updateFilter();
 				autoChangeUrlLanguage( language );
 
 			}
 
-			const panel = document.getElementById( 'panel' );
-			const content = document.getElementById( 'content' );
-			const expandButton = document.getElementById( 'expandButton' );
-			const exitSearchButton = document.getElementById( 'exitSearchButton' );
-			const panelScrim = document.getElementById( 'panelScrim' );
-			const filterInput = document.getElementById( 'filterInput' );
-			let iframe = document.querySelector( 'iframe' );
-
-			const pageProperties = {};
-			const titles = {};
-			const categoryElements = [];
-
-			let navigation;
-
 			// Functionality for hamburger button (on small devices)
 
 			expandButton.onclick = function ( event ) {
@@ -122,13 +124,13 @@
 
 
 			// Functionality for search/filter input field
-			filterInput.onfocus = function ( event ) {
+			filterInput.onfocus = function () {
 
 				panel.classList.add( 'searchFocused' );
 
 			};
 
-			filterInput.onblur = function ( event ) {
+			filterInput.onblur = function () {
 
 				if ( filterInput.value === '' ) {
 
@@ -138,7 +140,7 @@
 
 			};
 
-			exitSearchButton.onclick = function ( event ) {
+			exitSearchButton.onclick = function () {
 
 				filterInput.value = '';
 				updateFilter();
@@ -146,7 +148,7 @@
 
 			};
 
-			filterInput.oninput = function ( event ) {
+			filterInput.oninput = function () {
 
 				updateFilter();
 
@@ -158,325 +160,327 @@
 
 			// Create the navigation panel and configure the iframe
 
-			createNavigation();
+			createNavigation( list, language );
 			createNewIframe();
 
-			// Navigation Panel
-
-			function createLink( pageName, pageURL ) {
+		}
 
-				const link = document.createElement( 'a' );
-				link.href = pageURL + '.html';
-				link.textContent = pageName;
-				link.setAttribute( 'target', 'viewer' );
-				link.addEventListener( 'click', function ( event ) {
+		// Navigation Panel
 
-					if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
+		function createLink( pageName, pageURL ) {
 
-					window.location.hash = pageURL;
-					panel.classList.remove( 'open' );
+			const link = document.createElement( 'a' );
+			link.href = pageURL + '.html';
+			link.textContent = pageName;
+			link.setAttribute( 'target', 'viewer' );
+			link.addEventListener( 'click', function ( event ) {
 
+				if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
 
-					content.querySelectorAll( 'a' ).forEach( function ( item ) {
+				window.location.hash = pageURL;
+				panel.classList.remove( 'open' );
 
-						item.classList.remove( 'selected' );
 
-					} );
+				content.querySelectorAll( 'a' ).forEach( function ( item ) {
 
-					link.classList.add( 'selected' );
+					item.classList.remove( 'selected' );
 
 				} );
 
-				return link;
+				link.classList.add( 'selected' );
 
-			}
-
-			function createNavigation() {
+			} );
 
-				if ( navigation !== undefined ) {
+			return link;
 
-					content.removeChild( navigation );
+		}
 
-				}
+		function createNavigation( list, language ) {
 
-				// Create the navigation panel using data from list.js
+			if ( navigation !== undefined ) {
 
-				navigation = document.createElement( 'div' );
-				content.appendChild( navigation );
+				content.removeChild( navigation );
 
-				if ( language === 'ar' ) {
+			}
 
-					navigation.style.direction = 'rtl';
+			// Create the navigation panel using data from list.js
 
-				}
+			navigation = document.createElement( 'div' );
+			content.appendChild( navigation );
 
-				const localList = list[ language ];
+			if ( language === 'ar' ) {
 
-				for ( const section in localList ) {
+				navigation.style.direction = 'rtl';
 
-					// Create sections
+			}
 
-					const categories = localList[ section ];
+			const localList = list[ language ];
 
-					const sectionHead = document.createElement( 'h2' );
-					sectionHead.textContent = section;
-					navigation.appendChild( sectionHead );
+			for ( const section in localList ) {
 
-					for ( const category in categories ) {
+				// Create sections
 
-						// Create categories
+				const categories = localList[ section ];
 
-						const pages = categories[ category ];
+				const sectionHead = document.createElement( 'h2' );
+				sectionHead.textContent = section;
+				navigation.appendChild( sectionHead );
 
-						const categoryContainer = document.createElement( 'div' );
-						navigation.appendChild( categoryContainer );
+				for ( const category in categories ) {
 
-						const categoryHead = document.createElement( 'h3' );
-						categoryHead.textContent = category;
-						categoryContainer.appendChild( categoryHead );
+					// Create categories
 
-						const categoryContent = document.createElement( 'ul' );
-						categoryContainer.appendChild( categoryContent );
+					const pages = categories[ category ];
 
-						for ( const pageName in pages ) {
+					const categoryContainer = document.createElement( 'div' );
+					navigation.appendChild( categoryContainer );
 
-							// Create page links
+					const categoryHead = document.createElement( 'h3' );
+					categoryHead.textContent = category;
+					categoryContainer.appendChild( categoryHead );
 
-							const pageURL = pages[ pageName ];
+					const categoryContent = document.createElement( 'ul' );
+					categoryContainer.appendChild( categoryContent );
 
-							// Localisation
+					for ( const pageName in pages ) {
 
-							const listElement = document.createElement( 'li' );
-							categoryContent.appendChild( listElement );
+						// Create page links
 
-							const linkElement = createLink( pageName, pageURL );
-							listElement.appendChild( linkElement );
+						const pageURL = pages[ pageName ];
 
-							// Gather the main properties for the current subpage
+						// Localisation
 
-							pageProperties[ pageName ] = {
-								section: section,
-								category: category,
-								pageURL: pageURL,
-								linkElement: linkElement
-							};
+						const listElement = document.createElement( 'li' );
+						categoryContent.appendChild( listElement );
 
-							// Gather the document titles (used for easy access on browser navigation)
+						const linkElement = createLink( pageName, pageURL );
+						listElement.appendChild( linkElement );
 
-							titles[ pageURL ] = pageName;
+						// Gather the main properties for the current subpage
 
-						}
+						pageProperties[ pageName ] = {
+							section: section,
+							category: category,
+							pageURL: pageURL,
+							linkElement: linkElement
+						};
 
-						// Gather the category elements for easy access on filtering
+						// Gather the document titles (used for easy access on browser navigation)
 
-						categoryElements.push( categoryContent );
+						titles[ pageURL ] = pageName;
 
 					}
 
+					// Gather the category elements for easy access on filtering
+
+					categoryElements.push( categoryContent );
+
 				}
 
 			}
 
-			// Auto change language url. If a reader open a document in English, when he click "zh", the document he read will auto change into Chinese version
+		}
 
-			function autoChangeUrlLanguage( language ) {
+		// Auto change language url. If a reader open a document in English, when he click "zh", the document he read will auto change into Chinese version
 
-				const hash = location.hash;
-				if ( hash === '' ) return;
-				const docType = hash.substr( 0, hash.indexOf( '/' ) + 1 );
-				let docLink = hash.substr( hash.indexOf( '/' ) + 1 );
-				docLink = docLink.substr( docLink.indexOf( '/' ) );
-				location.href = docType + language + docLink;
+		function autoChangeUrlLanguage( language ) {
 
-			}
+			const hash = location.hash;
+			if ( hash === '' ) return;
+			const docType = hash.substr( 0, hash.indexOf( '/' ) + 1 );
+			let docLink = hash.substr( hash.indexOf( '/' ) + 1 );
+			docLink = docLink.substr( docLink.indexOf( '/' ) );
+			location.href = docType + language + docLink;
 
-			// Filtering
+		}
 
-			function updateFilter() {
+		// Filtering
 
-				// (uncomment the following line and the "Query strings" section, if you want query strings):
-				// updateQueryString();
+		function updateFilter() {
 
-				const regExp = new RegExp( filterInput.value, 'gi' );
+			// (uncomment the following line and the "Query strings" section, if you want query strings):
+			// updateQueryString();
 
-				for ( let pageName in pageProperties ) {
+			const regExp = new RegExp( filterInput.value, 'gi' );
 
-					const linkElement = pageProperties[ pageName ].linkElement;
-					const categoryClassList = linkElement.parentElement.classList;
-					const filterResults = pageName.match( regExp );
+			for ( let pageName in pageProperties ) {
 
-					if ( filterResults && filterResults.length > 0 ) {
+				const linkElement = pageProperties[ pageName ].linkElement;
+				const categoryClassList = linkElement.parentElement.classList;
+				const filterResults = pageName.match( regExp );
 
-						// Accentuate matching characters
+				if ( filterResults && filterResults.length > 0 ) {
 
-						for ( let i = 0; i < filterResults.length; i ++ ) {
+					// Accentuate matching characters
 
-							const result = filterResults[ i ];
+					for ( let i = 0; i < filterResults.length; i ++ ) {
 
-							if ( result !== '' ) {
+						const result = filterResults[ i ];
 
-								pageName = pageName.replace( result, '<b>' + result + '</b>' );
+						if ( result !== '' ) {
 
-							}
+							pageName = pageName.replace( result, '<b>' + result + '</b>' );
 
 						}
 
-						categoryClassList.remove( 'hidden' );
-						linkElement.innerHTML = pageName;
+					}
 
-					} else {
+					categoryClassList.remove( 'hidden' );
+					linkElement.innerHTML = pageName;
 
-						// Hide all non-matching page names
+				} else {
 
-						categoryClassList.add( 'hidden' );
+					// Hide all non-matching page names
 
-					}
+					categoryClassList.add( 'hidden' );
 
 				}
 
-				displayFilteredPanel();
-
 			}
 
-			function displayFilteredPanel() {
+			displayFilteredPanel();
 
-				// Show/hide categories depending on their content
-				// First check if at least one page in this category is not hidden
+		}
 
-				categoryElements.forEach( function ( category ) {
+		function displayFilteredPanel() {
 
-					const pages = category.children;
-					const pagesLength = pages.length;
-					const sectionClassList = category.parentElement.classList;
+			// Show/hide categories depending on their content
+			// First check if at least one page in this category is not hidden
 
-					let hideCategory = true;
+			categoryElements.forEach( function ( category ) {
 
-					for ( let i = 0; i < pagesLength; i ++ ) {
+				const pages = category.children;
+				const pagesLength = pages.length;
+				const sectionClassList = category.parentElement.classList;
 
-						const pageClassList = pages[ i ].classList;
+				let hideCategory = true;
 
-						if ( ! pageClassList.contains( 'hidden' ) ) {
+				for ( let i = 0; i < pagesLength; i ++ ) {
 
-							hideCategory = false;
+					const pageClassList = pages[ i ].classList;
 
-						}
+					if ( ! pageClassList.contains( 'hidden' ) ) {
+
+						hideCategory = false;
 
 					}
 
-					// If and only if all page names are hidden, hide the whole category
+				}
 
-					if ( hideCategory ) {
+				// If and only if all page names are hidden, hide the whole category
 
-						sectionClassList.add( 'hidden' );
+				if ( hideCategory ) {
 
-					} else {
+					sectionClassList.add( 'hidden' );
 
-						sectionClassList.remove( 'hidden' );
+				} else {
 
-					}
+					sectionClassList.remove( 'hidden' );
 
-				} );
+				}
 
-			}
+			} );
 
-			// Routing
+		}
 
-			function setUrlFragment( pageName ) {
+		// Routing
 
-				// Handle navigation from the subpages (iframes):
-				// First separate the memeber (if existing) from the page name,
-				// then identify the subpage's URL and set it as URL fragment (re-adding the member)
+		function setUrlFragment( pageName ) { // eslint-disable-line no-undef
 
-				const splitPageName = decomposePageName( pageName, '.', '.' );
+			// Handle navigation from the subpages (iframes):
+			// First separate the memeber (if existing) from the page name,
+			// then identify the subpage's URL and set it as URL fragment (re-adding the member)
 
-				const currentProperties = pageProperties[ splitPageName[ 0 ] ];
+			const splitPageName = decomposePageName( pageName, '.', '.' );
 
-				if ( currentProperties ) {
+			const currentProperties = pageProperties[ splitPageName[ 0 ] ];
 
-					window.location.hash = currentProperties.pageURL + splitPageName[ 1 ];
+			if ( currentProperties ) {
 
-					createNewIframe();
+				window.location.hash = currentProperties.pageURL + splitPageName[ 1 ];
 
-				}
+				createNewIframe();
 
 			}
 
-			function createNewIframe() {
-
-				// Change the content displayed in the iframe
-				// First separate the member part of the fragment (if existing)
+		}
 
-				const hash = window.location.hash.substring( 1 );
-				const splitHash = decomposePageName( hash, '.', '#' );
+		function createNewIframe() {
 
-				// Creating a new Iframe instead of assigning a new src is
-				// a cross-browser solution to allow normal browser navigation;
-				// - only assigning a new src would result in two history states each time.
+			// Change the content displayed in the iframe
+			// First separate the member part of the fragment (if existing)
 
-				// Note: iframe.contentWindow.location.replace(hash) should work, too,
-				// but it doesn't work in Edge with links from the subpages!
+			const hash = window.location.hash.substring( 1 );
+			const splitHash = decomposePageName( hash, '.', '#' );
 
-				let subtitle;
+			// Creating a new Iframe instead of assigning a new src is
+			// a cross-browser solution to allow normal browser navigation;
+			// - only assigning a new src would result in two history states each time.
 
-				const oldIframe = iframe;
-				iframe = oldIframe.cloneNode();
+			// Note: iframe.contentWindow.location.replace(hash) should work, too,
+			// but it doesn't work in Edge with links from the subpages!
 
-				if ( hash ) {
+			let subtitle;
 
-					iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
-					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' – ';
+			const oldIframe = iframe;
+			iframe = oldIframe.cloneNode();
 
-				} else {
+			if ( hash ) {
 
-					iframe.src = '';
-					subtitle = '';
+				iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
+				subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' – ';
 
-				}
+			} else {
 
-				document.body.replaceChild( iframe, oldIframe );
-				document.title = subtitle + 'three.js docs';
+				iframe.src = '';
+				subtitle = '';
 
 			}
 
-			function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
+			document.body.replaceChild( iframe, oldIframe );
+			document.title = subtitle + 'three.js docs';
 
-				// Helper function for separating the member (if existing) from the pageName
-				// For example: 'Geometry.morphTarget' can be converted to
-				// ['Geometry', '.morphTarget'] or ['Geometry', '#morphTarget']
-				// Note: According RFC 3986 no '#' allowed inside of an URL fragment!
+		}
 
-				let parts = [];
+		function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
 
-				const dotIndex = pageName.indexOf( oldDelimiter );
+			// Helper function for separating the member (if existing) from the pageName
+			// For example: 'Geometry.morphTarget' can be converted to
+			// ['Geometry', '.morphTarget'] or ['Geometry', '#morphTarget']
+			// Note: According RFC 3986 no '#' allowed inside of an URL fragment!
 
-				if ( dotIndex !== - 1 ) {
+			let parts = [];
 
-					parts = pageName.split( oldDelimiter );
-					parts[ 1 ] = newDelimiter + parts[ 1 ];
+			const dotIndex = pageName.indexOf( oldDelimiter );
 
-				} else {
+			if ( dotIndex !== - 1 ) {
 
-					parts[ 0 ] = pageName;
-					parts[ 1 ] = '';
+				parts = pageName.split( oldDelimiter );
+				parts[ 1 ] = newDelimiter + parts[ 1 ];
 
-				}
+			} else {
 
-				return parts;
+				parts[ 0 ] = pageName;
+				parts[ 1 ] = '';
 
 			}
 
-			//
-
-			console.log( [
-				'    __     __',
-				' __/ __\\  / __\\__   ____   _____   _____',
-				'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
-				'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
-				'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
-				'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
-				'                                         / __/  /  \\__  \\',
-				'                                         \\/____/\\/_____/'
-			].join( '\n' ) );
+			return parts;
+
+		}
+
+		//
+
+		console.log( [
+			'    __     __',
+			' __/ __\\  / __\\__   ____   _____   _____',
+			'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
+			'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
+			'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
+			'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
+			'                                         / __/  /  \\__  \\',
+			'                                         \\/____/\\/_____/'
+		].join( '\n' ) );
 
 		</script>
 

docs/list.js → docs/list.json

@@ -1,4 +1,4 @@
-const list = {
+{
 
 	"en": {
 
@@ -109,7 +109,7 @@ const list = {
 				"Earcut": "api/en/extras/Earcut",
 				"ImageUtils": "api/en/extras/ImageUtils",
 				"PMREMGenerator": "api/en/extras/PMREMGenerator",
-				"ShapeUtils": "api/en/extras/ShapeUtils",
+				"ShapeUtils": "api/en/extras/ShapeUtils"
 			},
 
 			"Extras / Core": {
@@ -136,7 +136,7 @@ const list = {
 			},
 
 			"Extras / Objects": {
-				"ImmediateRenderObject": "api/en/extras/objects/ImmediateRenderObject",
+				"ImmediateRenderObject": "api/en/extras/objects/ImmediateRenderObject"
 			},
 
 			"Geometries": {
@@ -406,7 +406,7 @@ const list = {
 			},
 
 			"Objects": {
-				"Lensflare": "examples/en/objects/Lensflare",
+				"Lensflare": "examples/en/objects/Lensflare"
 			},
 
 			"Post-Processing": {
@@ -421,7 +421,7 @@ const list = {
 
 			"Math": {
 				"LookupTable": "examples/en/math/Lut",
-				"MeshSurfaceSampler": "examples/en/math/MeshSurfaceSampler",
+				"MeshSurfaceSampler": "examples/en/math/MeshSurfaceSampler"
 			},
 
 			"ConvexHull": {
@@ -529,8 +529,8 @@ const list = {
 			"Cameras": {
 				"ArrayCamera": "api/ar/cameras/ArrayCamera",
 				"Camera": "api/ar/cameras/Camera",
-				"CubeCamera": "api/ar/cameras/CubeCamera",
-			},
+				"CubeCamera": "api/ar/cameras/CubeCamera"
+			}
 
 		}
 
@@ -672,7 +672,7 @@ const list = {
 			},
 
 			"附件 / 物体": {
-				"ImmediateRenderObject": "api/zh/extras/objects/ImmediateRenderObject",
+				"ImmediateRenderObject": "api/zh/extras/objects/ImmediateRenderObject"
 			},
 
 			"几何体": {
@@ -941,7 +941,7 @@ const list = {
 			},
 
 			"物体": {
-				"Lensflare": "examples/zh/objects/Lensflare",
+				"Lensflare": "examples/zh/objects/Lensflare"
 			},
 
 			"后期处理": {
@@ -956,7 +956,7 @@ const list = {
 
 			"数学库": {
 				"LookupTable": "examples/zh/math/Lut",
-				"MeshSurfaceSampler": "examples/zh/math/MeshSurfaceSampler",
+				"MeshSurfaceSampler": "examples/zh/math/MeshSurfaceSampler"
 			},
 
 			"QuickHull": {
@@ -997,4 +997,4 @@ const list = {
 
 	}
 
-};
+}