Skip to content

Commit ebb543e

Browse files
needimneedim
committed
Performance improvements for progressbar flow
1 parent 5a558f5 commit ebb543e

File tree

6 files changed

+48
-57
lines changed

6 files changed

+48
-57
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ child/
55
.idea/
66

77
node_modules/
8-
_SpecRunner.html
8+
_SpecRunner.html
9+
/.vscode/

‎js/noty/jquery.noty.js

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
@package noty - jQuery Notification Plugin
3-
@version version: 2.4.0
3+
@version version: 2.4.1
44
@contributors https://github.com/needim/noty/graphs/contributors
55
66
@documentation Examples and Documentation - http://needim.github.com/noty/
@@ -218,21 +218,17 @@ var NotyObject = {
218218

219219
}, // end show
220220

221-
bindTimeout: function() {
221+
bindTimeout: function () {
222222
var self = this;
223+
223224
// If noty is have a timeout option
224225
if (self.options.timeout) {
225226

226227
if (self.options.progressBar && self.$progressBar) {
227228
self.$progressBar.css({
228-
transition: 'all 100ms linear'
229+
transition: 'all ' + self.options.timeout + 'ms linear',
230+
width: '0%'
229231
});
230-
231-
self.progressPercentage = (self.$progressBar.width() / (self.options.timeout / 100));
232-
233-
self.intervalId = setInterval(function() {
234-
self.$progressBar.width((self.$progressBar.width() - self.progressPercentage));
235-
}, 100);
236232
}
237233

238234
self.queueClose(self.options.timeout);
@@ -243,10 +239,13 @@ var NotyObject = {
243239
},
244240

245241
dequeueClose: function () {
246-
if (this.intervalId) {
247-
clearInterval(this.intervalId);
248-
this.$progressBar.css('width', '100%');
249-
this.intervalId = null;
242+
var self = this;
243+
244+
if (self.options.progressBar) {
245+
this.$progressBar.css({
246+
transition: 'none',
247+
width: '100%'
248+
});
250249
}
251250

252251
if (!this.closeTimer) return;
@@ -257,27 +256,23 @@ var NotyObject = {
257256
queueClose: function (timeout) {
258257
var self = this;
259258

260-
if (!self.intervalId && self.options.progressBar) {
261-
self.intervalId = setInterval(function() {
262-
self.$progressBar.width((self.$progressBar.width() - self.progressPercentage));
263-
}, 100);
259+
if (self.options.progressBar) {
260+
self.$progressBar.css({
261+
transition: 'all ' + self.options.timeout + 'ms linear',
262+
width: '0%'
263+
});
264264
}
265265

266266
if (this.closeTimer) return;
267267
self.closeTimer = window.setTimeout(function () {
268268
self.close();
269269
}, timeout);
270-
return self.closeTimer
270+
return self.closeTimer;
271271
},
272272

273273
close: function () {
274-
if (this.intervalId) {
275-
clearInterval(this.intervalId);
276-
this.intervalId = null;
277-
278-
if (this.$progressBar) {
279-
this.$progressBar.css('width', '0%');
280-
}
274+
if (this.$progressBar) {
275+
this.$progressBar.remove();
281276
}
282277

283278
if (this.closeTimer) this.dequeueClose();
@@ -324,7 +319,7 @@ var NotyObject = {
324319
});
325320

326321
} else if (typeof self.options.animation.close == 'object' && self.options.animation.close == null) {
327-
self.$bar.dequeue().hide(0, function() {
322+
self.$bar.dequeue().hide(0, function () {
328323
if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
329324
self.closeCleanUp();
330325
});

‎js/noty/packaged/jquery.noty.packaged.js

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
/*!
1212
@package noty - jQuery Notification Plugin
13-
@version version: 2.4.0
13+
@version version: 2.4.1
1414
@contributors https://github.com/needim/noty/graphs/contributors
1515
1616
@documentation Examples and Documentation - http://needim.github.com/noty/
@@ -228,21 +228,17 @@ var NotyObject = {
228228

229229
}, // end show
230230

231-
bindTimeout: function() {
231+
bindTimeout: function () {
232232
var self = this;
233+
233234
// If noty is have a timeout option
234235
if (self.options.timeout) {
235236

236237
if (self.options.progressBar && self.$progressBar) {
237238
self.$progressBar.css({
238-
transition: 'all 100ms linear'
239+
transition: 'all ' + self.options.timeout + 'ms linear',
240+
width: '0%'
239241
});
240-
241-
self.progressPercentage = (self.$progressBar.width() / (self.options.timeout / 100));
242-
243-
self.intervalId = setInterval(function() {
244-
self.$progressBar.width((self.$progressBar.width() - self.progressPercentage));
245-
}, 100);
246242
}
247243

248244
self.queueClose(self.options.timeout);
@@ -253,10 +249,13 @@ var NotyObject = {
253249
},
254250

255251
dequeueClose: function () {
256-
if (this.intervalId) {
257-
clearInterval(this.intervalId);
258-
this.$progressBar.css('width', '100%');
259-
this.intervalId = null;
252+
var self = this;
253+
254+
if (self.options.progressBar) {
255+
this.$progressBar.css({
256+
transition: 'none',
257+
width: '100%'
258+
});
260259
}
261260

262261
if (!this.closeTimer) return;
@@ -267,27 +266,23 @@ var NotyObject = {
267266
queueClose: function (timeout) {
268267
var self = this;
269268

270-
if (!self.intervalId && self.options.progressBar) {
271-
self.intervalId = setInterval(function() {
272-
self.$progressBar.width((self.$progressBar.width() - self.progressPercentage));
273-
}, 100);
269+
if (self.options.progressBar) {
270+
self.$progressBar.css({
271+
transition: 'all ' + self.options.timeout + 'ms linear',
272+
width: '0%'
273+
});
274274
}
275275

276276
if (this.closeTimer) return;
277277
self.closeTimer = window.setTimeout(function () {
278278
self.close();
279279
}, timeout);
280-
return self.closeTimer
280+
return self.closeTimer;
281281
},
282282

283283
close: function () {
284-
if (this.intervalId) {
285-
clearInterval(this.intervalId);
286-
this.intervalId = null;
287-
288-
if (this.$progressBar) {
289-
this.$progressBar.css('width', '0%');
290-
}
284+
if (this.$progressBar) {
285+
this.$progressBar.remove();
291286
}
292287

293288
if (this.closeTimer) this.dequeueClose();
@@ -334,7 +329,7 @@ var NotyObject = {
334329
});
335330

336331
} else if (typeof self.options.animation.close == 'object' && self.options.animation.close == null) {
337-
self.$bar.dequeue().hide(0, function() {
332+
self.$bar.dequeue().hide(0, function () {
338333
if (self.options.callback.afterClose) self.options.callback.afterClose.apply(self);
339334
self.closeCleanUp();
340335
});

‎js/noty/packaged/jquery.noty.packaged.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎noty.jquery.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name" : "noty",
3-
"version" : "2.4.0",
3+
"version" : "2.4.1",
44
"title" : "noty - a jquery notification plugin",
55
"description" : "noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)",
66
"keywords" : ["noty", "notification", "plugin", "jquery", "javascript", "alert", "error", "warning", "information", "confirmation"],

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "noty",
3-
"version": "2.4.0",
3+
"version": "2.4.1",
44
"title": "noty - a jquery notification plugin",
55
"description": "noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)",
66
"homepage": "http://needim.github.com/noty",

0 commit comments

Comments
 (0)