Frontend Features and refactor
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
// Tap a verse to open a small menu: favorite it, look up the 1828 Webster
|
||||
// definition of its words, or see its cross references. Everything saved
|
||||
// lives in this browser's localStorage (read back on the /saved page).
|
||||
(function () {
|
||||
var KEYS = { fav: "kjv.favorites", defs: "kjv.definitions", xrefs: "kjv.crossrefs" };
|
||||
var open = null; // { box, menu }
|
||||
|
||||
function load(key) {
|
||||
try {
|
||||
var value = JSON.parse(localStorage.getItem(key));
|
||||
return Array.isArray(value) ? value : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function save(key, list) {
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify(list));
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function indexOf(list, match) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (match(list[i])) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
// Adds the item if it is not stored yet, removes it if it is. Returns the new "saved" state.
|
||||
function toggle(key, item, match) {
|
||||
var list = load(key);
|
||||
var at = indexOf(list, match);
|
||||
if (at >= 0) {
|
||||
list.splice(at, 1);
|
||||
} else {
|
||||
item.t = Date.now();
|
||||
list.unshift(item);
|
||||
}
|
||||
save(key, list);
|
||||
return at < 0;
|
||||
}
|
||||
|
||||
function el(tag, className, text) {
|
||||
var node = document.createElement(tag);
|
||||
if (className) {
|
||||
node.className = className;
|
||||
}
|
||||
if (text !== undefined) {
|
||||
node.textContent = text;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
function verseInfo(box) {
|
||||
var link = box.querySelector(".verse-reference a");
|
||||
var text = box.querySelector(".verse-text");
|
||||
return {
|
||||
ref: link ? link.textContent.trim() : "",
|
||||
text: text ? text.textContent.trim() : "",
|
||||
id: box.getAttribute("data-verse-id") || ""
|
||||
};
|
||||
}
|
||||
|
||||
function findUrl(ref) {
|
||||
return "/find?kw=" + encodeURIComponent(ref) + "&view=rich";
|
||||
}
|
||||
|
||||
function markFavorites(root) {
|
||||
var favs = load(KEYS.fav);
|
||||
var boxes = (root || document).querySelectorAll(".verse-container");
|
||||
for (var i = 0; i < boxes.length; i++) {
|
||||
var ref = verseInfo(boxes[i]).ref;
|
||||
boxes[i].classList.toggle("is-fav", indexOf(favs, function (f) { return f.ref === ref; }) >= 0);
|
||||
}
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
if (open) {
|
||||
open.box.classList.remove("selected");
|
||||
open.box.removeAttribute("aria-expanded");
|
||||
open.menu.remove();
|
||||
open = null;
|
||||
}
|
||||
}
|
||||
|
||||
function saveButton(isSaved, onToggle) {
|
||||
var button = el("button", "vm-save");
|
||||
button.type = "button";
|
||||
function paint(saved) {
|
||||
button.textContent = saved ? "Saved ✓" : "Save";
|
||||
button.classList.toggle("saved", saved);
|
||||
}
|
||||
paint(isSaved);
|
||||
button.addEventListener("click", function () { paint(onToggle()); });
|
||||
return button;
|
||||
}
|
||||
|
||||
function showDefinitions(info, panel) {
|
||||
panel.textContent = "Looking up words…";
|
||||
var seen = {};
|
||||
var words = (info.text.toLowerCase().match(/[a-z]+/g) || []).filter(function (w) {
|
||||
if (w.length < 3 || seen[w]) {
|
||||
return false;
|
||||
}
|
||||
seen[w] = true;
|
||||
return true;
|
||||
});
|
||||
fetch("/defs?words=" + encodeURIComponent(words.join(",")))
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (defs) {
|
||||
panel.textContent = "";
|
||||
var found = words.filter(function (w) { return defs[w]; });
|
||||
if (!found.length) {
|
||||
panel.textContent = "No definitions found for the words in this verse.";
|
||||
return;
|
||||
}
|
||||
var chips = el("div", "vm-chips");
|
||||
var detail = el("div", "vm-detail");
|
||||
detail.hidden = true;
|
||||
found.forEach(function (word) {
|
||||
var chip = el("button", "vm-chip", word);
|
||||
chip.type = "button";
|
||||
chip.addEventListener("click", function () {
|
||||
detail.hidden = false;
|
||||
detail.textContent = "";
|
||||
detail.appendChild(el("strong", "", word));
|
||||
defs[word].forEach(function (d) { detail.appendChild(el("p", "", d)); });
|
||||
var match = function (s) { return s.word === word; };
|
||||
detail.appendChild(saveButton(
|
||||
indexOf(load(KEYS.defs), match) >= 0,
|
||||
function () {
|
||||
return toggle(KEYS.defs, { word: word, defs: defs[word], ref: info.ref }, match);
|
||||
}
|
||||
));
|
||||
});
|
||||
chips.appendChild(chip);
|
||||
});
|
||||
panel.appendChild(el("div", "vm-hint", "Tap a word for its 1828 Webster definition."));
|
||||
panel.appendChild(chips);
|
||||
panel.appendChild(detail);
|
||||
})
|
||||
.catch(function () { panel.textContent = "Could not load definitions."; });
|
||||
}
|
||||
|
||||
function showCrossRefs(info, panel) {
|
||||
if (!info.id) {
|
||||
panel.textContent = "Cross references are not available here.";
|
||||
return;
|
||||
}
|
||||
panel.textContent = "Loading cross references…";
|
||||
fetch("/xref/" + encodeURIComponent(info.id))
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (refs) {
|
||||
panel.textContent = "";
|
||||
if (!refs.length) {
|
||||
panel.textContent = "No cross references for this verse.";
|
||||
return;
|
||||
}
|
||||
refs.forEach(function (x) {
|
||||
var row = el("div", "vm-xref");
|
||||
var link = el("a", "", x.ref);
|
||||
link.href = findUrl(x.ref);
|
||||
row.appendChild(link);
|
||||
row.appendChild(el("div", "vm-xref-text", x.text));
|
||||
var match = function (s) { return s.from === info.ref && s.ref === x.ref; };
|
||||
row.appendChild(saveButton(
|
||||
indexOf(load(KEYS.xrefs), match) >= 0,
|
||||
function () {
|
||||
return toggle(KEYS.xrefs, { from: info.ref, ref: x.ref, text: x.text }, match);
|
||||
}
|
||||
));
|
||||
panel.appendChild(row);
|
||||
});
|
||||
})
|
||||
.catch(function () { panel.textContent = "Could not load cross references."; });
|
||||
}
|
||||
|
||||
function openMenu(box) {
|
||||
closeMenu();
|
||||
var info = verseInfo(box);
|
||||
var menu = el("div", "verse-menu");
|
||||
menu.setAttribute("role", "group");
|
||||
menu.setAttribute("aria-label", "Actions for " + info.ref);
|
||||
var actions = el("div", "vm-actions");
|
||||
var panel = el("div", "vm-panel");
|
||||
panel.hidden = true;
|
||||
|
||||
var favMatch = function (f) { return f.ref === info.ref; };
|
||||
var fav = el("button", "vm-btn");
|
||||
fav.type = "button";
|
||||
function paintFav() {
|
||||
var saved = indexOf(load(KEYS.fav), favMatch) >= 0;
|
||||
fav.textContent = saved ? "★ Favorited" : "☆ Favorite";
|
||||
fav.classList.toggle("saved", saved);
|
||||
box.classList.toggle("is-fav", saved);
|
||||
}
|
||||
paintFav();
|
||||
fav.addEventListener("click", function () {
|
||||
toggle(KEYS.fav, { ref: info.ref, text: info.text }, favMatch);
|
||||
paintFav();
|
||||
});
|
||||
|
||||
var define = el("button", "vm-btn", "Define words");
|
||||
define.type = "button";
|
||||
define.addEventListener("click", function () {
|
||||
panel.hidden = false;
|
||||
showDefinitions(info, panel);
|
||||
});
|
||||
|
||||
var xref = el("button", "vm-btn", "Cross references");
|
||||
xref.type = "button";
|
||||
xref.addEventListener("click", function () {
|
||||
panel.hidden = false;
|
||||
showCrossRefs(info, panel);
|
||||
});
|
||||
|
||||
var close = el("button", "vm-btn vm-close", "×");
|
||||
close.type = "button";
|
||||
close.setAttribute("aria-label", "Close menu");
|
||||
close.addEventListener("click", closeMenu);
|
||||
|
||||
[fav, define, xref, close].forEach(function (b) { actions.appendChild(b); });
|
||||
menu.appendChild(actions);
|
||||
menu.appendChild(panel);
|
||||
box.appendChild(menu);
|
||||
box.classList.add("selected");
|
||||
box.setAttribute("aria-expanded", "true");
|
||||
open = { box: box, menu: menu };
|
||||
}
|
||||
|
||||
document.addEventListener("click", function (event) {
|
||||
var box = event.target.closest && event.target.closest(".verse-container");
|
||||
if (!box) {
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
// links, buttons and the open menu keep their own behaviour; so does selecting text
|
||||
if (event.target.closest("a, button, input, .verse-menu")) {
|
||||
return;
|
||||
}
|
||||
var selection = window.getSelection && window.getSelection().toString();
|
||||
if (selection) {
|
||||
return;
|
||||
}
|
||||
if (open && open.box === box) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu(box);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape") {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
markFavorites();
|
||||
})();
|
||||
Reference in New Issue
Block a user