From 448329fd558a1a55eef55dbfe566d9dbbf3cecf8 Mon Sep 17 00:00:00 2001 From: Marcus Ekwall Date: Tue, 25 Jan 2011 07:27:55 +0000 Subject: [PATCH] Initial commit --- jquery-ui-notification.js | 219 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 jquery-ui-notification.js diff --git a/jquery-ui-notification.js b/jquery-ui-notification.js new file mode 100644 index 0000000..d30e410 --- /dev/null +++ b/jquery-ui-notification.js @@ -0,0 +1,219 @@ +/* + * jQuery UI Notification + * Copyright (c) 2011 Marcus Ekwall + * + * http://writeless.se/projects/jquery-ui-notification/ + * + * Depends: + * - jQuery 1.4 + * - jQuery UI 1.8 widget factory + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * +*/ +(function($) { + +// role=application on body required for screenreaders to correctly interpret aria attributes +if( !$(document.body).is('[role]') ){ + $(document.body).attr('role','application'); +} + +var increments = 0; +$.widget("me.notification", { + options: { + notificationClass: "ui-widget-content", + offset: 10, + duration: 2000, + show: { + effect: 'fade', + options: {}, + speed: 250, + callback: function(){} + }, + hide: { + effect: 'fade', + options: {}, + speed: 250, + callback: function(){} + }, + fancyHide: true, + sticky: false, + stack: "below" + }, + content: { + title: "Notification", + content: function() { + return $(this).attr("title"); + }, + template: "

${Title}

${Content}

", + }, + _init: function(){ + // container for notifications + this.notifications = []; + + // notification dummy + this.notification = $("
") + .attr("role", "notification") + .attr("aria-hidden", "true") + .addClass("ui-notification ui-widget ui-corner-all") + .hide(); + + if (this.options.stack == "below") { + this.notification.css('marginBottom', this.options.offset); + } else { + this.notification.css('marginTop', this.options.offset); + } + + // notification close button dummy + this.notificationClose = $("") + .attr("href", "#") + .attr("role", "button") + .addClass("ui-notification-close ui-corner-all") + .hover(function(){ + $(this).addClass("ui-state-hover"); + }, function(){ + $(this).removeClass("ui-state-hover"); + }) + .append( + $("") + .addClass("ui-icon ui-icon-closethick") + .text("close") + ); + + // notification content dummy + this.notificationContent = $("
") + .addClass("ui-notification-content"); + }, + + enable: function() { + this.options.disabled = false; + }, + + disable: function() { + this.options.disabled = true; + }, + + widget: function(index) { + return index ? this.notifications[index] : this.notifications; + }, + + index: function() { + return increments; + }, + + create: function(content, options) { + var self = this; + + // get defaults + content = $.extend({}, this.content, content); + + // override options if necessary + options = $.extend({}, this.options, options); + + if (options.disabled) { + return; + } + + // create a new notification instance + this.notifications.push(new $.ui.notification.instance(this)._create(content, $.extend({}, this.options, options))); + } +}); + +// instance constructor +$.extend($.ui.notification, { + instance: function(widget){ + this.parent = widget; + } +}); + +// notification instance +$.extend($.ui.notification.instance.prototype, { + _create: function(content, options){ + this.options = options; + + // render content template + var content = content.template + .replace("${Title}", content.title) + .replace("${Content}", content.content); + + // create notification element + this.element = this.parent.notification.clone(true).attr("id", "ui-notification-"+increments++) + // append the content + .append(this.parent.notificationContent.clone().html(content)) + // add custom class + .addClass(options.notificationClass); + + if (options.stack == "below") { + this.element.appendTo(this.parent.element); + } else { + this.element.prependTo(this.parent.element); + } + + // if sticky, add close button + var self = this; + if (options.sticky) { + this.parent.notificationClose + .clone(true) + .click(function(event){ + self.hide(); + return false; + }) + .prependTo(this.element); + } else { + // otherwise set timeout to close it automatically + setTimeout(function(){self.hide();}, self.options.duration); + } + + // let's show the notifiction + this.show(); + + // return instance + return this; + }, + show: function(){ + var anim = this.options.show; + this.element + .attr("aria-hidden", "false") + .show( + anim.effect, + anim.options, + anim.speed, + anim.callback + ); + }, + hide: function(){ + var self = this, + anim = this.options.hide, + wrap = $("
") + .height(this.element.outerHeight(true)); + + if (this.options.fancyHide) { + this.element.wrap(wrap); + } + this.element.hide( + anim.effect, + anim.options, + anim.speed, + function(){ + if (self.options.fancyHide) { + $(this).parent().animate({ height: 0}, + 250, + function(){ + $(this).remove(); + } + ); + } else { + $(this).remove(); + } + if (anim.callback) { + anim.callback(); + } + } + ); + } + +}); + +})( jQuery );