gender-voice-visualization/ui/details.html

<!-- Details -->
<style>
.details  h2 {
	margin-bottom: .5em;
	margin-top: 0px;
}
.details {
	position: relative;
}
.details table {
	margin-bottom: .5em;
	margin-top: .5em;
	border-collapse: collapse;
	margin: auto;
}
.details table td, .details table th {
	border: 1px solid var(--chrome-border);
	padding: .25em;
	text-align: center;
}

.details .view {
	display: none;
}
.details.has-selection .view {
	display: block;	
}
.details.has-selection .instructions{
	display: none;	
}
.details .hbox h2 {
	display: inline;
	margin: 0px;
	margin-right: auto;
}
.details .hbox > * + * {
	margin-left: .5em;
}
.details .hbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 1em;
	height: 2em;
}
.details label {
	font-weight: bold;
}
td.highlight {
	background: var(--accent);
	color: white;
	color: var(--accent-text);
}
.details details {
	margin-top: .5em;
}
.details summary {
	margin-bottom: .5em;
}
#delete-confirm.hidden {
	display: inline-block;
	overflow: hidden;
	opacity: 0;
	width: 1ch;
	height: 1ch;
	visibility: hidden;
}
#delete-confirm {
	transition: .3s all;
}
</style>
<section class="details"> 
	<h2 class='instructions'>Clip Details</h2>
	<div class='instructions'>
		When you select a clip/point from the graph it will be displayed here.
		If you just loaded the page and are seeing this,
		your browser is downloading the examples
		and they will display as they arrive.
		If you are on a slow connection,
		you may wish to start by reading the instructions in the help tab
		while you wait.
	</div>
	<div class='view'>
		<div class="hbox">
			<h2 id="preview-title"></h2>
			<span class='buttons'>
				<span id='delete-confirm' class='hidden'>Press again to delete</span>
				<button class='delete' title='Delete Clip'>{% include 'trash.svg' %}</button>
				<button class='download' title='Download Clip'>{% include 'download.svg' %}</button>
			</span>
		</div>

		<table>
			<tr>
				<th></th>
				<th>Mean</th>
				<th>Median</th>
				<th>St. dev.</th>
			</tr>
			<tr>
				<th>Pitch</th>
				<td id='preview-mean-pitch'>--</td>
				<td id='preview-median-pitch'>--</td>
				<td class='highlight'><span id='preview-stdev-pitch'></span>*</td>
			</tr>
			<tr>
				<th>Resonance</th>
				<td id='preview-mean-resonance'>--</td>
				<td id='preview-median-resonance'>--</td>
				<td id='preview-stdev-resonance'>--</td>
			</tr>
		</table>
		<br>
		<div>
			<label for="preview-transcript">Transcript</label>:
			<span id='preview-transcript'></span>
		</div>
		<details>
			<summary>Advanced</summary>

			<button id='dl-json'>Download JSON</button>
		</details>
		<hr>
		<div>
			<small>* In many contexts, greater variation in pitch (standard deviation) is 
			associated with women's speech, whereas monotone is associated with men's speech.
			</small>
		</div>
	</div>
</section>
<script>

globalState.render(['previewClip'], current => {
	if (current.previewClip) {
		$('.details').classList.add('has-selection');
		$('#preview-title').innerHTML = current.previewClip.title || '';
		if (current.previewClip.meanPitch) {
			$('#preview-mean-pitch').innerHTML = Math.round(current.previewClip.meanPitch) + 'Hz';
			$('#preview-mean-resonance').innerHTML = Math.round(current.previewClip.meanResonance * 100) + '%';
			$('#preview-stdev-pitch').innerHTML = Math.round(current.previewClip.stdevPitch) + 'Hz';
			$('#preview-stdev-resonance').innerHTML = Math.round(current.previewClip.stdevResonance * 100) + '%';
			$('#preview-median-pitch').innerHTML = Math.round(current.previewClip.medianPitch) + 'Hz';
			$('#preview-median-resonance').innerHTML = Math.round(current.previewClip.medianResonance * 100) + '%';
		}
		if (current.previewClip.transcript) {
			$('#preview-transcript').innerHTML = current.previewClip.transcript;
		}
	} else {
		$('.details').classList.remove('has-selection');
	}
})

$('section.details button.download').addEventListener('click', evt => {
	let previewClip = globalState.get('previewClip');
	downloadFile(previewClip.audio, previewClip.title);
});

let lastDeletePress = 0;
$('section.details button.delete').addEventListener('click', evt => {
	if (Date.now() - lastDeletePress > 4000) {
		$('#delete-confirm').classList.remove('hidden');
		lastDeletePress = Date.now();
		window.setTimeout(() => {
			$('#delete-confirm').classList.add('hidden');
		}, 4000)
	} else {
		let previewClip = globalState.get('previewClip');
		globalState.mutate('clips', clips => {
			let index = clips.indexOf(previewClip);
			clips.splice(index, 1);
		})
		globalState.set('previewClip', null);
	}
});

$('#dl-json').addEventListener('click', evt => {
	let previewClip = globalState.get('previewClip');
	let cloneClip = JSON.parse(JSON.stringify(previewClip));
	delete cloneClip.marker;
	downloadFile(
		'data:text/json;charset=utf-8,' 
		+ encodeURIComponent(JSON.stringify(cloneClip)), 

		previewClip.title + '.json'
	);
})

</script>