mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Refactored the progress bar animation. Now it can be used in many places, like the River of News loader.
This commit is contained in:
Samuel Clay
parent
68a2d9370c
commit
f63851595d
1 changed files with 73 additions and 52 deletions
|
|
@ -218,6 +218,47 @@
|
||||||
}, 1);
|
}, 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
animate_progress_bar: function($bar, seconds, percentage) {
|
||||||
|
var self = this;
|
||||||
|
percentage = percentage || 0;
|
||||||
|
seconds = parseFloat(Math.max(2, parseInt(seconds, 10)), 10);
|
||||||
|
|
||||||
|
if (percentage > 90) {
|
||||||
|
time = seconds / 5;
|
||||||
|
} else if (percentage > 80) {
|
||||||
|
time = seconds / 12;
|
||||||
|
} else if (percentage > 70) {
|
||||||
|
time = seconds / 30;
|
||||||
|
} else if (percentage > 60) {
|
||||||
|
time = seconds / 60;
|
||||||
|
} else if (percentage > 50) {
|
||||||
|
time = seconds / 125;
|
||||||
|
} else if (percentage > 40) {
|
||||||
|
time = seconds / 170;
|
||||||
|
} else if (percentage > 30) {
|
||||||
|
time = seconds / 210;
|
||||||
|
} else if (percentage > 20) {
|
||||||
|
time = seconds / 220;
|
||||||
|
} else if (percentage > 10) {
|
||||||
|
time = seconds / 240;
|
||||||
|
} else {
|
||||||
|
time = seconds / 270;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (percentage <= 100) {
|
||||||
|
this.locks['animate_progress_bar'] = setTimeout(function() {
|
||||||
|
if (!self.flags['import_from_google_reader_finished'] ||
|
||||||
|
!self.flags['count_unreads_after_import_finished']) {
|
||||||
|
percentage += 1;
|
||||||
|
$bar.progressbar({value: percentage});
|
||||||
|
self.animate_progress_bar($bar, seconds, percentage);
|
||||||
|
} else {
|
||||||
|
clearTimeout(self.locks['animate_progress_bar']);
|
||||||
|
}
|
||||||
|
}, time * 1000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// =======================
|
// =======================
|
||||||
// = Getters and Finders =
|
// = Getters and Finders =
|
||||||
// =======================
|
// =======================
|
||||||
|
|
@ -429,12 +470,16 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
get_feed_ids_in_folder: function($folder) {
|
get_feed_ids_in_folder: function($folder) {
|
||||||
|
var self = this;
|
||||||
$folder = $folder || this.$s.$feed_list;
|
$folder = $folder || this.$s.$feed_list;
|
||||||
|
|
||||||
var $feeds = $('.feed:not(.NB-empty)', $folder);
|
var $feeds = $('.feed:not(.NB-empty)', $folder);
|
||||||
var feeds = _.map($('.feed:not(.NB-empty)', $folder), function(o) {
|
var feeds = _.compact(_.map($('.feed:not(.NB-empty)', $folder), function(o) {
|
||||||
return o && $(o).data('feed_id');
|
var feed_id = $(o).data('feed_id');
|
||||||
});
|
if (self.model.get_feed(feed_id).active) {
|
||||||
|
return feed_id;
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
return feeds;
|
return feeds;
|
||||||
},
|
},
|
||||||
|
|
@ -1518,6 +1563,7 @@
|
||||||
this.iframe_scroll = null;
|
this.iframe_scroll = null;
|
||||||
this.mark_feed_as_selected(null, null);
|
this.mark_feed_as_selected(null, null);
|
||||||
this.show_correct_feed_in_feed_title_floater();
|
this.show_correct_feed_in_feed_title_floater();
|
||||||
|
// this.show_river_progress_bar();
|
||||||
this.$s.$body.addClass('NB-view-river');
|
this.$s.$body.addClass('NB-view-river');
|
||||||
this.flags.river_view = true;
|
this.flags.river_view = true;
|
||||||
$folder.addClass('NB-selected');
|
$folder.addClass('NB-selected');
|
||||||
|
|
@ -1578,6 +1624,25 @@
|
||||||
return feeds;
|
return feeds;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
show_river_progress_bar: function() {
|
||||||
|
var $feed_view = this.$s.$feed_view;
|
||||||
|
|
||||||
|
var $progress = $.make('div', { className: 'NB-river-progress' }, [
|
||||||
|
$.make('div', { className: 'NB-river-progress-text' }),
|
||||||
|
$.make('div', { className: 'NB-river-progress-bar' })
|
||||||
|
]);
|
||||||
|
|
||||||
|
$feed_view.append($progress);
|
||||||
|
|
||||||
|
$('.NB-river-progress-bar', $progress).progressbar({
|
||||||
|
value: 0
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
hide_river_progress_bar: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
// ==========================
|
// ==========================
|
||||||
// = Story Pane - All Views =
|
// = Story Pane - All Views =
|
||||||
// ==========================
|
// ==========================
|
||||||
|
|
@ -2204,7 +2269,7 @@
|
||||||
'linear,',
|
'linear,',
|
||||||
'left bottom,',
|
'left bottom,',
|
||||||
'left top,',
|
'left top,',
|
||||||
'color-stop(0.36, rgba(',
|
'color-stop(0.06, rgba(',
|
||||||
[
|
[
|
||||||
r,
|
r,
|
||||||
g,
|
g,
|
||||||
|
|
@ -2231,7 +2296,7 @@
|
||||||
g,
|
g,
|
||||||
b
|
b
|
||||||
].join(','),
|
].join(','),
|
||||||
') 36%,',
|
') 6%,',
|
||||||
'rgb(',
|
'rgb(',
|
||||||
[
|
[
|
||||||
r+35,
|
r+35,
|
||||||
|
|
@ -4288,29 +4353,7 @@
|
||||||
value: percentage
|
value: percentage
|
||||||
});
|
});
|
||||||
|
|
||||||
var animate = function() {
|
this.animate_progress_bar($bar, 4);
|
||||||
var time = 50;
|
|
||||||
if (percentage > 90) {
|
|
||||||
time = 500;
|
|
||||||
} else if (percentage > 80) {
|
|
||||||
time = 400;
|
|
||||||
} else if (percentage > 70) {
|
|
||||||
time = 300;
|
|
||||||
} else if (percentage > 60) {
|
|
||||||
time = 200;
|
|
||||||
} else if (percentage > 50) {
|
|
||||||
time = 100;
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
|
||||||
if (!self.flags['import_from_google_reader_finished']) {
|
|
||||||
percentage += 1;
|
|
||||||
$bar.progressbar({value: percentage});
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
}, time);
|
|
||||||
};
|
|
||||||
animate();
|
|
||||||
|
|
||||||
|
|
||||||
this.model.start_import_from_google_reader($.rescope(this.finish_import_from_google_reader, this));
|
this.model.start_import_from_google_reader($.rescope(this.finish_import_from_google_reader, this));
|
||||||
this.show_progress_bar();
|
this.show_progress_bar();
|
||||||
|
|
@ -4338,7 +4381,7 @@
|
||||||
var $progress = this.$s.$feeds_progress;
|
var $progress = this.$s.$feeds_progress;
|
||||||
var $bar = $('.NB-progress-bar', $progress);
|
var $bar = $('.NB-progress-bar', $progress);
|
||||||
var percentage = 0;
|
var percentage = 0;
|
||||||
var factor = 17500 * _.keys(this.model.feeds).length / 40000;
|
var feeds_count = _.keys(this.model.feeds).length;
|
||||||
|
|
||||||
if (!this.flags['pause_feed_refreshing']) return;
|
if (!this.flags['pause_feed_refreshing']) return;
|
||||||
|
|
||||||
|
|
@ -4351,29 +4394,7 @@
|
||||||
value: percentage
|
value: percentage
|
||||||
});
|
});
|
||||||
|
|
||||||
var animate = function() {
|
this.animate_progress_bar($bar, feeds_count / 10);
|
||||||
// 17,500 ticks
|
|
||||||
var time = factor;
|
|
||||||
if (percentage > 90) {
|
|
||||||
time = factor * 100;
|
|
||||||
} else if (percentage > 80) {
|
|
||||||
time = factor * 50;
|
|
||||||
} else if (percentage > 70) {
|
|
||||||
time = factor * 20;
|
|
||||||
} else if (percentage > 60) {
|
|
||||||
time = factor * 8;
|
|
||||||
} else if (percentage > 50) {
|
|
||||||
time = factor * 2;
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
|
||||||
if (!self.flags['count_unreads_after_import_finished']) {
|
|
||||||
percentage += 1;
|
|
||||||
$bar.progressbar({value: percentage});
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
}, time);
|
|
||||||
};
|
|
||||||
animate();
|
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if (!self.flags['count_unreads_after_import_finished']) {
|
if (!self.flags['count_unreads_after_import_finished']) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue