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);
|
||||
},
|
||||
|
||||
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 =
|
||||
// =======================
|
||||
|
|
@ -429,12 +470,16 @@
|
|||
},
|
||||
|
||||
get_feed_ids_in_folder: function($folder) {
|
||||
var self = this;
|
||||
$folder = $folder || this.$s.$feed_list;
|
||||
|
||||
var $feeds = $('.feed:not(.NB-empty)', $folder);
|
||||
var feeds = _.map($('.feed:not(.NB-empty)', $folder), function(o) {
|
||||
return o && $(o).data('feed_id');
|
||||
});
|
||||
var feeds = _.compact(_.map($('.feed:not(.NB-empty)', $folder), function(o) {
|
||||
var feed_id = $(o).data('feed_id');
|
||||
if (self.model.get_feed(feed_id).active) {
|
||||
return feed_id;
|
||||
}
|
||||
}));
|
||||
|
||||
return feeds;
|
||||
},
|
||||
|
|
@ -1518,6 +1563,7 @@
|
|||
this.iframe_scroll = null;
|
||||
this.mark_feed_as_selected(null, null);
|
||||
this.show_correct_feed_in_feed_title_floater();
|
||||
// this.show_river_progress_bar();
|
||||
this.$s.$body.addClass('NB-view-river');
|
||||
this.flags.river_view = true;
|
||||
$folder.addClass('NB-selected');
|
||||
|
|
@ -1578,6 +1624,25 @@
|
|||
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 =
|
||||
// ==========================
|
||||
|
|
@ -2204,7 +2269,7 @@
|
|||
'linear,',
|
||||
'left bottom,',
|
||||
'left top,',
|
||||
'color-stop(0.36, rgba(',
|
||||
'color-stop(0.06, rgba(',
|
||||
[
|
||||
r,
|
||||
g,
|
||||
|
|
@ -2231,7 +2296,7 @@
|
|||
g,
|
||||
b
|
||||
].join(','),
|
||||
') 36%,',
|
||||
') 6%,',
|
||||
'rgb(',
|
||||
[
|
||||
r+35,
|
||||
|
|
@ -4288,29 +4353,7 @@
|
|||
value: percentage
|
||||
});
|
||||
|
||||
var animate = function() {
|
||||
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.animate_progress_bar($bar, 4);
|
||||
|
||||
this.model.start_import_from_google_reader($.rescope(this.finish_import_from_google_reader, this));
|
||||
this.show_progress_bar();
|
||||
|
|
@ -4338,7 +4381,7 @@
|
|||
var $progress = this.$s.$feeds_progress;
|
||||
var $bar = $('.NB-progress-bar', $progress);
|
||||
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;
|
||||
|
||||
|
|
@ -4351,29 +4394,7 @@
|
|||
value: percentage
|
||||
});
|
||||
|
||||
var animate = function() {
|
||||
// 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();
|
||||
this.animate_progress_bar($bar, feeds_count / 10);
|
||||
|
||||
setTimeout(function() {
|
||||
if (!self.flags['count_unreads_after_import_finished']) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue