Skip to content
Browse files

Start the move towards a more standard Ext component

  • Loading branch information...
1 parent 131d3aa commit 23e48a55584ffe279189b6ff68c13abc4c62c233 @hoelzro hoelzro committed Apr 26, 2011
Showing with 59 additions and 70 deletions.
  1. +59 −70 js/ext/ux/Growl.js
View
129 js/ext/ux/Growl.js
@@ -1,73 +1,62 @@
Ext.namespace("Ext.ux");
-Ext.ux.Growl = (function() {
- var _container,
- _closerTpl = '<div class="x-growl-msg-close"></div>',
- _basicTpl = '<div class="x-growl-msg">{0}</div>',
- _fullTpl = '<div class="x-growl-msg {2} {3}"><div class="x-growl-msg-title">{0}</div><div class="x-growl-msg-body">{1}</div></div>',
-
- _config = {
- alignment: "t-t",
- duration: 3,
- context: document,
- offset: [0, 0],
-
- show: function(notification, options) {
- if (!options.pin) {
- notification.fadeIn({duration: 1}).pause((options.duration || _config.duration)).fadeOut({duration: 1, remove: true})
- } else {
- notification.fadeIn({duration: 1});
- }
- },
-
- close: function(notification, evt, elt, options) {
- notification.stopFx();
- notification.fadeOut({remove: true});
- },
-
- click: Ext.emptyFn
- },
-
- _getContainer = function() {
- if (!_container) {
- _container = Ext.DomHelper.insertFirst(document.body, {id:'x-growl-ct'}, true);
- }
-
- return _container;
- };
-
- return {
- notify: function(options) {
- var closer,
- notification,
- container = _getContainer(),
- hasIcon = options.iconCls ? "x-growl-msg-has-icon" : "",
- hasTitle = options.title ? "x-growl-msg-has-title" : "",
- content = options.content ? String.format(_basicTpl, options.content) :
- String.format(_fullTpl, options.title || "", options.message || "", hasTitle + " " + hasIcon, options.iconCls || "");
-
- notification = Ext.DomHelper[(options.alignment || _config.alignment).indexOf("b") === -1 ? "append" : "insertFirst"](container, content, true);
- notification.on("click", function(evt, elt, op) {
- if (Ext.fly(elt).hasClass("x-growl-msg-close")) {
- (options.close || _config.close)(notification, evt, elt, options);
- } else {
- (options.click || _config.click)(notification, evt, elt, options);
- }
- });
-
- if (options.closable !== false) {
- closer = Ext.DomHelper.append(notification, _closerTpl, true);
-
- notification.hover(closer.fadeIn, closer.fadeOut, closer);
- }
-
- container.alignTo((options.context || _config.context), (options.alignment || _config.alignment), (options.offset || _config.offset));
-
- (options.show || _config.show)(notification, options);
- },
-
- init: function(config) {
- Ext.apply(_config, config);
+Ext.ux.Growl = Ext.extend(Ext.Component, {
+ closable: true,
+ alignment: "t-t",
+ duration: 3,
+ context: document,
+ offset: [0, 0],
+ pin: false,
+ iconCls: null,
+ title: null,
+ content: null,
+ _closerTpl = '<div class="x-growl-msg-close"></div>',
+ _basicTpl = '<div class="x-growl-msg">{0}</div>',
+ _fullTpl = '<div class="x-growl-msg {2} {3}"><div class="x-growl-msg-title">{0}</div><div class="x-growl-msg-body">{1}</div></div>',
+
+ initComponent: function() {
+ //# add icon, title, closing button, etc
+ this.on('click', this.onClick, this);
+ return Ext.ux.Growl.superclass.initComponent.call(this);
+ },
+
+ show: function() {
+ //# insertFirst or append
+ this.showEffect();
+
+ if(! this.pin) {
+ this.getEl().pause(this.duration);
+ this.hideEffect();
+ }
+ },
+
+ showEffect: function() {
+ this.getEl().fadeIn({
+ duration: 1
+ });
+ },
+
+ hideEffect: function() {
+ this.getEl().fadeOut({
+ duration: 1,
+ remove: true
+ });
+ },
+
+ close: function() {
+ this.getEl().stopFx();
+ this.hideEffect();
+ },
+
+ onClick: function(e, element) {
+ if(Ext.fly(element).hasClass('x-growl-msg-close')) {
+ this.close();
+ } else {
+ e.stopPropagation();
}
- };
-})();
+ }
+});
+
+Ext.ux.Growl.notify = function(options) {
+ return new Ext.ux.Growl(options);
+};

0 comments on commit 23e48a5

Please sign in to comment.
Something went wrong with that request. Please try again.