Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew Thread

 Formatted Quote/Code Blocks, Jcink, InvisionFree
Black
 Posted: August 29th, 2013, 10:26 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Description: Reformats the default code and quote blocks created by IPB1.3.1's BBCode parser into an easier-to-style format. Also attaches a "click to highlight" feature to the formatted code blocks for quick copying.
Requires: jQuery
Target Platform: Jcink, InvisionFree
Demonstration: This script is being used here on Code.
Installation Instructions:
Step 1: Place the following between your <head></head> tags or in the Javascript section of your board wrappers.

Code (Click to highlight)
<script>
// Formatted Quote/Code Blocks by Black
// http://code.jfbs.net/?showtopic=6
function qc_block(myself) {
var bold_tag = myself.find("tr:first-child > td:first-child > b:first-child");
if (bold_tag.html() == "QUOTE") {
myself.css("display", "none");
var quote_title = myself.find("tr:first-child > td").html().slice(14, -1).split(" @ ");
var quote_author = quote_title[0];
if(!quote_author) {
quote_author = "";
}
var quote_timestamp = quote_title[1];
if(!quote_timestamp) {
quote_timestamp = "";
}
var quote_contents = myself.find("tr:last-child > td").html();
var new_quote = "<div class=\"quote-block\"><div class=\"quote-title\"><span class=\"quote-author\">" + quote_author + "</span><span class=\"quote-timestamp\">" + quote_timestamp + "</span></div><div class=\"quote-contents\"><blockquote>" + quote_contents + "</blockquote></div></div>"
$(new_quote).insertAfter(myself);
myself.remove();
} else if (bold_tag.html() == "CODE") {
myself.css("display", "none");
var code_contents = myself.find("tr:last-child > td").html();
var new_code = "<div class=\"code-block\"><div class=\"code-title\">Code (Click to highlight)</div><div class=\"code-contents\"><pre><code>" + code_contents + "</code></pre></div></div>"
$(new_code).insertAfter(myself);
myself.remove();
}
}

function qc_blocks() {
if (window.location.href.indexOf("showtopic") > -1 || window.location.href.indexOf("ST") > -1) {
var tables = $(".post2 table, .post1 table");
if(tables.length > 0) {
tables.each(function() {
qc_block($(this));
});
var embed_quote = $(".quote-contents table");
while(embed_quote.length > 0) {
embed_quote.each(function() {
qc_block($(this));
});
embed_quote = $(".quote-contents table");
}
}
$(document).on("click", ".post2 .code-block > .code-title, .post1 .code-block > .code-title", function(e) {
var selectcell = $(this).next();
selectcell.each(function() {
var range, selection;
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}
});
});
}
}
</script>


Step 2: Call qc_blocks in your $(document).ready() function(which, for the record, may also be placed between your <head></head> tags or in the Javascript section of your board wrappers).

CODE
<script>
$(document).ready(function() {
qc_blocks();
});
</script>


Step 3: Apply CSS to the quote and code blocks. For reference, the formatted HTML markup looks like this.

Code (Click to highlight)
<div class="quote-block">
<div class="quote-title">
<span class="quote-author">Username</span>
<span class="quote-timestamp">Date and time</span>
</div>
<div class="quote-contents">
<blockquote>Quote goes here</blockquote>
</div>
</div>

<div class="code-block">
<div class="code-title">Code (Click to highlight)</div>
<div class="code-contents">
<pre><code>Code goes here</code></pre>
</div>
</div>
Black
 Posted: November 24th, 2013, 10:13 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


This script has been updated to bind click events on newly formatted code blocks via event delegation only once, and should now be more efficient since it no longer has to run through the entire document while binding multiple click events on every single block of code.
& some verses
 Posted: November 28th, 2013, 07:07 PM
Quote
Member
Posts:25Group:MemberJoined:November 27th, 2013
Send Message


This code is amazing. I was using a very bloated one that only loaded 75% of the time. Thank you!
brax
 Posted: December 3rd, 2013, 11:36 PM
Quote
Advanced Member
Posts:47Group:MemberJoined:December 2nd, 2013
Send Message


QUOTE (Black @ August 30th, 2013, 03:26 AM)


Hey black dear, if I were to host a copy of this on my website, would I then be able to link to it in the header and have it still work? (like you do with your custom forum structure). I'm including this in all skins I code from now on and I figure if I can do that, it'll make things neater in the wrapper :]

edit

also! is it possible to make the code wrap within the width? with the code you did on hero, if the code was just one super duper long line, the text would wrap and not keep going so you wouldn't have to specify the width if you didn't want to?

This post has been edited by brax: December 4th, 2013, 12:23 AM
Pierrot
 Posted: December 4th, 2013, 06:49 AM
