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.

372 lines
13 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. // jQuery toast plugin created by Kamran Ahmed copyright MIT license 2015
  2. if ( typeof Object.create !== 'function' ) {
  3. Object.create = function( obj ) {
  4. function F() {}
  5. F.prototype = obj;
  6. return new F();
  7. };
  8. }
  9. (function( $, window, document, undefined ) {
  10. "use strict";
  11. var Toast = {
  12. _positionClasses : ['bottom-left', 'bottom-right', 'top-right', 'top-left', 'bottom-center', 'top-center', 'mid-center'],
  13. _defaultIcons : ['success', 'error', 'info', 'warning'],
  14. init: function (options, elem) {
  15. this.prepareOptions(options, $.toast.options);
  16. this.process();
  17. },
  18. prepareOptions: function(options, options_to_extend) {
  19. var _options = {};
  20. if ( ( typeof options === 'string' ) || ( options instanceof Array ) ) {
  21. _options.text = options;
  22. } else {
  23. _options = options;
  24. }
  25. this.options = $.extend( {}, options_to_extend, _options );
  26. },
  27. process: function () {
  28. this.setup();
  29. this.addToDom();
  30. this.position();
  31. this.bindToast();
  32. this.animate();
  33. },
  34. setup: function () {
  35. var _toastContent = '';
  36. this._toastEl = this._toastEl || $('<div></div>', {
  37. class : 'jq-toast-single'
  38. });
  39. // For the loader on top
  40. _toastContent += '<span class="jq-toast-loader"></span>';
  41. if ( this.options.allowToastClose ) {
  42. _toastContent += '<span class="close-jq-toast-single">&times;</span>';
  43. };
  44. if ( this.options.text instanceof Array ) {
  45. if ( this.options.heading ) {
  46. _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
  47. };
  48. _toastContent += '<ul class="jq-toast-ul">';
  49. for (var i = 0; i < this.options.text.length; i++) {
  50. _toastContent += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + '</li>';
  51. }
  52. _toastContent += '</ul>';
  53. } else {
  54. if ( this.options.heading ) {
  55. _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
  56. };
  57. _toastContent += this.options.text;
  58. }
  59. this._toastEl.html( _toastContent );
  60. if ( this.options.bgColor !== false ) {
  61. this._toastEl.css("background-color", this.options.bgColor);
  62. };
  63. if ( this.options.textColor !== false ) {
  64. this._toastEl.css("color", this.options.textColor);
  65. };
  66. if ( this.options.textAlign ) {
  67. this._toastEl.css('text-align', this.options.textAlign);
  68. }
  69. if ( this.options.icon !== false ) {
  70. this._toastEl.addClass('jq-has-icon');
  71. if ( $.inArray(this.options.icon, this._defaultIcons) !== -1 ) {
  72. this._toastEl.addClass('jq-icon-' + this.options.icon);
  73. };
  74. };
  75. if ( this.options.class !== false ){
  76. this._toastEl.addClass(this.options.class)
  77. }
  78. },
  79. position: function () {
  80. if ( ( typeof this.options.position === 'string' ) && ( $.inArray( this.options.position, this._positionClasses) !== -1 ) ) {
  81. if ( this.options.position === 'bottom-center' ) {
  82. this._container.css({
  83. left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  84. bottom: 20
  85. });
  86. } else if ( this.options.position === 'top-center' ) {
  87. this._container.css({
  88. left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  89. top: 20
  90. });
  91. } else if ( this.options.position === 'mid-center' ) {
  92. this._container.css({
  93. left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
  94. top: ( $(window).outerHeight() / 2 ) - this._container.outerHeight()/2
  95. });
  96. } else {
  97. this._container.addClass( this.options.position );
  98. }
  99. } else if ( typeof this.options.position === 'object' ) {
  100. this._container.css({
  101. top : this.options.position.top ? this.options.position.top : 'auto',
  102. bottom : this.options.position.bottom ? this.options.position.bottom : 'auto',
  103. left : this.options.position.left ? this.options.position.left : 'auto',
  104. right : this.options.position.right ? this.options.position.right : 'auto'
  105. });
  106. } else {
  107. this._container.addClass( 'bottom-left' );
  108. }
  109. },
  110. bindToast: function () {
  111. var that = this;
  112. this._toastEl.on('afterShown', function () {
  113. that.processLoader();
  114. });
  115. this._toastEl.find('.close-jq-toast-single').on('click', function ( e ) {
  116. e.preventDefault();
  117. if( that.options.showHideTransition === 'fade') {
  118. that._toastEl.trigger('beforeHide');
  119. that._toastEl.fadeOut(function () {
  120. that._toastEl.trigger('afterHidden');
  121. });
  122. } else if ( that.options.showHideTransition === 'slide' ) {
  123. that._toastEl.trigger('beforeHide');
  124. that._toastEl.slideUp(function () {
  125. that._toastEl.trigger('afterHidden');
  126. });
  127. } else {
  128. that._toastEl.trigger('beforeHide');
  129. that._toastEl.hide(function () {
  130. that._toastEl.trigger('afterHidden');
  131. });
  132. }
  133. });
  134. if ( typeof this.options.beforeShow == 'function' ) {
  135. this._toastEl.on('beforeShow', function () {
  136. that.options.beforeShow(that._toastEl);
  137. });
  138. };
  139. if ( typeof this.options.afterShown == 'function' ) {
  140. this._toastEl.on('afterShown', function () {
  141. that.options.afterShown(that._toastEl);
  142. });
  143. };
  144. if ( typeof this.options.beforeHide == 'function' ) {
  145. this._toastEl.on('beforeHide', function () {
  146. that.options.beforeHide(that._toastEl);
  147. });
  148. };
  149. if ( typeof this.options.afterHidden == 'function' ) {
  150. this._toastEl.on('afterHidden', function () {
  151. that.options.afterHidden(that._toastEl);
  152. });
  153. };
  154. if ( typeof this.options.onClick == 'function' ) {
  155. this._toastEl.on('click', function () {
  156. that.options.onClick(that._toastEl);
  157. });
  158. };
  159. },
  160. addToDom: function () {
  161. var _container = $('.jq-toast-wrap');
  162. if ( _container.length === 0 ) {
  163. _container = $('<div></div>',{
  164. class: "jq-toast-wrap"
  165. });
  166. $('body').append( _container );
  167. } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
  168. _container.empty();
  169. }
  170. _container.find('.jq-toast-single:hidden').remove();
  171. _container.append( this._toastEl );
  172. if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
  173. var _prevToastCount = _container.find('.jq-toast-single').length,
  174. _extToastCount = _prevToastCount - this.options.stack;
  175. if ( _extToastCount > 0 ) {
  176. $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
  177. };
  178. }
  179. this._container = _container;
  180. },
  181. canAutoHide: function () {
  182. return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
  183. },
  184. processLoader: function () {
  185. // Show the loader only, if auto-hide is on and loader is demanded
  186. if (!this.canAutoHide() || this.options.loader === false) {
  187. return false;
  188. }
  189. var loader = this._toastEl.find('.jq-toast-loader');
  190. // 400 is the default time that jquery uses for fade/slide
  191. // Divide by 1000 for milliseconds to seconds conversion
  192. var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
  193. var loaderBg = this.options.loaderBg;
  194. var style = loader.attr('style') || '';
  195. style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
  196. style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
  197. -o-transition: width ' + transitionTime + ' ease-in; \
  198. transition: width ' + transitionTime + ' ease-in; \
  199. background-color: ' + loaderBg + ';';
  200. loader.attr('style', style).addClass('jq-toast-loaded');
  201. },
  202. animate: function () {
  203. var that = this;
  204. this._toastEl.hide();
  205. this._toastEl.trigger('beforeShow');
  206. if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
  207. this._toastEl.fadeIn(function ( ){
  208. that._toastEl.trigger('afterShown');
  209. });
  210. } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
  211. this._toastEl.slideDown(function ( ){
  212. that._toastEl.trigger('afterShown');
  213. });
  214. } else {
  215. this._toastEl.show(function ( ){
  216. that._toastEl.trigger('afterShown');
  217. });
  218. }
  219. if (this.canAutoHide()) {
  220. var that = this;
  221. window.setTimeout(function(){
  222. if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
  223. that._toastEl.trigger('beforeHide');
  224. that._toastEl.fadeOut(function () {
  225. that._toastEl.trigger('afterHidden');
  226. });
  227. } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
  228. that._toastEl.trigger('beforeHide');
  229. that._toastEl.slideUp(function () {
  230. that._toastEl.trigger('afterHidden');
  231. });
  232. } else {
  233. that._toastEl.trigger('beforeHide');
  234. that._toastEl.hide(function () {
  235. that._toastEl.trigger('afterHidden');
  236. });
  237. }
  238. }, this.options.hideAfter);
  239. };
  240. },
  241. reset: function ( resetWhat ) {
  242. if ( resetWhat === 'all' ) {
  243. $('.jq-toast-wrap').remove();
  244. } else {
  245. this._toastEl.remove();
  246. }
  247. },
  248. update: function(options) {
  249. this.prepareOptions(options, this.options);
  250. this.setup();
  251. this.bindToast();
  252. },
  253. close: function() {
  254. this._toastEl.find('.close-jq-toast-single').click();
  255. }
  256. };
  257. $.toast = function(options) {
  258. var toast = Object.create(Toast);
  259. toast.init(options, this);
  260. return {
  261. reset: function ( what ) {
  262. toast.reset( what );
  263. },
  264. update: function( options ) {
  265. toast.update( options );
  266. },
  267. close: function( ) {
  268. toast.close( );
  269. }
  270. }
  271. };
  272. $.toast.options = {
  273. text: '',
  274. heading: '',
  275. showHideTransition: 'fade',
  276. allowToastClose: true,
  277. hideAfter: 3000,
  278. loader: true,
  279. loaderBg: '#9EC600',
  280. stack: 5,
  281. position: 'bottom-left',
  282. bgColor: false,
  283. textColor: false,
  284. textAlign: 'left',
  285. icon: false,
  286. beforeShow: function () {},
  287. afterShown: function () {},
  288. beforeHide: function () {},
  289. afterHidden: function () {},
  290. onClick: function () {}
  291. };
  292. })( jQuery, window, document );