pbtweet 1.5のGrowl風Notificationまわりのコードなど晒す。

pbtweet 1.5ではGrowl風のNotificationやってるんだけど（ http://img329.yfrog.com/i/5y3.mp4/ ）WebKitのCSS3前提で作ってるんでものすごくシンプルに作れた。jQueryとか難しくてよくわかんないのだけど、使うともっと簡単になるんだろうな。勉強が足りないなーと思ったりすることしきりだ。

CSSはこんな感じ。

.Notifire {
	margin-left: 13px;
	margin-top: 10px;
	width: 450px ;
	min-height: 40px;
	clear : both ;
	-webkit-box-shadow: 0px 4px 4px rgba(0%, 0%, 0%, 0.4) ;
	-webkit-border-radius : 8px ;
	opacity : 0 ;
	-webkit-transform : translate( 0px , -20px) ;
	-webkit-transform-origin : 50% 50% ;
	-webkit-transition : -webkit-transform 0.2s ease-in , opacity 0.4s ease-in ;
}

#notifire_canvas .Notifire-popon{
	opacity : 1 ;
	-webkit-transform : translate( 0px , 0px ) ;
}

#notifire_canvas .Notifire-pushout {
	opacity : 0 ;
}

javascriptはこんな感じ

function Notifire()
{
	var self = this;
	
	var card = document.createElement('div');
	card.setAttribute( 'class' , 'Notifire');
	card.id = guid();
	this.card = card;
	
	var icon_wrapper = document.createElement('div');
	icon_wrapper.setAttribute( 'class' , 'icon' );
	card.appendChild( icon_wrapper );
	
	var icon_image = document.createElement('img');
	icon_image.setAttribute( 'class' , 'icon' );
	icon_wrapper.appendChild( icon_image );
	this.icon_image = icon_image;
	
	var description = document.createElement('div');
	description.setAttribute( 'class' , 'description' );
	this.description_container = description;
	card.appendChild( description );
}

Notifire.prototype = 
{
	get notify_id ()
	{
		return this.card.id;	
	} ,
	
	set notify_id ( current_id )
	{
		this.card.id = current_id;
	} ,
	
	get icon ()
	{
		return this.icon_image.src;	
	} ,
	
	set icon ( src )
	{
		this.icon_image.src = src;
	} ,
	
	get description ()
	{
		return this.description_container.innerHTML;
	} ,
	
	set description ( x )
	{
		this.description_container.innerHTML = x;
	} ,

	get priority ()
	{
		return this._priority;
	} ,
	
	set priority ( x )
	{
		this._priority = x;
		switch ( x ) {
			case -1:
				this.card.style.backgroundColor = 'rgba( 0 , 0 , 0, 0.75)';
				break;
			
			case 0:
				this.card.style.backgroundColor = 'rgba( 60 , 10 , 20 , 0.75)';
				break;
			
			case 1:
				this.card.style.backgroundColor = 'rgba( 80 , 0 , 0 , 0.75)';
				break;
				
			default:
				this.card.style.backgroundColor = 'rgba( 24 , 24 , 24 , 0.75)';
				return;
		}
		return;
	} ,	
	
	pop_on : function(delay)
	{
		document.getElementById( 'notifire_canvas' ).appendChild( this.card );
		var my_id = this.notify_id;
		setTimeout( function()
			{
				addClass( document.getElementById(my_id) , 'Notifire-popon' );
			} , delay * 200 );
		return;
	} ,
	
	push_off : function()
	{
		addClass( this.card , 'Notifire-pushout' );
		if( !arguments[0] )
		{
			var my_id = this.notify_id;
		}
		else
		{
			var my_id = arguments[0];
		}
		setTimeout( function()
			{
				document.getElementById('notifire_canvas').removeChild( document.getElementById( my_id ) );
				delete this;
			} , 300 );
		return;
	} ,
}

// Notificationを出すためのdiv用意して……
var notifire_canvas = document.createElement('div');
notifire_canvas.id = 'notifire_canvas';
notifire_canvas.style.position = 'fixed';
notifire_canvas.style.width = '450px';
notifire_canvas.style.top = '0px';
document.body.appendChild(notifire_canvas);

//こうやって呼び出す。
var new_notify = new Notifire();
new_notify.description = messages.description;
new_notify.icon = messages.icon;
new_notify.priority = messages.priority;
new_notify.pop_on(on_delay);
setTimeout( function()
{
	new_notify.push_off();
} , off_delay );	

追記

エディタで見てるときはけっこうシンプルに見えてたんだけどはてダで見たらぜんぜんシンプルに見えないや。やっぱりダサコードだな。どうせ晒しだし、jQueryも使えんような初心者のコードなんてだれもコピペしないだろうからこのまま置いとく。