|
|
@@ -1,258 +1,87 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js / examples</title>
|
|
|
<meta charset="utf-8">
|
|
|
+ <title>three.js / examples</title>
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <link rel="shortcut icon" href="../favicon.ico" />
|
|
|
+ <link rel="shortcut icon" href="../files/favicon.ico" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="../files/main.css">
|
|
|
<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 {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
-
|
|
|
- a {
|
|
|
- color: #2194CE;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- #panel {
|
|
|
- position: fixed;
|
|
|
- left: 0px;
|
|
|
- width: 310px;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
-
|
|
|
- #panel #content {
|
|
|
- padding: 0px 20px 20px 20px;
|
|
|
- }
|
|
|
-
|
|
|
#panel #content .link {
|
|
|
- color: #2194CE;
|
|
|
- text-decoration: none;
|
|
|
- cursor: pointer;
|
|
|
display: block;
|
|
|
}
|
|
|
-
|
|
|
- #panel #content .selected {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- #panel #content .link:hover {
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
-
|
|
|
- #viewer {
|
|
|
- position: absolute;
|
|
|
- border: 0px;
|
|
|
- left: 310px;
|
|
|
- width: calc(100% - 310px);
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
-
|
|
|
- #viewSrcButton {
|
|
|
+ #button {
|
|
|
position: fixed;
|
|
|
- bottom: 20px;
|
|
|
- right: 20px;
|
|
|
- padding: 8px;
|
|
|
- color: #fff;
|
|
|
- background-color: #555;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- #viewSrcButton:hover {
|
|
|
- cursor: pointer;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ bottom: 12px;
|
|
|
+ right: 12px;
|
|
|
|
|
|
- .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;
|
|
|
- }
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-bottom: 0px; /* TODO div sets it to 20px */
|
|
|
|
|
|
- #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;
|
|
|
+ background-color: #E5E5E5;
|
|
|
+ opacity: .9;
|
|
|
}
|
|
|
|
|
|
- #clearFilterButton:hover {
|
|
|
+ #button:hover {
|
|
|
+ cursor: pointer;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
- .filtered {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- #panel li b {
|
|
|
- font-weight: bold;
|
|
|
+ #button img {
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
}
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <script type="text/javascript">
|
|
|
|
|
|
- /* mobile */
|
|
|
+ var _gaq = _gaq || [];
|
|
|
+ _gaq.push(['_setAccount', 'UA-86951-15']);
|
|
|
+ _gaq.push(['_trackPageview']);
|
|
|
|
|
|
- #expandButton {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 12px;
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
+ (function() {
|
|
|
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
|
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
|
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
|
+ })();
|
|
|
|
|
|
- #expandButton span {
|
|
|
- height: 2px;
|
|
|
- background-color: #2194CE;
|
|
|
- width: 16px;
|
|
|
- position: absolute;
|
|
|
- left: 8px;
|
|
|
- top: 10px;
|
|
|
- }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <div id="panel">
|
|
|
|
|
|
- #expandButton span:nth-child(1) {
|
|
|
- top: 16px;
|
|
|
- }
|
|
|
+ <div id="header">
|
|
|
+ <h1><a href="http://threejs.org">three.js</a></h1>
|
|
|
|
|
|
- #expandButton span:nth-child(2) {
|
|
|
- top: 22px;
|
|
|
- }
|
|
|
+ <div id="sections">
|
|
|
+ <a href="../docs/">docs</a>
|
|
|
+ <span class="selected">examples</span>
|
|
|
+ </div>
|
|
|
|
|
|
- @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;
|
|
|
- }
|
|
|
- }
|
|
|
+ <img id="expandButton" src="../files/ic_menu_black_24dp.svg">
|
|
|
+ </div>
|
|
|
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <script type="text/javascript">
|
|
|
+ <div id="panelScrim"></div>
|
|
|
|
|
|
- var _gaq = _gaq || [];
|
|
|
- _gaq.push(['_setAccount', 'UA-86951-15']);
|
|
|
- _gaq.push(['_trackPageview']);
|
|
|
+ <div id="contentWrapper">
|
|
|
+ <input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
|
|
|
+ <div id="exitSearchButton"></div>
|
|
|
|
|
|
- (function() {
|
|
|
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
|
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
|
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
|
- })();
|
|
|
+ <select id="language">
|
|
|
+ <option value="en">en</option>
|
|
|
+ <option value="zh">zh</option>
|
|
|
+ </select>
|
|
|
|
|
|
- </script>
|
|
|
-
|
|
|
- <div id="panel">
|
|
|
- <h1><a href="http://threejs.org">three.js</a> / examples</h1>
|
|
|
- <a id="expandButton" href="#">
|
|
|
- <span></span>
|
|
|
- <span></span>
|
|
|
- <span></span>
|
|
|
- </a>
|
|
|
- <div class="filterBlock" >
|
|
|
- <input type="text" id="filterInput" placeholder="Type to filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
|
|
|
- <a href="#" id="clearFilterButton" >x</a>
|
|
|
+ <div id="content"></div>
|
|
|
</div>
|
|
|
- <div id="content"></div>
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
|
|
|
|
|
|
+ <a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>
|
|
|
+
|
|
|
<script src="files.js"></script>
|
|
|
|
|
|
<script>
|
|
|
@@ -269,15 +98,23 @@
|
|
|
var content = document.getElementById( 'content' );
|
|
|
var viewer = document.getElementById( 'viewer' );
|
|
|
|
|
|
- var filterInput = document.getElementById( 'filterInput' );
|
|
|
- var clearFilterButton = document.getElementById( 'clearFilterButton' );
|
|
|
+ var filterInput = document.getElementById( 'filter' );
|
|
|
+ var exitSearchButton = document.getElementById( 'exitSearchButton' );
|
|
|
|
|
|
var expandButton = document.getElementById( 'expandButton' );
|
|
|
expandButton.addEventListener( 'click', function ( event ) {
|
|
|
event.preventDefault();
|
|
|
- panel.classList.toggle( 'collapsed' );
|
|
|
+ panel.classList.toggle( 'open' );
|
|
|
} );
|
|
|
|
|
|
+ var panelScrim = document.getElementById( 'panelScrim' );
|
|
|
+ panelScrim.onclick = function ( event ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+ panel.classList.toggle( 'open' );
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
// iOS iframe auto-resize workaround
|
|
|
|
|
|
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
|
|
|
@@ -291,12 +128,8 @@
|
|
|
var container = document.createElement( 'div' );
|
|
|
content.appendChild( container );
|
|
|
|
|
|
- var viewSrcButton = document.createElement( 'a' );
|
|
|
- viewSrcButton.id = 'viewSrcButton';
|
|
|
- viewSrcButton.target = '_blank';
|
|
|
- viewSrcButton.textContent = 'View source';
|
|
|
+ var viewSrcButton = document.getElementById( 'button' );
|
|
|
viewSrcButton.style.display = 'none';
|
|
|
- document.body.appendChild( viewSrcButton );
|
|
|
|
|
|
var links = {};
|
|
|
var selected = null;
|
|
|
@@ -358,14 +191,14 @@
|
|
|
window.location.hash = file;
|
|
|
viewer.focus();
|
|
|
|
|
|
- panel.classList.add( 'collapsed' );
|
|
|
+ panel.classList.remove( 'open' );
|
|
|
|
|
|
selected = 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';
|
|
|
+ viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -376,18 +209,31 @@
|
|
|
}
|
|
|
|
|
|
// filter
|
|
|
+ filterInput.onfocus = function ( event ) {
|
|
|
|
|
|
- filterInput.addEventListener( 'input', function( e ) {
|
|
|
+ panel.classList.add('searchFocused');
|
|
|
|
|
|
- updateFilter();
|
|
|
+ }
|
|
|
|
|
|
- } );
|
|
|
+ filterInput.onblur = function ( event ) {
|
|
|
+
|
|
|
+ if(filterInput.value === '') {
|
|
|
+ panel.classList.remove('searchFocused');
|
|
|
+ }
|
|
|
|
|
|
- clearFilterButton.addEventListener( 'click', function( e ) {
|
|
|
+ }
|
|
|
+
|
|
|
+ exitSearchButton.onclick = function( event ) {
|
|
|
|
|
|
filterInput.value = '';
|
|
|
updateFilter();
|
|
|
- e.preventDefault();
|
|
|
+ panel.classList.remove('searchFocused');
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ filterInput.addEventListener( 'input', function( e ) {
|
|
|
+
|
|
|
+ updateFilter();
|
|
|
|
|
|
} );
|
|
|
|
|
|
@@ -427,7 +273,7 @@
|
|
|
|
|
|
if ( res && res.length > 0 ) {
|
|
|
|
|
|
- link.classList.remove( 'filtered' );
|
|
|
+ link.classList.remove( 'hidden' );
|
|
|
|
|
|
for( var i = 0; i < res.length; i++ ) {
|
|
|
text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
|
|
|
@@ -437,7 +283,7 @@
|
|
|
|
|
|
} else {
|
|
|
|
|
|
- link.classList.add( 'filtered' );
|
|
|
+ link.classList.add( 'hidden' );
|
|
|
link.innerHTML = name;
|
|
|
|
|
|
}
|
|
|
@@ -463,7 +309,7 @@
|
|
|
|
|
|
var file = section[ i ];
|
|
|
|
|
|
- if( !links[ file ].classList.contains( 'filtered' ) ){
|
|
|
+ if ( links[ file ].classList.contains( 'hidden' ) === false ){
|
|
|
|
|
|
collapsed = false;
|
|
|
break;
|
|
|
@@ -474,13 +320,13 @@
|
|
|
|
|
|
var element = document.querySelector( 'h2[data-category="' + key + '"]' );
|
|
|
|
|
|
- if( collapsed ){
|
|
|
+ if ( collapsed ) {
|
|
|
|
|
|
- element.classList.add( 'filtered' );
|
|
|
+ element.classList.add( 'hidden' );
|
|
|
|
|
|
} else {
|
|
|
|
|
|
- element.classList.remove( 'filtered' );
|
|
|
+ element.classList.remove( 'hidden' );
|
|
|
|
|
|
}
|
|
|
|
Mr.doob
