New method for notifications: push()

example/app/app.js

@@ -97,7 +97,7 @@ Lungo.Events.init({
 
 
     'tap article#notification a[data-action=normal]': function() {
-        Lungo.Notification.show('Title', 'message', 2);
+        Lungo.Notification.show('user', 'Title', 2);
     },
 
     'tap article#notification a[data-action=loading]': function() {
@@ -106,11 +106,11 @@ Lungo.Events.init({
     },
 
     'tap article#notification a[data-action=success]': function() {
-        Lungo.Notification.success('Title', 'Description', 'message', 2);
+        Lungo.Notification.success('Title', 'Description', 'ok', 2);
     },
 
     'tap article#notification a[data-action=error]': function() {
-        Lungo.Notification.error('Title', 'Description', 'message', 2);
+        Lungo.Notification.error('Title', 'Description', 'remove', 2);
     },
 
     'tap article#notification a[data-action=confirm]': function() {
@@ -132,13 +132,13 @@ Lungo.Events.init({
     },
 
     'tap article#notification a[data-action=html]': function() {
-        Lungo.Notification.html('<h1>Hello World</h1>', true);
+        Lungo.Notification.html('<h1>Hello World</h1>', "Close");
     },
 
     'tap article#notification a[data-action=chaining]': function() {
-        Lungo.Notification.show('Title', 'message', 2, function() {
-            Lungo.Notification.error('Title 2', 'Description 2', 'message',  2, function() {
-                Lungo.Notification.show('Title 3', 'Description 3', 'message', false, 2, function() {
+        Lungo.Notification.show('user', 'title', 2, function() {
+            Lungo.Notification.error('Title 2', 'Description 2', 'remove',  2, function() {
+                Lungo.Notification.show('home', 'title 2', false, 2, function() {
                     Lungo.Notification.html('<h1>Hello World</h1>', true);
                     // Lungo.Notification.hide();
                 });
@@ -154,9 +154,13 @@ Lungo.ready(function() {
     // Lungo.Router.section("notification");
 
     // Lungo.Notification.show();
+    // Lungo.Notification.show("home", "Please wait...");
+    // Lungo.Notification.show("magic");
+
     // Lungo.Notification.show("Please wait", "user", 2, function(){ alert(1); });
-    // Lungo.Notification.error('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel');
-    // Lungo.Notification.success('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel', 2, function(){alert(1)});
+
+    // Lungo.Notification.error('Lorem ipsum dolor sit amet', "    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veritatis similique sed qui doloribus inventore doloremque temporibus ab totam...", 'remove');
+    // Lungo.Notification.success('Lorem ipsum dolor sit amet', "    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veritatis similique sed qui doloribus inventore doloremque temporibus ab totam...", 'ok');
     // Lungo.Notification.confirm({
     //     icon: 'user',
     //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
@@ -172,5 +176,7 @@ Lungo.ready(function() {
     //         callback: function(){ alert("No!"); }
     //     }
     // });
+    // Lungo.Notification.html("<h1 class='title'>Title</h1><article>aslkdkals</article><a href='#' class='button large anchor' >Seleccionar</a>", "Cancelar");
+    Lungo.Notification.push("Lorem ipsum dolor sit amet", "home");
 
 });

src/Lungo.coffee

@@ -1,6 +1,6 @@
 Lungo = Lungo or {}
 
-Lungo.VERSION = "2.2"
+Lungo.VERSION = "2.1.0305"
 
 Lungo.DEVICE = null
 Lungo.Element or (Lungo.Element = {})

src/modules/Lungo.Notification.coffee

@@ -21,7 +21,7 @@ Lungo.Notification = do(lng = Lungo) ->
     MODAL: ".notification .window"
     MODAL_HREF: ".notification .window a"
     WINDOW_CLOSABLE: ".notification [data-action=close], .notification > .error, .notification > .success"
-    CONFIRM_BUTTONS: ".notification .confirm a.button"
+    CONFIRM_BUTTONS: ".notification .confirm a.button, .notification .push"
 
   STYLE =
     MODAL: "modal"
@@ -35,9 +35,9 @@ Lungo.Notification = do(lng = Lungo) ->
 
   ###
   ###
-  show = (title, icon, seconds, callback) ->
+  show = (icon, title, seconds, callback) ->
     markup = undefined
-    if title isnt undefined
+    if icon?
       markup = _markup(title, null, icon)
     else
       data_loading = lng.Attributes.loading.html
@@ -79,16 +79,17 @@ Lungo.Notification = do(lng = Lungo) ->
 
   ###
   ###
-  _notify = (title, description, icon, stylesheet, seconds, callback) ->
-    _show _markup(title, description, icon), stylesheet
-    _hide seconds, callback  if seconds
+  html = (markup, button) ->
+    markup += (if (button) then "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>" else "")
+    _show markup, "html"
 
 
   ###
   ###
-  html = (markup, button) ->
-    markup += (if (button) then "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>" else "")
-    _show markup, "html"
+  push = (title, icon) ->
+    markup = _markup(title, null, icon)
+    _show markup, "push", false
+    _hide seconds = 5
 
   _init = ->
     lng.dom(SELECTOR.BODY).append MARKUP_NOTIFICATION
@@ -96,8 +97,10 @@ Lungo.Notification = do(lng = Lungo) ->
     _window = _el.children(".window")
     _subscribeEvents()
 
-  _show = (html, stylesheet) ->
-    _el.show()
+  _show = (html, stylesheet, block = true) ->
+    _el.removeClass("push").show().remove
+    unless block then _el.addClass("push")
+
     _window.removeClass STYLE.SHOW
     _window.removeClass("error").removeClass("success").removeClass("html").removeClass "growl"
     _window.addClass stylesheet
@@ -111,13 +114,17 @@ Lungo.Notification = do(lng = Lungo) ->
       miliseconds = seconds * 1000
       setTimeout (->
         hide()
-
         # if (callback) callback.apply(callback);
         setTimeout callback, ANIMATION_MILISECONDS  if callback
       ), miliseconds
 
+  _notify = (title, description, icon, stylesheet, seconds, callback) ->
+    _show _markup(title, description, icon), stylesheet
+    _hide seconds, callback  if seconds
+
   _markup = (title, description, icon) ->
     description = (if not description then "&nbsp;" else description)
+    title = (if not title then "&nbsp;" else title)
     "<span class=\"icon " + icon + "\"></span><strong class=\"text bold\">" + title + "</strong><small>" + description + "</small>"
 
   _button_markup = (options, callback) ->
@@ -126,8 +133,9 @@ Lungo.Notification = do(lng = Lungo) ->
   _subscribeEvents = ->
     lng.dom(SELECTOR.CONFIRM_BUTTONS).tap (event) ->
       button = lng.dom(this)
-      callback = _options[button.data("callback")].callback
-      callback.call callback  if callback
+      if _options[button.data("callback")]?
+        callback = _options[button.data("callback")].callback
+        callback.call callback if callback
       hide()
 
     lng.dom(SELECTOR.WINDOW_CLOSABLE).tap hide
@@ -139,3 +147,4 @@ Lungo.Notification = do(lng = Lungo) ->
   success: success
   confirm: confirm
   html: html
+  push: push

src/stylesheets/lungo.widgets.notification.styl

@@ -21,15 +21,18 @@ WINDOW_WIDTH = 280px
   z-index: 1980
   display: none
 
+  &.push
+    height: (HEADER_HEIGHT / 1.75)
+
   & .window
     position: relative
     opacity: 0
     transition (all TRANSITION_TIME)
     text-align: center
-
     &.show
       opacity: 1
       transition-delay(TRANSITION_TIME)
+
     & strong, small
       display: block
 
@@ -37,48 +40,73 @@ WINDOW_WIDTH = 280px
       left: 50%
       top: 50%
       width: LOADING
+      height: LOADING
       margin: -(LOADING / 2) auto auto -(LOADING / 2)
-      padding: 24px 8px
+      padding: 0 8px
       transform(scale(0.2))
       &.show
         transform(scale(1.0))
       & > .icon
-        font-size: 3.6em
-        line-height: 1.0em
+        font-size: 4em
+        line-height: LOADING
         & ~ strong
-          margin-bottom: -12px
-      & small
-        display: none
+          position: relative
+          top: -(LOADING / 4.5)
+          height: 18px
+          overflow: hidden
+      & > .loading
+        top: 26px
+        display: block
+
 
     &:not(.growl)
-      width: WINDOW_WIDTH
       left: 0
       top: 0
-      margin: (HEADER_HEIGHT / 2) auto 0
 
-      transform(translateY(100%))
+      &:not(.push)
+        width: WINDOW_WIDTH
+        margin: (HEADER_HEIGHT / 2) auto 0
+        transform(translateY(100%))
+      &.push
+        transform(translateY(-100%))
+        text-align: left
+        height: H = (HEADER_HEIGHT / 1.75)
+        line-height: H
+        padding: 0 8px
+        & .icon
+          font-size: FONT_SIZE_LARGE
+          float: left
+          display: inline
+          margin-right: 6px
+
+
       &.show
         transform(translateY(0%))
 
-      &:not(.html)
-        padding-top: 24px
+      &.success, &.error, &.confirm
+        padding-top: 16px
         & > .icon
-          font-size: 4.0em
+          font-size: 5em
           line-height: 1.0em
         & > strong
           font-size: FONT_SIZE_BIG
+          padding-top: 4px
+        & small
+          padding-top: 8px
+          padding-bottom: 16px
         & > strong, & small
-          padding: 0 16px 16px 16px
+          padding-left: 16px
+          padding-right: 16px
 
       &.html
-        & .close
-          position: absolute
-          top: -14px
-          right: -14px
+        & .title
+          height: HEADER_HEIGHT
+          line-height: HEADER_HEIGHT
+          font-size: FONT_SIZE_LARGE
 
-          font-size: 14px
-          line-height: 24px
-          font-weight: normal
-          width: 24px
-          height: 24px
-          border-radius: 14px
+      & button, & .button
+        display: block
+        margin-bottom: 1px
+        height: 48px
+        line-height: 48px
+        border: none

src/stylesheets/theme.lungo.styl

@@ -17,7 +17,7 @@ CONTENT         = #f4f5f5
 COLOR           = #333
 COLOR_secondary = #BFBFBF
 COLOR_cancel    = #EE6557
-COLOR_accept    = #3FB58E
+COLOR_accept    = #52bb93
 DARK            = #222
 DARK_light      = lighten(DARK, 25%)
 DARK_dark       = darken(DARK, 15%)
@@ -216,28 +216,34 @@ nav
 /* -------------------------- NOTIFICATION -------------------------- */
 .notification
   color: #fff
-  background-color: rgba(0,0,0,0.75)
+  &:not(.push)
+    background-color: rgba(0,0,0,0.6)
   & .window
     &.growl
-      background: rgba(0,0,0,0.8)
+      background: rgba(0,0,0,0.75)
     &:not(.growl)
+      box-shadow(0 0 8px #444)
+      & button, .button
+        background: #fff
+        color: THEME_dark
+    &.confirm, &.html
       background: #e6e6e6
       color: #222
-      box-shadow(0 0 8px #000)
-      & button, .button
-        background: #fff !important
-        box-shadow: none !important
-        color: THEME_dark !important
-        border-radius 0px !important
-        border: none !important
-        margin-bottom: 1px
-      &.error
-        background: darken(COLOR_cancel, 25%)
-        color: #fff
-      &.success
-        background: darken(COLOR_accept, 25%)
+    &.error
+      background: COLOR_cancel
+    &.success
+      background: COLOR_accept
+    &.error, &.success
+      color: #fff
+      & small
+        opacity: 0.75
+        font-weight: 100
+    &.html
+      & .title
+        background: THEME
         color: #fff
-
+    &.push
+      background: rgba(0,0,0,0.65)
 /* -------------------------- BUTTONS -------------------------- */
 header
   & .button, button