Advertisement:

Author Topic: Code: [Select] function not working in recent web browsers  (Read 18295 times)

Offline tinoest

  • Development Contributor
  • Jr. Member
  • *
  • Posts: 229
Re: Code: [Select] function not working in recent web browsers
« Reply #20 on: January 21, 2018, 12:34:56 PM »
Try this
Code: [Select]
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, oCodeArea.childElementCount);
instead of

Code: [Select]
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
Let me know if it works as i'm unable to test it right now.

That appears to work correctly.

Offline butch2k

  • Full Member
  • ***
  • Posts: 416
  • Gender: Male
    • @butch2k on Twitter
    • Planète Roliste
Re: Code: [Select] function not working in recent web browsers
« Reply #21 on: January 21, 2018, 01:58:16 PM »
Thanks a lot  :)
It should work with most browsers (except the IEs before IE9)

Offline tfs

  • Full Member
  • ***
  • Posts: 425
  • Gender: Male
Re: Code: [Select] function not working in recent web browsers
« Reply #22 on: January 21, 2018, 11:36:22 PM »
Still broken on Firefox Quantum 57.0 (x64)

I miss this feature!

Hey tfs, did you get it working yet? Because I haven't been able to.  :-[

Still broken. I've long given up on it being fixed. It seems to be something that isn't important enough to warrant a patch. I do see people posting possible fixes, though I don't think I have seen anyone post what actual file they propose changing. :)
A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

Offline butch2k

  • Full Member
  • ***
  • Posts: 416
  • Gender: Male
    • @butch2k on Twitter
    • Planète Roliste
Re: Code: [Select] function not working in recent web browsers
« Reply #23 on: January 22, 2018, 01:19:56 AM »
Function smfSelectText() in script.js

Offline tfs

  • Full Member
  • ***
  • Posts: 425
  • Gender: Male
Re: Code: [Select] function not working in recent web browsers
« Reply #24 on: January 22, 2018, 03:25:56 PM »
I do not use the same code anymore but i encountered a similar issue with mine.
IIRC you should not use textContent.length which is the content length measured in characters BUT the number of text lines (number of nodes). It used to work even if the number used was superior but not anymore, you should use a number <= to the number of lines in the text being selected.

Try this
Code: [Select]
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, oCodeArea.childElementCount);
instead of

Code: [Select]
oCurSelection.setBaseAndExtent(oCodeArea, 0, oLastChild, 'innerText' in oLastChild ? oLastChild.innerText.length : oLastChild.textContent.length);
Let me know if it works as i'm unable to test it right now.

The above change to [\Themes\default\scripts\script.js] works for a single line of code, but with a code section that has multiple lines it only selects the first line.

Code: [Select]
Single Line Works
Code: [Select]
Multiple Lines
Do not work.
Only selects line one
A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

Offline butch2k

  • Full Member
  • ***
  • Posts: 416
  • Gender: Male
    • @butch2k on Twitter
    • Planète Roliste
Re: Code: [Select] function not working in recent web browsers
« Reply #25 on: January 22, 2018, 04:03:37 PM »
This should work fine with FF and Chrome

Code: [Select]
function smfSelectText(oCurElement, bActOnElement)
{
// The place we're looking for is one div up, and next door - if it's auto detect.
if (typeof(bActOnElement) == 'boolean' && bActOnElement)
var oCodeArea = document.getElementById(oCurElement);
else
var oCodeArea = oCurElement.parentNode.nextSibling;

if (typeof(oCodeArea) != 'object' || oCodeArea == null)
return false;

// Start off with my favourite, internet explorer.
if ('createTextRange' in document.body)
{
var oCurRange = document.body.createTextRange();
oCurRange.moveToElementText(oCodeArea);
oCurRange.select();
}
// Firefox at el.
else if (window.getSelection)
{
var oCurSelection = window.getSelection();
// Safari is special!
if (oCurSelection.selectAllChildren)
{
oCurSelection.selectAllChildren(oCodeArea);
}
else
{
var curRange = document.createRange();
curRange.selectNodeContents(oCodeArea);

oCurSelection.removeAllRanges();
oCurSelection.addRange(curRange);
}
}

return false;
}

Note
I replaced setBaseAndExtent by selectAllChildren because Chrome's behavior differs heavily from FF.

Indeed, according to setBaseAndExtent MDN (Mozilla) spec and introduced with FF 53
focusOffset
The number of child nodes from the start of the focus node that should be included in the selection. So for example, if the value is 0 the whole node is excluded. If the value is 1, the first child node is included. And so on.


