public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-09-18 21:50:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Not perfect but stories are now rendered. Need to calculate the height and disable scroll.

Browse source
This commit is contained in:
Samuel Clay 2024-11-06 22:11:17 -08:00
parent cd8feb2715
commit 19522cc7f1
5 changed files with 186 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/rss_feeds/urls.py
View file

@ -28,5 +28,5 @@ urlpatterns = [
url(r"^story_changes", views.story_changes, name="story-changes"),
url(r"^discover/(?P<feed_id>\d+)/?$", views.discover_feeds, name="discover-feed"),
url(r"^discover/feeds/?$", views.discover_feeds, name="discover-feeds"),
url(r"^discover/stories/(?P<story_hash>.+)/?$", views.discover_stories, name="discover-stories"),
url(r"^discover/stories/(?P<story_hash>\w+:\w+)/?$", views.discover_stories, name="discover-stories"),
]

1
apps/rss_feeds/views.py
View file

@ -685,6 +685,7 @@ def discover_stories(request, story_hash):
feed_ids = request.GET.getlist("feed_ids") or request.POST.getlist("feed_ids")
limit = 5
offset = (page - 1) * limit
print(story_hash)
story, _ = MStory.find_story(story_hash=story_hash)
if not story:
return {"code": -1, "message": "Story not found.", "discover_stories": None, "failed": True}

28
media/css/reader/reader.css
View file

@ -5758,6 +5758,34 @@ body {
color: #61635e;
}
.NB-sideoption-discover-content {
max-height: 400px;
overflow-y: auto;
margin: 16px 0;
text-align: left;
}
.NB-sideoption-discover-content .NB-story-titles {
margin: 0;
padding: 0;
}
.NB-sideoption-discover .NB-story-title {
padding: 8px;
border-bottom: 1px solid #eee;
}
.NB-discover-empty {
padding: 16px;
text-align: center;
color: #999;
}
.NB-discover-loading {
text-align: center;
padding: 24px 0;
}
/* ====================== */
/* = River Progress Bar = */
/* ====================== */

13
media/js/newsblur/models/discover_stories.js
View file

