Lungo.Notification.coffee 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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. ATTRIBUTE = lng.Constants.ATTRIBUTE
  13. BINDING = lng.Constants.BINDING
  14. TRANSITION = lng.Constants.TRANSITION
  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. MARKUP_NOTIFICATION = "<div class=\"notification\"><div class=\"window\"></div></div>"
  29. ###
  30. ###
  31. show = (icon, title, seconds, callback) ->
  32. markup = undefined
  33. if icon?
  34. markup = _markup(title, null, icon)
  35. else
  36. data_loading = lng.Attributes.loading.html
  37. markup = data_loading.replace(BINDING.START + BINDING.KEY + BINDING.END, "icon white")
  38. _show markup, "growl"
  39. _hide seconds, callback
  40. ###
  41. ###
  42. hide = ->
  43. _window.removeClass("show")
  44. setTimeout (->
  45. _el.removeClass("show").removeClass("html").removeClass("confirm").removeClass("notify").removeClass "growl"
  46. ), (TRANSITION.DURATION / 2)
  47. ###
  48. ###
  49. confirm = (options) ->
  50. _options = options
  51. markup = _markup(options.title, options.description, options.icon)
  52. markup += _button_markup(options.accept, "accept")
  53. markup += _button_markup(options.cancel, "cancel")
  54. _show markup, "confirm"
  55. ###
  56. ###
  57. success = (title, description, icon, seconds, callback) ->
  58. _notify title, description, icon, "success", seconds, callback
  59. ###
  60. ###
  61. error = (title, description, icon, seconds, callback) ->
  62. _notify title, description, icon, "error", seconds, callback
  63. ###
  64. ###
  65. html = (markup, button, style, seconds) ->
  66. if button
  67. markup += "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>"
  68. _show markup, "html #{style}"
  69. _hide seconds
  70. ###
  71. ###
  72. push = (title, icon, style) ->
  73. _show _markup(title, null, icon), "push #{style}", false
  74. _hide 5
  75. _init = ->
  76. lng.dom(SELECTOR.BODY).append MARKUP_NOTIFICATION
  77. _el = lng.dom(SELECTOR.NOTIFICATION)
  78. _window = _el.children(".window")
  79. _subscribeEvents()
  80. _show = (html, stylesheet, block = true) ->
  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. ), (TRANSITION.DURATION / 2)
  90. _hide = (seconds, callback) ->
  91. if seconds? and seconds > 0
  92. setTimeout (=>
  93. if callback
  94. callback.call undefined, callback
  95. else
  96. do hide
  97. ), seconds * 1000
  98. _notify = (title, description, icon, stylesheet, seconds, callback) ->
  99. _show _markup(title, description, icon), stylesheet
  100. _hide seconds, callback
  101. _markup = (title, description, icon) ->
  102. description = (if not description then "&nbsp;" else description)
  103. title = (if not title then "&nbsp;" else title)
  104. "<span class=\"icon " + icon + "\"></span><strong class=\"text bold\">" + title + "</strong><small>" + description + "</small>"
  105. _button_markup = (options, callback) ->
  106. "<a href=\"#\" data-callback=\"" + callback + "\" class=\"button anchor large text thin\">" + options.label + "</a>"
  107. _subscribeEvents = ->
  108. lng.dom(SELECTOR.CONFIRM_BUTTONS).tap (event) ->
  109. button = lng.dom(this)
  110. if _options[button.data("callback")]?
  111. callback = _options[button.data("callback")].callback
  112. callback.call callback if callback
  113. hide()
  114. lng.dom(SELECTOR.WINDOW_CLOSABLE).tap hide
  115. _init()
  116. show: show
  117. hide: hide
  118. error: error
  119. success: success
  120. confirm: confirm
  121. html: html
  122. push: push