Add printable add menu

This commit is contained in:
Mike Nolan 2023-11-11 10:20:58 -06:00
parent c20e168ce2
commit dd1083663f
2 changed files with 95 additions and 16 deletions

View File

@ -111,8 +111,17 @@
});
});
}
function inIframe () {
try {
return window.self !== window.top ? 1 : 0;
} catch (e) {
return 2;
}
}
function generate_verse_element(element,bible,book,chapter,i)
{
const isiniframe = inIframe();
/*<div class="card">
<div class="card-content">
<p class="title">
@ -153,7 +162,7 @@
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.innerText= isiniframe === 0 ? "Copy Link" : isiniframe === 1 ? "Add" : "Set";
card_footer_link.classList.add('button');
card_footer_link.classList.add('is-primary');
card_footer_link.classList.add('is_light');
@ -161,10 +170,19 @@
const myUrl = new URL(window.location.href);
myUrl.hash = `#verse-${i}`;
card_footer_link.href = myUrl.toString();
if(isiniframe !== 2)
{
card_footer_link.onclick = (e)=>{
e.preventDefault();
if(isiniframe ===1)
{
window.addVerse(myUrl.toString());
}else{
navigator.clipboard.writeText(myUrl.toString());
}
};
}
card_footer_item.appendChild(card_footer_link);
card_footer.appendChild(card_footer_item);
card.appendChild(card_footer);

View File

@ -9,35 +9,49 @@
</head>
<body>
<div class="screen-only">
<textarea id="text" class="textarea" placeholder="Place your book/chapter/verse urls here"></textarea>
<textarea id="text" class="textarea" placeholder="Place your bible, book, chapter or verse urls here"></textarea>
<button id="btn" class="button is-primary">Print</button>
<button class="button" onclick="show_modal()">Add</button>
<p>NOTE: Print in context menu does not work, use either the Print button on the page, CTRL+P or Command+P</p>
<div id="add_modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Add a bible, book, chapter or verse<br>Use the x or Cancel<br> when adding single verses</p>
<button class="delete" onclick="modalClose()" aria-label="close"></button>
</header>
<section class="modal-card-body">
<iframe src="./" id="iframe" frameborder="0"></iframe>
</section>
<footer class="modal-card-foot">
<button onclick="modalAdd()" class="button is-success">Add</button>
<button onclick="modalClose()" class="button">Cancel</button>
</footer>
</div>
</div>
</div>
<h1 id="title" class="print-only"></h1>
<ul id="verses" class="print-only">
</ul>
<script>
const add_modal = document.getElementById('add_modal');
const iframe = document.getElementById('iframe');
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 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);
@ -81,7 +95,7 @@
async function BeforePrint()
{
if(genPage){
verses.innerHTML="";
for(const line of text.value.split(/\r\n|\r|\n/g))
{
@ -111,10 +125,57 @@
}
}
}
}
window.addEventListener("beforeprint", BeforePrint);
function addurl(e)
{
if(!e.includes('?'))
{
alert("Must be bible, book, chapter or verse");
return;
}
var l = "";
for(const line of text.value.split(/\r\n|\r|\n/g))
{
if(line.length > 0)
l += `${line}\n`;
}
l += `${e}`;
text.value = l;
}
function show_modal()
{
iframe.contentWindow.location.href = './';
iframe.onload = ()=>{
iframe.contentWindow.addVerse = (e)=>{
addurl(e);
};
};
add_modal.classList.add('is-active');
}
function modalClose()
{
add_modal.classList.remove('is-active');
}
function modalAdd()
{
addurl(iframe.contentWindow.location.href);
add_modal.classList.remove('is-active');
}
window.onkeydown = async function(e){
if(e.ctrlKey && e.keyCode == 'P'.charCodeAt(0)){
e.preventDefault();
//your printing code
await BeforePrint();
window.print();
}
}
</script>
</body>
</html>