diff options
-rw-r--r-- | view/js/main.js | 4 | ||||
-rw-r--r-- | view/js/mod_help.js | 18 | ||||
-rw-r--r-- | view/php/default.php | 4 | ||||
-rw-r--r-- | view/php/theme_init.php | 1 | ||||
-rw-r--r-- | view/theme/redbasic/js/redbasic.js | 88 | ||||
-rw-r--r-- | view/theme/redbasic/php/theme_init.php | 2 | ||||
-rw-r--r-- | view/tpl/directory_header.tpl | 3 | ||||
-rw-r--r-- | view/tpl/notes.tpl | 1 | ||||
-rw-r--r-- | view/tpl/notifications_widget.tpl | 4 | ||||
-rw-r--r-- | view/tpl/photo_album.tpl | 5 | ||||
-rw-r--r-- | view/tpl/photos_recent.tpl | 5 | ||||
-rw-r--r-- | view/tpl/viewcontact_template.tpl | 3 |
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> |