Epic Server Rebuild – The Prelude

This has almost stalled because of some MAJOR problems with the existing hardware. It’s all running again, but the server doesn’t have automated downloading right now, and the media center is currently running from my spare Acer Revo.

Terry Pratchett’s Going Postal

Now, much to my dissappointment, this was all in all a “Meh!” film. I was far more impressed with Hogfather than Going Postal. It felt like they were simply going through the motions. The film had the essence of the book, but left out so much story, that they have to fabricate sections just to tie what was left together.

Last Airbender Movie

Oh dear LORD what did they do to my beloved Airbender?! It was obvious that not one of the cast had watched even a single episode of the original show. This was just, plain and simply, painful! Sometimes I forget, what a powerful bender M. Night Shyamalan is.

Prince Of Persia Movie

Now, on the other hand, I liked this, simply because they managed to take the basic story of the prince of persia, and turn it into a good film. Most people will hate this because it doesn’t follow the story of the game, but I personally think that game stories don’t work in movies. I believe that this was a pretty good attempt. Not the best, but certainly not the worst.

Coming up

I’ve added a new section to the site, Presentations, which I will be filling with any presentations I do for work, or at conferences, if I ever get the chance. The first talk will be about “Internal Design”, and how disciplined coding principles will help yourself and others who work on the project.

Like

Unlike

So this is my first attempt at writing to some code with it. I hope it’s useful to someone. It’s just a simple JavaScript table sort.

The Introduction

Just a bit of useful script for client side sorting of tables. Simple click the headers of the columns, and it will arrange it in ascending order. A second click will arrange it in descending order.

UPDATE – 30th July 2010: After talking with a BBC colleague, it occurred to me that I could improve the code, so that it doesn’t rely on the class names for the ordering. The class names are now purely for decoration, not functionality.

UPDATE 2 – 30th July 2010: It was just pointed out by James (thanks man), that Glow/JS doesn’t handle number sorting brilliantly, so I’ve added a small patch to improve this. Thanks to James for his suggestion.

UPDATE 3 – 3rd August 2010: Some alterations to improve sorting of floats.

The Demo

The Source Code

JavaScript

gloader.load( [ 'glow', '1', 'glow.dom', 'glow.events' ], {
        async: true,
        onLoad: function( glow ) {
                var getPosition = function( heystack, needle )
                {
                        var position = 0;
                        heystack.each( function( i ){
                                if( needle.eq( this ) )
                                        position = i;
                        });
                        return position;
                }
                var sortDir = 0;
                var sortBy_store;
                glow.events.addListener( '#myTable thead tr th' , 'click', function ( event ) {

                        var sortBy      = getPosition( glow.dom.get('#myTable thead tr th'), glow.dom.get( this ) );

                        if( sortBy == sortBy_store )
                                sortDir = ( sortDir ? 0 : 1 );
                        else
                                sortDir = 0;

                        sortBy_store    = sortBy;

                        glow.dom.get( '#myTable tbody tr' ).remove().sort( function( rowA, rowB ) {
                                var sortArr = new Array( 1, -1 );
                                if( sortDir )
                                        sortArr = new Array( -1, 1 );

                                var rowA_obj = glow.dom.get( rowA ).get('td');
                                var sortA = glow.dom.get( rowA_obj[sortBy] ).text();

                                var rowB_obj = glow.dom.get( rowB ).get('td');
                                var sortB = glow.dom.get( rowB_obj[sortBy] ).text();

                                if( !isNaN( sortA ) )
                                        sortA = parseFloat( sortA )
                                if( !isNaN( sortB ) )
                                        sortB = parseFloat( sortB )

                                return sortA > sortB ? sortArr[0] : sortArr[1];

                        }).appendTo( '#myTable tbody' );

                });
        }
});

HTML

<table id='myTable'>
	<thead>
		<tr>
			<th class='col1'>Number</th>
			<th class='col2'>Male Names</th>
			<th class='col3'>Female Names</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class='col1'>3</td>
			<td class='col2'>James</td>
			<td class='col3'>Helen</td>
		</tr>
		<tr>
			<td class='col1'>2</td>
			<td class='col2'>Thomas</td>
			<td class='col3'>Laura</td>
		</tr>
		<tr>
			<td class='col1'>4</td>
			<td class='col2'>Steven</td>
			<td class='col3'>Catherin</td>
		</tr>
		<tr>
			<td class='col1'>1</td>
			<td class='col2'>Simon</td>
			<td class='col3'>Samantha</td>
		</tr>
	</tbody>
</table>

It attaches an Ajax handler to all links on a page which conform to the selector you give it. For example, you can tell it to attach to all standard links (<A HREF=’/here/’>Hello</A>), or links with a specific class as i’ve done with the code below (<A HREF=’/here/’ CLASS=’ajax’>Hello</A>).

I hope someone finds this useful. As ever this was created after I kept saying that I could write something a hell of a lot better than anything else I was finding. This might be a bold statement, but I was having trouble finding anything that would do the job, and simply.

(Demo to come, I’m just posting the code up right now.)

/*
 * ContentHandler
 *
 * Content handler that attaches to links and loads content through AJAX
 *
 * @author Rob Taylor
 * @created 28/09/09
 * @modified 29/09/09
 * @version 1.3.5.10
 */

	var ContentHandler = new Class({
		Implements: [Options, Events, Log],

		options : {
			// Array of container elements to load via AJAX
			container		: $('content'),

			// Loading graphic and text to display while working
			loadingImage		: '/images/ajax-loader.gif',
			loadingMessage		: 'Loading Content...',

			// How much Opacity to set on 'Container' while loading new page.
			loadingTransparency	: 0,

			// Type of link to load via AJAX. Defaults to <a> tags
			linkIdentifier		: 'a',

			// TRUE to enable console logging. FALSE by default
			debugMode		: false
		},

		currentURL : '',
		isNavigating : false,

		/*
		 * initialize
		 *
		 * Default constructor. Sets configuration options, attaches load event links and triggers initial load
		 *
		 * @param mixed		options		Array of config options.  Supported elements:
		 *					container		-	Container element to load Ajax into
		 *					loadingImage		-	URL of image to display while working
		 *					loadingMessage		-	Message to display while working
		 *					loadingTransparency	-	Transparency level of 'container' when request is made.  Must be between 0 and 1. Defaults to 0
		 *					linkIdentifier		-	HTML tagname to attach onclick loader to. Defaults to <a>
		 *					debugMode		-	TRUE to enable console logging. FALSE by default
		 */
		initialize : function( options ) {

			// Set configuration options
			this.setOptions(options);

			this.debug('Starting :: ContentHandler');

			// Loop through link elements attaching loader
			$$(this.options.linkIdentifier).each( function( element ){
				this.attachHandler( element );
			}.bind(this));

			// Do initial content load if location is specified
			if( window.location.hash && window.location.hash.length > 1 )
			{
				// Get initial page
				var url = window.location.hash.substr( 1, window.location.hash.length );

				this.getContent( url, true );
			}

			// Attach check to re-load content if URL changes or previous attempt fails
			this.updateContent.periodical( 200, this );

		},

		/*
		 * createLoader
		 *
		 * Populates and displays
		 */
		createLoader : function(){
			this.debug('Creating :: Loader Image');

			// Container padding
			var padding		= 40;

			// Create image element
			var content		= $( this.options.container );
			var loaderImage		= new Element( 'img', {
				src	: this.options.loadingImage,
				alt	: 'Loading',
				title	: 'Loading'
			});

			// Create test element
			var loaderMessage	= new Element( 'div' ).set('text',this.options.loadingMessage);
			loader			= new Element( 'div' );

			// Style elements
			content.setStyle( 'position', 'relative' );
			loader.setStyles({
				margin		: 'auto',
				textAlign	: 'center',
				position	: 'absolute',
				opacity		: 0
			});

			// Autoresize container onload to fit image
			loaderImage.addEvent('load', function(){
				loader.setStyles({
					height		: ( loaderImage.getSize().y + padding ),
					width		: ( loaderImage.getSize().x + padding ),
					top		: 20 + content.getPosition().y,
					left		: ( ( ( content.getSize().x / 2 ) - ( loaderImage.getSize().x / 2 ) ) - padding ) + content.getPosition().x
				});
			});
			// Add image and message to container
			loader.adopt( loaderImage,loaderMessage );

			// Attach loader to content area and fade in
			$(document.body).adopt( loader );
			loader.fade('in');

		},

		destroyLoader : function(){
			if( loader )
				loader.destroy();
		},

		getContent : function( url, freshStart ){
			this.debug('Collecting :: Page Content');

			var content = $( this.options.container );

			if( this.isNavigating && request_content )
				request_content.cancel();

			request_content = new Request.HTML({
				url		: url,
				method		: 'get',
				link		: 'cancel',
				update		: content,
				onRequest	: function(){
					this.debug('Collecting :: Page Content -> Request Made');

					// Set active request flag (prevents periodical spawning simultaneous requests)
					this.isNavigating = true;

					// Store current content in case of rollback (e.g. if request fails)
					content.store( 'content', content.get('html') );

					if( freshStart ){
						// Flush content
						content.empty();
					}
					else{
						content.get('tween', {
							property: 'opacity',
							duration: 'normal'
						}).start( this.options.loadingTransparency );
					}

					// Display loaders
					this.createLoader();

				}.bind(this),
				onComplete	: function(){
					this.debug('Collecting :: Page Content -> Complete');

					// Reset active request flag
					this.isNavigating = false;

					this.destroyLoader();

					if( !freshStart ){
						content.get('tween', {
							property: 'opacity',
							duration: 'short'
						}).start(1);
					}

				}.bind(this),
				onSuccess	: function(){
					this.debug('Collecting :: Page Content -> Success');

					// Track new content URL
					this.currentURL = url;

					// Flush stored content
					content.store( 'content', '' );

					if( !freshStart ){
						window.location.hash = url;
					}

					content.getElements( this.options.linkIdentifier ).each( function( inner_element ){
						this.attachHandler( inner_element );
					}.bind(this));

					this.debug('Current URL: '+this.currentURL);

				}.bind(this),
				onFailure	: function(){
					this.debug('Collecting :: Page Content -> Fail');

					// Retrieve stored content
					content.retrieve( 'content' );

				}
			}).send();

			return false;

		},

		attachHandler : function( element ){
			if( $(element) ){
				if( this.checkLink( $(element).get('href') ) )
				{
					url = $(element).get('href');
					//this.debug('Adding Handler : "'+url+'"');
					$(element).addEvent('click', this.getContent.bind(this,url) );
				}
			}
			else{
				this.debug('No Valid Element.');
			}
		},

		updateContent : function(){

			var url = window.location.hash.substr( 1, window.location.hash.length );
			if( this.currentURL != url && !this.isNavigating && this.checkLink( url ) ){
				this.debug('Updating :: Page Content: "'+url+'"');
				this.getContent( url );
			}

		},

		checkLink : function( url ){

			if( url.test('^http:|^https:' ) ) // We're assuming here, that external links, do not want to be loaded inside the container.
				return false;

			return true;
		},

		debug : function( message ){

			if( !this.options.debugMode )
				return;

			this.log( '[Content Handler] ' + message );

		}

	});

	document.addEvent('domready', function(){
		content = new ContentHandler({
			linkIdentifier : 'a.ajax' // this will attach to any link with a class of 'ajax'.
			//linkIdentifier : 'a' // This will attach to any link.
		});
	});

