mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-06-28 15:51:21 +02:00
423 lines
9.0 KiB
HTML
Executable File
423 lines
9.0 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>three.js / documentation</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
|
|
@font-face {
|
|
font-family: 'inconsolata';
|
|
src: url('files/inconsolata.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #ffffff;
|
|
margin: 0px;
|
|
height: 100%;
|
|
color: #555;
|
|
font-family: 'inconsolata';
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 30px;
|
|
margin-bottom: 40px;
|
|
margin-left: 20px;
|
|
font-size: 25px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h2 {
|
|
color: #454545;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
h3 {
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
a {
|
|
color: #2194CE;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#panel {
|
|
position: fixed;
|
|
left: 0px;
|
|
width: 260px;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background: #fafafa;
|
|
}
|
|
|
|
#panel ul {
|
|
list-style-type: none;
|
|
padding: 0px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#viewer {
|
|
position: absolute;
|
|
border: 0px;
|
|
left: 260px;
|
|
width: calc(100% - 260px);
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.filterBlock{
|
|
margin: 20px;
|
|
position: relative;
|
|
}
|
|
.filterBlock p {
|
|
margin: 0;
|
|
}
|
|
|
|
#filterInput {
|
|
width: 100%;
|
|
padding: 5px;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
outline: none;
|
|
border: 1px solid #dedede;
|
|
}
|
|
|
|
#filterInput:focus{
|
|
border: 1px solid #2194CE;
|
|
}
|
|
|
|
#clearFilterButton {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 14px;
|
|
color: grey;
|
|
text-align: center;
|
|
line-height: 0;
|
|
padding-top: 7px;
|
|
opacity: .5;
|
|
}
|
|
|
|
#clearFilterButton:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.filtered {
|
|
display: none;
|
|
}
|
|
|
|
#panel li b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* mobile */
|
|
|
|
#expandButton {
|
|
display: none;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 12px;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
#expandButton span {
|
|
height: 2px;
|
|
background-color: #2194CE;
|
|
width: 16px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 10px;
|
|
}
|
|
|
|
#expandButton span:nth-child(1) {
|
|
top: 16px;
|
|
}
|
|
|
|
#expandButton span:nth-child(2) {
|
|
top: 22px;
|
|
}
|
|
|
|
@media all and ( max-width: 640px ) {
|
|
h1{
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
#panel{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 480px;
|
|
width: 100%;
|
|
right: 0;
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid #dedede;
|
|
}
|
|
#content{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 90px;
|
|
right: 0;
|
|
bottom: 0;
|
|
font-size: 17px;
|
|
line-height: 22px;
|
|
overflow: auto;
|
|
}
|
|
#viewer{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 56px;
|
|
width: 100%;
|
|
height: calc(100% - 56px);
|
|
}
|
|
#expandButton{
|
|
display: block;
|
|
}
|
|
#panel.collapsed{
|
|
height: 56px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="panel" class="collapsed">
|
|
<h1><a href="http://threejs.org">three.js</a> / docs</h1>
|
|
<a id="expandButton" href="#">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</a>
|
|
<div class="filterBlock" >
|
|
<input type="text" id="filterInput" placeholder="Type to filter"/>
|
|
<a href="#" id="clearFilterButton" >x</a>
|
|
</div>
|
|
<div id="content"></div>
|
|
</div>
|
|
<iframe id="viewer"></iframe>
|
|
|
|
<script src="list.js"></script>
|
|
<script>
|
|
var panel = document.getElementById( 'panel' );
|
|
var viewer = document.getElementById( 'viewer' );
|
|
|
|
var expandButton = document.getElementById( 'expandButton' );
|
|
expandButton.addEventListener( 'click', function ( event ) {
|
|
panel.classList.toggle( 'collapsed' );
|
|
event.preventDefault();
|
|
} );
|
|
|
|
var filterInput = document.getElementById( 'filterInput' );
|
|
var clearFilterButton = document.getElementById( 'clearFilterButton' );
|
|
|
|
var DELIMITER = '/';
|
|
var MEMBER_DELIMITER = '.';
|
|
var nameCategoryMap = {};
|
|
var sections = [];
|
|
|
|
var content = document.getElementById( 'content' );
|
|
|
|
for ( var section in list ) {
|
|
|
|
var h2 = document.createElement( 'h2' );
|
|
h2.textContent = section;
|
|
|
|
content.appendChild( h2 );
|
|
|
|
for ( var category in list[ section ] ) {
|
|
|
|
var div = document.createElement( 'div' );
|
|
|
|
var h3 = document.createElement( 'h3' );
|
|
h3.textContent = category;
|
|
|
|
div.appendChild( h3 );
|
|
|
|
var ul = document.createElement( 'ul' );
|
|
div.appendChild( ul );
|
|
|
|
for ( var i = 0; i < list[ section ][ category ].length; i ++ ) {
|
|
|
|
var page = list[ section ][ category ][ i ];
|
|
|
|
var li = document.createElement( 'li' );
|
|
var a = document.createElement( 'a' );
|
|
a.setAttribute( 'href', '#' );
|
|
( function( s, c, p ) {
|
|
a.addEventListener( 'click', function( e ) {
|
|
goTo( s, c, p );
|
|
e.preventDefault();
|
|
} )
|
|
} )( section, category, page[ 0 ] )
|
|
a.textContent = page[ 0 ];
|
|
li.appendChild( a );
|
|
ul.appendChild( li );
|
|
|
|
nameCategoryMap[page[0]] = {
|
|
section: section,
|
|
category: category,
|
|
name: page[0],
|
|
element: a
|
|
};
|
|
|
|
}
|
|
|
|
content.appendChild( div );
|
|
sections.push( ul );
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
panel.appendChild( content )
|
|
|
|
function layoutList() {
|
|
|
|
sections.forEach( function( el ) {
|
|
var collapsed = true;
|
|
Array.prototype.slice.apply( el.children ).forEach( function( item ) {
|
|
if( !item.classList.contains( 'filtered' ) ) {
|
|
collapsed = false;
|
|
return;
|
|
}
|
|
} );
|
|
if( collapsed ) {
|
|
el.parentElement.classList.add( 'filtered' );
|
|
} else {
|
|
el.parentElement.classList.remove( 'filtered' );
|
|
}
|
|
} );
|
|
}
|
|
|
|
filterInput.addEventListener( 'input', function( e ) {
|
|
updateFilter();
|
|
} );
|
|
|
|
clearFilterButton.addEventListener( 'click', function( e ) {
|
|
filterInput.value = '';
|
|
updateFilter();
|
|
e.preventDefault();
|
|
} );
|
|
|
|
function updateFilter() {
|
|
|
|
var exp = new RegExp( filterInput.value, 'gi' );
|
|
for( var j in nameCategoryMap ) {
|
|
var res = nameCategoryMap[ j ].name.match( exp );
|
|
if( res && res.length > 0 ) {
|
|
nameCategoryMap[ j ].element.parentElement.classList.remove( 'filtered' );
|
|
var str = nameCategoryMap[ j ].name;
|
|
for( var i = 0; i < res.length; i++ ) {
|
|
str = str.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
|
|
}
|
|
nameCategoryMap[ j ].element.innerHTML = str;
|
|
} else {
|
|
nameCategoryMap[ j ].element.parentElement.classList.add( 'filtered' );
|
|
nameCategoryMap[ j ].element.textContent = nameCategoryMap[ j ].name;
|
|
}
|
|
}
|
|
layoutList();
|
|
|
|
}
|
|
|
|
function encodeUrl( path ) {
|
|
|
|
return path.replace(/\ \/\ /g, '.').replace(/\ /g, '_');
|
|
|
|
}
|
|
|
|
function decodeUrl( path ) {
|
|
|
|
return path.replace(/_/g, ' ').replace(/\./g, ' / ');
|
|
|
|
}
|
|
|
|
// Page loading
|
|
|
|
function goTo( section, category, name, member ) {
|
|
var parts, location;
|
|
|
|
// Fully resolve links that only provide a name
|
|
if(arguments.length == 1) {
|
|
|
|
// Resolve links of the form 'Class.member'
|
|
if(section.indexOf(MEMBER_DELIMITER) !== -1) {
|
|
parts = section.split(MEMBER_DELIMITER)
|
|
section = parts[0];
|
|
member = parts[1];
|
|
}
|
|
|
|
location = nameCategoryMap[section];
|
|
if (!location) return;
|
|
section = location.section;
|
|
category = location.category;
|
|
name = location.name;
|
|
}
|
|
|
|
var title = 'three.js - documentation - ' + section + ' - ' + name;
|
|
var url = encodeUrl(section) + DELIMITER + encodeUrl( category ) + DELIMITER + encodeUrl(name) + (!!member ? MEMBER_DELIMITER + encodeUrl(member) : '');
|
|
|
|
window.location.hash = url;
|
|
window.document.title = title;
|
|
|
|
viewer.src = pages[ section ][ category ][ name ] + '.html' + (!!member ? '#'+member : '');
|
|
|
|
panel.classList.add( 'collapsed' );
|
|
|
|
}
|
|
|
|
function goToHash() {
|
|
|
|
var hash = window.location.hash.substring( 1 ).split(DELIMITER);
|
|
var member = hash[2].split(MEMBER_DELIMITER)
|
|
goTo( decodeUrl(hash[0]), decodeUrl(hash[1]), decodeUrl(member[0]), decodeUrl(member.length > 1 ? member[1] : '') );
|
|
|
|
}
|
|
|
|
window.addEventListener( 'hashchange', goToHash, false );
|
|
|
|
if ( window.location.hash.length > 0 ) goToHash();
|
|
|
|
console.log([
|
|
' __ __',
|
|
' __/ __\\ / __\\__ ____ _____ _____',
|
|
'/ __/ /\\/ / /___\\/ ____\\/ _____\\/ _____\\',
|
|
'\\/_ __/ / _ / / __/ / __ / / __ /_ __ _____',
|
|
'/ / / / / / / / / / / / ___/ / ___/\\ _\\/ __\\/ _____\\',
|
|
'\\/__/ \\/__/\\/__/\\/__/ \\/_____/\\/_____/\\/__/ / / / ___/',
|
|
' / __/ / \\__ \\',
|
|
' \\/____/\\/_____/'
|
|
].join('\n'));
|
|
|
|
</script>
|
|
<script src="../build/three.min.js"></script>
|
|
</body>
|
|
</html>
|