|
|
@@ -2,9 +2,10 @@
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
- <title>three.js - documentation</title>
|
|
|
+ <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');
|
|
|
@@ -12,7 +13,9 @@
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
- *{ box-sizing: border-box;}
|
|
|
+ *{
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
html {
|
|
|
height: 100%;
|
|
|
@@ -20,8 +23,7 @@
|
|
|
|
|
|
body {
|
|
|
background-color: #ffffff;
|
|
|
- margin: 0;
|
|
|
- padding: 0 0 0 260px;
|
|
|
+ margin: 0px;
|
|
|
height: 100%;
|
|
|
color: #555;
|
|
|
font-family: 'inconsolata';
|
|
|
@@ -35,7 +37,7 @@
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
- #panel {
|
|
|
+ #panel {
|
|
|
position: fixed;
|
|
|
left: 0px;
|
|
|
width: 260px;
|
|
|
@@ -77,8 +79,10 @@
|
|
|
}
|
|
|
|
|
|
#viewer {
|
|
|
+ position: absolute;
|
|
|
border: 0px;
|
|
|
- width: 100%;
|
|
|
+ left: 260px;
|
|
|
+ width: calc(100% - 260px);
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
@@ -90,6 +94,7 @@
|
|
|
.filterBlock p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
+
|
|
|
#filterInput {
|
|
|
width: 100%;
|
|
|
padding: 5px;
|
|
|
@@ -98,11 +103,13 @@
|
|
|
outline: none;
|
|
|
border: 1px solid #dedede;
|
|
|
}
|
|
|
+
|
|
|
#filterInput:focus{
|
|
|
border: 1px solid #2194CE;
|
|
|
}
|
|
|
+
|
|
|
#clearFilterButton {
|
|
|
- position: absolute;
|
|
|
+ position: absolute;
|
|
|
right: 6px;
|
|
|
top: 50%;
|
|
|
margin-top: -8px;
|
|
|
@@ -115,39 +122,47 @@
|
|
|
padding-top: 7px;
|
|
|
opacity: .5;
|
|
|
}
|
|
|
- #clearFilterButton:hover{
|
|
|
+
|
|
|
+ #clearFilterButton:hover {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
- .filtered{
|
|
|
+
|
|
|
+ .filtered {
|
|
|
display: none;
|
|
|
}
|
|
|
- #panel li b{
|
|
|
+
|
|
|
+ #panel li b {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- #expandButton{
|
|
|
+
|
|
|
+ /* mobile */
|
|
|
+
|
|
|
+ #expandButton {
|
|
|
display: none;
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 12px;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
- background-color: #2194CE;
|
|
|
- }
|
|
|
- #expandButton span{
|
|
|
- height: 3px;
|
|
|
- background-color: white;
|
|
|
- width: 16px;
|
|
|
- position: absolute;
|
|
|
- left: 8px;
|
|
|
- top: 8px;
|
|
|
- }
|
|
|
- #expandButton span:nth-child(1) {
|
|
|
- top: 14px;
|
|
|
- }
|
|
|
- #expandButton span:nth-child(2) {
|
|
|
- top: 20px;
|
|
|
- width: 12px;
|
|
|
}
|
|
|
+
|
|
|
+ #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 ) {
|
|
|
#panel{
|
|
|
position: absolute;
|
|
|
@@ -160,18 +175,24 @@
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid #dedede;
|
|
|
}
|
|
|
+ #panel h1{
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
#content{
|
|
|
overflow: auto;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
- top: 120px;
|
|
|
+ top: 90px;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
#viewer{
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
- top: 48px;
|
|
|
+ top: 56px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 56px);
|
|
|
}
|
|
|
#expandButton{
|
|
|
display: block;
|
|
|
@@ -179,13 +200,6 @@
|
|
|
#panel.collapsed{
|
|
|
height: 56px;
|
|
|
}
|
|
|
- #panel h1{
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- #content{
|
|
|
- top: 90px;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -205,16 +219,17 @@
|
|
|
</script>
|
|
|
|
|
|
<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>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
</a>
|
|
|
- <h1><a href="http://threejs.org">three.js</a> / docs</h1>
|
|
|
<div class="filterBlock" >
|
|
|
<input type="text" id="filterInput" placeholder="Type to filter"/>
|
|
|
<a href="#" id="clearFilterButton" >x</a>
|
|
|
</div>
|
|
|
- <div id="content" >
|
|
|
- </div>
|
|
|
+ <div id="content"></div>
|
|
|
</div>
|
|
|
<iframe id="viewer"></iframe>
|
|
|
|
|
|
@@ -223,23 +238,15 @@
|
|
|
var panel = document.getElementById( 'panel' );
|
|
|
var viewer = document.getElementById( 'viewer' );
|
|
|
|
|
|
- var clearFilterButton = document.getElementById( 'clearFilterButton' );
|
|
|
- var filterInput = document.getElementById( 'filterInput' );
|
|
|
- //filterInput.focus();
|
|
|
-
|
|
|
- panel.addEventListener( 'click', function( e ) {
|
|
|
- //filterInput.focus();
|
|
|
- e.preventDefault();
|
|
|
- } );
|
|
|
-
|
|
|
- document.getElementById( 'expandButton' ).addEventListener( 'click', function( e ) {
|
|
|
+ var expandButton = document.getElementById( 'expandButton' );
|
|
|
+ expandButton.addEventListener( 'click', function ( event ) {
|
|
|
panel.classList.toggle( 'collapsed' );
|
|
|
- if( !panel.classList.contains( 'collapsed' ) ) {
|
|
|
- //filterInput.focus();
|
|
|
- }
|
|
|
- e.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
} );
|
|
|
|
|
|
+ var filterInput = document.getElementById( 'filterInput' );
|
|
|
+ var clearFilterButton = document.getElementById( 'clearFilterButton' );
|
|
|
+
|
|
|
var DELIMITER = '/';
|
|
|
var MEMBER_DELIMITER = '.';
|
|
|
var nameCategoryMap = {};
|
Mr.doob