Classy Tags

[Yori]

All right, I've been wondering (Since Jcink can do it, Invisionfree can do it and most other forums have a way of doing it.) Is there a way or a possible chance that someone would be willing to make a classy tags plugin? 

It's from the old v2 style tags, now I've been able to make them work by adding stuff to my mini-profile, thread layouts HOWEVER this coding? It messes up the original format that the mini-profiles/thread layouts were like. 

[K Phoenix]

Hi Yori, could you explain a little more about what it is you want these "classy tags" to do, maybe an example of how you used the syntax in the past? I'm sure other people know but I'm new to PB and haven't used an IPB1.3 forum in ages so I'm not exactly clear on what your expectations are. That said, though, I've implemented a few custom BBcodes on my test forum and I might be able to adapt one of them to suit what you're looking for depending on what that is. It'd be a code rather than a plugin, if only because at the moment I don't have the time to futz around with setting things up as proper plugins, but it should work fine if it meets your needs.

[katya]

Classy tags are basically simplified class tags. Basically, in v5 so far you can't declare or use classes in your posts like you can in doHTML or v4's classy tags.

Declaring a class looked like:
[newclass=.classname]color:red[/newclass]

Using a class looked like
[classy=classname]red text here[/classy]

It was actually later changed to closer mirror html, so it's like

[div* class="classname"]red text here[/di*v]

now.


edit: haha now you can see it

[K Phoenix]

Okay! That actually turned out to be pretty simple. It still needs a bit of testing, of course, but I've got the gist of it down. In the meantime, two questions:

