ElkArte Community

Elk Development => Feature Discussion => Exterminated Features => Topic started by: scripple on November 22, 2014, 03:57:05 pm

Title: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 03:57:05 pm
So one handy thing on sceditor is that hitting ctrl-enter automatically breaks a quote.  Very handy.  But annoyingly my phone has no easy way to send ctrl-enter.  And it's on my phone where I'd REALLY like to have an auto quote splitting feature as it's a lot more annoying to type all the open and close quote bbc codes on the phone than on a desktop keyboard.

I've not looked at how the ctrl-enter operates in sceditor, but I was wondering how difficult it would be to have a split quote button on the sceditor toolbar that did the equivalent of ctrl-enter at the current cursor location.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: emanuele on November 22, 2014, 06:45:00 pm
Good point.

The split is performed by the splittag.plugin.js put together by @Spuds.
Adding a button requires some moving around of stuff, but it's not too difficult.

If you want to give it a try, replace the splittag.plugin.js file with the attached.
Then, in jquery.sceditor.css (or even in custom.css) you add something like this:
Code: [Select]
.sceditor-button-splittag div {
background: url('../images/bbc/splittag.png');
}
pointing to the image you want to use (or using the base64 encoded image as background).

And finally, in Editor.subs.php, you can add the button, for example replacing:
Code: [Select]
array('spoiler', 'footnote'),
with:
Code: [Select]
array('spoiler', 'footnote', 'splittag'),
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 22, 2014, 07:51:17 pm
Yup should be easy ... but do note it does not work in wizzy mode so in that mode the button should be disabled.  I has some code that sorta worked in wizzy but it gets overly complicated so I binned it.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 10:25:41 pm
Thanks.  I'll give it a try next time I have a moment to tinker.  (You guys are too quick.)  Fortunately all of my active forum members have told me they have no use for wizzy mode.

Will the new plugin attached still work with ctrl-enter as well as the button?  Or just the button?
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 10:54:15 pm
A quick test answered my question.  ctrl-enter still works.  To get it to disable itself in wizzy mode this code shouldn't be present.
Code: [Select]
		exec: function() {
oSplitTags = new elk_SplitTags();

oSplitTags.split();
},
Just the txtExec part.  It seems that's how sceditor is told that a function doesn't work in a certain mode.  So leaving that out automatically disables the button when wizzy mode is entered.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 11:28:46 pm
Ok, I'm going to go ahead and test this on my live forum.  I've attached a modified plugin where the button is inactive in wizzy mode and has a more meaningful tooltip.  Also a png file that anyone is welcome to grab.  I'm going to place the button in a group by itself on the leftmost part of line1.  i.e. just to the left of bold.  That way it's easy to hit on mobile without hitting something obnoxious that is a pain to undo on mobile.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 11:47:37 pm
Well first snag for me.  Works great on a PC, but on my android phone running kitkat 4.4 with stock google keyboard it only works if I first dismiss the keyboard by using the phones back button.  So I have put the cursor where I want.  Then dismiss the keyboard.  Then push the split quote button.  And things do what they should.   If I don't dismiss the keyboard first nothing happens when I push the split quote button.

I've asked others on my forum to try on their touch devices.  I'll let you know if I hear anything useful back.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 22, 2014, 11:59:29 pm
Apparently no dismissal of keyboard required on an iphone.  Works as expected.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 02:22:22 am
There seems to be another sceditor/android issue in general.  The plugin event doesn't even fire with the keyboard open.  But if you insert an emoticon or type first then the split quotes works as expected.  Sigh.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: emanuele on November 23, 2014, 03:42:54 am
Interesting oddity...
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 23, 2014, 09:56:18 am
Did you try it under different android browsers ?
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 10:15:03 am
Not yet.  Just chrome stable.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 23, 2014, 10:29:14 am
Just curious if it was a droid or browser or event issue, or a yummy combo of all :P
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 11:22:08 am
I'll try to install dolphin or firefox and see what happens with them.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 12:02:38 pm
It works fine in dolphin and firefox on android.  So seems to be a chrome for android thing.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 23, 2014, 12:37:54 pm
Good to know ... I have been switching over to pale moon to replace firefox (based on Fx core), you may like that as an alternative to chrome on android (or anywhere)
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 12:44:07 pm
Last time I tried firefox on android it was pretty poor.  Just installing it today it still seemed slow.  I'm guessing anything based on its core is going to be similar.

For this feature though (which I've received a lot of positive feedback over already) it's too bad it doesn't work quite right in the default android browser.  I still think it would be a good thing to put into Elk though.  Even for those not on a touch device having the button in the toolbar announces the feature and the keyboard shortcut.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 12:58:47 pm
Elk is using a custom version of sceditor right?  Is that code available un-minimized somewhere?
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 23, 2014, 01:02:35 pm
Agree on Fx being slow or bogging down the system.  I would have thought PM (based on the same core) would have been the same but so far I've been surprised at how much quicker it is.  Seems it may not be Fx core that is a bit doggy but all the crap in the Fx interface places on it.

I think it may be a good thing to add to elk sce toolbar as well, we could slide it in to 1.02 I'd think but maybe @emanuele will be a voice of reason :P
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 23, 2014, 01:07:39 pm
Quote from: scripple – Elk is using a custom version of sceditor right?  Is that code available un-minimized somewhere?
Its not really custom, its several of the 1.4.6 fixes rolled back in to the current version. 

1.4.6 did a lot of restructure, much more than a X.X.1 should do IMO but then I'm no angel when it comes to that either.  Anyway I did not feel comfortable with going to 1.4.6 (still underdevelopment anyway) given how particular the editor can be, so I backported some key fixes.  I believe I have a gist on it, let me find that.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: emanuele on November 23, 2014, 01:23:27 pm
Quote from: Spuds – I think it may be a good thing to add to elk sce toolbar as well, we could slide it in to 1.02 I'd think but maybe @emanuele will be a voice of reason :P
Yep, I was thinking to propose the same... O:-)
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 02:29:22 pm
So chrome and chrome beta on android only fire mousedown before returning focus to the text area if you have the keyboard up and you haven't typed anything.  So the click function never fires.  You can get click to work by pushing the button twice.  The first dismisses the keyboard the second sends the click.   However the causes the effect to happen at the end of the next word after the cursor rather than at the cursor location.  This is for all the buttons not just the splittag one.  So using bold as an example.  If it goes "dog [cursor here] cat mouse" and you have the keyboard up but haven't typed anything pushing bold once will do nothing.  Pushing it a second time will insert bold markers between cat and mouse instead of between dog and cat.

Emoticons insert on first press, but if you haven't typed anything they insert into the wrong location just like above.

Using mousedown instead of click seems to make thing work, but you don't return to the text area after the event so you have to manually scroll back down.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: scripple on November 23, 2014, 04:11:14 pm
This seems to be related to the keyboard appearing or disappearing causing a page resize event to fire.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: Spuds on November 24, 2014, 01:51:15 pm
@scripple has come up with a proposed fix !! I have updated the site with the editor updates (plus one fix I forgot to pull in  :-[  so lets see how that goes.
Title: Re: Add an sceditor ctrl-enter (split quote) toolbar button
Post by: emanuele on November 27, 2014, 07:53:35 am
Feature is there now! :D