Created
March 5, 2012 05:05
-
-
Save arches/1976701 to your computer and use it in GitHub Desktop.
Javascript for Flash Messages
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Arch; if (!Arch) Arch = {}; // set up custom namespace 'arch' | |
Arch.Flash = { | |
showError: function(message) { | |
if (message == "") return; | |
$('#flash-msg .user-msg-detail').removeClass('notice'); | |
$('#flash-msg .user-msg-detail').addClass('error'); | |
$('#flash-msg .user-msg-detail span').html(message); | |
$('#flash-msg').show(); | |
}, | |
showNotice: function(message) { | |
if (message == "") return; | |
if ($('#flash-msg .user-msg-detail').hasClass('error')) return; | |
$('#flash-msg .user-msg-detail').addClass('notice'); | |
$('#flash-msg .user-msg-detail span').html(message); | |
$('#flash-msg').show(); | |
this._fadeOut(); | |
}, | |
_fadeOut: function() { | |
setTimeout("$('#flash-msg').fadeOut('slow')", 4000); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 'Arch' is my custom namespace | |
describe("Showing an error", function() { | |
var errorText = "Something incredibly untoward has happened."; | |
it("updates the element classes", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showError(errorText); | |
expect($("#flash-msg .user-msg-detail")).toHaveClass("error"); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice"); | |
}); | |
it("sets the text of the flash element", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showError(errorText); | |
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something incredibly untoward has happened."); | |
}); | |
it("sets the text of the flash element", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showError(errorText); | |
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something incredibly untoward has happened."); | |
}); | |
it("doesn't fade the message automatically", function(){ | |
spyOn(Arch.Flash, "_fadeOut"); | |
loadFixtures("flash.html"); | |
Arch.Flash.showError(errorText); | |
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled(); | |
}); | |
it("does nothing if no message is passed", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showError(""); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error"); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice"); | |
}); | |
}); | |
describe("Showing a notice", function(){ | |
var noticeText = "Something nice has happened!"; | |
it("updates the element classes", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showNotice(noticeText); | |
expect($("#flash-msg .user-msg-detail")).toHaveClass("notice"); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error"); | |
}); | |
it("sets the text of the flash element", function() { | |
loadFixtures("flash.html"); | |
Arch.Flash.showNotice(noticeText); | |
expect($("#flash-msg .user-msg-detail span")).toHaveText("Something nice has happened!"); | |
}); | |
it("fades the message automatically", function(){ | |
spyOn(Arch.Flash, "_fadeOut"); | |
loadFixtures("flash.html"); | |
Arch.Flash.showNotice(noticeText); | |
expect(Arch.Flash._fadeOut).toHaveBeenCalled(); | |
}); | |
it("does nothing if no message is passed", function() { | |
spyOn(Arch.Flash, "_fadeOut"); | |
loadFixtures("flash.html"); | |
Arch.Flash.showNotice(""); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("error"); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice"); | |
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled(); | |
}); | |
it("does nothing if there is already an error", function() { | |
spyOn(Arch.Flash, "_fadeOut"); | |
loadFixtures("flash.html"); | |
Arch.Flash.showError("oh noes"); | |
Arch.Flash.showNotice("oh yeah"); | |
expect($("#flash-msg .user-msg-detail")).toHaveClass("error"); | |
expect($("#flash-msg .user-msg-detail")).not.toHaveClass("notice"); | |
expect(Arch.Flash._fadeOut).not.toHaveBeenCalled(); | |
expect($("#flash-msg .user-msg-detail span")).toHaveText("oh noes"); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="user-msg-container" id="flash-msg" style="display:none;"> | |
<div class="user-msg"> | |
<div class="user-msg-detail"> | |
<span></span> | |
<a href="#" onclick="$('#flash-msg').fadeOut('fast'); return false;" class="close">x</a> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment