Another good idea abandoned

Well, that jquery blogger plug-in really sounded like a good idea…the only problem is someone else has already beat me to the punch.  After doing a little bit of googling, I discovered this Blogger ‘widget’ - http://ycouriel.blogspot.com/2010/02/add-c-code-formatter-widget-to-your.html.  If you add this “Widget” (which is just a fancy word for included javascript file that is externally hosted at a publicly accessible url), you can format sections of code using a ‘pre’ tag, like so –>

using System;
class SomeClass {
 /// <summary>Initializes a new SomeClass instance</summary>
 public SomeClass()
 {
 }
}

How amazing is that!  Anyways, as someone else has already written a script that does exactly what I wanted my new “open source” blog library to do, I’m no longer going to continue work on that project.  Instead, I’m going to step up development on skyNet, an ASP.NET MVC 2.0 application, so expect  some posts on that soon.

Learning about what I can do with Blogger

So what can blogger do? How about Java Links?

Well, one thing I know about this blog entry is that all the source is hosted on my new, open-source, GPL Licensed JQuery library that is geared around making,well, my blog look better when I put source code examples in it. Ok, so what does that mean? Well, for starters, lets put some code right here:

function whatever() {
alert('this is some code!');
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace exp1
{
    class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Hello, world!");
        }
    }
}

JQuery UI Widget–Panel

I’ve been trying to get better at following the JQuery UI Theme styles – the fact of the matter is I’ve just never been great at writing fancy style sheets, so having a re-usable framework complete with fancy gradient backgrounds is awesome. However, I’ve always been frustrated by the lack of a good “container” skeleton widget in the standard toolkit. I decided to spend a little bit of time designing a panel widget that works on items with this structure:

<div><h4>{title}</h4>{content}</div>

Let me know what you think!

You'll need these styles defined somewhere (I use Styles.css):
.ui-panel div.ui-panel-header
{
padding: 4px 8px 2px 12px;
height: 22px;
}
.ui-panel a.ui-panel-header
{
float: right;
}
.ui-panel div.ui-panel-content
{
padding: 4px 4px 4px 4px;
}

$.widget('ui.panel', {

options: { 

    collapsable: true,

    collapsed: false,

    title: null,

    barHeight: 29

}, defaults: {

    headerCss: 'ui-widget-header ui-corner-top ui-panel-header'

  , contentsCss: 'ui-widget-content ui-corner-bottom ui-panel-content ui-helper-clearfix'

  , panelCss: 'ui-widget ui-panel'

  , showSpeed: 'slow'

  , titleSelector: 'h1,h2,h3,h4,h5'

  , titleTemplate: '<span />'

}, _create: function () {

    var buffer;

    var self = this;

    self.initialState = { };

    // Parse attribute options

    if (self.element.attr('collapsable') == 'false')

        self.options.collapsable = false;

    if (self.element.attr('collapsed') == 'true')

        self.options.collapsable = true;    

    // Create the header div

    self.header = $('<div class="' + self.defaults.headerCss + '" />');

    // Look for an h element to rip out for the title.  If it is a h1 or h2, increase the bar's height

    self.initialState.header = self.element.children(self.defaults.titleSelector).first();

    if (self.initialState.header.length == 1) {

        self.initialState.header.remove();

        if (self.initialState.header[0].tagName == 'H1' || self.initialState.header[0].tagName == 'H2'

         && self.options.barHeight == 29)

             self.options.barHeight = 49;

        if (self.options.title == null)

            self.options.title = self.initialState.header.text();

    }    

    buffer = $(self.defaults.titleTemplate);

    if (self.options.title != null)

        buffer.text(self.options.title);

    self.header.append(buffer);    

    // TODO: Create the collapsable div and wire it up

    if (self.options.collapsable) {

        buffer = $("<a class='ui-panel-header ui-icon ui-icon-circle-triangle-n' href='javascript:void(0)'></a>");

        buffer.bind('click', function() { self._trigger('toggle'); });

        self.header.append(buffer);

    }

    // Create the content element and move original content into it.

    self.contents = $('<div class="' + self.defaults.contentsCss + '" />');

    self.contents.text(self.element.text());

    self.element.text('');

    self.element.children().appendTo(self.contents);

    // Finally, add my panel class and throw everything into the document.

    self.element.addClass(self.defaults.panelCss);

    self.element.append(self.header);

    self.element.append(self.contents);

    self.element.bind('paneltoggle', 

    function(event) {

        if (self.options.collapsed)

            self.expand();

        else

            self.collapse();

        return true;

    });

    self.element.bind('panelcollapse', 

    function(event) {          

        if (self.options.collapsed == false) {

            self.contents.hide(self.defaults.showSpeed, 

            function() {

                self.header.children('a').removeClass('ui-icon-circle-triangle-n')

                       .addClass('ui-icon-circle-triangle-s');

            });

            self.options.collapsed = true;

        }

        return true;

    });

    self.element.bind('panelexpand', 

    function(event) {

    if (self.options.collapsed) {

            self.contents.show(self.defaults.showSpeed, 

            function() {

                self.header.children('a').removeClass('ui-icon-circle-triangle-s')

                       .addClass('ui-icon-circle-triangle-n');

            });

            self.options.collapsed = false;

        }

        return true;

    });

}, expand: function () {

    this._trigger('expand');

}, collapse: function() {

    this._trigger('collapse');

}, destroy: function () {

    this.element.unbind('panelexpand panelcollapse');

    // Return element to pre-widget state

    this.header.remove();

    this.contents.detach();

    this.element.text(this.contents.text());

    if (this.initialState.header != null)

        this.element.append(this.initialState.header);    

    this.element.append(this.contents.children());

    // Call base destructor    

    $.Widget.prototype.destroy.apply(this, arguments); 

}});

$.extend($.ui.panel, { version: '@VERSION') });