replace sticky_kit with a simpler homwgrown solution (still a bit raw) and slightly change the way we load new content so that people with a long aside column do not have to scroll all the way to the bottom for loading the next page

12 files changed, 79 insertions, 59 deletions

diff --git a/view/js/main.js b/view/js/main.js
index cd95a8a0b..0c48c8b18 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1563,7 +1563,7 @@ function zFormError(elm,x) {
 $(window).scroll(function () {
 	if(typeof buildCmd == 'function') {
 		// This is a content page with items and/or conversations
-		if($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
+		if($(window).scrollTop() + $(window).height() > $('#conversation-end').position().top) {
 			if((pageHasMoreContent) && (! loadingPage)) {
 				next_page++;
 				scroll_next = true;
@@ -1574,7 +1574,7 @@ $(window).scroll(function () {
 	}
 	else {
 		// This is some other kind of page - perhaps a directory
-		if($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
+		if($(window).scrollTop() + $(window).height() > $('#page-end').position().top) {
 			if((pageHasMoreContent) && (! loadingPage) && (! justifiedGalleryActive)) {
 				next_page++;
 				scroll_next = true;
diff --git a/view/js/mod_help.js b/view/js/mod_help.js
index 107845c04..9c3591498 100644
--- a/view/js/mod_help.js
+++ b/view/js/mod_help.js
@@ -14,7 +14,7 @@ toc = {};
 $(document).ready(function () {
 	// Generate the table of contents in the side nav menu (see view/tpl/help.tpl)
 	$('#doco-top-toc').toc({content: "#doco-content", headings: "h3,h4,h5,h6"});
-	
+
 	$(".doco-section").find('a').each(function () {
 		var url = document.createElement('a');
 		url.href = window.location;
@@ -31,8 +31,6 @@ $(document).ready(function () {
 		}
 	});
 
-	$(document.body).trigger("sticky_kit:recalc");
-
 	toc.contentTop = [];
 	toc.edgeMargin = 20;   // margin above the top or margin from the end of the page
 	toc.topRange = 200;  // measure from the top of the viewport to X pixels down
@@ -72,7 +70,7 @@ $(document).ready(function () {
 		location.replace(newref)
 	}
 
-	
+
 	// Determine language translations available from the language selector menu itself
 	var langChoices = [];
 	$('.lang-selector').find('.lang-choice').each(function (idx, a) {
@@ -89,7 +87,7 @@ $(document).ready(function () {
 				pathParts.push(help_language);
 				pick_me = false;
 				if($.inArray(path[i], langChoices) < 0) {
-					i--;	
+					i--;
 				}
 			}
 		} else {
@@ -97,20 +95,20 @@ $(document).ready(function () {
 				pathParts.push(path[i]);
 			}
 		}
-		
+
 	}
 	// Update the address bar to reflect the loaded language
 	window.history.replaceState({}, '', '/' + pathParts.join('/'));
-	
+
 	// Highlight the language in the language selector that is currently viewed
 	$('.lang-selector').find('.lang-choice:contains("' + help_language + '")').addClass('active');
-	
+
 	// Construct the links to the available translations based and populate the selector menu
 	$('.lang-selector').find('.lang-choice').each(function (idx, a) {
 		var langLink = [];
 
 		for (var i = 0; i < pathParts.length; i++) {
-			
+
 			if(i === 1) {
 				langLink.push($(a).html());
 			} else {
@@ -120,5 +118,5 @@ $(document).ready(function () {
 		}
 		$(a).attr('href', '/' + langLink.join('/'));
 	});
-	
+
 });
diff --git a/view/php/default.php b/view/php/default.php
index df9b02c4e..6f0735a11 100644
--- a/view/php/default.php
+++ b/view/php/default.php
@@ -12,12 +12,12 @@
 	<main>
 		<div class="content">
 			<div class="columns">
-				<aside id="region_1"><div class="aside_spacer"><div id="left_aside_wrapper"><?php if(x($page,'aside')) echo $page['aside']; ?></div></div></aside>
+				<aside id="region_1"><div class="aside_spacer_top_left"></div><div class="aside_spacer_left"><div id="left_aside_wrapper" class="aside_wrapper"><?php if(x($page,'aside')) echo $page['aside']; ?></div></div></aside>
 				<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>
 					<div id="page-footer"></div>
 					<div id="pause"></div>
 				</section>
-				<aside id="region_3" class="d-none d-xl-block"><div class="aside_spacer"><div id="right_aside_wrapper"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></div></div></aside>
+				<aside id="region_3" class="d-none d-xl-block"><div class="aside_spacer_top_right"></div><div class="aside_spacer_right"><div id="right_aside_wrapper" class="aside_wrapper"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></div></div></aside>
 			</div>
 		</div>
 	</main>
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index a0118fa71..bf34f210a 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -20,7 +20,6 @@ head_add_js('autocomplete.js');
 
 head_add_js('/library/jquery.timeago.js');
 head_add_js('/library/readmore.js/readmore.js');
-head_add_js('/library/sticky-kit/sticky-kit.min.js');
 head_add_js('/library/jgrowl/jquery.jgrowl.min.js');
 
 head_add_js('/library/sjcl/sjcl.js');
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 8d3b795cc..b0b8d5dfc 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -17,13 +17,8 @@ $(document).ready(function() {
 	}
 	$('#css3-calc').remove(); // Remove the test element
 
-	if($(window).width() >= 992) {
-		$('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({
-			offset_top: parseInt($('aside').css('padding-top')),
-			parent: 'main',
-			spacer: '.aside_spacer'
-		});
-	}
+	stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0);
+	stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20);
 
 	$('#expand-aside').on('click', toggleAside);
 
@@ -33,24 +28,6 @@ $(document).ready(function() {
 		}
 	});
 
-	var left_aside_height = $('#left_aside_wrapper').height();
-
-	$('#left_aside_wrapper').on('click', function() {
-		if(left_aside_height != $('#left_aside_wrapper').height()) {
-			$(document.body).trigger("sticky_kit:recalc");
-			left_aside_height = $('#left_aside_wrapper').height();
-		}
-	});
-
-
-	var right_aside_height = $('#right_aside_wrapper').height();
-
-	$('#right_aside_wrapper').on('click', function() {
-		if(right_aside_height != $('#right_aside_wrapper').height()) {
-			$(document.body).trigger("sticky_kit:recalc");
-			right_aside_height = $('#right_aside_wrapper').height();
-		}
-	});
 
 	$('.usermenu').click(function() {
 		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){
@@ -84,7 +61,7 @@ $(document).ready(function() {
 	var doctitle = document.title;
 	function checkNotify() {
 		var notifyUpdateElem = document.getElementById('notify-update');
-		if(notifyUpdateElem !== null) { 
+		if(notifyUpdateElem !== null) {
 			if(notifyUpdateElem.innerHTML !== "")
 				document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
 			else
@@ -94,6 +71,58 @@ $(document).ready(function() {
 	setInterval(function () {checkNotify();}, 10 * 1000);
 });
 
+function setStyle(element, cssProperty) {
+	for (var property in cssProperty){
+		element.style[property] = cssProperty[property];
+	}
+}
+
+function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) {
+	var lastScrollTop = 0;
+	var sticky = document.querySelector(sticky);
+	var stickyHeight = sticky.getBoundingClientRect().height;
+	var stickyTop = document.querySelector(stickyTop);
+	var content = document.querySelector(container);
+	var diff = window.innerHeight - stickyHeight;
+	var h = 0;
+	var lasth = 0;
+	var st = window.pageYOffset || document.documentElement.scrollTop;
+
+	var resizeObserver = new ResizeObserver(function(entries) {
+		stickyHeight = sticky.getBoundingClientRect().height;
+		st = window.pageYOffset || document.documentElement.scrollTop;
+		diff = window.innerHeight - stickyHeight;
+	});
+
+	resizeObserver.observe(sticky);
+	resizeObserver.observe(content);
+
+	window.addEventListener('scroll', function() {
+		if(window.innerHeight > stickyHeight + topOffset) {
+			setStyle(stickyTop, { height: 0 + 'px' });
+			setStyle(sticky, { position: 'sticky', top: topOffset + 'px'});
+		}
+		else {
+			st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+			if (st > lastScrollTop){
+				// downscroll code
+				setStyle(stickyTop, { height: lasth + 'px' });
+				setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' });
+			} else {
+				// upscroll code
+				h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top - topOffset;
+				if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) {
+					setStyle(stickyTop, { height: Math.round(h) + 'px' });
+				}
+				lasth = Math.round(h);
+				setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff - topOffset) + 'px' });
+			}
+			lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+		}
+	}, false);
+
+}
+
 function makeFullScreen(full) {
 	if(typeof full=='undefined' || full == true) {
 		$('main').addClass('fullscreen');
@@ -104,7 +133,6 @@ function makeFullScreen(full) {
 		$('main').removeClass('fullscreen');
 		$('header, nav, aside, #fullscreen-btn').show();
 		$('#inline-btn').hide();
-		$(document.body).trigger("sticky_kit:recalc");
 	}
 }
 
@@ -114,16 +142,10 @@ function toggleAside() {
 		$('html, body').css('overflow-x', '');
 		$('main').removeClass('region_1-on')
 		$('#overlay').remove();
-		$('#left_aside_wrapper').trigger("sticky_kit:detach");
 	}
 	else {
 		$('html, body').css('overflow-x', 'hidden');
 		$('main').addClass('region_1-on')
 		$('<div id="overlay"></div>').appendTo('section');
-		$('#left_aside_wrapper').stick_in_parent({
-			offset_top: parseInt($('aside').css('padding-top')),
-			parent: 'main',
-			spacer: '.aside_spacer'
-		});
 	}
 }
diff --git a/view/theme/redbasic/php/theme_init.php b/view/theme/redbasic/php/theme_init.php
index 5f73f6736..0ac580f0e 100644
--- a/view/theme/redbasic/php/theme_init.php
+++ b/view/theme/redbasic/php/theme_init.php
@@ -13,5 +13,3 @@ head_add_js('/library/bootbox/bootbox.min.js');
 head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js');
 head_add_js('/library/datetimepicker/jquery.datetimepicker.js');
 head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js');
-
-
diff --git a/view/tpl/directory_header.tpl b/view/tpl/directory_header.tpl
index 3ee9ee326..568e03cd0 100644
--- a/view/tpl/directory_header.tpl
+++ b/view/tpl/directory_header.tpl
@@ -16,7 +16,8 @@
 	{{foreach $entries as $entry}}
 		{{include file="direntry.tpl"}}
 	{{/foreach}}
-	<div id="page-end"></div>
+	{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+	<div id="page-end" class="float-left w-100"></div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
 <div id="page-spinner" class="spinner-wrapper">
diff --git a/view/tpl/notes.tpl b/view/tpl/notes.tpl
index 67da5ff37..4bee02aa0 100644
--- a/view/tpl/notes.tpl
+++ b/view/tpl/notes.tpl
@@ -16,7 +16,6 @@
 		$(document).ready(function(e){
 			noteText.on('change keyup keydown paste cut', function () {
 				noteText.height(0).height(noteText[0].scrollHeight);
-				$(document.body).trigger("sticky_kit:recalc");
 			}).change();
 		});
 
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 1a24ca7c4..1092bc155 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -137,7 +137,7 @@
 	}
 </script>
 
-<div id="notifications_wrapper">
+<div id="notifications_wrapper" class="mb-4">
 	<div id="no_notifications" class="d-xl-none">
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
@@ -154,7 +154,7 @@
 			<span class="float-right badge badge-secondary">{10}</span>
 			<img class="menu-img-1" data-src="{1}" loading="lazy">
 			<span class="">{2}</span>
-			<i class="fa fa-{11} text-muted"></i> 
+			<i class="fa fa-{11} text-muted"></i>
 		</a>
 	</div>
 	<div id="notifications" class="border border-bottom-0 rounded navbar-nav collapse">
diff --git a/view/tpl/photo_album.tpl b/view/tpl/photo_album.tpl
index eb16bcc98..ad4e2a38c 100644
--- a/view/tpl/photo_album.tpl
+++ b/view/tpl/photo_album.tpl
@@ -18,12 +18,13 @@
 	</div>
 	{{$upload_form}}
 	{{$album_edit.1}}
-	<div class="section-content-wrapper-np">
+	<div class="section-content-wrapper-np clearfix">
 		<div id="photo-album-contents-{{$album_id}}" style="display: none">
 			{{foreach $photos as $photo}}
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
-			<span id="page-end"></span>
+			{{** make sure this element is at the bottom - we rely on that for endless scroll **}}
+			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/photos_recent.tpl b/view/tpl/photos_recent.tpl
index 1e2f22e33..63c8b3515 100644
--- a/view/tpl/photos_recent.tpl
+++ b/view/tpl/photos_recent.tpl
@@ -9,12 +9,13 @@
 		<div class="clear"></div>
 	</div>
 	{{$upload_form}}
-	<div class="section-content-wrapper-np">
+	<div class="section-content-wrapper-np clearfix">
 		<div id="photo-album-contents-{{$album_id}}" style="display: none">
 			{{foreach $photos as $photo}}
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
-			<span id="page-end"></span>
+			{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/viewcontact_template.tpl b/view/tpl/viewcontact_template.tpl
index 005fe17ce..cbbf3a97c 100644
--- a/view/tpl/viewcontact_template.tpl
+++ b/view/tpl/viewcontact_template.tpl
@@ -6,7 +6,8 @@
 		{{foreach $contacts as $contact}}
 		{{include file="contact_template.tpl"}}
 		{{/foreach}}
-		<div id="page-end"></div>
+		{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+		<div id="page-end" class="float-left w-100"></div>
 	</div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>