Skip to content

Commit 92b28c2

Browse files
ollmollm
committed
New: Some display errors when applying global zoom
1 parent f831749 commit 92b28c2

File tree

4 files changed

+67
-40
lines changed

4 files changed

+67
-40
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1919
- Wrong cache folder in windows causing some bugs [`8b97435`](https://github.com/ollm/OpenComic/commit/dd6facaf67343185fa06b2377fdc64e66ad9090d)
2020
- Extract large RAR and ZIP files blocks the app for a while [`adbdced`](https://github.com/ollm/OpenComic/commit/adbdceda278e6184bc477581be9a25b8fc0f166b)
2121
- RAR error on extract with files some special chars (Changed unrar to node-unrar-js) [`694fe27`](https://github.com/ollm/OpenComic/commit/694fe274982c0a9ad2421c6b226abceae1602c3a)
22-
- Cannot open filtered files with the keyboard
22+
- Cannot open filtered files with the keyboard [`f831749`](https://github.com/ollm/OpenComic/commit/f8317499a40e6fa45a75988ee1bea31a9135c9bf)
23+
- Some display errors when applying global zoom
2324

2425
## [v1.0.0-beta.3](https://github.com/ollm/OpenComic/releases/tag/v1.0.0-beta.3) (09-10-2023)
2526

‎scripts/dom.js

-5
Original file line numberDiff line numberDiff line change
@@ -905,11 +905,6 @@ function loadRecentlyOpened(animation = true)
905905

906906
generateAppMenu();
907907

908-
template.loadContentRight('index.content.right.loading.html', animation);
909-
template.loadHeader('recently.opened.header.html', animation);
910-
template.loadGlobalElement('general.elements.menus.html', 'menus');
911-
floatingActionButton(false);
912-
913908
recentlyOpened.load(animation);
914909

915910
if(readingActive)

‎scripts/reading.js

+55-31
Original file line numberDiff line numberDiff line change
@@ -706,6 +706,8 @@ function changeHeaderButtons(scrollInStart = null, scrollInEnd = null)
706706
//Go to a specific comic image (Left menu)
707707
function goToImageCL(index, animation = true, fromScroll = false)
708708
{
709+
if(!onReading) return;
710+
709711
render.focusIndex(index);
710712
filters.focusIndex(index);
711713

@@ -1436,7 +1438,7 @@ function showPreviousComic(mode, animation = true, invert = false)
14361438
}
14371439
}
14381440

1439-
var currentScale = 1, scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0}, originalRect = false, originalRectReadingBody = false, haveZoom = false, currentZoomIndex = false, applyScaleST = false, zoomingIn = false, prevAnime = false;
1441+
var currentScale = 1, scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0}, originalRect = false, originalRectReadingBody = false, originalRect2 = false, originalRectReadingBody2 = false, haveZoom = false, currentZoomIndex = false, applyScaleST = false, zoomingIn = false, prevAnime = false;
14401442

14411443
function applyScaleScrollAndHeight()
14421444
{
@@ -1457,7 +1459,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
14571459
}
14581460
else
14591461
{
1460-
var currentRect = template.contentRight('.image-position'+(currentIndex - 1)).get(0).getBoundingClientRect();
1462+
let currentRect = template.contentRight('.image-position'+(currentIndex - 1)).get(0).getBoundingClientRect();
14611463

14621464
if(currentRect.top > currentPageXY.y && (currentIndex - 2) >= 0)
14631465
{
@@ -1483,8 +1485,10 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
14831485
else
14841486
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.resetZoom).html('zoom_out_map');
14851487

1486-
let content = template.contentRight().children();
1487-
content.stop(true);
1488+
let contentRight = template._contentRight();
1489+
1490+
let content = contentRight.firstElementChild;
1491+
$(content).stop(true);
14881492

14891493
clearTimeout(applyScaleST);
14901494

@@ -1495,81 +1499,98 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
14951499

14961500
if(originalRect === false)
14971501
{
1498-
originalRect = template.contentRight('.reading-body').get(0).getBoundingClientRect();
1499-
originalRectReadingBody = template.contentRight().children().get(0).getBoundingClientRect();
1502+
originalRect = originalRect2 = contentRight.querySelector('.reading-body').getBoundingClientRect();
1503+
originalRectReadingBody = content.getBoundingClientRect();
15001504
}
1505+
else if(originalRect2 === false)
1506+
{
1507+
originalRect2 = contentRight.querySelector('.reading-body').getBoundingClientRect();
1508+
}
1509+
1510+
scrollTop = content.scrollTop;
1511+
scrollHeight = content.scrollHeight;
15011512

1502-
scrollTop = content.scrollTop();
1513+
let _scale = scalePrevData._scale ? scale / scalePrevData._scale : scale;
15031514

1504-
let pageX = currentPageXY.x - originalRect.left;
1505-
let pageY = currentPageXY.y + scrollTop - originalRectReadingBody.top;
1515+
let scaleOffset = 1 / scale;
15061516

1507-
let addX = (0.5 - (pageX / originalRect.width)) * originalRect.width;
1508-
let addY = (0.5 - (pageY / originalRect.height)) * originalRect.height;
1517+
let pageX = currentPageXY.x - originalRect2.left;
1518+
let pageY = currentPageXY.y - originalRectReadingBody.top;
1519+
1520+
let addX = (0.5 - (pageX / originalRect2.width)) * originalRect2.width;
1521+
let addY = pageY;
15091522

15101523
if(center)
15111524
{
15121525
addX = 0;
1513-
addY = (originalRect.height / 2 - originalRectReadingBody.height / 2) - scrollTop;
1514-
1515-
//if(addY > 0)
1516-
// addY = 0;
1526+
addY = originalRectReadingBody.height / 2;
15171527
}
15181528

15191529
translateX = (scalePrevData.tranX / scalePrevData.scale * scale) + (addX / scalePrevData.scale * (scale - scalePrevData.scale));
1520-
translateY = (scalePrevData.tranY / scalePrevData.scale * scale) + (addY / scalePrevData.scale * (scale - scalePrevData.scale));
15211530

15221531
if(zoomOut)
15231532
translateX = scalePrevData.tranX * (scale - 1) / (scalePrevData.scale - 1);
15241533

1534+
let scaleOffsetY = (originalRect2.height * _scale - originalRect2.height);
1535+
1536+
translateY = -(scaleOffsetY * (scrollTop / scrollHeight));
1537+
translateY = translateY - (addY * (scaleOffsetY / originalRect2.height));
1538+
1539+
if(translateY > scrollTop)
1540+
translateY = scrollTop;
1541+
else if(originalRect2.height * _scale + translateY < scrollTop + originalRectReadingBody.height)
1542+
translateY = (scrollTop + originalRectReadingBody.height) - originalRect2.height * _scale;
1543+
15251544
if(scale <= 1)
15261545
{
15271546
translateX = 0;
1528-
if(scale < 1) translateY = 0;
15291547
haveZoom = false;
15301548
}
15311549
else
15321550
{
15331551
haveZoom = true;
15341552
}
15351553

1536-
template.contentRight('.reading-body > div').css({
1554+
dom.this(contentRight).find('.reading-body > div').css({
15371555
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
15381556
transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
1539-
transformOrigin: 'center center',
1557+
transformOrigin: 'top center',
15401558
zIndex: 1,
1541-
// willChange: scale == 1 ? '' : 'transform',
15421559
});
15431560

15441561
applyScaleST = setTimeout(function() {
15451562

1546-
let scrollTop = content.scrollTop();
1563+
let scrollTop = content.scrollTop;
15471564

1548-
let translateY = (originalRect.height * scale - originalRect.height) / 2;
1565+
let translateY = 0;
15491566

1550-
template.contentRight('.reading-body').css({
1567+
dom.this(contentRight).find('.reading-body').css({
15511568
height: (scale == 1 ? '' : (originalRect.height * scale)+'px'),
15521569
});
15531570

1554-
template.contentRight('.reading-body > div').css({
1571+
dom.this(contentRight).find('.reading-body > div').css({
15551572
transition: 'transform 0s, z-index 0s',
15561573
transform: 'translateX('+app.roundDPR(scalePrevData.tranX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
15571574
});
15581575

1559-
content.scrollTop(scrollTop + (translateY - scalePrevData.tranY));
1576+
content.scrollTop = scrollTop + (translateY - scalePrevData.tranY);
15601577

15611578
scalePrevData.tranY = translateY;
15621579

15631580
calculateView();
15641581
disableOnScroll(false);
15651582
zoomingIn = false;
15661583

1584+
originalRect2 = false;
1585+
15671586
if(scale == 1)
15681587
{
15691588
originalRect = false;
15701589
currentZoomIndex = false;
15711590
}
15721591

1592+
scalePrevData._scale = scale;
1593+
15731594
fixBlurOnZoom(scale);
15741595

15751596
}, animationDurationS * 1000 + 100);
@@ -1578,8 +1599,8 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
15781599
{
15791600
if(originalRect === false)
15801601
{
1581-
originalRect = template.contentRight('.image-position'+currentZoomIndex).get(0).getBoundingClientRect();
1582-
originalRectReadingBody = template.contentRight().children().get(0).getBoundingClientRect();
1602+
originalRect = contentRight.querySelector('.image-position'+currentZoomIndex).getBoundingClientRect();
1603+
originalRectReadingBody = content.getBoundingClientRect();
15831604
}
15841605

15851606
if(!zoomOut)
@@ -1616,7 +1637,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
16161637
haveZoom = true;
16171638
}
16181639

1619-
template.contentRight('.image-position'+currentZoomIndex).css({
1640+
dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
16201641
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
16211642
transform: 'translateX('+app.roundDPR(translateX)+'px) translateY('+app.roundDPR(translateY)+'px) scale('+scale+')',
16221643
transformOrigin: 'center center',
@@ -1643,6 +1664,7 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
16431664
tranY: translateY,
16441665
tranY2: translateY,
16451666
scale: scale,
1667+
_scale: scalePrevData._scale,
16461668
scrollTop: scrollTop,
16471669
};
16481670

@@ -1805,23 +1827,25 @@ function dragZoom(x, y)
18051827
else if(y < minY)
18061828
y = minY;
18071829

1830+
let contentRight = template._contentRight();
1831+
18081832
if(config.readingGlobalZoom && readingViewIs('scroll'))
18091833
{
18101834
scalePrevData.tranX = zoomMoveData.tranX = x;
18111835
zoomMoveData.tranY = scalePrevData.tranY;
18121836

1813-
template.contentRight('.reading-body > div').css({
1837+
dom.this(contentRight).find('.reading-body > div').css({
18141838
transition: 'transform 0s, z-index 0s',
18151839
transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(scalePrevData.tranY)+'px) scale('+scalePrevData.scale+')',
1816-
transformOrigin: 'center center',
1840+
transformOrigin: 'top center',
18171841
});
18181842
}
18191843
else
18201844
{
18211845
zoomMoveData.tranX = x;
18221846
zoomMoveData.tranY = y;
18231847

1824-
template.contentRight('.image-position'+currentZoomIndex).css({
1848+
dom.this(contentRight).find('.image-position'+currentZoomIndex, true).css({
18251849
transition: 'transform 0s, z-index 0s',
18261850
transform: 'translateX('+app.roundDPR(x)+'px) translateY('+app.roundDPR(y)+'px) scale('+scalePrevData.scale+')',
18271851
transformOrigin: 'center center',

‎scripts/recently-opened.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ async function load(animation = true, content = false)
1212
{
1313
dom.indexPathControl(false, false, false, false, true);
1414

15+
template.loadContentRight('index.content.right.loading.html', animation);
16+
template.loadHeader('recently.opened.header.html', animation);
17+
18+
let now = Date.now();
19+
1520
let sort = config.sortRecentlyOpened;
1621
let sortInvert = config.sortInvertRecentlyOpened;
1722
let foldersFirst = config.foldersFirstRecentlyOpened;
@@ -96,7 +101,7 @@ async function load(animation = true, content = false)
96101
comics[key].readingProgress = readingProgress[comics[key].path] || {lastReading: 0};
97102
}
98103

99-
comics.sort(function (a, b) {
104+
comics.sort(function(a, b) {
100105
return (sortInvert) ? -(dom.orderBy(a, b, order, orderKey, orderKey2)) : dom.orderBy(a, b, order, orderKey, orderKey2);
101106
});
102107
}
@@ -105,14 +110,16 @@ async function load(animation = true, content = false)
105110
handlebarsContext.comicsReadingProgress = false;
106111
dom.setCurrentPageVars('recently-opened');
107112

108-
template.loadContentRight('index.content.right.'+config.viewRecentlyOpened+'.html', animation);
113+
if(Date.now() - now < 300)
114+
template._contentRight().firstElementChild.innerHTML = template.load('index.content.right.'+config.viewRecentlyOpened+'.html');
115+
else
116+
template.loadContentRight('index.content.right.'+config.viewRecentlyOpened+'.html', animation);
109117

110118
cache.resumeQueue();
111119
queue.resume('folderThumbnails');
112120

113121
handlebarsContext.headerTitle = false;
114122
handlebarsContext.headerTitlePath = false;
115-
template.loadHeader('recently.opened.header.html', animation);
116123

117124
if(!content)
118125
{

0 commit comments

Comments
 (0)