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?

[PowerGlove]

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 (...)

Yup. The below excerpt is from the patch PM:

One little quirk is that that div has more horizontal extent than the header text, so, while people will tend to think of this feature as being tied specifically to the header text, it actually affects all of the space immediately above the contents of a [code] block (which, accidentally, will probably help discoverability).

Good to see you still around PG, I thought about you not too long ago (...)

Yep. I'm still kind of around... I thought about you, too, recently. (I was looking at the Merit Poker code the other day, which I haven't touched in a little over a year, and I gave myself the giggles pretty good listening to the audio for the /virus easter egg, and that "Wilhelm scream" that plays when someone goes bust.)

I do miss this place. Unfortunately, it still makes just as much sense for me to throw myself at Bitcointalk as it did ~4 months ago when theymos and I arrived at the decision to part ways (which is to say: it doesn't make much sense at all). But, old habits die hard, and I expect I'll continue to once-in-a-while get an urge to contribute something (sometimes those improvements will be announced, like with this small code-selection patch, and sometimes they'll be too insignificant for that, like with the very small ignore-related bug I fixed at around the same time).


(I don't want to turn this post into a diary entry, but in case anyone is wondering what I'm spending my energy on these days: I've more-or-less focused my attention back on an old PLT-related idea that I was pursuing just before I joined Bitcointalk. I really enjoy working on compilers and so on, and they often present really interesting problems, especially when I approach them in the dependency-free, self-hosted, trusting-trust-proof way that I've been closing in on for the last 15 years or so. I was thinking of occasionally sharing/posting-about some of the bootstrapping problems that I've bumped into, and how fascinating and fundamental their solutions can be, but I don't think that there's much of an audience for that kind of exposition nowadays. Even before AI, I struggled mightily to find fellow programmers possessed of any serious desire to make use of and build nothing but deeply-understood things. I struggled even to just find people who were willing to think critically about the sacrifices that they had been taught to make at the altar of productivity. In the AI age, the "comprehension optional" style has really taken root, and that school of thought is anathema to someone like me. So, instead of depressing myself further by trying and failing to find the few remaining members of my tribe, I'll for now just quietly pursue my interests and keep the bulk of my thinking unshared.)

[ibminer]

Yup. The below excerpt is from the patch PM:~

Makes sense, I'd guess it probably helps mobile use of the site as well, to give a slightly broader range of where it could be tapped.

~Yep. I'm still kind of around... I thought about you, too, recently. (I was looking at the Merit Poker code the other day, which I haven't touched in a little over a year, and I gave myself the giggles pretty good listening to the audio for the /virus easter egg, and that "Wilhelm scream" that plays when someone goes bust.)

LoL, the easter eggs were awesome. Looking back, I wish I would have put some things in the design(s) on the collector's decks that had some sense of humor, but I was overly obsessed on trying to make every detail perfect. The /virus always reminded me of a video meme I had seen, not sure if I sent it before but it's pretty funny.

I do miss this place. Unfortunately, it still makes just as much sense for me to throw myself at Bitcointalk as it did ~4 months ago
~

I don't blame you. Without going into detail and derailing this topic with my own diary entry, I feel like I need to do some soul searching to re-evaluate my priorities in life.

As for PLT, that's some deep stuff man. I still struggle with coding in various languages, and you're apparently creating them! 

I worry AI is going to wipe out most developers, I think there's still a need for humans currently, but already much less, and over time it could eliminate humans all together, which is scary to me. Not completely because of the intelligence aspect (relating specifically to coding here, there's a an entirely different conversation to be had about fears related to the general intelligence of AI overall), but mainly because of the ability to manipulate that intelligence by whatever power controls it, combined with what you mentioned about comprehension, it's scary to think people could just be copy/pasting code from AI and using it, without really understanding what has been put in, and again my fear goes back to who may be controlling and training these models. We still have people who can comprehend and review code, but over time, why would people continue to learn and understand it if they can just use a [controlled] AI model to create the select link for a code block? (<- See how I brought it back on topic? ) And then, what could that model end up injecting and/or messing up?  Anyway, I'm probably still off-topic, but I wish you the best with your project!

