BioTorrents.de’s version of Gazelle
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.

semanticUI.js 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. $.noty.themes.semanticUI = {
  2. name: 'semanticUI',
  3. template: '<div class="ui message"><div class="content"><div class="header"></div></div></div>',
  4. animation: {
  5. open : {
  6. animation: 'fade',
  7. duration : '800ms'
  8. },
  9. close: {
  10. animation: 'fade left',
  11. duration : '800ms'
  12. }
  13. },
  14. modal : {
  15. css: {
  16. position : 'fixed',
  17. width : '100%',
  18. height : '100%',
  19. backgroundColor: '#000',
  20. zIndex : 10000,
  21. opacity : 0.6,
  22. display : 'none',
  23. left : 0,
  24. top : 0
  25. }
  26. },
  27. style : function () {
  28. this.$message = this.$bar.find('.ui.message');
  29. this.$message.find('.header').html(this.options.header);
  30. this.$message.find('.content').append(this.options.text);
  31. this.$bar.css({
  32. margin : '0.5em',
  33. position: 'relative'
  34. });
  35. if (this.options.icon) {
  36. this.$message.addClass('icon').prepend($('<i/>').addClass(this.options.icon));
  37. }
  38. this.$progressBar.css({
  39. position : 'absolute',
  40. left : 0,
  41. bottom : 0,
  42. height : 4,
  43. width : '100%',
  44. backgroundColor: '#000000',
  45. opacity : 0.2,
  46. '-ms-filter' : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)',
  47. filter : 'alpha(opacity=20)'
  48. });
  49. switch (this.options.size) {
  50. case 'mini':
  51. this.$message.addClass('mini');
  52. break;
  53. case 'tiny':
  54. this.$message.addClass('tiny');
  55. break;
  56. case 'small':
  57. this.$message.addClass('small');
  58. break;
  59. case 'large':
  60. this.$message.addClass('large');
  61. break;
  62. case 'big':
  63. this.$message.addClass('big');
  64. break;
  65. case 'huge':
  66. this.$message.addClass('huge');
  67. break;
  68. case 'massive':
  69. this.$message.addClass('massive');
  70. break;
  71. }
  72. switch (this.options.type) {
  73. case 'info':
  74. this.$message.addClass('info');
  75. break;
  76. case 'warning':
  77. this.$message.addClass('warning');
  78. break;
  79. case 'error':
  80. this.$message.addClass('error');
  81. break;
  82. case 'negative':
  83. this.$message.addClass('negative');
  84. break;
  85. case 'success':
  86. this.$message.addClass('success');
  87. break;
  88. case 'positive':
  89. this.$message.addClass('positive');
  90. break;
  91. case 'floating':
  92. this.$message.addClass('floating');
  93. break;
  94. }
  95. },
  96. callback: {
  97. onShow : function () {
  98. // Enable transition
  99. this.$bar.addClass('transition');
  100. // Actual transition
  101. this.$bar.transition(this.options.animation.open);
  102. },
  103. onClose: function () {
  104. this.$bar.transition(this.options.animation.close);
  105. }
  106. }
  107. };