snackbar.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. // snackbar
  2. (function ($) {
  3. 'use strict';
  4. var Snackbar = function (options) {
  5. this.options = options;
  6. this.$element = $('<div class="snackbar-inner">' + this.options.content + '</div>');
  7. };
  8. Snackbar.DEFAULTS = {
  9. alive: 6000,
  10. content: '&nbsp;',
  11. hide: function () {},
  12. show: function () {}
  13. };
  14. Snackbar.prototype.fbtn = function (margin) {
  15. if ($(window).width() < 768 && $('.fbtn-container').length) {
  16. var str = 'translateY(-' + margin + 'px)';
  17. $('.fbtn-container').css({
  18. '-webkit-transform': str,
  19. 'transform': str
  20. });
  21. };
  22. };
  23. Snackbar.prototype.hide = function () {
  24. var that = this;
  25. this.$element.removeClass('in');
  26. clearTimeout(this.$element.data('timer'));
  27. if ($.support.transition) {
  28. this.$element.one('bsTransitionEnd', function () {
  29. that.options.hide(that.options);
  30. that.$element.remove();
  31. });
  32. } else {
  33. that.options.hide(that.options);
  34. that.$element.remove();
  35. }
  36. this.fbtn('0');
  37. };
  38. Snackbar.prototype.show = function () {
  39. var that = this;
  40. if (!$('.snackbar').length) {
  41. $(document.body).append('<div class="snackbar"></div>');
  42. };
  43. this.$element.appendTo('.snackbar').show().addClass(function () {
  44. that.$element.on('click', '[data-dismiss="snackbar"]', function () {
  45. that.hide();
  46. });
  47. that.$element.data('timer', setTimeout(function () {
  48. that.hide();
  49. }, that.options.alive));
  50. that.$element.on('mouseenter', function () {
  51. clearTimeout(that.$element.data('timer'));
  52. }).on('mouseleave', function () {
  53. that.$element.data('timer', setTimeout(function () {
  54. that.hide();
  55. }, that.options.alive));
  56. });
  57. that.options.show(that.options);
  58. return 'in';
  59. });
  60. this.fbtn(this.$element.outerHeight());
  61. };
  62. function Plugin (option) {
  63. return this.each(function () {
  64. var $this = $(document.body);
  65. var data = $this.data('bs.snackbar');
  66. var options = $.extend({}, Snackbar.DEFAULTS, option);
  67. if (!data) {
  68. $this.data('bs.snackbar', (data = new Snackbar(options)));
  69. data.show();
  70. } else if ($('.snackbar-inner').length && !$('.snackbar-inner.old').length) {
  71. $('.snackbar-inner.in').addClass('old')
  72. data.hide();
  73. if ($.support.transition) {
  74. $(document).one('bsTransitionEnd', '.snackbar-inner.old', function () {
  75. $this.data('bs.snackbar', (data = new Snackbar(options)));
  76. data.show();
  77. });
  78. } else {
  79. $this.data('bs.snackbar', (data = new Snackbar(options)));
  80. data.show();
  81. };
  82. } else if (!$('.snackbar-inner').length) {
  83. $this.data('bs.snackbar', (data = new Snackbar(options)));
  84. data.show();
  85. };
  86. });
  87. };
  88. var old = $.fn.snackbar;
  89. $.fn.snackbar = Plugin;
  90. $.fn.snackbar.Constructor = Snackbar;
  91. $.fn.snackbar.noConflict = function () {
  92. $.fn.snackbar = old;
  93. return this;
  94. };
  95. }(jQuery));