Quote
you are not your skin.
Posts:500Group:StaffJoined:August 28th, 2013
Send Message


QUOTE (brax @ December 4th, 2013, 06:36 AM)

also! is it possible to make the code wrap within the width? with the code you did on hero, if the code was just one super duper long line, the text would wrap and not keep going so you wouldn't have to specify the width if you didn't want to?


This can be achieved through css. Just add
CODE
code { word-wrap:break-word; }
to your css.
Email
Black
 Posted: December 4th, 2013, 07:24 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


QUOTE (brax @ December 3rd, 2013, 11:36 PM)
Hey black dear, if I were to host a copy of this on my website, would I then be able to link to it in the header and have it still work? (like you do with your custom forum structure). I'm including this in all skins I code from now on and I figure if I can do that, it'll make things neater in the wrapper :]


Absolutely! Just remember to include jQuery, probably first, or it might not work as expected. Oh, and don't forget the function call in $(document).ready(), either.
brax
 Posted: December 5th, 2013, 03:38 AM
Quote
Advanced Member
Posts:47Group:MemberJoined:December 2nd, 2013
Send Message


Just noticed your other reply. Its not working for me oO (the code wrap)
Pierrot
 Posted: December 5th, 2013, 07:05 AM
Quote
you are not your skin.
Posts:500Group:StaffJoined:August 28th, 2013
Send Message


Can you PM me a link to your forum so I can take a look? It worked just fine for me when I tested it here briefly ... shh, black doesn't know, shh...

Email
beyondthexsea
 Posted: January 17th, 2014, 03:36 AM
Quote
Newbie
Posts:2Group:New MemberJoined:October 26th, 2013
Send Message


okay, stupid question time. i have the first two codes in, but now, where am i supposed to put in the css in step 3?
Pierrot
 Posted: January 17th, 2014, 07:50 AM
Quote
you are not your skin.
Posts:500Group:StaffJoined:August 28th, 2013
Send Message


Put it in the stylesheet(s) for the theme(s) that you want it to effect.
You have to come up with your own CSS.
Email
beyondthexsea
 Posted: January 17th, 2014, 06:52 PM
Quote
Newbie
Posts:2Group:New MemberJoined:October 26th, 2013
Send Message


OH. DUH. right, the css. i was trying to put the actual <div> html codein somewhere.
ignore me i'm dumb

thank you!
MAX ROCKATANSKY
 Posted: November 13th, 2015, 08:53 AM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


i was using this code, but for some reason it just completely stopped working! there's really not like any bugs to describe or anything. it worked and it was beautiful and then it just... stopped.
Black
 Posted: November 13th, 2015, 09:20 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Can I get a link to the board where you're having this issue?

And is anyone else experiencing the same?
MAX ROCKATANSKY
 Posted: November 13th, 2015, 03:18 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


here, now. it was on another board before but i'm not part of that board anymore/they're not using it there anymore. i just tried installing it on tongue-tied again, though, and it still didn't work.

This post has been edited by OWEN GRADY: November 13th, 2015, 03:19 PM
Black
 Posted: November 13th, 2015, 04:41 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Oooh, I see what's happening here. The custom posts setup you're using makes your board incompatible with this script.

After I finish working on making Jcink's quick edit a built-in feature with the script, I'll find a way to incorporate this one, too. Until then I'm not sure what can be done to mitigate the problem...

If it's any consolation I'm ~70% done adapting the work I did here to be usable, so it won't take me too much longer to get to this'n.
Black
 Posted: November 25th, 2015, 08:33 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Update: I ran into some fun problems to solve and had a few extra hours at work to cover for the holidays, so it's taken me a little while longer than I anticipated to finish. Fortunately the quick edit addon is complete and working, so this one is next on my list.
Black
 Posted: December 8th, 2015, 11:24 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Bumping this to mention that I plan on starting this tomorrow morning at the crack of dawn. Sorry it's taken me so long, I've had a busy schedule!
Black
 Posted: December 9th, 2015, 11:36 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


And this is live as of version 1.7.0. Please see the documentation for details.
Black
 Posted: December 11th, 2015, 08:28 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


In version 1.7.2, this addon has been made to play nicely with the quick edit addon, and both of the addons have been made more performant. Things should be stable but if any issues with the features these addons introduce pop up and you happen to be using both of these addons to the custom posts module of the script, please let me know!
MAX ROCKATANSKY
 Posted: February 4th, 2016, 09:23 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


i literally completely forgot all about this so i wanted to pop in and say thanks for fixing the issue!!!

unfortunately now i seem to have another one?

if you look here you'll see that for some reason the formatting is only working on the second instance of the code tags? it's the same here and on threads where there's only one instance of it - here, for example - it doesn't work at all.

Topic OptionsPages: (2) 1 2  Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation