Decouple scrolling of feeds and articles (#2117)

* Remove Sticky Kit

Remove sticky-kit, as functionality is unsuitable for separate scrolling.

* Remove sticky-kit load in main.js

Further removing the sticky-kit kruft

* Finish removal of references to Sticky-kit

* CSS Changes to template for Independent Scrolling

* Addition of JS and supporting CSS and html

* More CSS fixes to establish expected behavior

Should be able to scroll navbar without it being in sticky mode now.

* Fix typo in main.js

sortcut.js -> shortcut.js

* Fix unexpected tree scrolling behavior

* Change name of generic JS function

* Improve sticky-aside

* CSS changes in themes to accommodate  independent Scroll

In themes where .aside's width is not the standard 300px, .tree's width must be specified to be equal to .aside

* Remove Sticky-Kit from README files

* Updates to Sticky-Aside

* Update Template to fix screwup

* Make Recalculating height actually work

* Let sidebar fill height if nav buttons aren't visible

* Make accommodating for nav buttons actually work

* update Swage theme for Independent Scroll feature

* Integrate sticky_aside into main.js

* Add Simple Scrollbar

* Patch scrollbar color for themes with dark colored asides

* Increase Visibility of scrollbar on Dark Themes

* Improve async loading, events, and performance

* CSS typo

* Fix double scrollbar on mobile

* Fix regression causing sticky to not be removed

* No $ for non-jQuery variables

* Fix strange condition + option for nice scrollbar

* Initial attempt to use css sticky

* Add stickyfill

* make the correct element sticky

* re-add incorrectly removed sidebar code

* Continue fixing mistaken deletions

* decrease frequency of recalc

* use minified version of simple-scrollbar.

* Load stickyfill instead of injecting

* put recalc back where it belongs

* re-remove script injector

* remove padding

bottom padding was causing the last item in the feed to be hidden under the nav buttons

* Manual merge of css_scrollbar

Add auto-detection of -webkit-scrollbar-thumb, otherwise fall back to
simple-scrollbar.js

* Fix Regression

Sticky recalc is still needed when using css scrollbars

* Replace method of closing dropdowns

Changed from an overlay href to a javascript solution, for better compatibility

* Remove Treepadding

Treepadding was causing dropdown menus at the bottom of the tree to be obscured.

* Undo unnecessary move of dropdown-target

* Move Dropdown Handler to a sensibleish place

* Fix light Scrollbar color not picking up on Firefox

* Minor syntax

* Minor Clarification of CSS/ patch BlueLagoon

* Change logic for native WebKit scrollbar detection

Fix
https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444251419
Tested with Firefox 63, Firefox 65, Chrome 71, IE11, Edge 42

* Fixes for other views

E.g. reader view

* Cleaner way of generating hash for dropdowns

* Make dropdown-toggle an actual toggle

* Prepare for CSS Scrollbars Module Level 1

* Fix regression causing my labels dropdown not to appear

* remove unneeded dropdown-close css rule

* Re-apply some lost changes

https://github.com/FreshRSS/FreshRSS/pull/2117/commits/3c509989e890b88852e52c67c1c5507d1e0bf28c

* Add standard scrollbar compatibility

E.g. Firefox 64+

* Make All dropdowns click-to-close

* Remove BlueLagoon template

* Try to fix Firefox

https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r239539984

* Add CSS rules necessary for consistent function of scrollbar in Firefox

* Use inheritance to determine width

* Use overlay scrollbar where possible

* Test Reduced Listener

* Fix Firefox 62

And show subtle scrollbar even when not hovering

* Add margin at bottom

To allow opening the menus
https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444571218

* Minor - tab correction

* Spaces -> tabs

* Remove unneeded inheritance

* Fix indenting

* Revert bad merge

* Messy WIP to make dropdowns work

* Style Cleanup

* Break it down

* Lets try a move-it move-it

* Update p/scripts/main.js

Co-Authored-By: pattems <patrick@crandol.com>

* Update p/themes/BlueLagoon/BlueLagoon.css

Co-Authored-By: pattems <patrick@crandol.com>

*  separate ALL THE THINGS

* erroneous commas

* and to or

* removing double condition that doesn't do what I want

* More breaking down

* fix var

* Fix variable name again

* Remove magic number

https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240052598

* Suuuuper inelegant solution for dropdowns

* lets try that again

* Inelegant Fix For Dropdowns

Now with 100% more working dropdowns

* Make sidebar dropdowns work correctly?

* Fix reversion

* Make JS scrollbar always visible

* Remove unneeded CSS

Added early in this pull request, didn't get pulled out when it was obsolete

* Fix CSS removal I missed

* CSS comment update/consistency for dark themes

* Clean Up Duplicate code

* Make dropdowns properly hide

Downside: Can no longer click on header/nav buttons to close

* Strip unneeded if statement

* jshint -W018

https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240392851

* Half-reversion to old dropdown

* make overlay href scale to sidebar width

* remove init of nonexistent method

* remove trailing tabs

* move #close href where it belongs in index.phtml

* Revert all changes to index.phtml

* remove whitespace

accidentally added in last commit

* Move var's in init_column categories

* Finish putting old style dropdowns back

* Make CSS changes to use support statements

* Cleanup Whitespace

* re-add missing class

* spaces -> tabs in main.js

* tabs -> spaces css

* Minor whitespace

* Cleanup per @Alkarex

* Second attempt to add bottom margin

https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240820901

* Fix error in IE11

* Simple-scrollbar color match for dark themes

1 files changed, 78 insertions, 38 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 343534826..0f05a5bf6 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1,5 +1,5 @@
 "use strict";
-/* globals $, jQuery, context, i18n, shortcut, shortcuts, url */
+/* globals $, jQuery, context, i18n, shortcut, shortcuts, SimpleScrollbar, url */
 /* jshint strict:global */
 
 var $stream = null,
@@ -245,7 +245,6 @@ function toggleContent(new_active, old_active, skipping) {
 
 	if (context.does_lazyload && !skipping) {
 		new_active.find('img[data-original], iframe[data-original]').each(function () {
-			this.onload = function () { $(document.body).trigger("sticky_kit:recalc"); };
 			this.setAttribute('src', this.getAttribute('data-original'));
 			this.removeAttribute('data-original');
 		});
@@ -536,19 +535,6 @@ function inject_script(name) {
 	document.head.appendChild(script);
 }
 
-function init_sticky_column() {
-	if (!window.$ || !window.$.fn.stick_in_parent) {
-		if (window.console) {
-			console.log('FreshRSS waiting for Sticky-kit…');
-		}
-		window.setTimeout(init_sticky_column, 200);
-		return;
-	}
-	if ($('.toggle_aside').css('display') === 'none') {
-		$('#aside_feed .tree').stick_in_parent({parent:'#aside_feed'});
-	}
-}
-
 function init_column_categories() {
 	if (context.current_view !== 'normal') {
 		return;
@@ -564,38 +550,39 @@ function init_column_categories() {
 				this.alt = '▽';
 			}
 		});
-		$(this).parent().next(".tree-folder-items").slideToggle(300 , function() { $(document.body).trigger("sticky_kit:recalc"); });
+		$(this).parent().next(".tree-folder-items").slideToggle(300, function () {
+			if (useJsScrollbar && sidebar && typeof(Event) === 'function') { //Refresh JS scrollbar
+				sidebar.querySelector('.ss-content').dispatchEvent(new Event('scroll'));
+			}
+		});
 		return false;
 	});
+
 	$('#aside_feed').on('click', '.tree-folder-items .feed .dropdown-toggle', function () {
-		if ($(this).nextAll('.dropdown-menu').length === 0) {
-			var itemId = $(this).closest('.item').attr('id'),
-				templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template',
-				id = itemId.substr(2),
-				feed_web = $(this).data('fweb'),
-				template = $('#' + templateId)
-					.html().replace(/------/g, id).replace('http://example.net/', feed_web);
+		var itemId = $(this).closest('.item').attr('id'),
+			templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template',
+			id = itemId.substr(2),
+			feed_web = $(this).data('fweb'),
+			template = $('#' + templateId)
+				.html().replace(/------/g, id).replace('http://example.net/', feed_web);
+		if ($(this).next('.dropdown-menu').length === 0) {
 			$(this).attr('href', '#dropdown-' + id).prev('.dropdown-target').attr('id', 'dropdown-' + id).parent()
 				.append(template).find('button.confirm').removeAttr('disabled');
-			$('.tree-folder-items .dropdown-close a').click(function(){
-				$('.tree').removeClass('treepadding');
-				$(document.body).trigger("sticky_kit:recalc");
-			});
+		} else {
+			if ($(this).next('.dropdown-menu').css('display') === 'none') {
+				id = $(this).closest('.item').attr('id').substr(2);
+				$(this).attr('href', '#dropdown-' + id);
+			} else {
+				$(this).attr('href', "#close");
+			}
 		}
 	});
-
-	$('.tree-folder-items .dropdown-toggle').click(function(){
-		$('.tree').addClass('treepadding');
-		$(document.body).trigger("sticky_kit:recalc");
-	});
-
-	init_sticky_column();
 }
 
 function init_shortcuts() {
 	if (!(window.shortcut && window.shortcuts)) {
 		if (window.console) {
-			console.log('FreshRSS waiting for sortcut.js…');
+			console.log('FreshRSS waiting for shortcut.js…');
 		}
 		window.setTimeout(init_shortcuts, 200);
 		return;
@@ -854,8 +841,10 @@ function init_stream(divStream) {
 	}
 }
 
+var $nav_entries = null;
+
 function init_nav_entries() {
-	var $nav_entries = $('#nav_entries');
+	$nav_entries = $('#nav_entries');
 	$nav_entries.find('.previous_entry').click(function () {
 		prev_entry();
 		return false;
@@ -1193,7 +1182,6 @@ function load_more_posts() {
 		$('#load_more').removeClass('loading');
 		$('#bigMarkAsRead').removeAttr('disabled');
 		load_more = false;
-		$(document.body).trigger('sticky_kit:recalc');
 	});
 }
 
@@ -1286,7 +1274,59 @@ function init_crypto_form() {
 }
 //</crypto form (Web login)>
 
+var sidebar = document.getElementById('sidebar');
+var useJsScrollbar = true;
+try {
+	/*jshint -W018 */
+	useJsScrollbar = sidebar && !CSS.supports('scrollbar-color: auto') &&
+		!(parseInt(getComputedStyle(sidebar, '::-webkit-scrollbar').width) < sidebar.offsetWidth);
+	/*jshint +W018 */
+} catch (ex) {
+}
+if (useJsScrollbar) {
+	inject_script('simple-scrollbar.min.js');
+}
+
+function sticky_recalc() {
+	var h = 0;
+	if ($nav_entries && $nav_entries.length > 0) {
+		h = $(window).height() - sidebar.getBoundingClientRect().top - $nav_entries.height();
+	} else {
+		h = $(window).height() - sidebar.getBoundingClientRect().top;
+	}
+	if (h > 0) {
+		$(sidebar).height(h);
+	}
+}
+
+function init_simple_scrollbar() {
+	if (!window.SimpleScrollbar) {
+		if (window.console) {
+			console.log('FreshRSS waiting for simple-scrollbar…');
+		}
+		window.setTimeout(init_simple_scrollbar, 100);
+	} else {
+		SimpleScrollbar.initEl(sidebar);
+	}
+}
 
+var scrollTimeout;
+function init_sticky_sidebar(){
+	if (!sidebar) {
+		return;
+	}
+	if (useJsScrollbar) {
+		init_simple_scrollbar();
+	}
+	$(window).scroll(function () {
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+			scrollTimeout = null;
+		}
+		scrollTimeout = setTimeout(sticky_recalc, 200);
+	});
+	window.onresize = sticky_recalc;
+}
 
 function init_confirm_action() {
 	$('body').on('click', '.confirm', function () {
@@ -1536,7 +1576,6 @@ function init_beforeDOM() {
 		return;
 	}
 	if (['normal', 'reader', 'global'].indexOf(context.current_view) >= 0) {
-		inject_script('jquery.sticky-kit.min.js');
 		init_normal();
 	}
 }
@@ -1554,6 +1593,7 @@ function init_afterDOM() {
 	$stream = $('#stream');
 	if ($stream.length > 0) {
 		init_load_more($stream);
+		init_sticky_sidebar();
 		init_posts();
 		init_nav_entries();
 		init_dynamic_tags();