Jaanga

<!doctype html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<meta name = "viewport" content= "width=device-width, initial-scale=1">
<meta name = "description" content = "This menu script allows you to list, open and view the files in selected Jaanga folders" >
<meta name = "keywords" content = "JavaScript,Markdown,GitHub,FOSS,3D,STEM" >
<meta name = "date" content = "2018-02-12" >
<title>Jaanga</title>

/* https://www.w3schools.com/colors/colors_names.asp // use colors and borders to help identify the scope of particular elements */

html { --mnu-color: crimson; --mnu-back-color: LemonChiffon ; --mnu-width:300px; height: 100%; }

body, html { font: 12pt monospace; height: 100%; margin: 0; }

a { color: var( --mnu-color ); text-decoration: none; }
	a:hover, a:focus, #hamburger:hover { background-color: yellow; color: #8888; }

blockquote, pre { background-color: #eee; padding: 10px; }
	button, input[ type=button ] { background-color: #ddd; border: none; color: var( --mnu-color ); cursor: pointer; padding: 3px 20px; }
	button:hover { background-color: #ccc; color: #fff }

iframe { width: 100%; }

input[ type = range ] { -webkit-appearance: none; -moz-appearance: none; background-color: #ddd; width: 100%; }
	input[ type = range ]::-moz-range-thumb { background-color: #888; border-radius: 0; width: 10px; }
	input[ type = range ]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #888; height: 20px; width: 10px; }

.figure { display: inline-block; margin: 0 20px 50px 0 ; vertical-align: top; width: 240px;}
	.figure img { border: 1px solid black; }

td { vertical-align: top; }

.divMenuBar{ background-color: #000; }
	.divMenuBar a { color: #f00; margin: 5px; }
	.divMenuBar a { display: inline-block; color: white; text-align: center; padding: 3px; text-decoration: none; }

#divContainer { height: 100%; margin: 0 0 0 var( --mnu-width ); transition: margin-left .5s; position: relative; }
	#divContents { height: 100%; left: 0; margin: 0 auto; right: 0;}

#divMenu { background-color: var( --mnu-back-color ); box-sizing: border-box; margin: 0; height: 100%;
		overflow-x: hidden; padding: 30px 10px 0 10px; position: fixed; top: 0; width: var( --mnu-width ); z-index: 1; transition: 0.5s; }

#hamburger { background-color: pink; box-sizing: border-box; cursor: pointer; font-size: 30px; left: calc( var( --mnu-width ) - 100px );
		line-height: 30px; margin: 0; padding: 5px 15px 8px 10px; position: fixed; top: 0; transition: left .5s; z-index: 10; }

</style>
</head>
<body>
<script src = "https://cdn.jsdelivr.net/gh/showdownjs/showdown@1.9.0/dist/showdown.min.js" ></script>

<h2>
			<a id="urlInfo" target="_top" >info</a>
			<a href="" ><script> document.write( document.title )</script></a>
		</h2>

<p><script> document.write( document.head.querySelector( '[name=description]' ).content ); </script></p>

<hr>

<p><img src="https://pushme-pullyou.github.io/github-mark-64.png" height=18 title='Octocat' > Click icon to view source code on GitHub.

<p> ❐ Click icon to go full screen & get link to individual file.</p>

<p>Tooltips provide file size.</p>

<hr>

<div title='many thanks!' ><a href=#pages/credits.md >Credits</a></div>
			<div title='' ><a href=#pages/about-this-cms.md >About this CMS</a></div>
			<div><a href=#pages/code-of-conduct.md >Code of Conduct</a></div>
			<div><a href=#pages/contributing.md >Contributing</a></div>
			<div><a href=#pages/license.md >License</a></div>
			<div><a href=#pages/markdown-help.md >Markdown Help</a></div>
			<div><a href="javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()" title="Mr.doob's Stats.js appear in top left corner" >Show frames/second statistics</a></div>
			<div><a href="https://api.github.com/rate_limit" target="_blank" title="Occasionaly this script breaks if you go over the GitHub API rate limit" >github rate limits</a></div>

</div>

</div>

<div id = "hamburger" onclick=toggleNav(); > slide ☰ </div>

const user = 'jaanga';
	const repo = '/jaanga.github.io';
	const pathRepo = '';
	const branch = '/master/'

const uriDefaultFile = 'readme.md';
//	const uriDefaultFile = '../../plugins/view-github-issues.html'

const iconInfo = '<img src="https://pushme-pullyou.github.io/github-mark-64.png" height=18 >';

const urlGitHubApiContents = 'https://api.github.com/repos/' + user + repo + '/contents/' + pathRepo;

let urlGitHubPage;

const urlGitHubSource = 'https://github.com/' + user + repo;

init();

function init() {

urlGitHubPage = location.href.includes( '/' + user + '.github.io' ) ? '' : 'https://rawgit.com/' + user + repo + branch;
		//console.log( 'urlGitHubPage', urlGitHubPage );

urlInfo.href = urlGitHubSource;
		urlInfo.innerHTML = iconInfo;

window.addEventListener ( 'hashchange', onHashChange, false );

onHashChange();

}

function onHashChange() {

let url, ulc, pathCurrent;
/*
		if ( !location.hash ) {

url = urlGitHubPage + uriDefaultFile;
			ulc = url.toLowerCase();
			pathCurrent = '';

} else {
*/

url = location.hash.slice( 1 );
			ulc = url.toLowerCase();
			//console.log( 'url', url );

const crumbs = url.slice( urlGitHubPage.length );
			pathCurrent = crumbs.lastIndexOf( '/' ) > 0 ? crumbs.slice( 0, crumbs.lastIndexOf( '/' ) ) : '';

//console.log( 'pathCurrent',  pathCurrent );

//		}

getFolderContents( pathCurrent );

if ( ulc.endsWith( '.md' ) ) {

requestFile( url, callbackMarkdown );

} else if ( ulc.endsWith( '.html' ) ) {

document.body.style.overflow = 'hidden';
			divContents.style.maxWidth = '';
			divContents.innerHTML = '<iframe src=' + url + ' style=border:none;height:100%;width100%; ></iframe>';

} else if ( ulc.endsWith( '.gif' ) || ulc.endsWith( '.png' ) || ulc.endsWith( '.jpg' ) || ulc.endsWith( '.svg' ) || ulc.endsWith( '.ico' ) ) {

divContents.innerHTML = '<img src=' + urlGitHubPage + url + ' style=margin:20px; >';

} else {

requestFile( urlGitHubPage + url, callbackToTextarea );

}

function getFolderContents( path = '' ) {

const url = urlGitHubApiContents + path;

requestFile( url, callbackGitHubMenu );

setBreadcrumbs( path );

}

function setBreadcrumbs( path ) {

let txt =
			'<b>' +
				'<a href=JavaScript:getFolderContents(); >' +

( pathRepo ? pathRepo : '<span style=font-size:24px >⌂</span>' ) +

'</a> » ' +
			'</b>';

let folders = path ? path.split( '/' ) : [] ;

let str = '';

for ( let folder of folders ) {

str += folder + '/';

txt += '<b><a href=JavaScript:getFolderContents("' + str.slice( 0, -1 ) + '"); >' + folder + '</a> » </b>';

}

divBreadcrumbs.innerHTML = txt;

}

function callbackGitHubMenu( xhr ) {

const response = xhr.target.response;
		const items = JSON.parse( response );
		const len = pathRepo.length;

let txt = '';

if ( items.message ) { console.log( items.message ); return; }

const ignoreFolders = [ 'data' ]; //, 'plugins'

for ( let item of items ) {

if ( item.type === 'dir' ) {

if ( ignoreFolders.includes( item.name ) ) { continue; }

txt +=
					'<div style=margin-bottom:8px; >' +
						'<a href=JavaScript:getFolderContents("' + item.path.slice( len )  + '"); >📁 ' +
							item.name  +
						'</a>' +
					'</div>' +
				'';

}

const ignoreFiles = [ '.gitattributes', '.gitignore', '404.html', 'ladybug-tools-spider.html' ];

for ( let item of items ) {

if ( item.type === 'file' ) {

if ( ignoreFiles.includes( item.name ) ) { continue; }

itemPath = encodeURI( item.path.slice( len ) );

txt +=
					'<table><tr>' +

'<td><a href="' + urlGitHubSource + '/blob' + branch + itemPath + '" target=_top >' + iconInfo + '</a></td>' +
						'<td>' +

'<a href=#' + urlGitHubPage + pathRepo + itemPath +
							' title="' + item.size.toLocaleString() + ' bytes" > ' + item.name + '</a> ' +
							( item.path.endsWith( 'html' ) ? '<a href=' + urlGitHubPage + pathRepo + itemPath + ' >❐</a>' : '' ) +

'</td>' +

'</tr></table>';

// simplify
				if ( ( !location.hash || location.hash.toLowerCase().endsWith( 'readme.md' ) )
					//&& item.path !== 'README.md'
					&& item.name.toLowerCase() === 'readme.md' ) {

location.hash = urlGitHubPage + pathRepo + itemPath;

}

divMenuItems.innerHTML = txt;

}

function callbackMarkdown( xhr ){

showdown.setFlavor('github');
		const converter = new showdown.Converter();
		const response = xhr.target.response;
		const html = converter.makeHtml( xhr.target.responseText );

document.body.style.overflow = '';
		divContents.style.maxWidth = '800px';
		divContents.innerHTML = html;
		window.scrollTo( 0, 0 );

}

function callbackToTextarea( xhr ){

const response = xhr.target.response;

divContents.innerHTML = '<textarea style=height:100%;width:100%; >' + response + '

'; } function requestFile( url, callback ) { const xhr = new XMLHttpRequest(); xhr.crossOrigin = 'anonymous'; xhr.open( 'GET', url, true ); xhr.onerror = function( xhr ) { console.log( 'error:', xhr ); }; // xhr.onprogress = function( xhr ) { console.log( 'bytes loaded: ' + xhr.loaded.toLocaleString() ) }; /// or something xhr.onload = callback; xhr.send( null ); } function toggleNav() { const left = 'calc( var( --mnu-width ) - 100px )'; if ( hamburger.style.left === '' || hamburger.style.left === left ) { divMenu.style.left = 'calc( -1 * var( --mnu-width ) - 20px )'; hamburger.style.left = '-100px'; divContainer.style.marginLeft = '0'; } else { divMenu.style.left = 0; hamburger.style.left = left; divContainer.style.marginLeft = 'var( --mnu-width )'; } }

document.write( document.title )Jaanga

Jaanga