Code Block Toolbar 1.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
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>
Im 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
Requires
Random jQuery Plug-ins
Center
This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.
Code Block Toolbar
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...
Colour Picker
Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...
