Skip to content

Commit

Permalink
fixes #18491, fixes #16224, cleanup of Toaster widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@dylans
dylans committed Sep 17, 2015
1 parent b721c47 commit 56ee55d
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 70 deletions.
48 changes: 28 additions & 20 deletions widget/Toaster.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -13,20 +15,20 @@ 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);

var capitalize = function(/* String */w){
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: '<div class="dijitToasterClip" dojoAttachPoint="clipNode"><div class="dijitToasterContainer" dojoAttachPoint="containerNode" dojoAttachEvent="onclick:onSelect"><div class="dijitToasterContent" dojoAttachPoint="contentNode"></div></div></div>',
templateString: '<div class="dijitToasterClip" data-dojo-attach-point="clipNode"><div class="dijitToasterContainer" data-dojo-attach-point="containerNode" data-dojo-attach-event="onclick:onSelect"><div class="dijitToasterContent" data-dojo-attach-point="contentNode"></div></div></div>',

// messageTopic: String
// Name of topic; anything published to this topic will be displayed as a message.
Expand Down Expand Up @@ -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")));
}
},

Expand All @@ -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){
Expand Down Expand Up @@ -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();
}
},
Expand All @@ -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){
Expand Down Expand Up @@ -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);
}
},

Expand All @@ -284,7 +292,7 @@ define([
domStyle.set(this.domNode, 'display', 'none');

if(this._scrollConnected){
connect.disconnect(this._scrollConnected);
this._scrollConnected.remove();
this._scrollConnected = false;
}

Expand Down
100 changes: 50 additions & 50 deletions widget/tests/test_Toaster.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,66 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
<html>
<head>
<title>Toaster Widget Dojo Tests</title>
<style type="text/css">
@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";
</style>

<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.widget.Toaster");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them

dojo.require("dijit.Tooltip");

var toast = null;
function showTestMessage(){
dojo.publish("testMessageTopic",
[ "This is a message! It's kind of long to show message wrapping."]
);
}
function showAnotherMessage(){
dojo.publish("testMessageTopic",
[{
message: "This is another message!",
type: "warning",
duration: 500
}]
);
}
function showYetAnotherMessage(){
dojo.publish("testMessageTopic",
[{ message: "This is yet another message!" }]
);
}

dojo.addOnLoad(function(){
toast = dijit.byId("toast");
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, async: 1"></script>
<script>
require([
"dojo/parser",
"dojo/topic",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dijit/Tooltip",
"dojox/widget/Toaster",
"dojo/domReady!"
], function (parser, topic, on, dom, registry) {
parser.parse();
on(dom.byId("submitButton1"), "click",function () {
topic.publish("testMessageTopic",
"This is a message! It's kind of long to show message wrapping."
);
});
on(dom.byId("submitButton2"), "click", function () {
topic.publish("testMessageTopic",
{
message: "This is another message!",
type: "warning",
duration: 500
}
);
});
on(dom.byId("submitButton3"), "click", function () {
topic.publish("testMessageTopic",
{ message: "This is yet another message!" }
);
});
});

</script>
</head>
<body class="tundra">
<div dojoType="dojox.widget.Toaster" id="toast"
positionDirection="br-left" duration="0"
messageTopic="testMessageTopic"></div>
<div data-dojo-type="dojox/widget/Toaster" id="toast"
data-dojo-props="positionDirection: 'br-left', duration:0, messageTopic:'testMessageTopic'"></div>

<div dojoType="dojox.widget.Toaster" id="toast2"
separator="&lt;hr&gt;" positionDirection="bl-up"
messageTopic="testMessageTopic"></div>
<div data-dojo-type="dojox/widget/Toaster" id="toast2"
data-dojo-props="separator: '&lt;hr&gt;', positionDirection: 'bl-up', messageTopic:'testMessageTopic'"></div>

<button type="submit"
onclick="showTestMessage();">Click to show message</button>
<button type="submit"
onclick="showAnotherMessage();">Click to show another message</button>
<button type="submit"
onclick="showYetAnotherMessage();">Click to show yet another message</button>
<button type="submit" id="submitButton1"
>Click to show message</button>
<button type="submit" id="submitButton2"
>Click to show another message</button>
<button type="submit" id="submitButton3"
>Click to show yet another message</button>

<h1>dojox.widget.Toaster test</h1>
<h1>dojox/widget/Toaster test</h1>

<div style="color: #FF0000;">
When you click any of the buttons above, the bottom right hand message will
Expand All @@ -69,17 +69,17 @@ <h1>dojox.widget.Toaster test</h1>
displayed in the bottom right corner it should append the new message below
the old one with a separator between them.
</div>

<h2>A Tooltip: (#10046)</h2>
<div><span id="one" class="tt" tabindex="0"> focusable text </span>
<span dojoType="dijit.Tooltip" connectId="one" id="one_tooltip">
<span data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'one'" id="one_tooltip">
<b>
<span style="color: blue;">rich formatting</span>
<span style="color: red; font-size: x-large;"><i>!</i></span>
</b>
</span>
</div>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper
sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum
Expand Down Expand Up @@ -156,6 +156,6 @@ <h2>A Tooltip: (#10046)</h2>
sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos.
</p>

</body>
</html>

0 comments on commit 56ee55d

Please sign in to comment.