Available Options

• container : Container element to load Ajax into
• loadingImage : URL of image to display while working
• loadingMessage : Message to display while working
• loadingTransparency : Transparency level of ‘container’ when request is made. Must be between 0 and 1. Defaults to 0
• linkIdentifier : HTML tagname to attach onclick loader to. Defaults to <a>
• debugMode : TRUE to enable console logging. FALSE by default

Like

Unlike

I hope you enjoy it, and check out the demo:

Demo – I plan on replacing this with an inline demo some time very soon (See below).
Launch AJAX Demo – Not working right now, trying to find the out what’s not connecting.

Here are the image files you will need:

I suggest you find something better, these were just temp images for me.

Close:
Resize: 
Loading: 

First the Javascript

I’m assuming you’ve got MooTools Code and More installed.

var MoodalWindow = new Class({

	Implements: [Options, Events],

	options : {
		container		: window,
		height			: 700,
		width			: 600,
		overlayColor		: '#000000',
		overlayTransparency	: 0.7,
		overlayClose		: true,
		move			: true,
		resize			: true,
		url			: '',
		title			: 'Modal Window'
	},

	/*
	Constructor: initialize
		Constructor

		Add event on formular and perform some stuff, you now, like settings, ...
	*/
	initialize : function( element, options ) {
		if( $(element) )
		{
			if( $(element).get('title') )
				this.options.title	= $(element).get('title');
			else if( $(element).get('text') )
				this.options.title	= $(element).get('text');

			if( $(element).get('href') )
				this.options.url	= $(element).get('href');

			this.setOptions(options);

			$(element).addEvent('click', this.createPopup.bind(this) );
			return false;
		}
	},

	createPopup : function(){
		this.killStraglers();

		this.createOverlay();
		this.createWindow();
		if( this.options.title ){
			this.createTitle();
			this.createCloser();
		}
		this.createContent();
		if( this.options.resize )
			this.createResizer();
		return false;
	},

	createOverlay : function(){
		var overlayColor		= this.options.overlayColor;
		var overlayTransparency		= this.options.overlayTransparency;
		modalOverlay = new Element( 'div', { 'id':'modalOverlay' } ).setStyles({
			backgroundColor	: this.options.overlayColor,
			position	: 'absolute',
			left		: 0,
			top		: 0,
			height		: window.getScrollSize().y,
			width		: window.getScrollSize().x,
			zIndex		: 99
		});

		if( this.options.overlayClose )
			modalOverlay.addEvent('click', this.closePopup.bind(this) );

		modalOverlay.fade('hide');

		$(document.body).grab( modalOverlay );
		modalOverlay.fade( this.options.overlayTransparency );

		window.addEvent('resize',function(){
			modalOverlay.setStyles({
				height	: window.getScrollSize().y,
				width	: window.getScrollSize().x
			});

		});

	},

	createWindow : function(){

		var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
		if( modalWindowTop < 0 )
			var modalWindowTop = 0;

		var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
		if( modalWindowLeft < 0 )
			var modalWindowLeft = 0;

		modalWindow = new Element( 'div', { 'id':'modalWindow' } ).setStyles({
			position	: 'absolute',
			top		: modalWindowTop,
			left		: modalWindowLeft,
			height		: this.options.height,
			width		: this.options.width,
			zIndex		: 100
		});

		modalWindow.fade('hide');
		$(document.body).grab( modalWindow );
		modalWindow.fade( 'in' );

		if( !this.options.move )
		{
			var reposition = function(){

				var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
				if( modalWindowTop < 0 )
					var modalWindowTop = 0;
				if( modalWindowTop > this.options.container.getSize().y )
					var modalWindowTop = this.options.container.getSize().y;

				var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
				if( modalWindowLeft < 0 )
					var modalWindowLeft = 0;
				if( modalWindowLeft > this.options.container.getSize().x )
					var modalWindowLeft = this.options.container.getSize().x;

				modalWindow.setStyles({
					top	: modalWindowTop
					//left	: modalWindowLeft
				});

			}

			window.addEvents({
				'resize' : reposition.bind(this),
				'scroll' : reposition.bind(this)
			});
		}

	},

	createTitle : function(){

		modalTitle = new Element( 'div', { 'id':'modalTitle' } ).setStyles({
			position	: 'absolute',
			top		: 0,
			left		: 0,
			width		: '100%'
		});
		modalTitle.set( 'text', this.options.title );
		modalWindow.grab( modalTitle );

		if( this.options.move )
		{
			modalWindow.makeDraggable({
				handle : modalTitle,
				limit: {
					x : [ 0, ( this.options.container.getScrollSize().x ) ],
					y : [ 0, ( this.options.container.getScrollSize().y ) ]
				}
			});
			modalTitle.setStyles({
				cursor	: 'move'
			});
		};

	},

	createContent : function(){

		modalContent = new Element( 'div', { 'id':'modalContent' } ).setStyles({
			position	: 'absolute',
			top		: ( this.options.title ? modalTitle.getStyle('height') : 0 ),
			overflow	: 'auto',
			left		: 0,
			height		: ( this.options.height - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px',
			width		: '100%'
		});
		modalContent.set( 'html', '<br /><br /><center><img alt="Loading.." src="images/ajax-loader.gif"/><br />Loading Content...</center>' );

		modalWindow.grab( modalContent );

		modalContent.load( this.options.url );

	},

	createCloser : function(){

		modalCloser = new Element( 'div', { 'id':'modalClose' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: 0,
			right		: 0
		});
		modalTitle.grab( modalCloser );
		modalCloser.addEvent('click', this.closePopup.bind(this) );

	},

	createResizer : function(){

		modalResizer = new Element( 'div', { 'id':'modalResize' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			bottom		: 0,
			right		: 0
		});
		modalWindow.grab( modalResizer );

		modalWindow.makeResizable({
			handle : modalResizer,
			onDrag : function(){
				modalContent.setStyles({
					height : ( modalWindow.clientHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px'
				});
			}.bind(this),
			limit: {
				x : [ 100, this.options.container.getSize().x ],
				y : [ 75, this.options.container.getSize().y ]
			}
		})
		modalResizer.setStyles({
			cursor	: 'se-resize'
		});

	},

	resizePopup : function( newHeight, shift ){

		modalContent.set('tween', {
			duration: 750
		}).tween('height', ( newHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) ) );

		var moveHeight = function(){
			modalWindow.set('tween', {
				duration: 750
			}).tween('height', newHeight );
		}.delay(0);

		if( shift ) {
			var moveTop = function(){
				modalWindow.set('tween', {
					duration: 750
				}).tween('top', ( ( window.getSize().y / 2 ) - ( newHeight / 2 ) + window.pageYOffset ) );
			}.delay(750);
		}

		return false;
	},

	killStraglers : function(){

		if( $('modalOverlay') )
			$('modalOverlay').destroy();
		if( $('modalWindow') )
			$('modalWindow').destroy();

	},

	closePopup : function(){

		modalOverlay.fade('out');
		modalWindow.fade('out');
		var killEm = function(){
			if( $('modalOverlay') )
				$('modalOverlay').destroy();
			if( $('modalWindow') )
				$('modalWindow').destroy();
		}.delay(750);

		return false;

	}

});

Second, the CSS.

I’m using the CSS3 rounded borders here, but it will roll back to normal borders if the viewer is using IE.

#modalWindow{
	background-color		: #FFFFFF;
	border				: 10px solid #222;
	border-radius			: 10px;
	-moz-border-radius		: 10px;
	-webkit-border-radius		: 10px;
}