[alegotardo]

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

If I still using the light theme on bitcointalk, maybe you would have caught me. But answer me honestly... do not your eyes burn with so much white background? All the good programmers that I know are fans of the dark theme in everything of possible

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!

It is incredible how we get so happy and silly over such simple things that completely change our life.
My wife just asked me why I was smiling; I tried to explain to her, but it was in vain... only those who have suffered from "selection -> copying" know how much of a "game-changer" this is for SMF.

[joker_josue]

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!

Didn't you test this situation with a text/tag next to the box? 
I'm almost certain I saw something like "Select" in those code boxes a few days ago. 

Anyway, I think that's a good "hidden feature." That everyone knows about now.

[shahzadafzal]

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!

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

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):

Just a small suggestion since we are only selecting the code and letting the user perform the copy command, why not make it work when clicking anywhere inside the code block? For example, clicking the code block itself could select the whole block, instead of requiring users to click the small “Code” header.

Example:



Basically, the same logic currently applied here on codeheader: Code:

could also be applied to the code block itself.

This way, users will not forget about the feature, no additional button needs to be added, and since we are already clicking anyway to copy/select the content, it would feel more natural.

[ibminer]

~why not make it work when clicking anywhere inside the code block?

Because then you wouldn't be able to partially select anything in the block... every click would select all.

Yes, it’s working now, but I still don’t fully understand the logic behind keeping it hidden. We may even forget that the hidden copy/select option exists. :p

I'm not entirely sure here, but I assume it's an aesthetic reason?  

If I were going to add something, I'd probably do something like:

Code:

<div class="codeheader" style="cursor: help;" title="(Click/tap to select contents)">
  Code:
  <span style="float: right;">[select all]</span>
</div>

This would require the same 93% or maybe 94% width applied to the .codeheader CSS:

Code:

.quoteheader, .codeheader {
  color: #476C8E;
  text-decoration: none;
  font-style: normal;
  font-weight: bold;
  font-size: 10px;
  line-height: 1.2em;
  margin-left: 6px;
  width: 94%;
}

.. or separately

Code:

.codeheader {
  width: 94%;
}

To end up with something like:

[shahzadafzal]

~why not make it work when clicking anywhere inside the code block?

Because then you wouldn't be able to partially select anything in the block... every click would select all.

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂

https://shahzadafzal.github.io/bitcointalk-code-select-demo/

Clicking the header will select the entire code block, while manually selecting specific text still works as well 🙂

[ibminer]

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂
~

It's a thought but this feels messy on mobile. It also loses the selection if using the scroll bar. When double/triple-clicking, a flash happens on the entire code block... all of these things just feel a a little rough and annoying. I also don't think theymos would really want to dump more javascript into it. There's probably other reasons I'm not thinking of to not try and alter/effect the entire code box.

edit: And did you really need to advertise an exchange in the code?? lol 

[pandakitty]

Well, that’s a small tweak and can easily be fixed. I just created a quick demo in 5 minutes 🙂

https://shahzadafzal.github.io/bitcointalk-code-select-demo/

Clicking the header will select the entire code block, while manually selecting specific text still works as well 🙂

I find quite annoying when websites do that. It doesn't look great on mobile and the UX is terrible. Sometimes I would missclick on a code block and, with everything selected, it doesn't feel right to just drag across the code to what I actually want to copy, therefore I would click outside to unselect everything first and then drag what I want to select.

[LoyceV]

Here's an edge case: I tried to use this from a PM, to paste code into xterm. Selecting works, but that doesn't put it under my "middle mouse paste buffer", so pressing my middle mouse button on my console still pastes the previously selected text. I still had to manually select the code to be able to do what I need (CTRL-V doesn't work for this).