Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: Thumbnails index page #19644

Closed
wants to merge 2 commits into from
Closed

Examples: Thumbnails index page #19644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
923c9c9
show lots of thumbnails
greggman May 28, 2020
b7a3ba3
Fix history.
greggman Jun 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 96 additions & 36 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ <h1><a href="https://threejs.org">three.js</a></h1>

</div>

<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
<div id="right">
<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
<div id="thumbnails"></div>
<div id="showThumbnails" class="hidden">X</div>
</div>

<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>

Expand All @@ -47,13 +51,16 @@ <h1><a href="https://threejs.org">three.js</a></h1>
var panel = document.getElementById( 'panel' );
var content = document.getElementById( 'content' );
var viewer = document.getElementById( 'viewer' );
var thumbnails = document.getElementById( 'thumbnails' );
var showThumbnailsElem = document.getElementById( 'showThumbnails' );
var filterInput = document.getElementById( 'filterInput' );
var exitSearchButton = document.getElementById( 'exitSearchButton' );
var expandButton = document.getElementById( 'expandButton' );
var viewSrcButton = document.getElementById( 'button' );
var panelScrim = document.getElementById( 'panelScrim' );

var links = {};

var linkInfos = {};
var selected = null;
var container = document.createElement( 'div' );

Expand All @@ -78,21 +85,58 @@ <h1><a href="https://threejs.org">three.js</a></h1>

var file = section[ i ];

var link = createLink( file );
container.appendChild( link );
var linkInfo = createLink( file );
container.appendChild( linkInfo.link );
thumbnails.appendChild( linkInfo.thumbnail );

links[ file ] = link;
linkInfos[ file ] = linkInfo;

}

}

if ( window.location.hash !== '' && links[ window.location.hash.substring( 1 ) ] ) {
function setViewerToHash() {

if ( window.location.hash !== '' && linkInfos[ window.location.hash.substring( 1 ) ] ) {

var file = window.location.hash.substring( 1 )

if ( selected !== null ) linkInfos[ selected ].link.classList.remove( 'selected' );

linkInfos[ file ].link.classList.add( 'selected' );

viewer.focus();
viewer.classList.remove( 'hidden' );
thumbnails.classList.add( 'hidden' );
showThumbnailsElem.classList.remove( 'hidden' );

panel.classList.remove( 'open' );

selected = file;

loadFile( window.location.hash.substring( 1 ) );
// Reveal "View source" button and set attributes to this example
viewSrcButton.style.display = '';
viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';
// change the viewer without adding history to this page
viewer.contentWindow.location.replace( file + '.html' );

} else {

showThumbnailsElem.classList.add( 'hidden' );
thumbnails.classList.remove( 'hidden' );
viewer.classList.add( 'hidden' );
// change the viewer without adding history to this page
viewer.contentWindow.location.replace( 'about:blank' );

}

}

setViewerToHash();
window.addEventListener( 'hashchange', setViewerToHash );
window.addEventListener( 'popstate', setViewerToHash );

filterInput.value = extractQuery();

if ( filterInput.value !== '' ) {
Expand Down Expand Up @@ -124,13 +168,15 @@ <h1><a href="https://threejs.org">three.js</a></h1>
exitSearchButton.onclick = function ( ) {

filterInput.value = '';
showThumbnails();
updateFilter();
panel.classList.remove( 'searchFocused' );

};

filterInput.addEventListener( 'input', function () {

showThumbnails();
updateFilter();

} );
Expand All @@ -150,6 +196,8 @@ <h1><a href="https://threejs.org">three.js</a></h1>

};

showThumbnailsElem.addEventListener( 'click', showThumbnails );

// iOS iframe auto-resize workaround

if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
Expand All @@ -162,21 +210,23 @@ <h1><a href="https://threejs.org">three.js</a></h1>

}

function showThumbnails() {

// the hashchange listener does the real work
window.location.hash = '';

}

function createLink( file ) {


var template = [
'<div class="card">',
' <a href="' + file + '.html" target="viewer">',
' <div class="cover">',
' <img src="screenshots/' + file + '.jpg" loading="lazy" width="400" />',
' </div>',
' <div class="title">' + getName( file ) + '</div>',
' </a>',
'</div>'
].join( "\n" );
const template = `
<div class="link">
<a href="${file}.html" target="viewer" class="title">${getName( file )}</a>,
</div>
`;

var link = createElementFromHTML( template );
const link = createElementFromHTML( template );

link.querySelector( 'a[target="viewer"]' ).addEventListener( 'click', function ( event ) {

Expand All @@ -186,34 +236,42 @@ <h1><a href="https://threejs.org">three.js</a></h1>

} );

return link;
return { link, thumbnail: createThumbnailLink( file ) };

}

