ami.js
Version:
<p align="center"> <img src="https://cloud.githubusercontent.com/assets/214063/23213764/78ade038-f90c-11e6-8208-4fcade5f3832.png" width="60%"> </p>
360 lines (290 loc) • 7.75 kB
HTML
<!--
Page based on the excellent ThreeJS Example page.
www.threejs.org
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>ami / examples</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
@font-face {
font-family: 'Roboto', sans-serif;
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: 'Roboto', sans-serif;
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;
}
#panel #content .link {
color: #2194CE;
text-decoration: none;
cursor: pointer;
}
#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;
}
#button {
position: fixed;
top: 20px;
right: 20px;
padding: 8px;
color: #fff;
background-color: #555;
opacity: 0.7;
}
#button:hover {
cursor: pointer;
opacity: 1;
}
/* 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: 60px;
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="https://github.com/FNNDSC/ami">ami</a> / examples</h1>
<a id="expandButton" href="#">
<span></span>
<span></span>
<span></span>
</a>
<div id="content">
<div>
<h2>welcome</h2>
<div>
<a href="https://github.com/FNNDSC/ami">src @ github</a>
</div>
<div>
<a href="https://fnndsc.slack.org">chat @ slack</a> (<a href="http://slack.babymri.org">get invite</a>)
</div>
<div>
<a href="doc/index.html">doc @ jsdoc</a>
</div>
</br>
<div>
<a href="https://github.com/FNNDSC/ami/issues/new">report a bug</a>
</div>
</div>
</div>
</div>
<iframe id="viewer" allowfullscreen></iframe>
<script>;
var files = {
'editor': [
'editor_draw'
],
'geometries': [
'geometries_slice'
],
'loader': [
'loader_dicoms',
// 'loader_nifti',
'loader_nrrd'
],
'widget': [
'widget_handle'
],
'viewers': [
'viewers_upload',
'viewers_compare',
'viewers_labelmap',
'viewers_quadview'
],
'volume rendering': [
'vr_singlepass'
],
'xtk': [
'xtk_lesson10',
'xtk_lesson13'
]
};
var panel = document.getElementById( 'panel' );
var content = document.getElementById( 'content' );
var viewer = document.getElementById( 'viewer' );
var expandButton = document.getElementById( 'expandButton' );
expandButton.addEventListener( 'click', function ( event ) {
panel.classList.toggle( 'collapsed' );
event.preventDefault();
} );
// iOS8 workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
viewer.addEventListener( 'load', function ( event ) {
viewer.contentWindow.innerWidth -= 10;
viewer.contentWindow.innerHeight -= 2;
} );
}
var container = document.createElement( 'div' );
content.appendChild( container );
var button = document.createElement( 'div' );
button.id = 'button';
button.textContent = 'View source';
button.addEventListener( 'click', function ( event ) {
var array = location.href.split( '/' );
array.pop();
window.open( 'https://github.com/FNNDSC/vjs/blob/dev/examples/' + selected + '/' + selected + '.js' );
}, false );
button.style.display = 'none';
document.body.appendChild( button );
var divs = {};
var selected = null;
for ( var key in files ) {
var section = files[ key ];
var div = document.createElement( 'h2' );
div.textContent = key;
container.appendChild( div );
for ( var i = 0; i < section.length; i ++ ) {
( function ( file ) {
var name = file.split( '_' );
name.shift();
name = name.join( ' / ' );
var div = document.createElement( 'div' );
div.className = 'link';
div.textContent = name;
div.addEventListener( 'click', function () {
panel.classList.toggle( 'collapsed' );
load( file );
} );
container.appendChild( div );
divs[ file ] = div;
} )( section[ i ] );
}
}
var load = function ( file ) {
if ( selected !== null ) divs[ selected ].className = 'link';
divs[ file ].className = 'link selected';
window.location.hash = file;
window.console.log('examples/' + file + '/index.html');
viewer.src = 'examples/' + file + '/index.html';
viewer.focus();
button.style.display = '';
selected = file;
};
if ( window.location.hash !== '' ) {
load( window.location.hash.substring( 1 ) );
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-39303022-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>