ElkArte Community

Elk Development => Feature Discussion => Topic started by: radu81 on May 30, 2022, 02:50:58 am

Title: Quick quote to Elkarte core
Post by: radu81 on May 30, 2022, 02:50:58 am
I know there is an add-on (https://www.elkarte.net/community/index.php?topic=3456.0) for this, but it would be nice to have in the core of Elkarte. This is a core feature in SMF 2.1, and to be honest I prefer the SMF behaviour, which does not display the "Quick quote" button until you select some text.

I remember someone already asked for this feature, but I did not find that topic (quote is a trivial word to search).
Thank you.
Title: Re: Quick quote to Elkarte core
Post by: ahrasis on May 30, 2022, 03:06:18 am
It is already mentioned in that addon thread 2 months ago and Spuds already noted it.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on May 30, 2022, 11:12:59 am
Yup I started working on this ... the branch is here: https://github.com/Spuds/elk-quick-quote/tree/20  Its basically @Frenzie addon just with some 2.0 updates.

Was not sure what to do with the added button, but waiting until text is selected is not a bad route.  This version of the addon adds the QQ button on the topic display as well as the post page (that below the post where you can quote from any of the topics messages)

Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 01, 2022, 05:33:20 am
Quote from: Spuds – Was not sure what to do with the added button, but waiting until text is selected is not a bad route.
Depends on if you want people to actually find out about the feature. :P

But the original design was a quote button that popped up on the top left or right of the selected text actually. I changed it in a manner that I figured looked more integrated. Now perhaps that's what you guys all meant but in any case imo it should be either just there always with the buttons or right at the selection.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 01, 2022, 09:55:03 pm
Fair enough point ... I've made the initial PR to add this to the core. 

The only admin option is to either always show the button, or just when text is selected.

I'd imagine there are a few edge cases that will show up, the bugs are most likely mine :P  The option will be available on the display page (that the view with quick reply), the post page (down below with the other messages in the topic) and in PM (only on the reply page, where the editor is available duh)

I'll try to get the site updated this weekend with the latest batch of changes, including this one!
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 06, 2022, 04:09:44 pm
Yeah, I think it'd be better at the selection itself. There's probably some code in my repo if you look at an old commit, but it may not be worthwhile to reuse stuff from like '03-'05.

The biggest issue with the quick quote as part of the other buttons is that you don't really have it in view for really long replies, but in this case that's exacerbated by it being in hiding unless you select something.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 06, 2022, 05:40:26 pm
That is an interesting idea, to have the button appear close to the text that has been selected ....  I'll investigate that !
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 15, 2022, 05:40:39 pm
I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Title: Re: Quick quote to Elkarte core
Post by: radu81 on June 16, 2022, 03:01:16 am
There is something wrong with this, to reproduce:
- in quick reply enable View source (eye icon)
- double click to select the text from the post above
- you will get double quotes
(tested with Firefox)
I'm not sure of this, but seems that if you double click the text to select it, then click outside to deselect, then double click again to select, you will get something like this:

Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.
Quote from: Spuds – I have that done on my local and its quite a nice.   I dropped adding the button, hidden or not, to the button "line" and just have it using this floating button action.  It simplified things nicely and its a better user experience.   It will be in the next site update.

Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 16, 2022, 08:56:51 am
:thinking: I could see that happening with double / triple clicks to select some/all the text. 

The event was setup for a mouse down, drag to highlight, then mouse up action,  I'll see what can be done.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 16, 2022, 09:27:56 am
I was able to reproduce this on my local, it is the double+ clicks that are propagating through. 

I put a fix in place that seems to work, will update the site when I put in the other updated quick quote code.
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 19, 2022, 04:45:36 am
Quote from: radu81 – I'm not sure of this, but seems that if you double click the text to select it, then click outside to deselect, then double click again to select, you will get something like this:

I love the Droste effect.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 19, 2022, 08:01:12 pm
As noted in the update thread, the problem should be fixed now
Title: Re: Quick quote to Elkarte core
Post by: ahrasis on June 19, 2022, 10:42:45 pm
It works. Nice job @Spuds!
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 19, 2022, 10:43:29 pm
Thanks !

ETA: fixing time offset in QQ
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 22, 2022, 03:58:58 pm
Lookin' good!

Edit: one minor issue, in mobile view the quick quote button likes to disappear off the left of the screen.
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 22, 2022, 04:06:39 pm
One potential way to avoid that is something like this:
Code: [Select]
right: min(100vw - var(--quote_button_width), 307px);
Where 307px is the value you're already calculating, and --quote_button_width is a CSS variable you set through the quick quote script.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 22, 2022, 05:03:53 pm
Quote from: Frenzie – one minor issue, in mobile view the quick quote button likes to disappear off the left of the screen

thanks for the report .... and darn !

I had put in protection for going off the bottom of the screen and somehow convinced myself that right / left would not be a problem, totally forgetting that there is really no gutter space on mobile. 
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 23, 2022, 08:13:42 am
The bottom of the screen has me a bit puzzled I have to say. When would that happen?
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 23, 2022, 08:34:52 am
I was thinking when someone selected text that was at the  bottom (Link-10032) of the screen.  Not going to happen to often but did not want the button to be off screen (although you could still scroll to it).
Title: Re: Quick quote to Elkarte core
Post by: Frenzie on June 23, 2022, 12:47:47 pm
Oh, that bottom. I thought you meant of the page, heh. :)
Title: Re: Quick quote to Elkarte core
Post by: radu81 on June 24, 2022, 05:05:51 am
I just cleared all temporary files on Firefox for android, but still not seeing the quick quote button. Is it just me?
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 24, 2022, 08:33:31 am
I'll look into that ... quick question, what phone is that, seems like a very narrow screen?
Title: Re: Quick quote to Elkarte core
Post by: radu81 on June 24, 2022, 09:01:05 am
it's a xiaomi Mi A2 Lite (5,84", 1080 x 2280 px)
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 24, 2022, 10:56:02 am
Interesting ... I'll try to remember to look at what may be happening, specifically on my phone the buttons do not have to wrap, they fit fine on a single line and yours has better resolution than mine.

