scripture-viewer/BibleServerCli/data/www/chapter/index.html

181 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scripture Viewer</title>
<link rel="stylesheet" href="./bulma.min.css">
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Scripture Viewer
</p>
<p class="subtitle">
Read The Bible in browser
</p>
</div>
</section>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./" id="bible_link">Bible</a></li>
<li><a href="./" id="book_link">Book</a></li>
<li class="is-active"><a href="#" id="chapter_link" aria-current="page">Chapter</a></li>
</ul>
</nav>
<div id="navigator">
</div>
<div id="verses">
</div>
<script>
const verses = document.getElementById('verses');
const chapternavigator = document.getElementById('navigator');
const chapters = document.getElementById('chapters');
const subtitle = document.getElementById('subtitle');
const bible_link = document.getElementById('bible_link');
const book_link = document.getElementById('book_link');
const chapter_link = document.getElementById('chapter_link');
//List Of Books in the
function init()
{
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let bible = params.bible; // "some_value"
let book = params.book;
let chapter = params.chapter;
bible_link.href=`./bible?bible=${encodeURIComponent(bible)}`;
bible_link.innerText=bible;
book_link.innerText=book;
book_link.href = `./book?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}`;
chapter_link.innerText=`Chapter ${chapter}`;
fetch(`./api/v1/GetChapterCount${window.location.search}`).then(e=>e.json()).then(e=>{
var firstLink = document.createElement('a');
firstLink.innerText = "First";
firstLink.href = `./chapter?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=1`;
chapternavigator.appendChild(firstLink);
chapternavigator.append(" | ");
if(chapter > 1)
{
var prev = document.createElement('a');
prev.innerText = "Prev";
prev.href = `./chapter?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${chapter-1}`;
chapternavigator.appendChild(prev);
chapternavigator.append(" | ");
}
else
{
var prev = document.createElement('span');
prev.innerText = "Prev";
chapternavigator.appendChild(prev);
chapternavigator.append(" | ");
}
if(chapter < e)
{
var prev = document.createElement('a');
prev.innerText = "Next";
prev.href = `./chapter?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${parseInt(chapter)+1}`;
chapternavigator.appendChild(prev);
chapternavigator.append(" | ");
}
else
{
var prev = document.createElement('span');
prev.innerText = "Next";
chapternavigator.appendChild(prev);
chapternavigator.append(" | ");
}
var lastLink = document.createElement('a');
lastLink.innerText = "Last";
lastLink.href = `./chapter?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${e}`;
chapternavigator.appendChild(lastLink);
fetch(`./api/v1/GetVerses?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${chapter}`).then(f=>f.json()).then(f=>{
var i = 1;
f.forEach(element => {
generate_verse_element(element,bible,book,chapter,i);
i++;
});
});
});
}
function generate_verse_element(element,bible,book,chapter,i)
{
/*<div class="card">
<div class="card-content">
<p class="title">
Genesis 1:1
</p>
<p class="subtitle">
</p>
</div>
</div>*/
var card = document.createElement('div');
card.id = `verse-${i}`;
card.classList.add('card');
var card_content = document.createElement('div');
card_content.classList.add('card-content');
var title = document.createElement('p');
title.classList.add('title');
title.innerText = element.reference;
var subtitle = document.createElement('p');
subtitle.classList.add('subtitle');
subtitle.innerText = element.text;
card_content.appendChild(title);
card_content.appendChild(subtitle);
card.appendChild(card_content);
/*
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
*/
var card_footer = document.createElement('footer');
card_footer.classList.add('card-footer');
var card_footer_item = document.createElement('p');
card_footer_item.classList.add('card-footer-item');
var card_footer_link = document.createElement('a');
card_footer_link.innerText= "Copy Link";
card_footer_link.classList.add('button');
card_footer_link.classList.add('is-primary');
card_footer_link.classList.add('is_light');
//card_footer_link.href = `./chapter?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${chapter}#verse-${i}`;
const myUrl = new URL(window.location.href);
myUrl.hash = `#verse-${i}`;
card_footer_link.href = myUrl.toString();
card_footer_link.onclick = (e)=>{
e.preventDefault();
navigator.clipboard.writeText(myUrl.toString());
};
card_footer_item.appendChild(card_footer_link);
card_footer.appendChild(card_footer_item);
card.appendChild(card_footer);
verses.appendChild(card);
if(card.id === window.location.hash.replace("#",""))
{
card.scrollIntoView();
}
}
init();
</script>
</body>
</html>