bookmarks browser

bookmarks browser

by Laurens Maneschijn

HTML

<ul style="float: right;">
	<li><a target="_blank" href="https://jsfiddle.net/ElMoonLite/kbf4snug/show">open full screen</a></li>
	<li><a target="_blank" href="https://stackoverflow.com/a/50610003/1158769">SO read local .json file</a></li>
	<li><a target="_blank" href="http://jsfiddle.net/ElMoonLite/he6cm2p9/">bookmarks browser v2</a></li>
</ul>
<form>
	
	Open your chrome "Bookmarks" file:
	<input type="file" id="get_the_file"><br>
	
	Find it here:<br>
	linux: <code style="user-select: all;">file:///home/myusername/.config/google-chrome/Default/Bookmarks</code><br>
	windows: <code style="user-select: all;">file://C:/Users/myusername/AppData/Local/Google/Chrome/User Data/Default/Bookmarks</code><br>
	<small>(copy filepath, click [Choose file], ctrl-L, ctrl-V, Enter)</small>
</form>

<input type="search" id="search_query" placeholder="TODO search" />

<button id="open_all" title="open all">+</button>
<button id="close_all" title="close all">-</button>
<div id="target"></div>

CSS

body {
	padding-bottom: 1000px;
	padding-bottom: 100%;
}
code {
	border: 1px dotted #888;
	border-radius: 4px;
	background: #8884;
	padding: 2px;
}
dl {
	margin: 0;
}
span {
	display: inline-block;
	margin: 0 2px;
}
a {
	display: inline-block;
	margin: 0 2px;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.folder {
	margin: 2px 0 2px 4px;
	padding: 2px 0 2px 4px;
	border: 1px solid #8888;
	border-radius: 4px;
	/* make the right borders overlap instead of stack: */
	margin-right: -1px;
}
.url {
	border-top: 1px solid #8882;
	margin: 2px;
	padding: 2px;

}
.folder > details > summary:hover,
.url:hover {
	background: #8882!important;
}
.name {
	display: inline-block;
	padding: 0 2px;
	background: #80808020;
	min-width: 10px;
	min-height: 10px;
}
.date_added, .date_modified {
	opacity: 0.3;
	float: right;
}
.date_added {
	color: #008000;
}
.date_modified {
	color: #ff8000;
}
.tinyurl:not(:hover) {
	display: inline-block;
	max-width: 20px;
	max-height:10px;
	font-size: 10px;
	overflow: hidden;
	word-break: keep-all;
}
.span_url {
	display: inline-block;
	max-width: 100%;
	max-height: 70px;
	overflow: auto;
	word-break: break-all;
}
.left, .right {
	display: inline-block;
	vertical-align: top;
	width: 49%;
}
.left {}
.right {}
.url.search_hit {
	background-color: #88f4;
}
.url.search_miss {
	background-color: #f884;

}
.folder.search_hit > details > summary {
	background-color: #88f4;
}
.folder.search_miss > details > summary {
	background-color: #f884;
}
.hidden {
	display: none;
}

JavaScript

// TODO document ready
setTimeout(init, 1000);

function init() {
	var input_file = document.querySelector('#get_the_file');
	input_file.addEventListener('change', function(e) {
		readFile();
	});

	var input_search = document.querySelector('#search_query');
	input_search.addEventListener('input', search);
	input_search.addEventListener('change', search);

	document.querySelector('#open_all').addEventListener('click', el => {
		document.querySelectorAll('details').forEach(el => {el.setAttribute('open', true);});
	});
	document.querySelector('#close_all').addEventListener('click', el => {
		document.querySelectorAll('details').forEach(el => {el.removeAttribute('open');});
	});
}

function init_details_ontoggle() {
	document.querySelectorAll('details').forEach(function(details) {
		details.addEventListener("toggle", function(event) {
			console.log(event);
			if (details.open) {
				details.querySelectorAll('.url').forEach(function(el) {
					el.style.display = '';
				});
			} else {
				
			}
		});
	});
}


var search_timeout;
function search() {
	clearTimeout(search_timeout);
	search_timeout = setTimeout(search2, 100);
}
function search2() {
	document.querySelectorAll('.search_hit , .search_miss').forEach(function(el){
		el.classList.remove('search_hit');
		el.classList.remove('search_miss');
	});
	document.querySelectorAll('.folder, .url').forEach(function(el){
		el.style.display = '';
	});

	var query = document.querySelector('#search_query').value || '';
	var query_normalized = search_normalize(query);

	if (query === '') {
		// nothing to search for? reset search and show everything:
		document.querySelectorAll('details').forEach(function(el){
			el.removeAttribute('open');
			el.setAttribute('open', true);
		});
		return;
	}

	document.querySelectorAll('.folder').forEach(function(el){
		// TODO
		// querySelector selector may not start with '>'
		// var text = el.querySelector('> details > summary > .name').textContent;
		// This works now, but could break...