Skip to main content
Topic: Tag splitting (jQuery bunnies from hatz) (Read 2501 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Tag splitting (jQuery bunnies from hatz)

This is a good little bit of grooviness. We've had it over at the 1.1.x den of iniquity for ages and it works very well. Does screw up in older versions of IE (haven't tried it on the latest) but who cares?*

What it does is split BBC tags for you. If you quote a post and want it split into smaller quotes, you just put your cursor where you want it to split and hit Ctrl+left-click. Instant split quotes, with the right starting and end tags.

Also works on code tags or any others. Not sure how it will play with SCE (haven't tried it yet). The bloke who wrote the code is long gone, but license is http://opensource.org/licenses/Zlib so it shouldn't present problems.

Code: [Select]
Code is this:// Code by author: Aziz
// License: zlib/libpng
/* Functions for the "Split Quotes" feature: */

function COEM_enableSplitting(checkbox)
{
if (!window.$) return;
var textarea = $('#postmodify textarea.editor');
var handleEvent = COEM_enableSplitting.handler;
var un_bind = checkbox.checked?'bind':'unbind';
textarea[un_bind]('keyup', handleEvent)
[un_bind]('click', handleEvent);
}

COEM_enableSplitting.handler = function handleEvent(e) {
e = e || window.event;
if (e.keyCode == 13 && e.shiftKey || e.ctrlKey && e.button == 0)
COEM_splitTags();
}

function COEM_parseTags(text, endPos)
{ // [ name attrs | /name ]
var rx = /\[(?:([a-z]+)([^\]]*)|(\/[a-z]+))\]/gi;
var tagStack = [];
text = text.slice(0, endPos); // "m.index < endPos" doesn't seem to work.
while ((m = rx.exec(text)) /*&& m.index < endPos*/)
if (m[3]) // [/tagName]
tagStack.pop()
else
tagStack.push({"name":m[1], "attributes":m[2]}); // [tagName]
return tagStack;
}

function COEM_splitTags()
{ // Splits tags at the current cursor position.
var form = document.getElementById("postmodify");
var textarea = form.elements.namedItem("message");

var string = textarea.value;
var endPos = Math.min(textarea.selectionStart, string.length)
var tagStack = COEM_parseTags(string, endPos);

if (tagStack.length == 0)
return;

var tagText = "";

// Traverse in reverse and append closing tags.
for (var i = tagStack.length-1; i >= 0; i--)
tagText += '[/' + tagStack[i].name + "]\n";

var newCaretPos = tagText.length + tagStack.length;

for (var i = 0; i < tagStack.length; i++)
if (tag = tagStack[i])
tagText += '\n[' + tag.name + tag.attributes + "]";

COEM_replaceText(tagText, newCaretPos, textarea);
return false;
}

function COEM_replaceText(text, textCaretPos, textarea)
{
function setCaretToPos(input, pos) {
input.setSelectionRange(pos, pos);
}

function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveEnd('character', o.value.length)
return (r.text == '') ? o.value.length : o.value.lastIndexOf(r.text);
}
return o.selectionStart
}

// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos;
var selStart = getSelectionStart(textarea); //textarea.selectionStart;
caretPos.text = caretPos.text.slice(-1) == ' ' ? text + ' ' : text;
setCaretToPos(textarea, selStart + textCaretPos);
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
var selStart = textarea.selectionStart;
var begin = textarea.value.substr(0, selStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;

textarea.value = begin + text + end;

if (textarea.setSelectionRange)
{
textarea.focus();
var newCaretPos = begin.length + textCaretPos - 1;
textarea.setSelectionRange(newCaretPos, newCaretPos);
}
textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
textarea.value += text;
textarea.focus(textarea.value.length - 1);
}
}
/* End of functions for the "Split Quotes" feature: */

PS: There's also another handy little one for embdding videos on the page. The good thing about that one is that it starts with just a preview image, so there's no Flash overload if people embed a stack of vids on the one page. The Flash is only loaded for the videos you actually click to play.

*Just tested it in IE9. Doesn't work. Aziz hated IE and couldn't be bothered debugging for it. :D
Could be made to work in IE, if someone was up for it.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Tag splitting (jQuery bunnies from hatz)

Reply #1
Cool idea

Would need to be changed to work with sceditor as well as work in regular and full editor modes and as you noted ie9 too ... so a bit of work required.  Maybe someone will be up for it, I know Ema loves javascript :D
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #2
1,2,3 not it!!  /me hates javascript
Success is not the result of spontaneous combustion, you must set yourself on fire!

Re: Tag splitting (jQuery bunnies from hatz)

Reply #3
It should be ok in non-wysiwyg mode (basic textarea) but yup, getting it to behave with the wysiwyg could be amusing. I'm learning to love the javascript (if used in sensible moderation) but am not up to debugging this critter yet.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P


Re: Tag splitting (jQuery bunnies from hatz)

Reply #5
And just to note (as it says in the PR) its does not work in wizzy mode.  If someone really needs that then they can take a shot at making it work.  I have a few ideas but there are some real difficulty's in making that part work, at least based on my limited knowledge  :)
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #6
And just to note (as it says in the PR) its does not work in wizzy mode.
If it doesn't work in wizzy... I don't use it, so who cares! :P

 If someone really needs that then they can take a shot at making it work.  I have a few ideas but there are some real difficulty's in making that part work, at least based on my limited knowledge  :)
I thought I was able to find a bug, but I wasn't able to replicate it... :(

Well, the feature is there, anything else is just a bug report! :P

