aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2021-02-25 12:55:19 +0000
committerMario <mario@mariovavti.com>2021-02-25 12:55:19 +0000
commitb29e121113a588d88b3d8f4265bece2c5e997cef (patch)
treec48d9caf50633015374ac07cda5c2b91aba150f7 /view/theme
parenta033c439f3486c6ce31fb5d680c363ce0582d451 (diff)
downloadvolse-hubzilla-b29e121113a588d88b3d8f4265bece2c5e997cef.tar.gz
volse-hubzilla-b29e121113a588d88b3d8f4265bece2c5e997cef.tar.bz2
volse-hubzilla-b29e121113a588d88b3d8f4265bece2c5e997cef.zip
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
Diffstat (limited to 'view/theme')
-rw-r--r--view/theme/redbasic/js/redbasic.js88
-rw-r--r--view/theme/redbasic/php/theme_init.php2
2 files changed, 55 insertions, 35 deletions
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');
-
-