A select link/button for [code] blocks (SMF patch)

[PowerGlove]

I did a similar patch a while ago to add a "Copy" button to [code] blocks. I figured that it would get accepted pretty quickly, but I'm glad that it wasn't, because I think that this new patch is a bit nicer. The old patch had two problems with it (that I can think of):

(1) Programmatic access to the clipboard is something that I expect to get more and more fragile over time. There's already some not-completely-reliable browser logic that stops the clipboard from being interacted with in non-user-initiated contexts. So, rather than implement something that I expect will pick up more and more cross-browser weirdness as time goes on, I think it's better to solve basically the same problem (how finicky it is to copy-paste [code], especially on mobile), but with something that's likely to behave more reliably across more browsers.

(2) The previous patch added the button whether JavaScript was enabled or not. This patch only adds the button when JavaScript is available. Not a big deal, but, it is kind of goofy for the button to be there if it's not going to do anything when you click on it. Better to just not even show it in those situations.

Compared to the version that people helped me test, the only user-facing change I've made is to tweak the opacity (so that it's distinct from the text it's adjacent to, and so that it's a little softer/quieter in appearance):



(That's an image, above. You tried to use that select link/button, didn't you?)

Code: (Where's the code?)

No diff(s) this time... I'm experimenting with a new way to do certain kinds of patches, and this is one of those patches: I've sent the code to theymos.

[theymos]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

[SquirrelJulietGarden]

PowerGlove sent me a different way of doing this, which is live now, but it's sort of hidden: if you click the blue "Code:" text immediately before the actual code block, then it'll select the whole code block.

Thanks to PowerGlove for the patch!

Great! Thanks theymos.

I try to test and see that there are two ways.

First way is like you guided: Click on Code before a box of code block, and content will be selected.
Second way is clicking on the box, then the content in the code block will be selected too.

Code:

Copy

It is clearer for an example if I centralize the code block. Then I can select the content by clicking on the block at the left corner.

Code: (secondway)

copy

[ibminer]

First way is like you guided: Click on Code before a box of code block, and content will be selected.
Second way is clicking on the box, then the content in the code block will be selected too.

Looks like only one way to me, the centering just moves the "code" text to the middle, but it is still allowing the click anywhere on that top line/header of the code box:




Good to see you still around PG, I thought about you not too long ago when I was watching pixels with the family, great movie.

[noorman0]

-snip-
Second way is clicking on the box, then the content in the code block will be selected too.

-snip-
It is clearer for an example if I centralize the code block. Then I can select the content by clicking on the block at the left corner.

Code: (secondway)

copy

Actually, the second method you mentioned doesn't work for me. Double- or tripple-clicking only helps select the current line. I mean, does that also work if the code block contains more than 1 line of contents?