Skip to content

Commit

Permalink
Fix: Error on scrolling when reading
Browse files Browse the repository at this point in the history
  • Loading branch information
ollm committed Aug 15, 2023
1 parent 72813f7 commit 9a34df4
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 61 deletions.
2 changes: 1 addition & 1 deletion scripts/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -1491,7 +1491,7 @@ module.exports = {
addSepToEnd: addSepToEnd,
indexPathControlUpdateLastComic: indexPathControlUpdateLastComic,
indexMainPathA: function(){return indexMainPathA},
dom: function(_this, string = false, querySelectorAll = false) {
this: function(_this, string = false, querySelectorAll = false) {
return new _dom(_this, string, querySelectorAll);
},
query: function(_this) {
Expand Down
119 changes: 59 additions & 60 deletions scripts/reading.js
Original file line number Diff line number Diff line change
Expand Up @@ -543,28 +543,39 @@ function disposeImages(data = false)
}
}

var rightSize = {}; // Right content size

function calculateView()
{
let contentRight = template.contentRight().get(0);

let content = template.contentRight().children('div');
let contentWidth = template.contentRight().width();
let content = contentRight.firstElementChild;
let rect = content.getBoundingClientRect();

rightSize = {
height: rect.height,
width: rect.width,
top: rect.top,
left: rect.left,
// readingRect: content.querySelector('.reading-body').getBoundingClientRect(),
scrollHeight: content.scrollHeight,
};

if(readingViewIs('slide'))
{
template.contentRight('.reading-body > div, .reading-lens > div > div').css({
'width': (contentWidth * indexNum)+'px',
'height': content.height(),
dom.this(contentRight).find('.reading-body > div, .reading-lens > div > div').css({
width: (rect.width * indexNum)+'px',
height: rect.height,
});
}
else if(readingViewIs('scroll'))
{
template.contentRight('.reading-body > div').css({
'width': '100%',
dom.this(contentRight).find('.reading-body > div').css({
width: '100%',
});

template.contentRight('.reading-lens > div > div').css({
'width': ($('.content-right').width())+'px',
dom.this(contentRight).find('.reading-lens > div > div').css({
width: rect.width+'px',
});
}

Expand All @@ -573,7 +584,7 @@ function calculateView()
imagesPosition = [];
imagesFullPosition = [];

let scrollTop = content.scrollTop() - content.offset().top;
let scrollTop = content.scrollTop - rect.top;

for(let key1 in imagesDistribution)
{
Expand Down Expand Up @@ -859,13 +870,13 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)

clearTimeout(disableOnScrollST);

disableOnScroll(1);
disableOnScroll(true);

disableOnScrollST = setTimeout(function(){

reading.disableOnScroll(2);
reading.disableOnScroll(false);

}, animationDurationMS);
}, animationDurationMS + 200); // Add 200 of margin to avoid errors

content.stop(true).animate({scrollTop: (scrollTop + scrollSum)+'px'}, animationDurationMS);
}
Expand Down Expand Up @@ -1250,7 +1261,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
if(config.readingGlobalZoom && readingViewIs('scroll'))
{
zoomingIn = true;
disableOnScroll(1);
disableOnScroll(true);

if(originalRect === false)
{
Expand Down Expand Up @@ -1324,7 +1335,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
scalePrevData.tranY = translateY;

calculateView();
disableOnScroll(2);
disableOnScroll(false);
zoomingIn = false;

if(scale == 1)
Expand Down Expand Up @@ -1780,12 +1791,9 @@ function readingViewIs(value)

var activeOnScroll = true;

function disableOnScroll(mode)
function disableOnScroll(disable = true)
{
if(mode == 1)
activeOnScroll = false;
else
activeOnScroll = true;
activeOnScroll = !disable;
}

function setReadingDragScroll(dragScroll)
Expand Down Expand Up @@ -3290,81 +3298,69 @@ async function read(path, index = 1, end = false, isCanvas = false)
$(window).on('mousewheel touchstart keydown', function(e) {

if(!zoomingIn && (e.type != 'keydown' || (e.type == 'keydown' && (e.keyCode == 38 || e.keyCode == 40))))
disableOnScroll(2);
disableOnScroll(false);

});

template.contentRight().children('div').on('scroll', function(e) {

if(activeOnScroll && readingViewIs('scroll'))
{
previousScrollTop = $(this).scrollTop();
let contentHeight = template.contentRight().children('div').height();
let contentPosition = (previousScrollTop + (contentHeight / 2)),
contentPositionTop = previousScrollTop,
contentPositionBottom = previousScrollTop + contentHeight;
let scrollTop = this.scrollTop;

let center = 0;

let selIndex = false, selPosition = false;
let availableScroll = rightSize.scrollHeight - rightSize.height;
let centerOffset = (availableScroll < rightSize.height ? availableScroll : rightSize.height) / 2;

let lastKey = imagesFullPosition.length - 1;
if(scrollTop < centerOffset)
center = scrollTop + (centerOffset * (scrollTop / centerOffset));
else if(scrollTop + centerOffset > availableScroll)
center = scrollTop + centerOffset + (centerOffset * (1 - (availableScroll - scrollTop) / centerOffset));
else
center = scrollTop + centerOffset;

let selIndex = false;
let closest = false;

toBreak:
for(let key1 in imagesFullPosition)
{
for(let key2 in imagesFullPosition[key1])
{
if(key1 == 0 && imagesFullPosition[key1][key2].center - contentPositionTop > 0)
{
selIndex = key1;
let position = imagesFullPosition[key1][key2];

break toBreak;
}
else if(key1 == lastKey && imagesFullPosition[key1][key2].center - contentPositionBottom < 0)
if(position.top < center && position.bottom > center)
{
selIndex = key1;

selIndex = +key1;
break toBreak;
}
else
{
var position = 0;

if(Math.abs(contentPosition - imagesFullPosition[key1][key2].top) < Math.abs(contentPosition - imagesFullPosition[key1][key2].bottom))
position = imagesFullPosition[key1][key2].top// + 16;
else
position = imagesFullPosition[key1][key2].bottom// - 16;

position = Math.abs(contentPosition - position);
let diff = Math.abs(position.center - center);

if(!selIndex || position < selPosition)
if(closest === false || diff < closest.diff)
{
selIndex = key1;
selPosition = position;
}
else if(selIndex && position > selPosition)
{
break toBreak;
selIndex = +key1;
closest = {center: position.center, diff: diff};
}
}
}
}

var imgHeight = imagesFullPosition[selIndex][0].bottom - imagesFullPosition[selIndex][0].top + (_config.readingMargin.top * 2);
let imgHeight = imagesFullPosition[selIndex][0].bottom - imagesFullPosition[selIndex][0].top + (_config.readingMargin.top * 2);

var pageVisibility = Math.floor(imgHeight / contentHeight);
let pageVisibility = Math.floor(imgHeight / rightSize.height);

maxPageVisibility = pageVisibility;

if(pageVisibility > 0)
var contentHeightRes = ((contentHeight * pageVisibility) - imgHeight) / pageVisibility;
else
var contentHeightRes = 0;
let contentHeightRes = pageVisibility > 0 ? ((rightSize.height * pageVisibility) - imgHeight) / pageVisibility : 0;

scrollPart = ((contentHeight - contentHeightRes) - contentHeight / pageVisibility);
scrollPart = ((rightSize.height - contentHeightRes) - rightSize.height / pageVisibility);

currentPageVisibility = Math.round((previousScrollTop - (imagesFullPosition[selIndex][0].top - _config.readingMargin.top)) / scrollPart);

if(currentIndex != (parseInt(selIndex) + 1))
if(currentIndex != selIndex + 1)
{
if(currentScale != 1 && !(config.readingGlobalZoom && readingViewIs('scroll')))
reading.resetZoom();
Expand Down Expand Up @@ -3394,8 +3390,10 @@ async function read(path, index = 1, end = false, isCanvas = false)
goToImageCL(imageIndex, true);
}

currentIndex = parseInt(selIndex) + 1;
currentIndex = selIndex + 1;
}

previousScrollTop = scrollTop;
}

});
Expand Down Expand Up @@ -3586,4 +3584,5 @@ module.exports = {
setShownBarHeader: function(value){shownBarHeader = value},
loadReadingMoreOptions: loadReadingMoreOptions,
currentScale: function(){return currentScale},
rightSize: function(){return rightSize},
};

0 comments on commit 9a34df4

Please sign in to comment.