Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: alexkalderimis/backbone.js-growl-notifications
base: 50d04dbe71
...
head fork: alexkalderimis/backbone.js-growl-notifications
compare: e9911492ad
  • 4 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 147 additions and 50 deletions.
  1. +79 −50 Notifications.coffee
  2. +68 −0 notifications.css
View
129 Notifications.coffee
@@ -1,58 +1,87 @@
-# Show us a Growl style notification.
-# ----------
-class App.Views.NotificationsView extends Backbone.View
+# Set Up export mechanism.
+
+root = exports ? this
+
+root.growlr ?= new Object()
+
+growlr = root.growlr
+
+# Alias for convenience.
+View = Backbone.View
+
+class growlr.NotificationContainer extends Backbone.View
+
+ tagName: "ul"
- el: "ul#notifications"
+ className: "notifications"
- # Listen in on notifications.
- # bind = string; which message to listen to?
- initialize: (options) ->
- App.Mediator.bind(options?.bind or "notification", @notify)
- @
+ defaults:
+ mediator: root.App?.Mediator
+ timeout: 5000
+ sticky: false
+ title: "Message"
+ text: "Something happened"
+ eventName: "notification"
+ level: "info"
+ slideDuration: 90
+ classes: "right"
- # Create a new notification.
- # type = notify/warn/error; type of the message, determines CSS class
- # sticky = true/false; close automagically or stick?
- notify: (text, title, type="notify", sticky=false) =>
- $(@el).append(new App.Views.NotificationView(text, title, type, sticky).render().el)
+ # Set up the container.
+ # Attaches a ul to the DOM.
+ # Sets the options as passed in.
+ # Starts listing for notification events
+ initialize: (options) ->
+ options ?= {}
+ _.defaults options, @defaults
+ @settings = options
+ @render().mediator?.on @eventName, @notify
+ @
- # Just to add out name to the data attr.
- render: ->
- $(@el).attr("data-view", "NotificationsView")
- @
+ # Create a new notification.
+ notify: (options) ->
+ _.defaults options, @settings
+ @$el.append new growlr.Notification(options).render().el
+
+ # Add the container element.
+ render: ->
+ @$el.appendTo 'body'
+ @$el.addClass @settings.classes
+ if @settings.extraClasses
+ @$el.addClass @settings.extraClasses
+ @$el.data view: "bbgrowl.NotificationContainer"
+ @
# The individual notification.
# ----------
-class App.Views.NotificationView extends Backbone.View
-
- # Element does not exist yet, but will be a `<li>`.
- tagName: "li"
-
- # Cache the template function for a single item.
- template: _.template(
- do ->
- result = ""
- $.ajax
- async: false
- url: "_notification.html"
- success: (data) -> result = data
- result
- )
-
- # The DOM events.
- events:
- "click a": "close"
-
- # Set on the Object and chain so we can render.
- initialize: (@text, @title, @type, @sticky) -> @
-
- render: ->
- $(@el).hide().html(@template({'text': @text, 'title': @title})).addClass(@type).slideDown().attr("data-view", "NotificationView")
-
- # Pure love :)
- setTimeout(@close, 3000) unless @sticky
-
- @
-
- close: => $(@el).slideUp("fast")
+class growlr.Notification extends View
+
+ # Element does not exist yet, but will be a `<li>`.
+ tagName: "li"
+
+ template: _.template """
+ <div>
+ <h1><%= title %></h1>
+ <a class="close">close</a>
+ <p><%= text %></p>
+ </div>
+ """
+
+ # The DOM events.
+ events:
+ "click a": "close"
+
+ # Set on the Object and chain so we can render.
+ initialize: (options) ->
+ _.extend @, options
+
+ render: ->
+ @$el.hide()
+ .html( @template(@) )
+ .addClass( @level )
+ .data(view: "bbgrowl.Notification")
+ .slideDown =>
+ setTimeout(@close, @timeout) unless @sticky
+ @
+
+ close: => @$el.slideUp @slideDuration
View
68 notifications.css
@@ -0,0 +1,68 @@
+ul.notifications {
+ position: fixed;
+ top: 10px;
+ z-index: 1;
+}
+
+ul.notifications.withnav {
+ top: 50px;
+}
+
+ul.notifications.right {
+ right: 20px;
+}
+
+ul.notifications.left {
+ left: 20px
+}
+
+ul.notifications li {
+ margin-bottom: 5px;
+ list-style-type: none;
+ border: 1px solid #EEE;
+ border-bottom-color: #CACACA;
+ border-radius: 10px;
+ box-shadow: 0 1px 4px 0 #DDD;
+ position: relative;
+ width: 250px;
+ opacity: 0.9;
+ background: #333;
+ color: white;
+}
+
+ul.notifications li.error {
+ background: red;
+}
+
+ul.notifications li.success {
+ background: #228B22;
+}
+
+ul.notifications li.warning {
+ background: #CE5C0A;
+}
+
+ul.notifications li div {
+ padding: 15px 20px;
+}
+
+ul.notifications li div h1 {
+ margin: 0 0 5px 0;
+ font-size: 22px;
+ font-weight: bold;
+ color: white;
+}
+ul.notifications li div a {
+ position: absolute;
+ top: 3px;
+ right: 10px;
+ cursor: pointer;
+ color: #888;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+ul.notifications li div p {
+ margin: 0
+ padding: 0;
+}

No commit comments for this range

Something went wrong with that request. Please try again.