@ -13,16 +13,11 @@ NEWSBLUR.Collections.DiscoverStories = Backbone.Collection.extend({
model: NEWSBLUR.Models.DiscoverStory,
url: function () {
if (this.similar_to_feed_id) {
var url = '/rss_feeds/discover/' + this.similar_to_feed_id + '/';
if (this.feed_ids && this.feed_ids.length > 0) {
url += '?feed_id=' + this.feed_ids.join("&feed_id=");
}
} else if (this.similar_to_feed_ids) {
var url = '/rss_feeds/discover/feeds/';
} else {
var url = '/stories/discover/global/';
var url = '/rss_feeds/discover/stories/' + this.similar_to_story_hash + '/';
if (this.feed_ids && this.feed_ids.length > 0) {
url += '?feed_id=' + this.feed_ids.join("&feed_id=");
}
return url;
},

173
media/js/newsblur/views/story_discover_view.js
View file

@ -2,12 +2,132 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
events: {
"click .NB-feed-story-discover": "toggle_feed_story_discover_dialog",
"click .NB-sideoption-discover-control-item": "switch_discover_section"
},
initialize: function () {
_.bindAll(this, 'toggle_feed_story_discover_dialog');
_.bindAll(this, 'toggle_feed_story_discover_dialog', 'switch_discover_section', 'load_discover_stories');
this.sideoptions_view = this.options.sideoptions_view;
this.model.story_discover_view = this;
this.page = 1;
this.has_more_results = true;
this.is_loading = false;
this.current_section = 'site'; // Default to 'site' view
// Setup infinite scroll
_.bindAll(this, 'check_scroll');
this.throttled_check_scroll = _.throttle(this.check_scroll, 100);
// Initialize discover stories collection
this.discover_stories = new NEWSBLUR.Collections.DiscoverStories();
},
switch_discover_section: function (e) {
e.preventDefault();
var $section = $(e.currentTarget);
// Update active state
this.$('.NB-sideoption-discover-control-item').removeClass('NB-active');
$section.addClass('NB-active');
// Get section type
var section = 'site';
if ($section.find('a').text().toLowerCase().indexOf('all') >= 0) {
section = 'all';
} else if ($section.find('a').text().toLowerCase().indexOf('global') >= 0) {
section = 'global';
}
this.current_section = section;
this.page = 1;
this.has_more_results = true;
this.load_discover_stories();
},
load_discover_stories: function () {
if (this.is_loading || !this.has_more_results) return;
this.is_loading = true;
this.show_loading();
var feed_ids = [];
if (this.current_section === 'all') {
feed_ids = NEWSBLUR.assets.feeds.pluck('id');
} else if (this.current_section === 'site') {
feed_ids = [this.model.get('story_feed_id')];
}
// Configure collection for current view
this.discover_stories.similar_to_story_hash = this.model.get('story_hash');
var self = this;
this.discover_stories.fetch({
data: {
feed_ids: feed_ids,
page: this.page
},
success: function (model, response) {
self.hide_loading();
self.render_stories(response);
self.is_loading = false;
if (!response.discover_stories || _.keys(response.discover_stories).length === 0) {
self.has_more_results = false;
}
},
error: function () {
self.hide_loading();
self.is_loading = false;
}
});
},
show_loading: function () {
this.$('.NB-sideoption-discover-content').html(
'<div class="NB-discover-loading">' +
'<div class="NB-loading NB-active"></div>' +
'</div>'
);
},
hide_loading: function () {
this.$('.NB-discover-loading').remove();
},
render_stories: function (response) {
var $content = this.$('.NB-sideoption-discover-content');
if (this.page === 1) {
$content.empty();
}
if (!response.discover_stories || _.keys(response.discover_stories).length === 0) {
if (this.page === 1) {
$content.html('<div class="NB-discover-empty">No similar stories found</div>');
}
return;
}
// Convert discover stories response into Stories collection
var stories = [];
_.each(response.discover_stories, function (story) {
stories.push(story);
});
// Create container for story titles
var $story_titles = $('<div class="NB-story-titles">');
var stories_collection = new NEWSBLUR.Collections.Stories(stories);
var story_titles_view = new NEWSBLUR.Views.StoryTitlesView({
el: $story_titles,
collection: stories_collection,
$story_titles: $story_titles,
override_layout: 'split',
on_discover: this.discover_stories, // Pass the discover stories collection
in_popover: this
});
$content.append(story_titles_view.render().$el);
this.page += 1;
},
render: function () {
@ -33,19 +153,6 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
</ul>\
</div>\
<div class="NB-sideoption-discover-content">\
<? if (loading) %>\
<div class="NB-discover-loading">\
<div class="NB-loading NB-active"></div>\
</div >\
<? } else { %>\
<div class="NB-discover-content">\
<div class="NB-discover-content-item">\
<div class="NB-discover-content-item-title">\
<a href="#">Title</a>\
</div>\
</div>\
</div>\
<? } %>\
</div>\
</div>\
</div>\
@ -53,13 +160,10 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
toggle_feed_story_discover_dialog: function (options) {
options = options || {};
var feed_id = this.model.get('story_feed_id');
var $sideoption = this.$('.NB-sideoption.NB-feed-story-discover');
var $sideoption_container = this.$('.NB-feed-story-sideoptions-container');
var $discover = this.$('.NB-sideoption-discover-wrapper');
if (options.close ||
($sideoption.hasClass('NB-active') && !options.resize_open)) {
if (options.close || ($sideoption.hasClass('NB-active') && !options.resize_open)) {
// Close
this.is_open = false;
this.resize({ close: true });
@ -72,6 +176,11 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
}
$sideoption.addClass('NB-active');
// Load initial stories
this.page = 1;
this.has_more_results = true;
this.load_discover_stories();
if (options.animate_scroll) {
var $scroll_container = NEWSBLUR.reader.$s.$story_titles;
if (_.contains(['split', 'full'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) {
@ -88,6 +197,14 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
this.resize(options);
}
if (!options.close) {
// Bind scroll handler when opening
this.$('.NB-sideoption-discover-content').scroll(_.bind(this.throttled_check_scroll, this));
} else {
// Unbind scroll handler when closing
this.$('.NB-sideoption-discover-content').off('scroll');
}
},
autosize: function () {
@ -99,7 +216,6 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
var $sideoption_container = this.$('.NB-feed-story-sideoptions-container');
var $discover_wrapper = this.$('.NB-sideoption-discover-wrapper');
var $discover_content = this.$('.NB-sideoption-discover');
var $user_notes = this.$('.NB-sideoption-discover-notes');
var $story_content = this.$('.NB-feed-story-content,.NB-story-content');
var $story_comments = this.$('.NB-feed-story-comments');
var $sideoption = this.$('.NB-feed-story-discover');
@ -107,7 +223,7 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
var $discover_clone = $discover_wrapper.clone();
$discover_wrapper.after($discover_clone.css({
'height': options.close ? 0 : 'auto',
'height': 'auto',
'position': 'absolute',
'visibility': 'hidden',
'display': 'block'
@ -115,6 +231,7 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
var sideoption_content_height = $discover_clone.height();
$discover_clone.remove();
var new_sideoptions_height = $sideoption_container.height() - $discover_wrapper.height() + sideoption_content_height;
if (!options.close) {
$sideoption.addClass('NB-active');
$discover_wrapper.addClass('NB-active');
@ -123,8 +240,9 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
if (!options.resize_open && !options.close && !options.change_tag) {
$discover_wrapper.css('height', '0px');
}
$discover_wrapper.animate({
'height': sideoption_content_height
'height': options.close ? 0 : sideoption_content_height
}, {
'duration': options.immediate ? 0 : options.duration || 350,
'easing': 'easeInOutQuint',
@ -200,6 +318,19 @@ NEWSBLUR.Views.StoryDiscoverView = Backbone.View.extend({
$story_content.removeData('original_height');
this.resize({ change_tag: true });
},
check_scroll: function () {
if (this.is_loading || !this.has_more_results) return;
var $content = this.$('.NB-sideoption-discover-content');
var containerHeight = $content.height();
var scrollTop = $content.scrollTop();
var scrollHeight = $content[0].scrollHeight;
if (scrollHeight - (scrollTop + containerHeight) < 200) {
this.load_discover_stories();
}
}
});