Ability to select only the translation text when root text is visible

[thesunshade]

User story

I'm viewing a Bilara text with the root text side by side with the translations. I would like to select just the English, however the root text also gets selected at the same time:

What should happen (somehow or other) is that only the English would get selected:

Feature description

There should be some way for the user to indicate that they only want to select the translation. For example holding down Alt when selecting. Not sure how that would happen for mobile/touch users or for screen reader users.

Should work whether text is side by side or line by line.

Comments shouldn't be selected

Another related issue is that the content of the comments gets copied along the main text, even if you haven't opened the comment by mouseover. It should just select the main text.

Acceptance criteria (the list of things that need to be done for the ticket to be considered finished):

Pre milestone planning check:

• [ ] Small enough to completed in a milestone.
• [ ] Dependencies marked
• [ ] No external dependencies block the PBI from being completed.
• [ ] Details are understood by dev team to decide if the PBI can be completed.

Done check:

• [ ] Produced code for presumed functionalities
• [ ] Project builds without errors
• [ ] Peer Code Review performed/pull request approved x2
• [ ] Project deployed on the stage environment identical to production platform
• [ ] Feature is tested against acceptance criteria
• [ ] Feature ok-ed by Product Owner (moving to Closed on the Board)
• [ ] Refactoring completed
• [ ] Any configuration or build changes documented (readme, etc...)

[thesunshade]

Honestly I have no idea how this could be done outside completely restructuring the DOM. One thing that seems to work is disabling user-select when a key is pressed. For example:

// ==UserScript==
// @name         block selecting
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://suttacentral.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=suttacentral.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const roots=document.getElementsByClassName("root")

    document.onkeydown=(e)=>{
        if (e.key=="Alt"){
            for (let i=0;i<roots.length;i++){
                roots[i].style.userSelect="none"
                roots[i].style.color="rgb(211, 209, 208)"
            }
        }
    }

    document.onkeyup=(e)=>{
        if (e.key=="Alt"){
            for (let i=0;i<roots.length;i++){
                roots[i].style.userSelect="inherit"
                roots[i].style.color="inherit"
            }
        }
    }

})();

[suttas]

What should happen (somehow or other) is that only the English would get selected:

Ideally what happens is that only the language you start selecting gets selected, just as if the two languages were two columns in a table. If you start selecting Pali, it doesn't switch to selecting English, and vice-versa.

I have no idea on how to do this, unfortunately. But perhaps this may be used:

https://stackoverflow.com/questions/43272295/alter-the-order-of-text-selection-across-elements

Comments should'nt be selected Another related issue is that the content of the comments gets copied along the main text, even if you haven't opened the comment by mouseover. It should just select the main text.

[suttas]

Honestly I have no idea how this could be done outside completely restructuring the DOM. One thing that seems to work is disabling user-select when a key is pressed. For example:

That's great!

I got another suggestion below.

First, here's a little improvement that also hides the comments. Changed the button to Control because I end up Ctrl+C after selecting anyway.

// ==UserScript==
// @name         block selecting
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://suttacentral.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=suttacentral.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const roots=document.getElementsByClassName("root")
    const comments=document.getElementsByClassName("comment")

    document.onkeydown=(e)=>{
        if (e.key=="Control"){
            for (let i=0;i<roots.length;i++){
                roots[i].style.userSelect="none"
                roots[i].style.color="rgb(211, 209, 208)"
                comments[i].style.display="none"
            }
        }
    }

    document.onkeyup=(e)=>{
        if (e.key=="Control"){
            for (let i=0;i<roots.length;i++){
                roots[i].style.userSelect="inherit"
                roots[i].style.color="inherit"
                comments[i].style.display="inline-block"
            }
        }
    }

})();

But wouldn't it somehow be possible to:

• start the script with a document.onselectstart or mousedown,
• retrieve the class of the clicked element (root or translation),
  • or otherwise the mouse position inside the window (calculating whether it's in the left or right half),
• and use it to toggle the userSelect of respectively the root or the translation
• (and if needed toggle userSelect back on when mouseup)

Then it would do pretty much exactly what we'd want.

If somebody can get this to work (sorry my JS is too rusty), then it should also not select the alternative manuscript readings, the purple *'s. They should hide as the comments do.

[thesunshade]

Have you tested this? I don't think

comments[i].style.display="none"

will work since the number of nodes in comments is different from the number of nodes in roots.

And was there a reason you did display="none"? instead of userSelect="none"?

I didn't know about onselectstart. I tried onmousedown but I ran into some problems because it's easy to start the selection outside of the actual element without knowing. Ans when you do manage to select the root text, the element was class word and not root. So basically lots of fussy things.

In any case, I doubt if Bhante is interested in a solution in the website itself that involves js.

BTW, I had used Alt since it is often associated with vertical text selection.

[suttas]

There's always more nodes in roots than comments, so it does work, but I can see how it can be optimized if needed. Just trying to get the desired behavior first.

I do think onselecstart will work in combination with calculating the mouse position. Anyway, if such a JS solution is not desired for the site, then it may not be worth the effort.

[sujato]

Thanks to both for this discussion, I agree with the points raised and will discuss the implementation with Hongda.

[thesunshade]

Not sure if any discussion was had on this. One implementation is now available in the browser extension:

https://discourse.suttacentral.net/t/a-browser-extension-for-suttacentral/36074