Appreciate your input

[onsosb]

Hi John,
I need an epub reader that I could add some extensions to it for studying languages, I do not mean for language learning, but mostly an interactive environment for linguistic proposes? The idea is a word or series of words or sentences when selected a popup like tooltip shows up and the researcher select a function from offered tooltip menu which triggers some linguistic application and returns results. Mostly like the features your Foliate has, that one has the capability of searching a dictionary, etc.
So the code in Foliate branch could have been ideal for this purpose, as long as I could have compiled it and experiment with it. But unfortunately all my attempts failed, the other issue is the number of technologies that you have used in building it which makes it even harder for a nonprofessional like me. Anyway, I decided to use Foliate-js, as it was just one technology, but to my surprise, after a few attempts and finally reading your readme carefully I discovered that scripting is not allowed.

Now the 64K question is there anyway to achieve my goal with Foliates-js, buy perhaps modifying it, if yes how would you go about it.
I am not a computer expert, but I do understand the basics, please explain it to me as if you are explaining it to a mentally retarded person, that why I will certainly comprehend it better!
Thanks for your time and help.
Bid

[johnfactotum]

The idea is a word or series of words or sentences when selected a popup like tooltip shows up

Listen to the load event of the <foliate-view> element. Then attach a listener for pointerup or click (or keyboard events, selectionchange, etc. depending on your needs).

document.querySelector('foliate-view').addEventListener('load', e => {
    const { doc } = e.detail
    doc.addEventListener('pointerup', () => {
        const selection = doc.getSelection()
        // ... do something with the selection
    })
})

I discovered that scripting is not allowed.

Scripted content contained in the book (see https://www.w3.org/TR/epub/#sec-scripted-content) is not supported. Scripted content from the reading system is supported.

[onsosb]

Hi John,
Thank you so much for your input, the few lines that you provided saved me lots of effort, I sincerely do appreciate it> Now I am able to display the tooltip and select the function I want to be done, etc. But I do have a problem, for life of me I cannot get the tool tip position itself either under or above the selected word or phrase. What is the right way doing it if I may ask, I have the following code that I put in reader.js. My first question would be if it is the right place to put it and certainly the main issues is if you could please tell me what I am doing wrong and if possible correct me.
And many thanks in advance.

function showTooltip(rect) {
            const tooltip = document.getElementById('tooltip-menu');
            const tooltipHeight = tooltip.offsetHeight;
            const tooltipWidth = tooltip.offsetWidth;
            const padding = 10; // Padding between tooltip and text
            const lineHeight = parseFloat(getComputedStyle(document.body).lineHeight);
        
            // Calculate the bottom position of the tooltip
            let top = rect.bottom + window.scrollY + padding;
            let left = rect.left + window.scrollX + (rect.width - tooltipWidth) / 2;
        
            // If there's not enough space below the text, position the tooltip above it
            if (top + tooltipHeight > window.scrollY + window.innerHeight) {
                top = rect.top + window.scrollY - tooltipHeight - padding;
            }
        
            // Ensure the tooltip stays within the viewport horizontally
            if (left + tooltipWidth > window.scrollX + window.innerWidth) {
                left = window.scrollX + window.innerWidth - tooltipWidth - padding;
            } else if (left < window.scrollX) {
                left = window.scrollX + padding;
            }
        
            // Set the calculated position to the tooltip
            tooltip.style.top = `${top}px`;
            tooltip.style.left = `${left}px`;
            tooltip.style.display = 'block';
        }

[johnfactotum]

The rects returned by getClientRects() and getBoundingClientRect() are relative to the viewport, which in this case is the iframe element, not the top level page.

Additionally, for fixed layout books, the iframe has CSS transform applied so you would need to account for that as well.

See:

• https://github.com/johnfactotum/foliate/blob/bf8897c6f0c3b4dc21b3821e052b5a5ace2b6ee0/src/reader/reader.js#L248-L254
• https://github.com/johnfactotum/foliate/blob/bf8897c6f0c3b4dc21b3821e052b5a5ace2b6ee0/src/reader/reader.js#L259-L271

I guess perhaps a built-in method for mapping the rects can be added to foliate-js as it's quite commonly needed.

[onsosb]

Thanks I will look at it. Hopefully it will help me pass this hurdle. Do appreciate it. Speaking of adding a builtin method for mapping, first I think it wold help a lot. You have built a truly pleasing ebook reader. But unfortunately for people like me with unequipped eyes too complex to twist it to extend it for additional usage.