1. Is the classy tag supposed to produce a span, a div, or was it possible to do both? (I'm assuming I'd need two separate tags to accomplish both, something like "classydiv" and "classyspan" or what have you.) (EDIT: Just checked by quoting your post since I wasn't sure what that last "red text here" bit was meant to be, and I can see you're referring to divs. That's what I have my code using now, although adding the ability to do spans with a second tag would be trivial if you want it. )

2. Did the classy tag support multiple classes at once, e.g. [classy=class1,class2], or just the one? If only one class per classy tag is expected then I can do that easily, but more than one could take a little more tweaking. Doable, I'm sure, but I'd have to look into it. I'm still a little new at the regular expressions required.

[katya]

K Phoenix You're a star!

1. Yup, you got it. It was always divs, and honestly, if we could just tack it onto the current div coding built into v5, that'd be awesome. I'm not OP, but I'd definitely prefer [div* class="blah"] over [classy="blah"]. And hey, if it's easy to add, then I'll take span tags too, why not? <3

2. ...You know, I never even tried. I don't think anyone would complain if you could only declare a single class at once. Imo, one class per tag is more than enough!

As an aside, I know later editions of the classy code added IDs as well as classes. Again, I'm not sure how many people actually used that feature, and I'd be happy just to see classes.

If it helps at all, the most recent code from v4 is this:
<script type="text/javascript">
/********
   Style UBBC Tags v2.1.2
   Coded by iPokemon
   Special thanks to Eton Bones and Wormopolis
   Eton: For helping with optimization
   Wormopolis: For being an awesome guy and letting me bounce ideas off of him
   Do not repost or claim as your own
*********/

/***** Edit Below Here *****/
   
var protectedClasses = [".class1","#id",".class3:hover"]; //user-defined protected classes
var showQuickReply = true; //show quick reply buttons; true = yes, false = no
var customClass = "windowbg2"; //post form or modify form
var customClass2 = "windowbg"; //quick reply area
var predictive = true; //true = convert old style tags when posting or modifying, false = leave old tags alone but make them work
   
/***** Edit Above Here *****/

var pbClasses = /^(\.windowbg|\.windowbg2|\.titlebg|\.catbg|\.cattext|\.titletext|\.nav|\.hr|\.bordercolor|\.quote|\.code|\.menubg|\.new stitlebg|\.forumjump|\.pagedropmenu)/;
function inArray(v,a){
   for(w=0;w<a.length;w++){ if(a[w] == v) return true; } return false;
}
function curlyBrackets(){
   var text = document.getElementsByName("message")[0].value;
   text = text.replace(/\{div\}/g,"[div]").replace(/\{\/div\}/g,"[/div]").replace(/\{nospaces\}/g,"[nospaces]").replace(/\{\/nospaces\}/g,"[/nospaces]").replace(/\{div\s(.+?)\}/g,"[div $1]");
   document.getElementsByName("message")[0].value=text;
}
function post_converter(){
   var text = document.getElementsByName("message")[0].value;
   text = text
   .replace(/newclass=\.\./gi,"newclass=")
   .replace(/newclass=\./gi,"newclass=")
   .replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
   .replace(/\[\/classy\]/gi,"[/div]")
   .replace(/&{1}#0*91;/g,"[")
   .replace(/&{1}#0*93;/g,"]")
   .replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
   .replace(/\[\/style\]/gi,"[/div]")
   .replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]")
   .replace(/&{1}quot;/g,'"');
   document.getElementsByName("message")[0].value = text;
}
function board_converter(text){
   text = text
   .replace(/\[classy=(.+?)\]/gi,"[div class=\"$1\"]")
   .replace(/\[\/classy\]/gi,"[/div]")
   .replace(/\[style=(.+?)\]/gi,"[div style=\"$1\"]")
   .replace(/\[\/style\]/gi,"[/div]")
   .replace(/\[newclass=(.+?)\]/gi,"[newclass=.$1]");
   return text;
}
if(document.postForm || document.modifyForm){
   if(predictive) post_converter();
   var sub = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.nextSibling;
   var clo = sub.cloneNode(true);
   clo.id = "style-tags-tr";
   clo.firstChild.className = customClass;
   clo.firstChild.id = "style-tags";
   clo.firstChild.firstChild.innerHTML = "Style Tags:";
   clo.firstChild.nextSibling.innerHTML = "<input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
   clo.firstChild.nextSibling.className = customClass;
   clo.firstChild.nextSibling.id = "style-tags-2";
   sub.parentNode.insertBefore(clo, sub.previousSibling);
}
if(showQuickReply){
   if(pb_action == "display"){
       if(document.getElementsByName("message")[0]){
           var tr = document.getElementsByName("message")[0].parentNode.parentNode.parentNode.parentNode.parentNode.insertRow(1);
           tr.id = "style-tags-tr";
           var tm = tr.insertCell(0);
           tm.id = "style-tags";
           tm.innerHTML = "<font size='2'>Style Tags:</font>  <input type='button' onclick='post_converter();' value='Converter' />  <input type='button' onclick='curlyBrackets();' value='Style Checker' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[newclass=.class][/newclass]\";' value='Add Class' /> <input type='button' onclick='document.getElementsByName(\"message\")[0].value+=\"[div ][/div]\";' value='Add Div' />";
           tm.className=customClass2;
       }
   }
}
if(pb_action.match(/(calendar|pm|pre)view|viewprofile|search2|display/i)){
   var userDefined = "";
   var alreadyUsed = [];
   var checkMatch = /\[div /i;
   var newClass = /\[newclass=/i;
   var nospace = /\[nospaces\]/i;
   var newClassR = /\[newclass=(.+?)\](.+?)\[\/newclass\](\<br\>)?/gi;
   var td = document.getElementsByTagName("td");
   var table = document.getElementsByTagName('table');
   for(x=5;x<table.length;x++){
       if(table[x].className == "code" && table[x].innerHTML.match(/(\[div|\[newclass|\[nospaces)/i)){
           table[x].innerHTML = table[x].innerHTML
           .replace(/\[div (.+?)\]/g,"{div $1}")
           .replace(/\[\/div\]/g,"{/div}")
           .replace(/\[newclass=(.+?)\](.+?)\[\/newclass\]/gi,"{newclass=$1}$2{/newclass}")
           .replace(/\[nospaces\]/gi,"{nospaces}")
           .replace(/\[\/nospaces\]/gi,"{/nospaces}");
       }
   }
   for(x=0;x<td.length;x++){
       var tdhtml = td[x].innerHTML;
       if(td[x].width == "80%" && tdhtml.match(/(\[style=|\[classy=)/i)){
           tdhtml = board_converter(tdhtml);
       }
       if(td[x].width == "80%" && tdhtml.match(nospace)){
           tdhtml = tdhtml.replace(nospace,"<span class='nospaces'>").replace(/\[\/nospaces\]/ig,"</span>");
       }
       if(td[x].width == "80%" && tdhtml.match(newClass)){
           var result = newClassR.exec(tdhtml);
           while(result != null){
               if(!RegExp.$1.match(pbClasses) && !inArray(RegExp.$1,protectedClasses)){
                   if(!userDefined.match(RegExp.$1)){
                       userDefined += RegExp.$1+",";
                       tdhtml = tdhtml.replace(newClassR, "<style type=\"text/css\"> $1 {$2} </style>");
                   } else {
                       tdhtml = tdhtml.replace(newClassR, "");
                       alreadyUsed.push(RegExp.$1);
                   }
               }
               result = newClassR.exec(tdhtml);
           }
       }
       if(td[x].width == "80%" && tdhtml.match(checkMatch)){
           var tags = tdhtml.split("[div ");
           for(l=1;l<tags.length;l++){
               var ok = false;
               var attributes = tags[l].split("]")[0].split(" ");
               for(q=0;q<attributes.length;q++){
                   if(attributes[q].split("=")[0] == "style"){
                       var val = attributes[q].split("=")[1].substr(1,attributes[q].split("=")[1].length-2);
                       if(!val.match("expression") && !val.match("'")){
                           ok = true;
                       }
                   } else if(attributes[q].split("=")[0].match(/^(id|class|rel|title|style)$/)){
                       ok = true;
                   }
               }
               var content = tags[l].split("]")[1].split("[")[0];
               if(ok){
                   var toReplace = "[div ";
                   var att = "";
                   var attributes = tags[l].split("]")[0].split(" ");
                   for(q=0;q<attributes.length;q++){
                       toReplace += attributes[q]+" ";
                       att += attributes[q]+" ";
                   }
                   att = att.substr(0, att.length - 1);
                   toReplace = toReplace.substr(0, toReplace.length - 1);
                   toReplace = toReplace + "]";
                   tdhtml = tdhtml.replace(toReplace,"<div "+att+">").replace("[/div]","</div>");
               }
           }
       }
       td[x].innerHTML = tdhtml;
   }
}
</script>

[K Phoenix]

Think I've got something that should work for now! Any coders with more experience than I are more than welcome to improve upon it, or get it to show a button in the editor, or even turn it into a plugin if they've got the time to do so before I do. Also, I hear iPokemon is planning to make some kind of update to his code, so depending on how that turns out you'll probably want to switch back to his; it'll likely be more fully-featured. Hopefully this'll hold you over in the meantime!

Paste the following into your Global Footer (placement among other codes you may have shouldn't matter, but try moving it around if something seems to interfere with it; it just has to stay in the footer):


<script type="text/javascript">
//stop regex from running in code tags; credit to Xanikseo of Zetaboards
(function no_bb_codes() {
$("code").each(function(){$(this).html($(this).html().replace(/\[/g,'[<i/>'))});
})();

//newclass tag
(function(){
var regex_newclass = /\[newclass=.(.*?|\\s*)\](.*?|\\s*)\[\/newclass]/gi;
$(".message, .signature, .widget-recent-post-content, .content-box").each(function(){
$(this).html($(this).html().replace(regex_newclass, "<style>.$1 { $2 }</style>"));
});
})();

//classy tag - div
(function(){
var regex_classy = /\[classy=(.*?|\\s*)\](.*?|\\s*)\[\/classy]/gi;
$(".message, .signature, .widget-recent-post-content, .content-box").each(function(){
$(this).html($(this).html().replace(regex_classy, "<div class='$1'>$2</div>"));
});
})();

//classy tag - span
(function(){
var regex_classyspan = /\[classyspan=(.*?|\\s*)\](.*?|\\s*)\[\/classyspan]/gi;
$(".message, .signature, .widget-recent-post-content, .content-box").each(function(){
$(this).html($(this).html().replace(regex_classyspan, "<span class='$1'>$2</span>"));
});
})();
</script>


The first bit is just a little extra code that prevents the script from acting on [code] tags, so you can demonstrate the syntax to others if you need to. The [newclass] tag follows, followed by [classy] for divs and [classyspan] for spans. The syntax should work exactly as described in the first parts of katya's post, so [newclass=.classname], [classy=classname], [classyspan=classname]. The BBcode should work in posts, signatures, PM conversations and also in the "recent posts" widget on v5's custom pages; if there's some other place you'd expect it to work but it doesn't, let me know so I can see about adding support for it.

There's nothing to modify if you're okay with the tags being called "newclass", "classy" and "classyspan"; just copy and paste into the global footer as-is. If you'd rather call the tags something else, however, say renaming "classyspan" to "spanny" or something, just edit the red text in the requisite part of the code (and ONLY the red text; be careful you don't accidentally erase a backslash or something or it won't work!). Changing the blue parts to match the red is optional. You may want to do that for consistency (so "regex_classyspan" becomes "regex_spanny", etc.), but if you do then be sure that both blue parts are identical or the code will break. You'll also need to be sure your new tag names don't conflict with any existing BBcode or ProBoards's parser will probably hijack it.

Unfortunately I wasn't able to get it to use the [div class=classname]stuff[/div] syntax—since ProBoards itself recognizes the div BBcode tag and only recognizes it without classes, it strips the extra information out before the post renders and so before the script has a chance to act on it. (Switching from the BBcode editor to visual will also strip the class out of the post entirely.) Same goes for the span tags. If that exact syntax is necessary then I think your best bet is to just keep pushing for full reimplementation as a feature request. In the meantime, though, the fact that you can name the tag anything you want by editing the code should let you use something similar as a stopgap. Just rename the "classy" tag something like "divclass" or "div-class", as in [divclass=classname]stuff[/divclass], which will give you a similar tag without actually interfering with the real div tag. You can even get away with making it [divclass=classname]stuff[/div]; I tested it and the board doesn't seem to try anything funny like adding an opening [div] in there, though I can't guarantee that using it that way will always play nice with the editor(s). [divclass][/divclass] would be a bit more future-proof.

Let me know how it works! Also, mods, if there's someplace more... appropriate? Visible? that I can repost this so more people can use it, just tell me and I'll make a new thread for it there.

[katya]

K Phoenix It's great! Thank you so much! Basically everything I need to make some pretty massive template codes readable again. There's a lot of code illiterate members on my site that insist on using the pretty templates, and classy tags are such a blessing for simplifying stuff for them. So yeah, this is fantabulous <3

I assume there's no easy way to enable CSS3 functions, specifically the stuff that allows hovering effects? I figure that must take a lot more work than just adding some new syntax. With that, we'd basically have all the options for v5 as we did in v4 (minus vertical-align for table cells, bizarrely), but if it's beyond your ken, the classy tags are already the most amazing shiznit, lemme tell you.

[K Phoenix]

Thanks! Glad you find it helpful!

Hm... if I'm understanding your request correctly, the easiest way to do something like hover effects would be to create a more general tag than newclass which allows for the creation of what amounts to a regular stylesheet (so you could, for example, say ".classname:hover{color:red}" for something simple, but then also apply CSS3 transitions in another declaration if you knew how). Putting the following somewhere within my original code (maybe right after the bit that defines [newclass]) should do just that:

//newstyle tag
(function(){
var regex_newstyle = /\[newstyle](.*?|\\s*)\[\/newstyle]/gi;
$(".message, .signature, .widget-recent-post-content, .content-box").each(function(){
$(this).html($(this).html().replace(regex_newstyle, "<style>$1</style>"));
});
})();

This creates a [newstyle] tag that accepts no parameters, so you'd simply use it like [newstyle].classname:hover{color:red}[/newstyle].

Is that along the lines of what you're looking for? It should be pretty powerful since it effectively creates a blank set of <style> tags for you to put whatever inside, and can be used instead of [newclass] if you want to define multiple styles at once (as you might want to do for CSS3 hover and transition effects). The additional styles would all need to be defined on one line, though, like .classname{color:red} .classname:hover{color:blue}, because adding line breaks to the editor will break the <style> tags. It would require knowing how the selectors you want work ahead of time, so I'm not sure how well it'd go over with the members you say struggle with this, though. If this isn't what you meant or won't suffice then just let me know and I'll try to puzzle something out.

Also, the fact that [newstyle] is this flexible means that members who do know what they're doing (or don't but somehow manage to pick just the right selectors by accident) can potentially mess with the display of the entire thread on all posts following the one with the [newstyle] tag. I'm sure you know this katya, and I'm sure you trust your members enough not to fiddle with things they ought not be fiddling with even if they knew how, but just as a general advisory to anyone else who wants to use this. (Granted even the original [newclass] tag could do the same thing to any part of the page that had a class, but still.)

[katya]

K Phoenix [newstyle] is really cool. Wow. And yeah, simple classy is all I need for my code illiterate members. Hovers and such is more for me and our design-happy geeks.

It's basically fantastic. All I ever wanted, except for this one syntax?

.doctor:hover .faustus{opacity: 0.9; -o-opacity: 0.9; -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-opacity: 0.9;}

(and I've also tried .doctor:hover > .faustus)

I'm attempting to convert an old v4 posting template here to v5. My attempt is here. There's a very high likelihood that I'm just messing up the coding, because I'm a noob sometimes, but I figured I should check if this code jives with it to begin with? I know I'm already screwing something up that's making the opacity not work for the icon.

ETA: THANK YOU so much for this!
ETA: I've posted the code here and stuck credits onto it. Hope you don't mind?

[K Phoenix]

Glad to hear it's (mostly) working out! As for the situation you mentioned, I think that's my fault. What appears to be happening is it's not understanding the nesting correctly: it sees [classy=doctor][classy=faustus][/classy][/classy] and it's stopping the replacement as soon as it sees the first [/classy] tag. Silly me forgetting that people might need to nest the divs/spans, whoops; the original custom BBcodes I had were for things that wouldn't normally be nested, so I overlooked it. ^^; I'll need a bit of time to poke around it and see what can be done about fixing that. In the meantime you should technically be able to get around it by copying the bit of code for classy and making a "classy2" underneath it, then nesting it like [classy=doctor][classy2=faustus][/classy2][/classy], but I'm sure that's not an ideal long-term solution so I'll look into clearing that up when I get the chance.

And I don't mind you sharing it at all, haha. Credit's not really needed (aside from the little note I left in there about the other author), because ultimately this is all stuff I learned from studying similar stuff other coders made, but I appreciate it!

[katya]

K Phoenix So classy2 tags are basically hilarious to me, but they're working beautifully. This is fantastic, thanks so much~

[Bennett 🚀]

Or you could just use my version, where it uses similar syntax as Eton Bones's Enhanced UBBC Table script.

Simply put an [attr="class","something"] inside of a div tag, and it will add a class to the closest div tag. [newclass], [nobreaks], and a manual line break [break] are also in there.

[katya]

Bennett 🚀

Glad to see you've got a new code made already! Is there a way to add the [newstyle] tags K Phoenix used? It's probably just the doHTML coder in me, but I think an option to replicate <style> tags is nicely intuitive.

(Also, do you know if there's a v5 UBBC Table script around yet? I'd /kill/ for vertical-align back.)

[Bennett 🚀]

Apr 23, 2013 20:16:14 GMT -8 katya said:

Bennett 🚀

Glad to see you've got a new code made already! Is there a way to add the [newstyle] tags K Phoenix used? It's probably just the doHTML coder in me, but I think an option to replicate <style> tags is nicely intuitive.

(Also, do you know if there's a v5 UBBC Table script around yet? I'd /kill/ for vertical-align back.)

Sorry, but no. My code does the same thing, in a more.. targeted way.

I'm pretty sure v5 ubbc tables can have vertical align used on them.

[katya]

Bennett 🚀
Okay, I finally got off my butt and swapped to your script, and it's not exactly working, so I figure:
1) I'm an idiot
2) I'm doing something wrong
or, 3) all of the above

The code goes into the global footer, right? I checked asuca to see how you were using it, and I'm pretty sure I have the syntax right, so my guess is that I just put the code in the wrong place entirely since I'm getting this.

And unfortunately, v5 cuts out vAlign from table coding. Trying to use display:table-cell and vertical-align also doesn't seem to be working, although I haven't tried it with classes yet.