function loadFile( file ) {
function createThumbnailLink( file ) {

selectFile( file );
viewer.src = file + '.html';

}
const template = `
<div class="card">
<a href="${file}.html" target="viewer">
<div class="cover">
<img src="screenshots/${file}.jpg" loading="lazy" width="400" />
</div>
<div class="title">${getName( file )}</div>
</a>
</div>
`;

function selectFile( file ) {
const link = createElementFromHTML( template );

link.querySelector( 'a[target="viewer"]' ).addEventListener( 'click', function ( event ) {

if ( selected !== null ) links[ selected ].classList.remove( 'selected' );
if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;

links[ file ].classList.add( 'selected' );
selectFile( file );

window.location.hash = file;
viewer.focus();
} );

panel.classList.remove( 'open' );
return link;

selected = file;
}

function selectFile( file ) {

// Reveal "View source" button and set attributes to this example
viewSrcButton.style.display = '';
viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';
// the hashchange listener does the real work
window.location.hash = file;

}

Expand Down Expand Up @@ -251,7 +309,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>

function filterExample( file, exp ) {

var link = links[ file ];
var { link, thumbnail } = linkInfos[ file ];
var name = getName( file );
if ( file in tags ) file += tags[ file ].join( ' ' );
var res = file.match( exp );
Expand All @@ -260,6 +318,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
if ( res && res.length > 0 ) {

link.classList.remove( 'hidden' );
thumbnail.classList.remove( 'hidden' );

for ( var i = 0; i < res.length; i ++ ) {

Expand All @@ -272,6 +331,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
} else {

link.classList.add( 'hidden' );
thumbnail.classList.add( 'hidden' );
link.querySelector( '.title' ).innerHTML = name;

}
Expand All @@ -298,7 +358,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>

var file = section[ i ];

if ( links[ file ].classList.contains( 'hidden' ) === false ) {
if ( linkInfos[ file ].link.classList.contains( 'hidden' ) === false ) {

collapsed = false;
break;
Expand Down
49 changes: 41 additions & 8 deletions files/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
color-scheme: light dark;

--background-color: #fff;
--secondary-background-color: #f7f7f7;
--secondary-background-color: #eee;

--color-blue: #049EF4;
--text-color: #444;
Expand Down Expand Up @@ -327,7 +327,7 @@ h1 a {
text-decoration: underline;
}

#panel #content .hidden {
.hidden {
display: none !important;
}

Expand All @@ -345,6 +345,16 @@ h1 a {
padding-right: 2px;
}

#right {
position: absolute;
border: 0px;
left: var(--panel-width);
right: 0;
width: calc(100% - var(--panel-width));
height: 100%;
overflow: auto;
}

#viewer,
iframe {
position: absolute;
Expand All @@ -356,8 +366,21 @@ iframe {
overflow: auto;
}

#viewer {
padding-left: var(--panel-width);
#thumbnails {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
#thumbnails>* {
justify-self: stretch;
}

#showThumbnails {
background: rgba(0,0,0,0.8);
position: absolute;
left: 0;
bottom: 0;
font-size: 16pt;
padding: 5px;
}

#button {
Expand Down Expand Up @@ -469,8 +492,17 @@ iframe {
border-radius: 3px;
overflow: hidden;
background-color: var(--secondary-background-color);
padding-bottom: 6px;
margin-bottom: 16px;
margin: 0.5em;
display: inline-flex;
flex-direction: column;
vertical-align: top;
position: relative;
}
.card a {
color: var(--text-color);
}
.card:hover {
box-shadow: 0 0 6px var(--text-color);
}

.card.selected {
Expand All @@ -493,6 +525,8 @@ iframe {
}

.card .title {
bottom: 0px;
vertical-align: bottom;
padding: 8px 12px 4px;
font-size: calc(var(--font-size) - 1px);
font-weight: 500;
Expand Down Expand Up @@ -568,8 +602,7 @@ iframe {
#panel.open #contentWrapper {
transform: translate3d(-380px, 0 ,0);
}
#viewer,
iframe {
#right {
left: 0;
top: var(--header-height);
width: 100%;
Expand Down