Making some progress on the quote button issue on mobile as well.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 24, 2022, 05:20:12 pm
Got to say I'm not having much luck with android (chrome or fx) with the button.

When you do a long press + drag + release you get the standard text markers and "Copy, .... "  menu ribbon on the screen ... but the quick quote button does not show up.

If I scroll the page just a bit the button (short up/down swipe action) when complete the button suddenly appears.  That made me think it was a page refresh issue (maybe tied up in the context menu and text indicators), so I tried various ways to force a page reflow but nothing worked :/

Now even stranger is when you do the long press + drag + release, and no button appears, however if you tap where the button should be, it works!  It must be there but its invisible. 

I tried a few other ways to show hide the button, currently its done by adding and removing a class, but I tried direct inline style with no improvement.

Also to note the mouseup event does not seem to fire when the long press is used, so I had to use the touchend event.

I did fix the issue where it could position off the left side on mobile, that part was easy.

If anyone has some ideas, I'm listening :ear:
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 24, 2022, 05:29:07 pm
And on my iPad (with some local tweaks applied, not yet on the site) the button shows up as expected, but does not work LOL!
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 24, 2022, 09:03:15 pm
Some luck with using the contextmenu event ... can at least get the button to show, although its tracking for the entire selection process ... Grrr
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 26, 2022, 10:47:36 am
I've updated the script on the site so please give it a test.

For me on my android device and my iPad it appears to be working.  Never had any issues on the desktop browsers.  S

The issues on touch devices is wrapped up in the context menu that appears when you select text.  That control does not release until its is done, at which point it collapses the text selection, which causes subsequent functions/events to see an empty selection.

Android allows us to catch a contextmenu event so our button is inside, or part of, that control which allows use to capture the text as a quote.  We also need to be in there to get the button to appear at all.

iPad, really iOS > 13.1, shut off the contextmenu event :exploding_head: so even though the quote button does show up, when you clicked on it,  remember it is outside the contextmenu, it was like clicking elsewhere on the page, the text selection collapses and quick quote saw nothing.  I moved this to an earlier event in the touch/point/click stack and that seems to allow us to grab the selected text before the built in contextmenu has time to clear it. 

If you are thinking all that sounds like a PITA, then good you do understand what I typed :P

@radu81 check if this new version works for you. 

