Skip to content

Commit 30df2fc

Browse files
ollmollm
committed
New: Show image in its original size
1 parent f555a59 commit 30df2fc

File tree

10 files changed

+70
-36
lines changed

10 files changed

+70
-36
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- Open file location in context menu [`339bcc0`](https://github.com/ollm/OpenComic/commit/339bcc0b21eab52228b7762c92c993d06489aa48)
1212
- Option in the context menu to add and remove posters using local artwork assets [`e8a1745`](https://github.com/ollm/OpenComic/commit/e8a1745904cd563336e1e27c02841a33e9cdc536)
13+
- Show image in its original size
1314

1415
##### 🐛 Bug Fixes
1516

‎languages/ca.json

+1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
"view": {
158158
"main": "Veure",
159159
"resetZoom": "Restablir zoom",
160+
"originalSize": "Mida original",
160161
"zoomIn": "Ampliar zoom",
161162
"zoomOut": "Reduir zoom",
162163
"toggleFullScreen": "Pantalla completa"

‎languages/en.json

+1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
"view": {
158158
"main": "View",
159159
"resetZoom": "Reset zoom",
160+
"originalSize": "Original size",
160161
"zoomIn": "Zoom in",
161162
"zoomOut": "Zoom out",
162163
"toggleFullScreen": "Full screen"

‎languages/es.json

+1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
"view": {
158158
"main": "Ver",
159159
"resetZoom": "Restablecer zoom",
160+
"originalSize": "Tamaño original",
160161
"zoomIn": "Ampliar zoom",
161162
"zoomOut": "Reducir zoom",
162163
"toggleFullScreen": "Pantalla completa"

‎scripts/reading.js

+37-14
Original file line numberDiff line numberDiff line change
@@ -1222,11 +1222,11 @@ function applyScaleScrollAndHeight()
12221222

12231223
}
12241224

1225-
function applyScale(animation = true, scale = 1, center = false, zoomOut = false)
1225+
function applyScale(animation = true, scale = 1, center = false, zoomOut = false, round = true)
12261226
{
12271227
let animationDurationS = ((animation) ? _config.readingViewSpeed : 0);
12281228

1229-
scale = Math.round(scale * 100) / 100;
1229+
if(round) scale = Math.round(scale * 100) / 100;
12301230

12311231
if(currentZoomIndex === false)
12321232
{
@@ -1257,6 +1257,11 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false
12571257

12581258
if(scale != scalePrevData.scale)
12591259
{
1260+
if(scale == 1)
1261+
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.originalSize).html('aspect_ratio');
1262+
else
1263+
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.resetZoom).html('zoom_out_map');
1264+
12601265
let content = template.contentRight().children();
12611266
content.stop(true);
12621267

@@ -1441,11 +1446,37 @@ function zoomOut(animation = true, center = false)
14411446
}
14421447

14431448

1444-
// Reset zoom
1445-
function resetZoom(animation = true, index = false, apply = true)
1449+
// Reset zoom or show in original size if is current in 1 scale
1450+
function resetZoom(animation = true, index = false, apply = true, center = true)
14461451
{
14471452
var animationDurationS = ((animation) ? _config.readingViewSpeed : 0);
14481453

1454+
if(currentScale == 1) // Show current image in original size
1455+
{
1456+
let first = imagesDistribution[currentIndex - 1][0];
1457+
1458+
if(!first.folder && !first.blank)
1459+
{
1460+
let image = imagesData[first.index] || [];
1461+
let img = template._contentRight().querySelector('.r-img-i'+first.index+' oc-img img, .r-img-i'+first.index+' oc-img canvas');
1462+
1463+
if(img)
1464+
{
1465+
if(zoomMoveData.active)
1466+
return;
1467+
1468+
let rect = img.getBoundingClientRect();
1469+
1470+
currentScale = (image.width / rect.width + image.height / rect.height) / 2;
1471+
1472+
if(apply)
1473+
applyScale(animation, currentScale, center, (currentScale < 1) ? true : false, false);
1474+
1475+
return;
1476+
}
1477+
}
1478+
}
1479+
14491480
currentScale = 1;
14501481

14511482
if(apply)
@@ -1456,14 +1487,7 @@ function resetZoom(animation = true, index = false, apply = true)
14561487
}
14571488
else
14581489
{
1459-
template.contentRight('.image-position'+currentZoomIndex).css({
1460-
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
1461-
transform: 'translateX(0px) translateY(0px) scale('+currentScale+')',
1462-
transformOrigin: 'center center',
1463-
zIndex: 1,
1464-
height: '',
1465-
willChange: '',
1466-
});
1490+
applyScale(animation, currentScale, true);
14671491

14681492
originalRect = false;
14691493
scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0};
@@ -2913,8 +2937,6 @@ async function read(path, index = 1, end = false, isCanvas = false)
29132937
{
29142938
if(!haveZoom && !readingViewIs('scroll'))
29152939
{
2916-
console.log(axes);
2917-
29182940
if(key == 0 && (axes[0] < 0 || (axes[2] < 0 && !config.readingMagnifyingGlass)))
29192941
goPrevious();
29202942
else if(key == 1 && (axes[0] > 0|| (axes[2] > 0 && !config.readingMagnifyingGlass)))
@@ -3518,6 +3540,7 @@ module.exports = {
35183540
zoomIn: zoomIn,
35193541
zoomOut: zoomOut,
35203542
resetZoom: resetZoom,
3543+
applyScale: applyScale,
35213544
activeMagnifyingGlass: activeMagnifyingGlass,
35223545
changeMagnifyingGlass: changeMagnifyingGlass,
35233546
changePagesView: changePagesView,

‎scripts/shortcuts.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,11 @@ function loadShortcuts()
163163
},
164164
},
165165
resetZoom: {
166-
name: language.menu.view.resetZoom,
166+
name: language.menu.view.resetZoom+'<br>'+language.menu.view.originalSize,
167167
function: function(){
168-
reading.resetZoom();
168+
let center = true;
169+
if(event instanceof PointerEvent) center = false;
170+
reading.resetZoom(true, false, true, center);
169171
return true;
170172
},
171173
},

‎templates/reading.header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="material-icon button button1 button-magnifying-glass hover-text" hover-text="{{language.reading.magnifyingGlass.main}}" onclick="events.activeMenu('#reading-magnifying-glass', '.bar-right-buttons .button-magnifying-glass', 'right');">search</div>
2121
<div class="bar-buttons-separator"></div>
2222
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.zoomIn}}" onclick="reading.zoomIn(true, true);">zoom_in</div>
23-
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.resetZoom}}" onclick="reading.resetZoom();">zoom_out_map</div>
23+
<div class="material-icon button button2 button-reset-zoom hover-text" hover-text="{{language.menu.view.originalSize}}" onclick="reading.resetZoom();">aspect_ratio</div>
2424
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.zoomOut}}" onclick="reading.zoomOut(true, true);">zoom_out</div>
2525
<div class="bar-buttons-separator"></div>
2626
<div class="material-icon button button1 button-tracking-sites hover-text" hover-text="{{language.reading.tracking.main}}" onclick="reading.loadTrackigSites();events.activeMenu('#tracking-sites', '.bar-right-buttons .button-tracking-sites', 'right');">sync</div>

