toast.script.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. (function(){
  2. "use strict";
  3. $.Toast = function(title, message, type, options){
  4. var defaultOptions = {
  5. appendTo: "body",
  6. stack: false,
  7. position_class: "toast-bottom-right",
  8. fullscreen:false,
  9. width: 250,
  10. spacing:20,
  11. timeout: 4000,
  12. has_close_btn:true,
  13. has_icon:true,
  14. sticky:false,
  15. border_radius:6,
  16. has_progress:false,
  17. rtl:false
  18. }
  19. var $element = null;
  20. var $options = $.extend(true, {}, defaultOptions, options);
  21. var spacing = $options.spacing;
  22. var css = {
  23. "position":($options.appendTo == "body") ? "fixed" : "absolute",
  24. "min-width":$options.width,
  25. "display":"none",
  26. "border-radius":$options.border_radius,
  27. "z-index":99999
  28. }
  29. $element = $('<div class="toast-item-wrapper ' + type + ' ' + $options.position_class + '"></div>');
  30. $('<p class="toast-title">' + title + '</p>').appendTo($element);
  31. $('<p class="toast-message">' + message + '</p>').appendTo($element);
  32. if($options.fullscreen){
  33. $element.addClass( "fullscreen" );
  34. }
  35. if($options.rtl){
  36. $element.addClass( "rtl" );
  37. }
  38. if($options.has_close_btn){
  39. $('<span class="toast-close">&times;</span>').appendTo($element);
  40. if( $options.rtl){
  41. css["padding-left"] = 20;
  42. } else {
  43. css["padding-right"] = 20;
  44. }
  45. }
  46. if($options.has_icon){
  47. $('<i class="toast-icon toast-icon-' + type + '"></i>').appendTo($element);
  48. if( $options.rtl){
  49. css["padding-right"] = 50;
  50. } else {
  51. css["padding-left"] = 50;
  52. }
  53. }
  54. if($options.has_progress && $options.timeout > 0){
  55. $('<div class="toast-progress"></div>').appendTo($element);
  56. }
  57. if($options.sticky){
  58. $options.spacing = 0;
  59. spacing = 0;
  60. switch($options.position_class){
  61. case "toast-top-left" : {
  62. css["top"] = 0;
  63. css["left"] = 0;
  64. break;
  65. }
  66. case "toast-top-right" : {
  67. css["top"] = 0;
  68. css["left"] = 0;
  69. break;
  70. }
  71. case "toast-top-center" : {
  72. css["top"] = 0;
  73. css["left"] = css["right"] = 0;
  74. css["width"] = "100%";
  75. break;
  76. }
  77. case "toast-bottom-left" : {
  78. css["bottom"] = 0;
  79. css["left"] = 0;
  80. break;
  81. }
  82. case "toast-bottom-right" : {
  83. css["bottom"] = 0;
  84. css["right"] = 0;
  85. break;
  86. }
  87. case "toast-bottom-center" : {
  88. css["bottom"] = 0;
  89. css["left"] = css["right"] = 0;
  90. css["width"] = "100%";
  91. break;
  92. }
  93. default : {
  94. break;
  95. }
  96. }
  97. }
  98. if($options.stack){
  99. if($options.position_class.indexOf("toast-top") !== -1 ){
  100. $($options.appendTo).find('.toast-item-wrapper').each(function(){
  101. css["top"] = parseInt($(this).css("top")) + this.offsetHeight + spacing;
  102. });
  103. } else if($options.position_class.indexOf("toast-bottom") !== -1 ){
  104. $($options.appendTo).find('.toast-item-wrapper').each(function(){
  105. css["bottom"] = parseInt($(this).css("bottom")) + this.offsetHeight + spacing;
  106. });
  107. }
  108. }
  109. $element.css(css);
  110. $element.appendTo($options.appendTo);
  111. if($element.fadeIn) {
  112. $element.fadeIn();
  113. }else {
  114. $alert.css({display: 'block', opacity: 1});
  115. }
  116. function removeToast(){
  117. $.Toast.remove( $element );
  118. }
  119. if($options.timeout > 0){
  120. setTimeout(removeToast, $options.timeout);
  121. if($options.has_progress){
  122. $(".toast-progress", $element).animate({"width":"100%"}, $options.timeout);
  123. }
  124. }
  125. $(".toast-close", $element).click(removeToast)
  126. return $element;
  127. }
  128. $.Toast.remove = function( $element ){
  129. "use strict";
  130. if($element.fadeOut)
  131. {
  132. $element.fadeOut(function(){
  133. return $element.remove();
  134. });
  135. }
  136. else{
  137. $element.remove();
  138. }
  139. }
  140. })();