#modalTitle{
	font-size			: 14px;
	font-weight			: bold;
	color				: #FFF;
	height				: 30px;
	background-color		: #222;
}

#modalContent{
	background-color		: #FFFFFF;
}

#modalClose{
	background-image		: url(images/close.png);
	height				: 16px;
	width				: 16px;
	margin				: 5px;
}

#modalResize{
	background-image		: url(images/resize.png);
	height				: 17px;
	width				: 17px;
}

Lastly, the calling methods.

I’ve added both methods here, first attaching to a single element.

Moodal = new MoodalWindow( $( 'moobox-link' ) );

Second, attaching to any link with a class of “moobox”.

$$('a.moobox').each(function(element){
	Moodal = new MoodalWindow( element );
});

Available options:

• height : Pixel height of the Modal Window. (EG: 250)
• width : Pixel width of the Modal Window. (EG: 350)
• overlayColor : Hex colour of the overlay. (EG: ‘#AAAAAA’/'#AAA’)
• overlayTransparency : Transparency level of the overlay, from 0 to 1. (EG: 0.4)
• overlayClose : Boolean value, if you want the modal window to close when you click the overlay background. (EG: true/false)
• move : Boolean value, if you want the user to be able to move the Modal window around, using the Title Bar as a handle. (EG: true/false)
• resize : Boolean value, if you want the user to be able to resize the Modal Window, from the bottom right corner. If this is set to true, the window will not auto position itself when the window scrolls, or resizes. (EG: true/false)
• url : URL to be opened in the modal window. If this is not set, the class will use the HREF from the link. (EG: ‘users/rob/index.php’)
• title : Title bar text, if this is set to false, the title bar will not appear, disabling the close button, and the move/drag feature. If this is not set, the code will attempt to get a “TITLE” variable from the link, or failing that, the text from inside the link.

Options Example:

Moodal = new MoodalWindow( $('link-id'), {
	height			: 700,
	width			: 600,
	overlayColor		: '#000000',
	overlayTransparency	: 0.7,
	overlayClose		: true,
	move			: true,
	resize			: true,
	url			: '/test/hello-world.html',
	title			: 'Hello World!'
});