Add basic capabilities
stores and loads bookmarks from localStorage, import/export capabilities
This commit is contained in:
Neil Brommer
parent
bee398bcef
commit
5798bad50a
34
.gitignore
vendored
Normal file
34
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
|
||||||
|
bootstrap/css/
|
||||||
|
|
||||||
|
bootstrap/js/
|
||||||
|
|
||||||
|
js/jquery-3\.2\.1\.js
|
||||||
|
|
||||||
|
js/jquery-3\.2\.1\.min\.js
|
||||||
|
|
||||||
|
js/jquery-3\.2\.1\.min\.map
|
||||||
|
|
||||||
|
js/popper\.js
|
||||||
|
|
||||||
|
img/0\.png
|
||||||
|
|
||||||
|
img/1\.png
|
||||||
|
|
||||||
|
img/2\.png
|
||||||
|
|
||||||
|
img/3\.png
|
||||||
|
|
||||||
|
img/4\.png
|
||||||
|
|
||||||
|
img/5\.png
|
||||||
|
|
||||||
|
img/6\.png
|
||||||
|
|
||||||
|
img/7\.png
|
||||||
|
|
||||||
|
img/8\.png
|
||||||
|
|
||||||
|
js/popper\.js\.map
|
||||||
|
|
||||||
|
bookmarkList\.json
|
||||||
0
bootstrap/.gitkeep
Normal file
0
bootstrap/.gitkeep
Normal file
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
0
img/.gitkeep
Normal file
0
img/.gitkeep
Normal file
177
index.html
Normal file
177
index.html
Normal file
|
|
@ -0,0 +1,177 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="A new tab page">
|
||||||
|
<meta name="author" content="Neil Brommer">
|
||||||
|
<link rel="icon" href="favicon.png">
|
||||||
|
|
||||||
|
<title>New Start</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles -->
|
||||||
|
<link href="main.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
||||||
|
<!-- <a class="navbar-brand" href=".">Start</a >-->
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
|
||||||
|
aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
<!-- Keep this to push elements to the right -->
|
||||||
|
</ul>
|
||||||
|
<form class="form-inline mt-2 mt-md-0">
|
||||||
|
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
|
||||||
|
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
|
||||||
|
<button class="btn btn-light ml-sm-2" type="button">Edit</button>
|
||||||
|
<button class="btn btn-light ml-sm-2" type="button" data-toggle="modal" data-target="#newBookmarkModal">Add</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="wrapper" class="container">
|
||||||
|
<div id="cardList" class="card-columns">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="newBookmarkModal" class="modal fade" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Add Bookmark</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="newBookmarkName">Name</label>
|
||||||
|
<input id="newBookmarkName" type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="newBookmarkURL">Address</label>
|
||||||
|
<input id="newBookmarkURL" type="url" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="newBookmarkGroup">Group</label>
|
||||||
|
<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
|
||||||
|
<option value="-">New Group</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div id="createGroup" class="form-group newGroup">
|
||||||
|
<label for="newBookMarkGroupNew">New Group</label>
|
||||||
|
<input id="newBookMarkGroupNew" type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-primary">Add</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="importExportModal" class="modal fade" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Import/Export</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exportText">Export</label>
|
||||||
|
<textarea id="exportText" class="form-control" rows="4"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="importText">Import</label>
|
||||||
|
<textarea id="importText" class="form-control" rows="4"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" id="btnImport" class="btn btn-primary">Import</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">About</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>
|
||||||
|
<a href="https://github.com/NeilBrommer/NewTabPage">Project on GitHub</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This page keeps a list of bookmarks separated into groups. It's intended to be used a a new tab page.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
It uses localStorage to store the list of bookmarks rather than storing them server side.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The format for the import/export JSON is:
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Group title",
|
||||||
|
"bookmarks": [
|
||||||
|
{
|
||||||
|
"name": "Bookmark 1",
|
||||||
|
"address": "http://example.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Bookmark 2",
|
||||||
|
"address": "http://example.net"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Group 2",
|
||||||
|
"bookmarks": [
|
||||||
|
{
|
||||||
|
"name": "Bookmark 3",
|
||||||
|
"address": "http://example.org"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript
|
||||||
|
================================================== -->
|
||||||
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
<script src="js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="js/popper.js"></script>
|
||||||
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
145
js/main.js
Normal file
145
js/main.js
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
$(document).ready(function () {
|
||||||
|
calcBackground();
|
||||||
|
loadBookmarks();
|
||||||
|
|
||||||
|
$("#importExportModal").on("shown.bs.modal", function () {
|
||||||
|
var data = getListString();
|
||||||
|
if (data != null)
|
||||||
|
$("#exportText").text(data);
|
||||||
|
else
|
||||||
|
$("#exportText").text("[]");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#newBookmarkModal").on("shown.bs.modal", function () {
|
||||||
|
var combo = $("#newBookmarkGroup");
|
||||||
|
var data = getList();
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
combo.append($("<option></option>").attr({ "value": i }).text(data[i].title));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// TODO complete adding bookmarks
|
||||||
|
window.alert("Adding bookmarks is still incomplete");
|
||||||
|
$("#newBookmarkModal").modal("hide");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#btnImport").click(importBookmarks);
|
||||||
|
$("#exportText").click(function () {
|
||||||
|
$("#exportText").select();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function importBookmarks() {
|
||||||
|
try {
|
||||||
|
var newData = $.parseJSON($("#importText").val());
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Import failed: " + err.message);
|
||||||
|
window.alert("Failed to import");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setList(newData);
|
||||||
|
|
||||||
|
$(".bookmarkGroup").remove();
|
||||||
|
loadBookmarks();
|
||||||
|
$("#importExportModal").modal("hide");
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadBookmarks() {
|
||||||
|
var groups = getList();
|
||||||
|
|
||||||
|
if (groups != null) {
|
||||||
|
for (var i = 0; i < groups.length; i++) {
|
||||||
|
var item = groups[i];
|
||||||
|
buildCard(item.title, item.bookmarks);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$("#aboutModal").modal("show");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildCard(title, itemList) {
|
||||||
|
var card = $(document.createElement("div"));
|
||||||
|
card.attr({ "id": "group-" + title, "class": "card bookmarkGroup" });
|
||||||
|
|
||||||
|
var cardHead = $(document.createElement("div"));
|
||||||
|
cardHead.attr({ "class": "card-header" });
|
||||||
|
cardHead.text(title);
|
||||||
|
card.append(cardHead);
|
||||||
|
|
||||||
|
var cardList = $(document.createElement("div"));
|
||||||
|
cardList.attr({ "class": "list-group list-group-flush" });
|
||||||
|
card.append(cardList);
|
||||||
|
|
||||||
|
for (var i = 0; i < itemList.length; i++) {
|
||||||
|
var item = itemList[i];
|
||||||
|
var link = $(document.createElement("a"));
|
||||||
|
link.attr({
|
||||||
|
"class": "list-group-item list-group-item-action",
|
||||||
|
"href": item.address
|
||||||
|
});
|
||||||
|
link.text(item.name);
|
||||||
|
|
||||||
|
cardList.append(link);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#cardList").append(card);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectGroupChanged(value) {
|
||||||
|
if (value == "-")
|
||||||
|
$("#createGroup").show();
|
||||||
|
else
|
||||||
|
$("#createGroup").hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function calcBackground() {
|
||||||
|
var now = new Date();
|
||||||
|
var hours = now.getHours();
|
||||||
|
var mins = now.getMinutes();
|
||||||
|
var total = (hours * 60) + mins;
|
||||||
|
|
||||||
|
// 24*60 = 1440
|
||||||
|
// 2:40 between each step
|
||||||
|
if (total > 300 && total < 460) // 5:00 - 7:40
|
||||||
|
setBackground(1, false);
|
||||||
|
else if (total > 460 && total < 620)
|
||||||
|
setBackground(2, false);
|
||||||
|
else if (total > 620 && total < 780)
|
||||||
|
setBackground(3, false);
|
||||||
|
else if (total > 780 && total < 940)
|
||||||
|
setBackground(4, false);
|
||||||
|
else if (total > 940 && total < 1100)
|
||||||
|
setBackground(5, false);
|
||||||
|
else if (total > 1100 && total < 1260)
|
||||||
|
setBackground(6, true);
|
||||||
|
else if (total > 1260 && total < 1420)
|
||||||
|
setBackground(7, true);
|
||||||
|
else
|
||||||
|
setBackground(8, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setBackground(num, dark) {
|
||||||
|
$("body").css("background-image", "url(img/" + num + ".png)");
|
||||||
|
if (dark)
|
||||||
|
$(".btn-light").removeClass("btn-light").addClass("btn-dark");
|
||||||
|
else
|
||||||
|
$(".btn-dark").removeClass("btn-dark").addClass("btn-light");
|
||||||
|
}
|
||||||
|
|
||||||
|
function getList() {
|
||||||
|
return $.parseJSON(window.localStorage.getItem("bookmarks"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getListString() {
|
||||||
|
return window.localStorage.getItem("bookmarks");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setList(list) {
|
||||||
|
if (typeof list == "string") {
|
||||||
|
window.localStorage.setItem("bookmarks", list);
|
||||||
|
} else {
|
||||||
|
var stringified = JSON.stringify(list, null, 4);
|
||||||
|
window.localStorage.setItem("bookmarks", stringified);
|
||||||
|
}
|
||||||
|
}
|
||||||
68
main.css
Normal file
68
main.css
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white no-repeat center center fixed;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
tab-size: 4;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
background-color: #FEA63C;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 32px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
height: 32px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* change the number of columns in card-columns */
|
||||||
|
@media (min-width: 34em) {
|
||||||
|
.card-columns {
|
||||||
|
-webkit-column-count: 1;
|
||||||
|
-moz-column-count: 1;
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
.card-columns {
|
||||||
|
-webkit-column-count: 1;
|
||||||
|
-moz-column-count: 1;
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 62em) {
|
||||||
|
.card-columns {
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 75em) {
|
||||||
|
.card-columns {
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue