Lungo.Notification.coffee 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. ###
  2. Notification system in CSS3
  3. @namespace Lungo
  4. @class Notification
  5. @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  6. ###
  7. Lungo.Notification = do(lng = Lungo) ->
  8. _options = []
  9. _el = null
  10. _window = null
  11. DELAY_TIME = 1
  12. ANIMATION_MILISECONDS = 200
  13. ATTRIBUTE = lng.Constants.ATTRIBUTE
  14. BINDING = lng.Constants.BINDING
  15. SELECTOR =
  16. BODY: "body"
  17. NOTIFICATION: ".notification"
  18. MODAL: ".notification .window"
  19. MODAL_HREF: ".notification .window a"
  20. WINDOW_CLOSABLE: ".notification [data-action=close], .notification > .error, .notification > .success"
  21. CONFIRM_BUTTONS: ".notification .confirm a.button, .notification .push"
  22. STYLE =
  23. MODAL: "modal"
  24. VISIBLE: "visible"
  25. SHOW: "show"
  26. WORKING: "working"
  27. INPUT: "input"
  28. CALLBACK_HIDE = "Lungo.Notification.hide()"
  29. MARKUP_NOTIFICATION = "<div class=\"notification\"><div class=\"window\"></div></div>"
  30. ###
  31. ###
  32. show = (icon, title, seconds, callback) ->
  33. markup = undefined
  34. if icon?
  35. markup = _markup(title, null, icon)
  36. else
  37. data_loading = lng.Attributes.loading.html
  38. markup = data_loading.replace(BINDING.START + BINDING.KEY + BINDING.END, "icon white")
  39. _show markup, "growl"
  40. _hide seconds, callback
  41. ###
  42. ###
  43. hide = ->
  44. _window.removeClass("show")
  45. setTimeout (->
  46. _el.removeClass("show").removeClass("html").removeClass("confirm").removeClass("notify").removeClass "growl"
  47. ), ANIMATION_MILISECONDS - 50
  48. ###
  49. ###
  50. confirm = (options) ->
  51. _options = options
  52. markup = _markup(options.title, options.description, options.icon)
  53. markup += _button_markup(options.accept, "accept")
  54. markup += _button_markup(options.cancel, "cancel")
  55. _show markup, "confirm"
  56. ###
  57. ###
  58. success = (title, description, icon, seconds, callback) ->
  59. _notify title, description, icon, "success", seconds, callback
  60. ###
  61. ###
  62. error = (title, description, icon, seconds, callback) ->
  63. _notify title, description, icon, "error", seconds, callback
  64. ###
  65. ###
  66. html = (markup, button) ->
  67. markup += (if (button) then "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>" else "")
  68. _show markup, "html"
  69. ###
  70. ###
  71. push = (title, icon) ->
  72. _show _markup(title, null, icon), "push", false
  73. # _hide seconds = 5
  74. _init = ->
  75. lng.dom(SELECTOR.BODY).append MARKUP_NOTIFICATION
  76. _el = lng.dom(SELECTOR.NOTIFICATION)
  77. _window = _el.children(".window")
  78. _subscribeEvents()
  79. _show = (html, stylesheet, block = true) ->
  80. console.error "show", _window.hasClass("show")
  81. if block then _el.removeClass "push" else _el.addClass "push"
  82. unless _window.hasClass("show")
  83. _el.addClass("show")
  84. else
  85. _window.removeClass STYLE.SHOW
  86. setTimeout (->
  87. _window.html html
  88. _window.attr "class", "window #{stylesheet} show"
  89. ), 400
  90. _hide = (seconds, callback) ->
  91. if seconds? and seconds > 0
  92. setTimeout (=>
  93. do hide
  94. if callback then callback.call @
  95. ), seconds * 1000
  96. _notify = (title, description, icon, stylesheet, seconds, callback) ->
  97. _show _markup(title, description, icon), stylesheet
  98. _hide seconds, callback if seconds
  99. _markup = (title, description, icon) ->
  100. description = (if not description then "&nbsp;" else description)
  101. title = (if not title then "&nbsp;" else title)
  102. "<span class=\"icon " + icon + "\"></span><strong class=\"text bold\">" + title + "</strong><small>" + description + "</small>"
  103. _button_markup = (options, callback) ->
  104. "<a href=\"#\" data-callback=\"" + callback + "\" class=\"button anchor large text thin\">" + options.label + "</a>"
  105. _subscribeEvents = ->
  106. lng.dom(SELECTOR.CONFIRM_BUTTONS).tap (event) ->
  107. button = lng.dom(this)
  108. if _options[button.data("callback")]?
  109. callback = _options[button.data("callback")].callback
  110. callback.call callback if callback
  111. hide()
  112. lng.dom(SELECTOR.WINDOW_CLOSABLE).tap hide
  113. _init()
  114. show: show
  115. hide: hide
  116. error: error
  117. success: success
  118. confirm: confirm
  119. html: html
  120. push: push