gdorn/FreshRSS-Extensions
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve sticky feed extension

Browse source 
Fix https://github.com/FreshRSS/FreshRSS/issues/753
This commit is contained in:
Marien Fressinaud 2015-01-17 15:00:35 +01:00
parent 6ac80cbdb9
commit 8c1546ca66
2 changed files with 36 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
xExtension-StickyFeeds/static/script.js
View file

@ -1,12 +1,15 @@
"use strict"; "use strict";
var sticky_feeds = { var sticky_feeds = {
aside: null,
tree: null, tree: null,
initial_pos_top: 0,
width: 0,
window: null, window: null,
init: function() { init: function() {
if (window.matchMedia("(max-width: 840px)").matches) {
return;
}
if (!window.$) { if (!window.$) {
window.setTimeout(sticky_feeds.init, 50); window.setTimeout(sticky_feeds.init, 50);
return; return;
@ -14,11 +17,18 @@ var sticky_feeds = {
sticky_feeds.tree = $('#aside_feed .tree'); sticky_feeds.tree = $('#aside_feed .tree');
if (sticky_feeds.tree.length > 0) { if (sticky_feeds.tree.length > 0) {
// Get the "real" window height: don't forget to remove the height
// of the #nav_entries
sticky_feeds.window = $(window); sticky_feeds.window = $(window);
sticky_feeds.initial_pos_top = sticky_feeds.tree.position().top; sticky_feeds.window.height = sticky_feeds.window.height() - $('#nav_entries').height();
sticky_feeds.tree.css('min-width', $('#aside_feed').width());
sticky_feeds.tree.addClass('sticky');
// Make the aside "sticky" and save the initial position.
sticky_feeds.aside = $('#aside_feed');
sticky_feeds.aside.addClass('sticky');
sticky_feeds.aside.initial_pos = sticky_feeds.aside.position();
sticky_feeds.tree.initial_pos = sticky_feeds.tree.position();
// Attach the scroller method to the window scroll.
sticky_feeds.window.on('scroll', sticky_feeds.scroller); sticky_feeds.window.on('scroll', sticky_feeds.scroller);
sticky_feeds.scroller(); sticky_feeds.scroller();
} }
@ -27,10 +37,20 @@ var sticky_feeds = {
scroller: function() { scroller: function() {
var pos_top_window = sticky_feeds.window.scrollTop(); var pos_top_window = sticky_feeds.window.scrollTop();
if (pos_top_window < sticky_feeds.initial_pos_top) { if (pos_top_window < sticky_feeds.aside.initial_pos.top + sticky_feeds.tree.initial_pos.top) {
sticky_feeds.tree.css('top', sticky_feeds.initial_pos_top - pos_top_window + 10); // scroll top has not reached the top of the sticky tree yet so it
// stays in place but its height must adapted:
// window height - sticky tree pos top + actual scroll top
var real_tree_pos_top = sticky_feeds.aside.initial_pos.top - sticky_feeds.tree.initial_pos.top;
sticky_feeds.tree.css('top', sticky_feeds.tree.initial_pos.top);
sticky_feeds.tree.css('height', sticky_feeds.window.height - real_tree_pos_top + pos_top_window);
} else { } else {
sticky_feeds.tree.css('top', 0); // Now we have to make the tree follow the window. It's quite easy
// since its position is calculated from the parent aside.
// The height is also easier to calculate since it's just the window
// height.
sticky_feeds.tree.css('top', pos_top_window - sticky_feeds.aside.initial_pos.top);
sticky_feeds.tree.css('height', sticky_feeds.window.height);
} }
}, },
}; };

12
xExtension-StickyFeeds/static/style.css
View file

@ -1,14 +1,18 @@
#aside_feed .tree.sticky { #aside_feed.sticky {
position: fixed; position: relative;
top: 0; bottom: 0; }
#aside_feed.sticky .tree {
position: absolute;
left: 0; left: 0;
width: 100%;
margin-top: 0; margin-top: 0;
overflow-y: auto; overflow-y: auto;
} }
@media(max-width: 840px) { @media(max-width: 840px) {
/* No effect on mobile */ /* No effect on mobile */
#aside_feed .tree.sticky { #aside_feed.sticky .tree {
position: static; position: static;
} }
} }