Element / Flash Message
This element shows a flash message at the top of the browser.
HTML
<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="com-chilipeppr-elem-flashmsg" data-container="body" data-toggle="popover" data-placement="auto"></div>
CSS
.com-chilipeppr-elem-flashmsg .popover .arrow {
display:none;
}
.com-chilipeppr-elem-flashmsg .popover {
max-width: none;
}
JavaScript
cpdefine("inline:com-chilipeppr-elem-flashmsg", ["chilipeppr_ready"], function () {
//console.log("Inside of define for com-chilipeppr-elem-flashmsg");
return {
id: "com-chilipeppr-elem-flashmsg",
url: "http://fiddle.jshell.net/jlauer/qp7Em/show/light/",
fiddleurl: "http://jsfiddle.net/jlauer/qp7Em/",
name: "Element / Flash Messsage",
desc: "This element shows a flash message at the top of the browser.",
publish: null,
subscribe: "/com-chilipeppr-elem-flashmsg/flashmsg",
queue: [],
init: function () {
console.log("flashmsg - init called");
chilipeppr.subscribe(this.subscribe, this, this.showQueue.bind(this));
},
showQueue: function(title, body, delay, allowImmediateDismiss) {
//debugger;
console.log("flashmsg - just got a showQueue(). title:", title, "body:", body, "delay:", delay, "allowImmediateDismiss:", allowImmediateDismiss);
// queue it
this.queue.push({title: title, body: body, delay: delay, allowImmediateDismiss: allowImmediateDismiss});
//console.log("just queued a flash msg. queue:", this.queue.length);
this.playNext();
/*
if (this.isShowing) {
// queue it
// however, if the current flash msg is allowImmediateDismiss
// the dismiss it and immediately go to next queue item
//console.log("msg showing. so queueing");
this.queue.push({title: title, body: body, delay: delay, allowImmediateDismiss: allowImmediateDismiss});
} else {
// show immediately
this.show.apply(this, arguments);
}
*/
},
isShowing: false,
allowImmediateDismiss: false,
title: null,
...