From ebb543ef0a3c039cdb7cdae887197ffa43433d52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nedim=20Arabac=C4=B1?= Date: Thu, 16 Feb 2017 06:28:54 +0200 Subject: [PATCH] Performance improvements for progressbar flow --- .gitignore | 3 +- js/noty/jquery.noty.js | 47 +++++++++----------- js/noty/packaged/jquery.noty.packaged.js | 47 +++++++++----------- js/noty/packaged/jquery.noty.packaged.min.js | 4 +- noty.jquery.json | 2 +- package.json | 2 +- 6 files changed, 48 insertions(+), 57 deletions(-) diff --git a/.gitignore b/.gitignore index 287ec10e..66ae2cf9 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ child/ .idea/ node_modules/ -_SpecRunner.html \ No newline at end of file +_SpecRunner.html +/.vscode/ diff --git a/js/noty/jquery.noty.js b/js/noty/jquery.noty.js index 9e578cec..1c785583 100644 --- a/js/noty/jquery.noty.js +++ b/js/noty/jquery.noty.js @@ -1,6 +1,6 @@ /*! @package noty - jQuery Notification Plugin - @version version: 2.4.0 + @version version: 2.4.1 @contributors https://github.com/needim/noty/graphs/contributors @documentation Examples and Documentation - http://needim.github.com/noty/ @@ -218,21 +218,17 @@ var NotyObject = { }, // end show - bindTimeout: function() { + bindTimeout: function () { var self = this; + // If noty is have a timeout option if (self.options.timeout) { if (self.options.progressBar && self.$progressBar) { self.$progressBar.css({ - transition: 'all 100ms linear' + transition: 'all ' + self.options.timeout + 'ms linear', + width: '0%' }); - - self.progressPercentage = (self.$progressBar.width() / (self.options.timeout / 100)); - - self.intervalId = setInterval(function() { - self.$progressBar.width((self.$progressBar.width() - self.progressPercentage)); - }, 100); } self.queueClose(self.options.timeout); @@ -243,10 +239,13 @@ var NotyObject = { }, dequeueClose: function () { - if (this.intervalId) { - clearInterval(this.intervalId); - this.$progressBar.css('width', '100%'); - this.intervalId = null; + var self = this; + + if (self.options.progressBar) { + this.$progressBar.css({ + transition: 'none', + width: '100%' + }); } if (!this.closeTimer) return; @@ -257,27 +256,23 @@ var NotyObject = { queueClose: function (timeout) { var self = this; - if (!self.intervalId && self.options.progressBar) { - self.intervalId = setInterval(function() { - self.$progressBar.width((self.$progressBar.width() - self.progressPercentage)); - }, 100); + if (self.options.progressBar) { + self.$progressBar.css({ + transition: 'all ' + self.options.timeout + 'ms linear', + width: '0%' + }); } if (this.closeTimer) return; self.closeTimer = window.setTimeout(function () { self.close(); }, timeout); - return self.closeTimer + return self.closeTimer; }, close: function () { - if (this.intervalId) { - clearInterval(this.intervalId); - this.intervalId = null; - - if (this.$progressBar) { - this.$progressBar.css('width', '0%'); - } + if (this.$progressBar) { + this.$progressBar.remove(); } if (this.closeTimer) this.dequeueClose(); @@ -324,7 +319,7 @@ var NotyObject = { }); } else if (typeof self.options.animation.close == 'object' && self.options.animation.close == null) { - self.$bar.dequeue().hide(0, function() { + self.$bar.dequeue().hide(0, function () { if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self); self.closeCleanUp(); }); diff --git a/js/noty/packaged/jquery.noty.packaged.js b/js/noty/packaged/jquery.noty.packaged.js index 6ce51cfb..25a609b4 100644 --- a/js/noty/packaged/jquery.noty.packaged.js +++ b/js/noty/packaged/jquery.noty.packaged.js @@ -10,7 +10,7 @@ /*! @package noty - jQuery Notification Plugin - @version version: 2.4.0 + @version version: 2.4.1 @contributors https://github.com/needim/noty/graphs/contributors @documentation Examples and Documentation - http://needim.github.com/noty/ @@ -228,21 +228,17 @@ var NotyObject = { }, // end show - bindTimeout: function() { + bindTimeout: function () { var self = this; + // If noty is have a timeout option if (self.options.timeout) { if (self.options.progressBar && self.$progressBar) { self.$progressBar.css({ - transition: 'all 100ms linear' + transition: 'all ' + self.options.timeout + 'ms linear', + width: '0%' }); - - self.progressPercentage = (self.$progressBar.width() / (self.options.timeout / 100)); - - self.intervalId = setInterval(function() { - self.$progressBar.width((self.$progressBar.width() - self.progressPercentage)); - }, 100); } self.queueClose(self.options.timeout); @@ -253,10 +249,13 @@ var NotyObject = { }, dequeueClose: function () { - if (this.intervalId) { - clearInterval(this.intervalId); - this.$progressBar.css('width', '100%'); - this.intervalId = null; + var self = this; + + if (self.options.progressBar) { + this.$progressBar.css({ + transition: 'none', + width: '100%' + }); } if (!this.closeTimer) return; @@ -267,27 +266,23 @@ var NotyObject = { queueClose: function (timeout) { var self = this; - if (!self.intervalId && self.options.progressBar) { - self.intervalId = setInterval(function() { - self.$progressBar.width((self.$progressBar.width() - self.progressPercentage)); - }, 100); + if (self.options.progressBar) { + self.$progressBar.css({ + transition: 'all ' + self.options.timeout + 'ms linear', + width: '0%' + }); } if (this.closeTimer) return; self.closeTimer = window.setTimeout(function () { self.close(); }, timeout); - return self.closeTimer + return self.closeTimer; }, close: function () { - if (this.intervalId) { - clearInterval(this.intervalId); - this.intervalId = null; - - if (this.$progressBar) { - this.$progressBar.css('width', '0%'); - } + if (this.$progressBar) { + this.$progressBar.remove(); } if (this.closeTimer) this.dequeueClose(); @@ -334,7 +329,7 @@ var NotyObject = { }); } else if (typeof self.options.animation.close == 'object' && self.options.animation.close == null) { - self.$bar.dequeue().hide(0, function() { + self.$bar.dequeue().hide(0, function () { if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self); self.closeCleanUp(); }); diff --git a/js/noty/packaged/jquery.noty.packaged.min.js b/js/noty/packaged/jquery.noty.packaged.min.js index 4bb66692..b26958d3 100644 --- a/js/noty/packaged/jquery.noty.packaged.min.js +++ b/js/noty/packaged/jquery.noty.packaged.min.js @@ -1,2 +1,2 @@ -!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):b(a.jQuery)}(this,function(a){"function"!=typeof Object.create&&(Object.create=function(a){function b(){}return b.prototype=a,new b});var b={init:function(b){if(this.options=a.extend({},a.noty.defaults,b),this.options.layout=this.options.custom?a.noty.layouts.inline:a.noty.layouts[this.options.layout],a.noty.themes[this.options.theme]?(this.options.theme=a.noty.themes[this.options.theme],this.options.theme.template&&(this.options.template=this.options.theme.template),this.options.theme.animation&&(this.options.animation=this.options.theme.animation)):this.options.themeClassName=this.options.theme,this.options=a.extend({},this.options,this.options.layout.options),this.options.id){if(a.noty.store[this.options.id])return a.noty.store[this.options.id]}else this.options.id="noty_"+(new Date).getTime()*Math.floor(1e6*Math.random());return this._build(),this},_build:function(){var b=a('
').attr("id",this.options.id);if(b.append(this.options.template).find(".noty_text").html(this.options.text),this.$bar=null!==this.options.layout.parent.object?a(this.options.layout.parent.object).css(this.options.layout.parent.css).append(b):b,this.options.themeClassName&&this.$bar.addClass(this.options.themeClassName).addClass("noty_container_type_"+this.options.type),this.options.buttons){var c;this.$bar.find(".noty_buttons").length>0?c=this.$bar.find(".noty_buttons"):(c=a("
").addClass("noty_buttons"),null!==this.options.layout.parent.object?this.$bar.find(".noty_bar").append(c):this.$bar.append(c));var d=this;a.each(this.options.buttons,function(b,e){var f=a("