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
Show Password
This little plug inserts a "View password"-checkbox next to inputs of type password that allows the user to toggle the password's visibility. When the...
Image Zoom
This plug-in makes links pointing to images open in the "Image Zoom". Clicking a link will zoom out the clicked image to its target-image. Click anywh...
Tag Sizes
Use this plug-in on a list of tags (li:s) and it will use whatever numbers found in the list to give each tag a corresponding size.