If you got three lines of text in the code block there are 5 nodes: 3 for the text and two for the BRs, if you set focusOffset to 5 FF select all three lines

The official Spec, on which Chrome is based, is not that clear on what the focusOffset really is when both text nodes and tags are mixed within the content container. And clearly Chrome implemented it very differently from FF. So setBaseAndExtent is a no go at this time.



« Last Edit: January 22, 2018, 04:42:59 PM by butch2k »

Offline nesquik91

  • Newbie
  • *
  • Posts: 3
Re: Code: [Select] function not working in recent web browsers
« Reply #26 on: February 06, 2018, 12:40:33 PM »
Hello!

which is the"php" file where this code should be modified?

Thanks.

Nucky

Offline butch2k

  • Full Member
  • ***
  • Posts: 416
  • Gender: Male
    • @butch2k on Twitter
    • Planète Roliste
Re: Code: [Select] function not working in recent web browsers
« Reply #27 on: February 06, 2018, 03:45:36 PM »
Hello!

which is the"php" file where this code should be modified?

Thanks.

Nucky
It's not a php file, it's script.js

Offline nesquik91

  • Newbie
  • *
  • Posts: 3
Re: Code: [Select] function not working in recent web browsers
« Reply #28 on: February 06, 2018, 03:47:58 PM »
Hy,

which js script?

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 49,852
Re: Code: [Select] function not working in recent web browsers
« Reply #29 on: February 06, 2018, 03:49:02 PM »
the file name is script.js

Offline nesquik91

  • Newbie
  • *
  • Posts: 3
Re: Code: [Select] function not working in recent web browsers
« Reply #30 on: February 06, 2018, 03:53:14 PM »
Ok. I understand. I have an smf forum and the post does not work with the selection function and I thought it would explain ...

Offline GravuTrad

  • Senior Translator
  • SMF Hero
  • *
  • Posts: 8,610
  • Gender: Male
  • One of the french SMF translators
Re: Code: [Select] function not working in recent web browsers
« Reply #31 on: February 06, 2018, 07:38:17 PM »
Located here

Quote
The above change to \Themes\default\scripts\script.js works for a single line of code, but with a code section that has multiple lines it only selects the first line.
On a toujours besoin d'un plus petit que soi! (Petit!Petit!)


Think about Search function before posting.
Pensez à la fonction Recherche avant de poster.

Offline PCNetSpec

  • Newbie
  • *
  • Posts: 8
Re: Code: [Select] function not working in recent web browsers
« Reply #32 on: March 06, 2018, 04:54:44 PM »
This should work fine with FF and Chrome

Code: [Select]
function smfSelectText(oCurElement, bActOnElement)
{
// The place we're looking for is one div up, and next door - if it's auto detect.
if (typeof(bActOnElement) == 'boolean' && bActOnElement)
var oCodeArea = document.getElementById(oCurElement);
else
var oCodeArea = oCurElement.parentNode.nextSibling;

if (typeof(oCodeArea) != 'object' || oCodeArea == null)
return false;

// Start off with my favourite, internet explorer.
if ('createTextRange' in document.body)
{
var oCurRange = document.body.createTextRange();
oCurRange.moveToElementText(oCodeArea);
oCurRange.select();
}
// Firefox at el.
else if (window.getSelection)
{
var oCurSelection = window.getSelection();
// Safari is special!
if (oCurSelection.selectAllChildren)
{
oCurSelection.selectAllChildren(oCodeArea);
}
else
{
var curRange = document.createRange();
curRange.selectNodeContents(oCodeArea);

oCurSelection.removeAllRanges();
oCurSelection.addRange(curRange);
}
}

return false;
}

Note
I replaced setBaseAndExtent by selectAllChildren because Chrome's behavior differs heavily from FF.

Indeed, according to setBaseAndExtent MDN (Mozilla) spec and introduced with FF 53
focusOffset
The number of child nodes from the start of the focus node that should be included in the selection. So for example, if the value is 0 the whole node is excluded. If the value is 1, the first child node is included. And so on.


If you got three lines of text in the code block there are 5 nodes: 3 for the text and two for the BRs, if you set focusOffset to 5 FF select all three lines

The official Spec, on which Chrome is based, is not that clear on what the focusOffset really is when both text nodes and tags are mixed within the content container. And clearly Chrome implemented it very differently from FF. So setBaseAndExtent is a no go at this time.

Worked perfectly, many thanks butch2k :)