‎templates/settings.content.right.shortcuts.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
<tbody>
1515
{{#each shortcuts}}
1616
<tr>
17-
<td>{{name}}</td>
17+
<td>{{{name}}}</td>
1818
<td onclick="settings.changeShortcut('{{action}}', '{{key1}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key1}}')">{{key1}}</td>
1919
<td onclick="settings.changeShortcut('{{action}}', '{{key2}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key2}}')">{{key2}}</td>
2020
<td onclick="settings.changeShortcut('{{action}}', '{{key3}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key3}}')">{{key3}}</td>
2121
<td onclick="settings.changeShortcut('{{action}}', '{{key4}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key4}}')">{{key4}}</td>
2222
<td onclick="settings.changeShortcut('{{action}}', '{{key5}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key5}}')">{{key5}}</td>
23-
<td class="gamepad-item{{#if @first}} gamepad-to-hightlight{{/if}}" onclick="settings.changeButton('{{action}}', '{{gamepad1_}}', this)" oncontextmenu="settings.removeButton('{{action}}', '{{gamepad1_}}')">{{#if gamepad1}}<span class="gamepad-image gamepad-image-{{gamepad1}}">{{/if}}</td>
24-
<td class="gamepad-item" onclick="settings.changeButton('{{action}}', '{{gamepad2_}}', this)" oncontextmenu="settings.removeButton('{{action}}', '{{gamepad2_}}')">{{#if gamepad2}}<span class="gamepad-image gamepad-image-{{gamepad2}}">{{/if}}</td>
23+
<td class="gamepad-item lh0{{#if @first}} gamepad-to-hightlight{{/if}}" onclick="settings.changeButton('{{action}}', '{{gamepad1_}}', this)" oncontextmenu="settings.removeButton('{{action}}', '{{gamepad1_}}')">{{#if gamepad1}}<span class="gamepad-image gamepad-image-{{gamepad1}}">{{/if}}</td>
24+
<td class="gamepad-item lh0" onclick="settings.changeButton('{{action}}', '{{gamepad2_}}', this)" oncontextmenu="settings.removeButton('{{action}}', '{{gamepad2_}}')">{{#if gamepad2}}<span class="gamepad-image gamepad-image-{{gamepad2}}">{{/if}}</td>
2525
</tr>
2626
{{/each}}
2727
</tbody>

‎themes/material-design/actions.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -1782,7 +1782,7 @@ table tbody td
17821782
border-top: 1px solid var(--md-sys-color-surface-variant);
17831783
border-right: 1px solid var(--md-sys-color-surface-variant);
17841784
text-align: center;
1785-
padding: 0px 24px;
1785+
padding: 12px 24px;
17861786
cursor: pointer;
17871787
position: relative;
17881788
transition: 0.2s border-color;
@@ -1827,4 +1827,9 @@ table tbody td:not(:first-child):active:before,
18271827
table tbody td:not(:first-child).gamepad-highlight:before
18281828
{
18291829
background-color: var(--md-sys-color-on-surface-variant-4);
1830+
}
1831+
1832+
table tbody td.lh0
1833+
{
1834+
line-height: 0px;
18301835
}

‎themes/material-design/colors/typography.module.css

+15-15
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
font-weight: var(--md-sys-typescale-display-large-font-weight);
4040
font-size: var(--md-sys-typescale-display-large-font-size);
4141
letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
42-
line-height: var(--md-sys-typescale-display-large-height);
42+
line-height: var(--md-sys-typescale-display-large-line-height);
4343
text-transform: var(--md-sys-typescale-display-large-text-transform);
4444
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
4545
}
@@ -49,7 +49,7 @@
4949
font-weight: var(--md-sys-typescale-display-medium-font-weight);
5050
font-size: var(--md-sys-typescale-display-medium-font-size);
5151
letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
52-
line-height: var(--md-sys-typescale-display-medium-height);
52+
line-height: var(--md-sys-typescale-display-medium-line-height);
5353
text-transform: var(--md-sys-typescale-display-medium-text-transform);
5454
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
5555
}
@@ -59,7 +59,7 @@
5959
font-weight: var(--md-sys-typescale-display-small-font-weight);
6060
font-size: var(--md-sys-typescale-display-small-font-size);
6161
letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
62-
line-height: var(--md-sys-typescale-display-small-height);
62+
line-height: var(--md-sys-typescale-display-small-line-height);
6363
text-transform: var(--md-sys-typescale-display-small-text-transform);
6464
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
6565
}
@@ -69,7 +69,7 @@
6969
font-weight: var(--md-sys-typescale-headline-large-font-weight);
7070
font-size: var(--md-sys-typescale-headline-large-font-size);
7171
letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
72-
line-height: var(--md-sys-typescale-headline-large-height);
72+
line-height: var(--md-sys-typescale-headline-large-line-height);
7373
text-transform: var(--md-sys-typescale-headline-large-text-transform);
7474
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
7575
}
@@ -79,7 +79,7 @@
7979
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
8080
font-size: var(--md-sys-typescale-headline-medium-font-size);
8181
letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
82-
line-height: var(--md-sys-typescale-headline-medium-height);
82+
line-height: var(--md-sys-typescale-headline-medium-line-height);
8383
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
8484
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
8585
}
@@ -89,7 +89,7 @@
8989
font-weight: var(--md-sys-typescale-headline-small-font-weight);
9090
font-size: var(--md-sys-typescale-headline-small-font-size);
9191
letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
92-
line-height: var(--md-sys-typescale-headline-small-height);
92+
line-height: var(--md-sys-typescale-headline-small-line-height);
9393
text-transform: var(--md-sys-typescale-headline-small-text-transform);
9494
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
9595
}
@@ -99,7 +99,7 @@
9999
font-weight: var(--md-sys-typescale-body-large-font-weight);
100100
font-size: var(--md-sys-typescale-body-large-font-size);
101101
letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
102-
line-height: var(--md-sys-typescale-body-large-height);
102+
line-height: var(--md-sys-typescale-body-large-line-height);
103103
text-transform: var(--md-sys-typescale-body-large-text-transform);
104104
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
105105
}
@@ -109,7 +109,7 @@
109109
font-weight: var(--md-sys-typescale-body-medium-font-weight);
110110
font-size: var(--md-sys-typescale-body-medium-font-size);
111111
letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
112-
line-height: var(--md-sys-typescale-body-medium-height);
112+
line-height: var(--md-sys-typescale-body-medium-line-height);
113113
text-transform: var(--md-sys-typescale-body-medium-text-transform);
114114
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
115115
}
@@ -119,7 +119,7 @@
119119
font-weight: var(--md-sys-typescale-body-small-font-weight);
120120
font-size: var(--md-sys-typescale-body-small-font-size);
121121
letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
122-
line-height: var(--md-sys-typescale-body-small-height);
122+
line-height: var(--md-sys-typescale-body-small-line-height);
123123
text-transform: var(--md-sys-typescale-body-small-text-transform);
124124
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
125125
}
@@ -129,7 +129,7 @@
129129
font-weight: var(--md-sys-typescale-label-large-font-weight);
130130
font-size: var(--md-sys-typescale-label-large-font-size);
131131
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
132-
line-height: var(--md-sys-typescale-label-large-height);
132+
line-height: var(--md-sys-typescale-label-large-line-height);
133133
text-transform: var(--md-sys-typescale-label-large-text-transform);
134134
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
135135
}
@@ -139,7 +139,7 @@
139139
font-weight: var(--md-sys-typescale-label-medium-font-weight);
140140
font-size: var(--md-sys-typescale-label-medium-font-size);
141141
letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
142-
line-height: var(--md-sys-typescale-label-medium-height);
142+
line-height: var(--md-sys-typescale-label-medium-line-height);
143143
text-transform: var(--md-sys-typescale-label-medium-text-transform);
144144
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
145145
}
@@ -149,7 +149,7 @@
149149
font-weight: var(--md-sys-typescale-label-small-font-weight);
150150
font-size: var(--md-sys-typescale-label-small-font-size);
151151
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
152-
line-height: var(--md-sys-typescale-label-small-height);
152+
line-height: var(--md-sys-typescale-label-small-line-height);
153153
text-transform: var(--md-sys-typescale-label-small-text-transform);
154154
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
155155
}
@@ -159,7 +159,7 @@
159159
font-weight: var(--md-sys-typescale-title-large-font-weight);
160160
font-size: var(--md-sys-typescale-title-large-font-size);
161161
letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
162-
line-height: var(--md-sys-typescale-title-large-height);
162+
line-height: var(--md-sys-typescale-title-large-line-height);
163163
text-transform: var(--md-sys-typescale-title-large-text-transform);
164164
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
165165
}
@@ -169,7 +169,7 @@
169169
font-weight: var(--md-sys-typescale-title-medium-font-weight);
170170
font-size: var(--md-sys-typescale-title-medium-font-size);
171171
letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
172-
line-height: var(--md-sys-typescale-title-medium-height);
172+
line-height: var(--md-sys-typescale-title-medium-line-height);
173173
text-transform: var(--md-sys-typescale-title-medium-text-transform);
174174
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
175175
}
@@ -179,7 +179,7 @@
179179
font-weight: var(--md-sys-typescale-title-small-font-weight);
180180
font-size: var(--md-sys-typescale-title-small-font-size);
181181
letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
182-
line-height: var(--md-sys-typescale-title-small-height);
182+
line-height: var(--md-sys-typescale-title-small-line-height);
183183
text-transform: var(--md-sys-typescale-title-small-text-transform);
184184
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
185185
}

0 commit comments

Comments
 (0)