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">
<
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

Requires

Random jQuery Plug-ins

  • Drag to Select

    Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and ...

    Details

  • Favicons

    This little plug-in will insert favicons to all external links found on your site. The plug-in scans the URL the link is pointing to for a favicon and...

    Details

  • 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.

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...

Page cached. Loaded in: 0.0084 second(s).
Last DB change: 2012-02-04 08:04:40
Last file change: 2011-10-03 07:42:35
Cache created: 2012-02-04 11:55:45