Though, I'd say that instead of ctrl+enter it would be better just the enter. O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #7
Humm, yes we could do enter alone if we just limit it to quotes.  Right now it works in all tags so the split on enter would only make sense in a quote (I think) ... the ctrl enter was one of those, you did it on purpose things.  We could monitor the enter and if only in a quote tag, blam split?

Bugs?  Implausible !
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #8
Humm, yes we could do enter alone if we just limit it to quotes.  Right now it works in all tags so the split on enter would only make sense in a quote (I think) ... the ctrl enter was one of those, you did it on purpose things.
Ahh... didn't thought about all the other tags... :(

  We could monitor the enter and if only in a quote tag, blam split?
That would be pretty cool! :D
Proposing that because I'm pretty sure people would not find out how to use it unless it is something very evident...

Bugs?  Implausible !
:D
Bugs creator.
Features destroyer.
Template killer.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #9
As a follow-up to this...

Well... Yes, I'm aware of this topic. It upset me back then. I had no account and didn't want to create one just to ask for proper credit. Because several of Elk's contributors were very well acquainted with Wedge (mostly as forum dwellers), I assumed (and still do!) that they DID notice that the post area had, right below it, this little "hit Shift + Enter to use smart tag closer" description. I didn't mind with the fact that someone else's code was being used. I took offense, however, with the fact that the idea was never credited to Wedge, because it's the first forum system that implemented this, as far as I can tell, and most certainly the first SMF fork to do it... ::)

I searched a bit, and found where I first discussed this. The original suggestion was from someone else, who suggested adding an auto-split button. I then took the idea, improved upon it and came up with a multi-purpose keyboard shortcut instead. (It accepts both ctrl+enter and shift+enter, to account for slippery fingers.)

http://wedge.org/pub/feats/6174/another-life-changing-fantastic-idea-for-quotes-bit-silly-too/msg256343/#msg256343

Both the suggestion and my first implementation were done on 12th March 2011, whereas the Tag Splitting topic was created on 27th December 2012, so I *think* we can assume I came first.

Yes, because I like Elk and its developers, AND because I thought that feature had been abandoned (since it never worked for me here), I never brought it up. But apparently, it's still working, and... Well, I guess it needs to be addressed then.

So, I'm hereby making an official complaint about the fact that Wedge was never credited anywhere for the original concept. It's not about the lack of a credit (there are many ideas that Wedge pioneered and that went into Elk and SMF later), but I guess it's more about the fact that someone else is credited for it, and I feel that it's Elk's way of saying "it's not our fault that you're not credited, it's this guy's."
I'd at least appreciate some kind of acknowledgment here.

Apart from that, it's nice that I finally get to 'subscribe' to this topic, I tried to ignore it for so long... Yes, I know, I can be silly but I do get emotional when it comes to this particular topic, because it's really the first time that ElkArte caught my attention. (I think it was still called Dialogo back then.)

Re: Tag splitting (jQuery bunnies from hatz)

Reply #10
Yups, you indeed came first in the realm of SMF-related-developers.
But searching the name of the author Aziz and "split quotes", the second result I got is:
http://www.councilofexmuslims.com/index.php?topic=8762.0
dated February 16, 2010.
So apparently he came up with the same idea almost three years before Antechinus posted here and about a year before you at Wedge.

Do something "new" in the internet of today is quite difficult. One of the latest features introduced by Xenforo is "tabbed smiley", look at the date of this mod.
Bugs creator.
Features destroyer.
Template killer.

Re: Tag splitting (jQuery bunnies from hatz)

Reply #11
I'd never seen that post, and although I knew of that forum (the name rings a bell; I think the admin was a regular of the Aeva topic over at SMF back when I did support), I'd never heard of that.

Well, I guess if I'd known, I'd have felt less bad for so long about this whole story... ^^

Do something "new" in the internet of today is quite difficult. One of the latest features introduced by Xenforo is "tabbed smiley", look at the date of this mod.
I feel for you, too!
Over at Wedge, we replaced the popup with an expansion of the smiley div, which makes more sense (at least to me.)
I guess a tab system is okay, too, but maybe a bit overkill..?

Anyway, yes, innovation is impossible because if you've lived long enough, you've seen and heard enough for your artistic self to be 'tainted' by earlier efforts.

- For the record, I've been maintaining, for about 6-7 years, a list of movie soundtracks (mainly anime) that are (sometimes blatantly) copied from something else. There are many, many places where only a few notes are in common, but they're so distinctive, you can't help but wonder: theft or coincidence..? So, I guess I'm sort of a specialist when it comes to this kind of thing. I actually got into Mike Oldfield (one of my favorite artists) because the first thing I heard from him was a song I loved from an anime, which I didn't know was stolen from his Ommadawn suite from 16 years earlier.

- One of the Wedge logos has a 'swoosh' that someone pointed as 'inspired from the Nike logo', which I found preposterous because (1) I don't like their logo (!), (2) it's a deformed wedge. There are only so many 'interesting' shapes you can build from what is ultimately an elongated triangle.

- Back in 2010, Pete was very much into 'innovating'. So much so, that he made a blog called 'innovatenotimitate.com' or something, and he regularly posted features on 'how to innovate'. I was an occasional reader, and occasional nodder, but ultimately I thought that he was too adamant on applying 'techniques' to 'innovate', when it should just come down to the fact that you should use your brain to determine if something that annoys you could be improved in any other way. You don't have to use lateral thinking or schematics or whatever to figure it out.

So... Well, I guess we can put this in the category "things that totally make sense when implemented, and that anyone with a brain could think of, and actually several people with a brain thought of it separately and implemented it separately."
I'm just the first who made it core in an SMF-based product. PHEW!!! O:-)  O:-)  O:-)