Also on your mobile device, could you post what the output of this page is: http://output.jsbin.com/urowoh I entered your device details and pixel density in an emulator and the site layout looks good, but what you posted looks like what I get on a very narrow screen.
Title: Re: Quick quote to Elkarte core
Post by: ahrasis on June 26, 2022, 07:37:53 pm
I tested on android 10 chrome and firefox but the [Quote Selected] box does not appear. Anyone else?
Title: Re: Quick quote to Elkarte core
Post by: radu81 on June 27, 2022, 05:22:18 am
This seems to work fine for me, @ahrasis try to clean temporary files on your browser

The output I get is
Device:
@media orientationportrait
window.orientation0
@media resolution288dpi
@media device-pixel-ratio3
window.devicePixelRatio3
Widths:
@media device-width360px
screen.width360px
screen.availWidth360px
window.outerWidth360px
window.innerWidth360px
@media width360px
doc.docElem.clientWidth360px
doc.docElem.offsetWidth360px
doc.docElem.scrollWidth360px
doc.body.clientWidth360px
doc.body.offsetWidth360px
doc.body.scrollWidth360px
Heights:
@media device-height760px
screen.height760px
screen.availHeight760px
window.outerHeight681px
window.innerHeight625px
@media height625px
doc.docElem.clientHeight625px
doc.docElem.offsetHeight1305px
doc.docElem.scrollHeight1358px
doc.body.clientHeight1356px
doc.body.offsetHeight1409px
doc.body.scrollHeight1463px
P. S in the meantime I tried Smf 2.1 (when it was online, now is offline) and had the same behavior, no quick quote button was visible with Firefox for android.

Thanks for this update 👍👍
Title: Re: Quick quote to Elkarte core
Post by: ahrasis on June 27, 2022, 07:14:29 am
Ok. Now it is working but the box filled the whole screen width.

(Link-10038)
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 27, 2022, 09:49:09 am
Quote from: ahrasis – Ok. Now it is working but the box filled the whole screen width.
That was intended, but currently only works that way on mobile chrome.

With chrome it was easy to replace that default menu ribbon and IMO its a cleaner look.  With Fx I'll need another approach to do the same as it fires those events differently.  Not having the ribbon there lets me position the button outside of the text fence indicators so there is no overlap.  Downside is you can't Cut the selected text (with the menu)

 OK, the device is rendering out as a 360px wide screen, so that is narrow.  Something to do with the
media resolution at 288dpi and the media device-pixel-ratio at 3  ....  might have some control over that on with phone settings.
Title: Re: Quick quote to Elkarte core
Post by: lordrt on June 27, 2022, 08:12:16 pm
Quote from: Spuds – I've updated the script on the site so please give it a test.
Seems to be working now on my OnePlus 8 5g, great work.
Title: Re: Quick quote to Elkarte core
Post by: Spuds on June 29, 2022, 02:20:57 pm
I've made a few more updates, mostly to try and clean up a few area's as well as provide a common(ish) UI across the devices.

On mobile/touch devices, the button will always appear below the text.  Only chrome allowed using the button in place of the default context menu (copy/paste/etc ribbon) The button is placed a little farther away from the text bottom to avoid interfering with the selection markers.  Firefox has some problems, in that the contextMenu and selection markers are part of the "app" they do not appear in the DOM, nor does interfacing with them update the DOM or fire events (chrome does).  So once that button is placed (Fx), that is where it is.

On desktop / Ipad and some touch, the button will generally appear where you "lift up" ... If you select left to right, the button will be on the right below the selection.  If you select right to left, it will be on the left point, below the selection.  This is more useful (and apparent) on desktop as it allows one to quickly access the button since its where you ended your selection.

Improved on keeping the button on screen with the exception of mobile/touch where it could be off the bottom of the screen if you select text at the bottom.  This is because to move it, it has to move above the default contextMenu, the size of which is dependent on various items, none of which are (cross browser) accessible, and as I said its not part of the DOM so you can't z-index your way on top.  So a minor annoyance.

Cleaned up the event listeners and some scroll jank
Title: Re: Quick quote to Elkarte core
Post by: lordrt on June 30, 2022, 04:10:11 pm
Quote from: Spuds – On mobile/touch devices, the button will always appear below the text.
Enjoying this change on my mobile device.