TheRON/core
1
0
Fork 0
mirror of https://framagit.org/hubzilla/core.git synced 2026-06-21 00:52:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mario
2021-02-25 12:55:19 +00:00
parent a033c439f3
commit b29e121113
12 changed files with 79 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
view/js/main.js
View File

@@ -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;

18
view/js/mod_help.js
View File

@@ -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('/'));
});
});

4
view/php/default.php
View File

@@ -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>

1
view/php/theme_init.php
View File

@@ -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');

88
view/theme/redbasic/js/redbasic.js
View File

@@ -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'
});
}
}

2
view/theme/redbasic/php/theme_init.php
View File

@@ -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');

3
view/tpl/directory_header.tpl
View File

@@ -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">

1
view/tpl/notes.tpl
View File

@@ -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();
});

4
view/tpl/notifications_widget.tpl
View File

@@ -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">

5
view/tpl/photo_album.tpl
View File

@@ -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>

5
view/tpl/photos_recent.tpl
View File

@@ -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>

3
view/tpl/viewcontact_template.tpl
View File

@@ -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>