181 lines
7.3 KiB
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.click = (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> |