Add printable

This commit is contained in:
Mike Nolan 2023-11-11 09:20:14 -06:00
parent ffbad1005e
commit c20e168ce2
3 changed files with 136 additions and 0 deletions

View File

@ -14,6 +14,8 @@
</p>
<p class="subtitle">
Read The Bible in browser
<br>
<a class="button" href="./printable">Printable</a>
</p>
</div>
</section>

View File

@ -0,0 +1,14 @@
@media screen
{
.print-only
{
display: none;
}
}
@media print {
.screen-only
{
display: none;
}
}

View File

@ -0,0 +1,120 @@
<!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" media="only screen">
<link rel="stylesheet" href="./print.css">
</head>
<body>
<div class="screen-only">
<textarea id="text" class="textarea" placeholder="Place your book/chapter/verse urls here"></textarea>
<button id="btn" class="button is-primary">Print</button>
</div>
<h1 id="title" class="print-only"></h1>
<ul id="verses" class="print-only">
</ul>
<script>
const title = document.getElementById('title');
title.innerText = `Created on ${window.location.href}`;
const text=document.getElementById('text');
var genPage = true;
const btn = document.getElementById('btn');
const verses = document.getElementById('verses');
btn.onclick = async(e)=>{
await BeforePrint();
genPage=false;
window.print();
genPage=true;
};
function additem(text)
{
var d=document.createElement('li');
d.innerText = text;
verses.appendChild(d);
}
async function GetVerses(bible,book,chapter)
{
if(chapter === -1) return await GetBook(bible,book);
var res=await fetch(`./api/v1/GetVerses?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${chapter}`);
return await res.json();
}
async function GetVerse(bible,book,chapter,verse)
{
if(verse === -1) return await GetVerses(bible,book,chapter);
var res=await fetch(`./api/v1/GetVerse?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}&chapter=${chapter}&verse=${verse}`);
return [await res.json()];
}
async function GetBook(bible,book)
{
if(book === '') return GetBible(bible);
var res=await fetch(`./api/v1/GetChapterCount?bible=${encodeURIComponent(bible)}&book=${encodeURIComponent(book)}`);
var json = await res.json();
var list=[];
for(i = 0; i< json;i++)
{
list=list.concat(await GetVerses(bible,book,i+1));
}
return list;
}
async function GetBible(bible)
{
if(bible === '') return [];
var res=await fetch(`./api/v1/GetBooks?bible=${encodeURIComponent(bible)}`);
var json = await res.json();
var list=[];
for(const book of json.Books)
{
list=list.concat(await GetBook(bible,book));
}
return list;
}
async function BeforePrint()
{
if(genPage){
verses.innerHTML="";
for(const line of text.value.split(/\r\n|\r|\n/g))
{
try{
var url=new URL(line);
var bible=url.searchParams.get("bible") ?? '';
var book = url.searchParams.get('book') ?? '';
var chapter = parseInt(url.searchParams.get('chapter') ?? '-1');
var verse = url.hash.replace('#verse-','');
var verseNo = parseInt(verse === '' ? '-1' : verse);
for(const verse of await GetVerse(bible,book,chapter,verseNo))
{
console.dir(verse);
var d=document.createElement('li');
var hdr=document.createElement('h3');
hdr.innerText = verse.reference;
d.appendChild(hdr);
var p = document.createElement('p');
p.innerText = verse.text;
d.appendChild(p);
d.appendChild(document.createElement('br'));
verses.appendChild(d);
}
}catch(ex)
{
}
}
}
}
window.addEventListener("beforeprint", BeforePrint);
</script>
</body>
</html>