diff --git a/widget/Toaster.js b/widget/Toaster.js index 37e1bc6e6f..9665e20821 100644 --- a/widget/Toaster.js +++ b/widget/Toaster.js @@ -1,7 +1,9 @@ define([ "dojo/_base/declare", // declare "dojo/_base/lang", // lang.getObject... - "dojo/_base/connect", // connect.connect, connect.subscribe + "dojo/on", + "dojo/aspect", + "dojo/topic", "dojo/_base/fx", // fx.fadeOut "dojo/dom-style", // domStyle.set "dojo/dom-class", // domClass.add @@ -13,7 +15,7 @@ define([ "dojo/fx", "dojo/has", "dojo/window" -], function(declare, lang, connect, baseFx, domStyle, domClass, domGeometry, registry, WidgetBase, Templated, BackgroundIframe, coreFx, has, window){ +], function(declare, lang, on, aspect, topic, baseFx, domStyle, domClass, domGeometry, registry, _WidgetBase, _TemplatedMixin, BackgroundIframe, coreFx, has, window){ lang.getObject("dojox.widget", true); @@ -21,12 +23,12 @@ define([ return w.substring(0,1).toUpperCase() + w.substring(1); }; - return declare("dojox.widget.Toaster", [WidgetBase, Templated], { + return declare("dojox.widget.Toaster", [_WidgetBase, _TemplatedMixin], { // summary: // Message that slides in from the corner of the screen, used for notifications // like "new email". - templateString: '
', + templateString: '
', // messageTopic: String // Name of topic; anything published to this topic will be displayed as a message. @@ -79,7 +81,7 @@ define([ this.ownerDocument.body.appendChild(this.domNode); if(this.messageTopic){ - connect.subscribe(this.messageTopic, this, "_handleMessage"); + this.own(topic.subscribe(this.messageTopic, lang.hitch(this, "_handleMessage"))); } }, @@ -100,6 +102,7 @@ define([ // type of message; possible values in messageTypes enumeration ("message", "warning", "error", "fatal") // duration: // duration in milliseconds to display message before removing it. Widget has default value. + duration = duration||this.duration; // sync animations so there are no ghosted fades and such if(this.slideAnim){ @@ -158,28 +161,32 @@ define([ this.slideAnim = coreFx.slideTo({ node: this.containerNode, top: 0, left: 0, - duration: this.slideDuration}); - this.connect(this.slideAnim, "onEnd", function(){ + duration: this.slideDuration, + onEnd: lang.hitch(this, function(){ //we build the fadeAnim here so we dont have to duplicate it later // can't do a fadeHide because we're fading the // inner node rather than the clipping node - this.fadeAnim = baseFx.fadeOut({ + this.fadeAnim = (baseFx.fadeOut({ node: this.containerNode, - duration: 1000}); - this.connect(this.fadeAnim, "onEnd", function(){ - this.isVisible = false; - this.hide(); - }); + duration: 1000, + onEnd: lang.hitch(this, function(){ + this.isVisible = false; + this.hide(); + }) + })); + this.own(this.fadeAnim); this._setHideTimer(duration); - this.connect(this, 'onSelect', function(){ + this.on('select', lang.hitch(this, function(){ this._cancelHideTimer(); //force clear sticky message this._stickyMessage=false; this.fadeAnim.play(); - }); + })); this.isVisible = true; - }); + }) + }); + this.own(this.slideAnim); this.slideAnim.play(); } }, @@ -206,7 +213,7 @@ define([ //if duration == 0 we keep the message displayed until clicked if(duration>0){ this._cancelHideTimer(); - this._hideTimer=setTimeout(lang.hitch(this, function(evt){ + this._hideTimer = setTimeout(lang.hitch(this, function(evt){ // we must hide the iframe in order to fade // TODO: figure out how to fade with a BackgroundIframe if(this.bgIframe && this.bgIframe.iframe){ @@ -269,11 +276,12 @@ define([ // summary:' // show the Toaster domStyle.set(this.domNode, 'display', 'block'); - this._placeClip(); if(!this._scrollConnected){ - this._scrollConnected = connect.connect(window, "onscroll", this, this._placeClip); + + this._scrollConnected = aspect.after(window, "scroll", lang.hitch(this, "_placeClip")); + this.own(this._scrollConnected); } }, @@ -284,7 +292,7 @@ define([ domStyle.set(this.domNode, 'display', 'none'); if(this._scrollConnected){ - connect.disconnect(this._scrollConnected); + this._scrollConnected.remove(); this._scrollConnected = false; } diff --git a/widget/tests/test_Toaster.html b/widget/tests/test_Toaster.html index c4cd2a47d6..26a79fc652 100644 --- a/widget/tests/test_Toaster.html +++ b/widget/tests/test_Toaster.html @@ -1,5 +1,4 @@ - + Toaster Widget Dojo Tests @@ -7,60 +6,61 @@ @import "../../../dojo/resources/dojo.css"; @import "../../../dijit/themes/tundra/tundra.css"; @import "../../../dijit/themes/dijit.css"; - @import "../../../dijit/tests/css/dijitTests.css"; + @import "../../../dijit/tests/css/dijitTests.css"; @import "../Toaster/Toaster.css"; - - + -
+
-
+
- - - + + + -

dojox.widget.Toaster test

+

dojox/widget/Toaster test

When you click any of the buttons above, the bottom right hand message will @@ -69,17 +69,17 @@

dojox.widget.Toaster test

displayed in the bottom right corner it should append the new message below the old one with a separator between them.
- +

A Tooltip: (#10046)

focusable text - + rich formatting !
- +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum @@ -156,6 +156,6 @@

A Tooltip: (#10046)

sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

- +