Code Block Toolbar 1.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
What it Does
If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example, switch to plain text or increase the font-size.
How to Use
jQuery('p.code-block').codeBlockToolbar(); Would add the toolbar to every paragraph with a class of 'code-block'.
Example
I'm a piece of example-code
I should have some buttons beneath me if JS is enabled.
Example Code
HTML
<div id="jquery-code-block-toolbar-example">
<p class="code">
<code>
I'm a piece of example-code<br />
I should have some buttons beneath me if JS is enabled.
</code>
</p>
</div>
JS
jQuery('#jquery-code-block-toolbar-example p.code').codeBlockToolbar();
Source Code
jQuery.fn.codeBlockToolbar = function (conf) {
var config = jQuery.extend({
className: 'jquery-code-block-toolbar',
increaseText: 'Increase code font-size',
decreaseText: 'Decrease code font-size',
expandText: 'Expand code-block',
textareaText: 'Switch to textarea',
textareaText2: 'Switch back'
}, conf);
return this.each(function () {
var codeBlock = jQuery(this);
var cbMaxHeight = parseInt(codeBlock.css('max-height'), 10);
var cbHeight = codeBlock.outerHeight();
var cbHTML = codeBlock.html();
var cbText = codeBlock.html().replace(/\n/ig, '').replace(/<br.*/ig, '\n').replace(/<.*/ig, '');
var ul = jQuery('<ul class="' + config.className + '"></ul>').insertAfter(codeBlock);
var textarea = jQuery('<p><textarea rows="4" cols="60" class="'
+ config.className
+ '" style="height: '
+ (cbHeight - 10)
+ 'px;">'
+ cbText
+ '</textarea></p>').insertAfter(codeBlock).hide();
jQuery('<li class="increase"><a href="#">' + config.increaseText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('font-size', parseFloat(codeBlock.css('font-size'), 10) * 1.2);
return false;
});
jQuery('<li class="decrease"><a href="#">' + config.decreaseText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('font-size', parseFloat(codeBlock.css('font-size'), 10) * .8);
return false;
});
jQuery('<li class="textarea"><a href="#">' + config.textareaText + '</a></li>').appendTo(ul).find('a').toggle(function () {
jQuery(this).text(config.textareaText2);
codeBlock.hide();
textarea.show();
textarea.find('textarea')[0].focus();
textarea.find('textarea')[0].select();
return false;
}, function () {
jQuery(this).text(config.textareaText);
textarea.hide();
codeBlock.show();
return false;
});
if (cbHeight > cbMaxHeight) {
jQuery('<li class="expand"><a href="#">' + config.expandText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('max-height', 'none');
jQuery(this).parent().remove();
return false;
});
}
});
};
Download
Plug-in
- jquery.codeBlockToolbar.js (3.11 kb Unpacked) (Minified)
- jquery.codeBlockToolbar.css (2.13 kb Unpacked)
- jquery.codeBlockToolbar.png
