PageRenderTime 47ms CodeModel.GetById 19ms RepoModel.GetById 1ms app.codeStats 0ms

/static/dashboard/node_modules/jquery-toast-plugin/demos/js/jquery.toast.js

https://gitlab.com/IvettGeorge/tecnicassanacion
JavaScript | 357 lines | 275 code | 77 blank | 5 comment | 62 complexity | 127a7a705537891928f6097d33bb6bea MD5 | raw file
  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();
  137. });
  138. };
  139. if ( typeof this.options.afterShown == 'function' ) {
  140. this._toastEl.on('afterShown', function () {
  141. that.options.afterShown();
  142. });
  143. };
  144. if ( typeof this.options.beforeHide == 'function' ) {
  145. this._toastEl.on('beforeHide', function () {
  146. that.options.beforeHide();
  147. });
  148. };
  149. if ( typeof this.options.afterHidden == 'function' ) {
  150. this._toastEl.on('afterHidden', function () {
  151. that.options.afterHidden();
  152. });
  153. };
  154. },
  155. addToDom: function () {
  156. var _container = $('.jq-toast-wrap');
  157. if ( _container.length === 0 ) {
  158. _container = $('<div></div>',{
  159. class: "jq-toast-wrap"
  160. });
  161. $('body').append( _container );
  162. } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
  163. _container.empty();
  164. }
  165. _container.find('.jq-toast-single:hidden').remove();
  166. _container.append( this._toastEl );
  167. if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
  168. var _prevToastCount = _container.find('.jq-toast-single').length,
  169. _extToastCount = _prevToastCount - this.options.stack;
  170. if ( _extToastCount > 0 ) {
  171. $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
  172. };
  173. }
  174. this._container = _container;
  175. },
  176. canAutoHide: function () {
  177. return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
  178. },
  179. processLoader: function () {
  180. // Show the loader only, if auto-hide is on and loader is demanded
  181. if (!this.canAutoHide() || this.options.loader === false) {
  182. return false;
  183. }
  184. var loader = this._toastEl.find('.jq-toast-loader');
  185. // 400 is the default time that jquery uses for fade/slide
  186. // Divide by 1000 for milliseconds to seconds conversion
  187. var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
  188. var loaderBg = this.options.loaderBg;
  189. var style = loader.attr('style') || '';
  190. style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
  191. style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
  192. -o-transition: width ' + transitionTime + ' ease-in; \
  193. transition: width ' + transitionTime + ' ease-in; \
  194. background-color: ' + loaderBg + ';';
  195. loader.attr('style', style).addClass('jq-toast-loaded');
  196. },
  197. animate: function () {
  198. var that = this;
  199. this._toastEl.hide();
  200. this._toastEl.trigger('beforeShow');
  201. if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
  202. this._toastEl.fadeIn(function ( ){
  203. that._toastEl.trigger('afterShown');
  204. });
  205. } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
  206. this._toastEl.slideDown(function ( ){
  207. that._toastEl.trigger('afterShown');
  208. });
  209. } else {
  210. this._toastEl.show(function ( ){
  211. that._toastEl.trigger('afterShown');
  212. });
  213. }
  214. if (this.canAutoHide()) {
  215. var that = this;
  216. window.setTimeout(function(){
  217. if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
  218. that._toastEl.trigger('beforeHide');
  219. that._toastEl.fadeOut(function () {
  220. that._toastEl.trigger('afterHidden');
  221. });
  222. } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
  223. that._toastEl.trigger('beforeHide');
  224. that._toastEl.slideUp(function () {
  225. that._toastEl.trigger('afterHidden');
  226. });
  227. } else {
  228. that._toastEl.trigger('beforeHide');
  229. that._toastEl.hide(function () {
  230. that._toastEl.trigger('afterHidden');
  231. });
  232. }
  233. }, this.options.hideAfter);
  234. };
  235. },
  236. reset: function ( resetWhat ) {
  237. if ( resetWhat === 'all' ) {
  238. $('.jq-toast-wrap').remove();
  239. } else {
  240. this._toastEl.remove();
  241. }
  242. },
  243. update: function(options) {
  244. this.prepareOptions(options, this.options);
  245. this.setup();
  246. this.bindToast();
  247. }
  248. };
  249. $.toast = function(options) {
  250. var toast = Object.create(Toast);
  251. toast.init(options, this);
  252. return {
  253. reset: function ( what ) {
  254. toast.reset( what );
  255. },
  256. update: function( options ) {
  257. toast.update( options );
  258. }
  259. }
  260. };
  261. $.toast.options = {
  262. text: '',
  263. heading: '',
  264. showHideTransition: 'fade',
  265. allowToastClose: true,
  266. hideAfter: 3000,
  267. loader: true,
  268. loaderBg: '#9EC600',
  269. stack: 5,
  270. position: 'bottom-left',
  271. bgColor: false,
  272. textColor: false,
  273. textAlign: 'left',
  274. icon: false,
  275. beforeShow: function () {},
  276. afterShown: function () {},
  277. beforeHide: function () {},
  278. afterHidden: function () {}
  279. };
  280. })( jQuery, window, document );