DotaNoobs main site.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

176 lines
4.8 KiB

  1. /*! UIkit 2.5.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
  2. (function(addon) {
  3. if (typeof define == "function" && define.amd) { // AMD
  4. define("uikit-notify", ["uikit"], function(){
  5. return jQuery.UIkit.notify || addon(window, window.jQuery, window.jQuery.UIkit);
  6. });
  7. }
  8. if(window && window.jQuery && window.jQuery.UIkit) {
  9. addon(window, window.jQuery, window.jQuery.UIkit);
  10. }
  11. })(function(global, $, UI){
  12. var containers = {},
  13. messages = {},
  14. notify = function(options){
  15. if ($.type(options) == 'string') {
  16. options = { message: options };
  17. }
  18. if (arguments[1]) {
  19. options = $.extend(options, $.type(arguments[1]) == 'string' ? {status:arguments[1]} : arguments[1]);
  20. }
  21. return (new Message(options)).show();
  22. },
  23. closeAll = function(group, instantly){
  24. if(group) {
  25. for(var id in messages) { if(group===messages[id].group) messages[id].close(instantly); }
  26. } else {
  27. for(var id in messages) { messages[id].close(instantly); }
  28. }
  29. };
  30. var Message = function(options){
  31. var $this = this;
  32. this.options = $.extend({}, Message.defaults, options);
  33. this.uuid = "ID"+(new Date().getTime())+"RAND"+(Math.ceil(Math.random() * 100000));
  34. this.element = $([
  35. '<div class="uk-notify-message">',
  36. '<a class="uk-close"></a>',
  37. '<div>'+this.options.message+'</div>',
  38. '</div>'
  39. ].join('')).data("notifyMessage", this);
  40. // status
  41. if (this.options.status) {
  42. this.element.addClass('uk-notify-message-'+this.options.status);
  43. this.currentstatus = this.options.status;
  44. }
  45. this.group = this.options.group;
  46. messages[this.uuid] = this;
  47. if(!containers[this.options.pos]) {
  48. containers[this.options.pos] = $('<div class="uk-notify uk-notify-'+this.options.pos+'"></div>').appendTo('body').on("click", ".uk-notify-message", function(){
  49. $(this).data("notifyMessage").close();
  50. });
  51. }
  52. };
  53. $.extend(Message.prototype, {
  54. uuid: false,
  55. element: false,
  56. timout: false,
  57. currentstatus: "",
  58. group: false,
  59. show: function() {
  60. if (this.element.is(":visible")) return;
  61. var $this = this;
  62. containers[this.options.pos].show().prepend(this.element);
  63. var marginbottom = parseInt(this.element.css("margin-bottom"), 10);
  64. this.element.css({"opacity":0, "margin-top": -1*this.element.outerHeight(), "margin-bottom":0}).animate({"opacity":1, "margin-top": 0, "margin-bottom":marginbottom}, function(){
  65. if ($this.options.timeout) {
  66. var closefn = function(){ $this.close(); };
  67. $this.timeout = setTimeout(closefn, $this.options.timeout);
  68. $this.element.hover(
  69. function() { clearTimeout($this.timeout); },
  70. function() { $this.timeout = setTimeout(closefn, $this.options.timeout); }
  71. );
  72. }
  73. });
  74. return this;
  75. },
  76. close: function(instantly) {
  77. var $this = this,
  78. finalize = function(){
  79. $this.element.remove();
  80. if(!containers[$this.options.pos].children().length) {
  81. containers[$this.options.pos].hide();
  82. }
  83. delete messages[$this.uuid];
  84. };
  85. if(this.timeout) clearTimeout(this.timeout);
  86. if(instantly) {
  87. finalize();
  88. } else {
  89. this.element.animate({"opacity":0, "margin-top": -1* this.element.outerHeight(), "margin-bottom":0}, function(){
  90. finalize();
  91. });
  92. }
  93. },
  94. content: function(html){
  95. var container = this.element.find(">div");
  96. if(!html) {
  97. return container.html();
  98. }
  99. container.html(html);
  100. return this;
  101. },
  102. status: function(status) {
  103. if(!status) {
  104. return this.currentstatus;
  105. }
  106. this.element.removeClass('uk-notify-message-'+this.currentstatus).addClass('uk-notify-message-'+status);
  107. this.currentstatus = status;
  108. return this;
  109. }
  110. });
  111. Message.defaults = {
  112. message: "",
  113. status: "",
  114. timeout: 5000,
  115. group: null,
  116. pos: 'top-center'
  117. };
  118. UI["notify"] = notify;
  119. UI["notify"].message = Message;
  120. UI["notify"].closeAll = closeAll;
  121. return notify;
  122. });