Skip to content

Commit

Permalink
Manual: Implemented docs styling.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Nov 26, 2021
1 parent 0d9851e commit 4519858
Show file tree
Hide file tree
Showing 4 changed files with 621 additions and 639 deletions.
146 changes: 68 additions & 78 deletions manual/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,6 @@
<link rel="shortcut icon" href="../files/favicon_white.ico" media="(prefers-color-scheme: dark)"/>
<link rel="shortcut icon" href="../files/favicon.ico" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="../files/main.css">
<style>
/*
note: I don't know why the docs page is the way it is but it would
seem to make sense for the iframe to be the size you want the content
rather then every piece of content be responsible for knowing how to
adjust itself to handle the left panel?
*/
iframe {
padding-left: var(--panel-width);
}
@media all and ( max-width: 640px ) {
iframe {
padding-left: 0;
}
}

</style>
<!-- console sandbox -->
<script src="../build/three.min.js" async defer></script>
</head>
Expand All @@ -33,6 +16,10 @@
<div id="header">
<h1><a href="https://threejs.org">three.js</a></h1>

<div id="sections">
<span class="selected">manual</span>
</div>

<div id="expandButton"></div>
</div>

Expand All @@ -51,6 +38,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
<option value="ja">日本語</option>
</select>
</div>
<br/>
<div id="content"></div>
</div>

Expand Down Expand Up @@ -189,7 +177,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
function createLink( pageName, pageURL ) {

const link = document.createElement( 'a' );
const url = new URL(pageURL, window.location.href);
const url = new URL( pageURL, window.location.href );
url.pathname += '.html';
link.href = url.href;
link.textContent = pageName;
Expand Down Expand Up @@ -235,77 +223,64 @@ <h1><a href="https://threejs.org">three.js</a></h1>

}

const localList = list[ language ];
const categories = list[ language ];
const selectedPage = window.location.hash.substring( 1 );

for ( const section in localList ) {

// Create sections

const categories = localList[ section ];
for ( const category in categories ) {

const sectionHead = document.createElement( 'h2' );
sectionHead.textContent = section;
navigation.appendChild( sectionHead );
// Create categories

for ( const category in categories ) {
const pages = categories[ category ];

// Create categories
const categoryContainer = document.createElement( 'div' );
navigation.appendChild( categoryContainer );

const pages = categories[ category ];
const categoryHead = document.createElement( 'h3' );
categoryHead.textContent = category;
categoryContainer.appendChild( categoryHead );

const categoryContainer = document.createElement( 'div' );
navigation.appendChild( categoryContainer );
const categoryContent = document.createElement( 'ul' );
categoryContainer.appendChild( categoryContent );

const categoryHead = document.createElement( 'h3' );
categoryHead.textContent = category;
categoryContainer.appendChild( categoryHead );
for ( const pageName in pages ) {

const categoryContent = document.createElement( 'ul' );
categoryContainer.appendChild( categoryContent );
// Create page links

for ( const pageName in pages ) {
const pageURL = pages[ pageName ];

// Create page links
// Localisation

const pageURL = pages[ pageName ];
const listElement = document.createElement( 'li' );
categoryContent.appendChild( listElement );

// Localisation
const linkElement = createLink( pageName, pageURL );
listElement.appendChild( linkElement );

const listElement = document.createElement( 'li' );
categoryContent.appendChild( listElement );
// select current page

const linkElement = createLink( pageName, pageURL );
listElement.appendChild( linkElement );
if ( pageURL === selectedPage ) {

// select current page
linkElement.classList.add( 'selected' );

if ( pageURL === selectedPage ) {

linkElement.classList.add( 'selected' );

}
}

// Gather the main properties for the current subpage
// Gather the main properties for the current subpage

pageProperties[ pageName ] = {
section: section,
category: category,
pageURL: pageURL,
linkElement: linkElement
};
pageProperties[ pageName ] = {
category: category,
pageURL: pageURL,
linkElement: linkElement
};

// Gather the document titles (used for easy access on browser navigation)
// Gather the document titles (used for easy access on browser navigation)

titles[ pageURL ] = pageName;
titles[ pageURL ] = pageName;

}

// Gather the category elements for easy access on filtering
}

categoryElements.push( categoryContent );
// Gather the category elements for easy access on filtering

}
categoryElements.push( categoryContent );

}

Expand Down Expand Up @@ -431,33 +406,48 @@ <h1><a href="https://threejs.org">three.js</a></h1>

// yea I know this is hacky.
const re = /^(\/(?:manual\/|docs\/#?))(.*?)$/;
const url = new URL(href);
if (url.origin === window.location.origin) {
const hrefNoOrigin = url.href.substr(url.origin.length);
const m = re.exec(hrefNoOrigin);
const [,base, path] = m;
if (base.includes('manual')) {
const newHash = `#${path.replace('.html', '')}`;
const url = new URL( href );

if ( url.origin === window.location.origin ) {

const hrefNoOrigin = url.href.substr( url.origin.length );
const m = re.exec( hrefNoOrigin );
const [ , base, path ] = m;
if ( base.includes( 'manual' ) ) {

const newHash = `#${ path.replace( '.html', '' ) }`;
// Only create new iframe if we're actually changing pages.
// We could just be going to an anchor on the same page.
const newPrefix = newHash.split('#')[1];
const oldPrefix = window.location.hash.split('#')[1];
if (newPrefix === oldPrefix) {
const newUrl = new URL(window.location.href);
const newPrefix = newHash.split( '#' )[ 1 ];
const oldPrefix = window.location.hash.split( '#' )[ 1 ];

if ( newPrefix === oldPrefix ) {

const newUrl = new URL( window.location.href );
newUrl.hash = newHash;
window.history.pushState({}, '', newUrl.href);
window.history.pushState( {}, '', newUrl.href );

} else {

window.location.hash = newHash;
createNewIframe();

}

return;

}

}

window.location.href = href;

}

function setTitle(title) { // eslint-disable-line no-undef
function setTitle( title ) { // eslint-disable-line no-undef

document.title = `${title} - three.js manual`;

}

function createNewIframe() {
Expand Down
Loading

1 comment on commit 4519858

@greggman
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have on idea if these "single" comments get posted or not so adding a general comment in the hope that it notifies for the single comment above

Please sign in to comment.