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

Finally figured out how to make the feed title floater look good and match the iPhone's table group header.

Browse source
This commit is contained in:
Samuel Clay 2011-01-24 23:50:38 -05:00
parent 075ff64a55
commit c35745736e
3 changed files with 55 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
media/css/reader.css
View file

@ -1399,9 +1399,8 @@ background: transparent;
}
#story_pane .NB-feed-story-view {
overflow-y: auto;
overflow-x: hidden;
position: absolute;
overflow: hidden;
position: relative;
top: 0;
left: 100% !important;
width: 100%;
@ -1429,10 +1428,16 @@ background: transparent;
/* ================================ */
.NB-feed-story-view-floater {
position: fixed;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
display: none;
}
.NB-view-river .NB-feed-story-view-floater {
display: block;
}
/* ================= */
@ -1458,6 +1463,10 @@ background: transparent;
margin: 0;
list-style: none;
background-color: white;
position: relative;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
#story_pane .NB-feed-story-header {
@ -1491,6 +1500,10 @@ background: transparent;
padding: 2px 200px 2px 28px;
position: relative;
border-bottom: 1px solid #000;
z-index: 2;
}
#story_pane .NB-feed-story-header-feed.NB-floater {
z-index: 0;
}
#story_pane .NB-feed-story-feed {

52
media/js/newsblur/reader.js
View file

@ -16,6 +16,7 @@
$content_pane: $('.content-pane'),
$story_pane: $('#story_pane .NB-story-pane-container'),
$feed_view: $('.NB-feed-story-view'),
$feed_stories: $('.NB-feed-stories'),
$feed_iframe: $('.NB-feed-iframe'),
$story_iframe: $('.NB-story-iframe'),
$intelligence_slider: $('.NB-intelligence-slider'),
@ -59,8 +60,8 @@
this.$s.$body.bind('click.reader', $.rescope(this.handle_clicks, this));
this.$s.$body.live('contextmenu.reader', $.rescope(this.handle_rightclicks, this));
this.$s.$story_titles.scroll($.rescope(this.handle_scroll_story_titles, this));
this.$s.$feed_view.scroll($.rescope(this.handle_scroll_feed_view, this));
this.$s.$feed_view.bind('mousemove', $.rescope(this.handle_mousemove_feed_view, this));
this.$s.$feed_stories.scroll($.rescope(this.handle_scroll_feed_view, this));
this.$s.$feed_stories.bind('mousemove', $.rescope(this.handle_mousemove_feed_view, this));
this.handle_keystrokes();
// ==================
@ -579,9 +580,6 @@
this.mark_story_title_as_selected($next_story_title);
this.mark_story_as_read(story.id);
this.mark_story_as_read_in_feed_view(story, {'animate': this.story_view == 'feed'});
if (this.flags.river_view) {
this.show_correct_feed_in_feed_title_floater(story);
}
}
}
},
@ -629,7 +627,7 @@
if (this.story_view == 'page') {
this.$s.$feed_iframe.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150);
} else if (this.story_view == 'feed') {
this.$s.$feed_view.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150);
this.$s.$feed_stories.scrollTo({top:dir+'='+scroll_height, left:'+=0'}, 150);
}
},
@ -1246,7 +1244,7 @@
this.active_story = null;
this.$s.$story_titles.data('page', 0);
this.$s.$story_titles.data('feed_id', null);
$('.NB-feed-stories', this.$s.$feed_view).remove();
this.$s.$feed_stories.empty();
this.$s.$starred_header.removeClass('NB-selected');
this.$s.$river_header.removeClass('NB-selected');
$('.NB-selected', this.$s.$feed_list).removeClass('NB-selected');
@ -1634,6 +1632,7 @@
scroll_to_story_in_story_feed: function(story, $story, skip_scroll) {
var self = this;
var $feed_view = this.$s.$feed_view;
var $feed_stories = this.$s.$feed_stories;
if (!story || !$story || !$story.length) {
$story = $('.story:first', $feed_view);
@ -1651,11 +1650,11 @@
this.model.preference('feed_view_single_story')) ||
(this.story_view == 'page' &&
!this.flags['page_view_showing_feed_view'])) {
$feed_view.scrollTo($story, 0, { axis: 'y', offset: 0 }); // Do this at view switch instead.
$feed_stories.scrollTo($story, 0, { axis: 'y', offset: 0 }); // Do this at view switch instead.
} else if (this.story_view == 'feed' || this.flags['page_view_showing_feed_view']) {
$feed_view.scrollable().stop();
$feed_view.scrollTo($story, 420, { axis: 'y', easing: 'easeInOutQuint', offset: 0, queue: false, onAfter: function() {
$feed_stories.scrollable().stop();
$feed_stories.scrollTo($story, 420, { axis: 'y', easing: 'easeInOutQuint', offset: 0, queue: false, onAfter: function() {
self.locks.scrolling = setTimeout(function() {
self.flags.scrolling_by_selecting_story_title = false;
}, 100);
@ -2586,6 +2585,7 @@
make_story_feed_entries: function(stories, first_load, options) {
var $feed_view = this.$s.$feed_view;
var $stories = this.$s.$feed_stories;
var self = this;
var unread_view = this.model.preference('unread_view');
var $stories;
@ -2593,12 +2593,11 @@
options = options || {};
if (first_load) {
$stories = $.make('ul', { className: 'NB-feed-stories' });
$('.NB-feed-stories', $feed_view).remove();
$feed_view.scrollTop('0px');
$stories.empty();
$stories.scrollTop('0px');
$feed_view.append($stories);
} else {
$stories = $('.NB-feed-stories', $feed_view);
$stories = this.$s.$feed_stories;
if (!options.refresh_load) {
$('.NB-feed-story-endbar', $feed_view).remove();
}
@ -2690,8 +2689,11 @@
show_correct_feed_in_feed_title_floater: function(story) {
var $feed_floater = this.$s.$feed_floater;
var $story = this.find_story_in_feed_view(story);
var $header = $('.NB-feed-story-header-feed', $story);
$feed_floater.empty().append($('.NB-feed-story-header-feed', $story).clone());
$('.NB-floater').removeClass('NB-floater');
$header.addClass('NB-floater');
$feed_floater.empty().append($header.clone());
},
apply_story_styling: function(reset_stories) {
@ -2753,7 +2755,7 @@
this.flags['feed_view_positions_calculated'] = true;
NEWSBLUR.log(['Feed view entirely loaded', this.model.stories.length + " stories"]);
var $feed_view = this.$s.$feed_view;
var $stories = $('.NB-feed-stories', $feed_view);
var $stories = this.$s.$feed_stories;
var $endbar = $.make('div', { className: 'NB-feed-story-endbar' });
$stories.find('.NB-feed-story-endbar').remove();
$stories.append($endbar);
@ -2900,14 +2902,14 @@
show_stories_preference_in_feed_view: function(is_creating) {
var $feed_view = this.$s.$feed_view;
var $feed_view_stories = $(".NB-feed-story", $feed_view);
var $stories = $('.NB-feed-stories', $feed_view);
var $stories = this.$s.$feed_stories;
var story = this.active_story;
if (story && this.model.preference('feed_view_single_story')) {
// NEWSBLUR.log(['show_stories_preference_in_feed_view', is_creating, this.model.preference('feed_view_single_story'), $feed_view_stories.length + " stories"]);
$stories.removeClass('NB-feed-view-feed').addClass('NB-feed-view-story');
$feed_view_stories.css({'display': 'none'});
$feed_view.scrollTop('0px');
this.$s.$feed_stories.scrollTop('0px');
var $current_story = this.get_current_story_from_story_titles($feed_view_stories);
if ($current_story && $current_story.length) {
$current_story.css({'display': 'block'});
@ -4836,7 +4838,7 @@
&& !this.flags['switching_to_feed_view']
&& !this.flags.scrolling_by_selecting_story_title
&& this.story_view != 'story') {
var from_top = this.cache.mouse_position_y + this.$s.$feed_view.scrollTop();
var from_top = this.cache.mouse_position_y + this.$s.$feed_stories.scrollTop();
var positions = this.cache.feed_view_story_positions_keys;
var closest = $.closest(from_top, positions);
var story = this.cache.feed_view_story_positions[positions[closest]];
@ -4855,13 +4857,23 @@
!this.flags['switching_to_feed_view'] &&
!this.flags['scrolling_by_selecting_story_title'] &&
!this.model.preference('feed_view_single_story')) {
var from_top = this.cache.mouse_position_y + this.$s.$feed_view.scrollTop();
var from_top = this.cache.mouse_position_y + this.$s.$feed_stories.scrollTop();
var positions = this.cache.feed_view_story_positions_keys;
var closest = $.closest(from_top, positions);
var story = this.cache.feed_view_story_positions[positions[closest]];
// NEWSBLUR.log(['Scroll feed view', from_top, e, closest, positions[closest], this.cache.feed_view_story_positions_keys, positions, self.cache]);
this.navigate_story_titles_to_story(story);
}
if (this.flags.river_view &&
!this.model.preference('feed_view_single_story')) {
var from_top = -3 + this.$s.$feed_stories.scrollTop();
var positions = this.cache.feed_view_story_positions_keys;
var closest = $.closest(from_top, positions);
var story = this.cache.feed_view_story_positions[positions[closest]];
this.show_correct_feed_in_feed_title_floater(story);
}
},
handle_keystrokes: function() {

11
templates/reader/feeds.xhtml
View file

@ -447,11 +447,12 @@ $(document).ready(function() {
<div id="story_pane" class="content-center">
<div class="NB-story-pane-container">
<iframe id="feed_iframe" class="NB-feed-iframe"></iframe>
<div class="NB-feed-story-view NB-view-hidden">
<div class="NB-feed-story-view-floater"></div>
</div>
<iframe id="story_iframe" class="NB-story-iframe"></iframe>
<iframe id="feed_iframe" class="NB-feed-iframe"></iframe>
<div class="NB-feed-story-view NB-view-hidden">
<div class="NB-feed-story-view-floater"></div>
<ul class="NB-feed-stories"></ul>
</div>
<iframe id="story_iframe" class="NB-story-iframe"></iframe>
</div>
</div>