Skip to content

Commit

Permalink
New: Show image in its original size
Browse files Browse the repository at this point in the history
  • Loading branch information
@ollm
ollm committed Sep 8, 2023
1 parent f555a59 commit 30df2fc
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 36 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

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

##### 🐛 Bug Fixes

Expand Down
1 change: 1 addition & 0 deletions languages/ca.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@
"view": {
"main": "Veure",
"resetZoom": "Restablir zoom",
"originalSize": "Mida original",
"zoomIn": "Ampliar zoom",
"zoomOut": "Reduir zoom",
"toggleFullScreen": "Pantalla completa"
Expand Down
1 change: 1 addition & 0 deletions languages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@
"view": {
"main": "View",
"resetZoom": "Reset zoom",
"originalSize": "Original size",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out",
"toggleFullScreen": "Full screen"
Expand Down
1 change: 1 addition & 0 deletions languages/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@
"view": {
"main": "Ver",
"resetZoom": "Restablecer zoom",
"originalSize": "Tamaño original",
"zoomIn": "Ampliar zoom",
"zoomOut": "Reducir zoom",
"toggleFullScreen": "Pantalla completa"
Expand Down
51 changes: 37 additions & 14 deletions scripts/reading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1222,11 +1222,11 @@ function applyScaleScrollAndHeight()

}

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

scale = Math.round(scale * 100) / 100;
if(round) scale = Math.round(scale * 100) / 100;

if(currentZoomIndex === false)
{
Expand Down Expand Up @@ -1257,6 +1257,11 @@ function applyScale(animation = true, scale = 1, center = false, zoomOut = false

if(scale != scalePrevData.scale)
{
if(scale == 1)
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.originalSize).html('aspect_ratio');
else
template.barHeader('.button-reset-zoom').attr('hover-text', language.menu.view.resetZoom).html('zoom_out_map');

let content = template.contentRight().children();
content.stop(true);

Expand Down Expand Up @@ -1441,11 +1446,37 @@ function zoomOut(animation = true, center = false)
}


// Reset zoom
function resetZoom(animation = true, index = false, apply = true)
// Reset zoom or show in original size if is current in 1 scale
function resetZoom(animation = true, index = false, apply = true, center = true)
{
var animationDurationS = ((animation) ? _config.readingViewSpeed : 0);

if(currentScale == 1) // Show current image in original size
{
let first = imagesDistribution[currentIndex - 1][0];

if(!first.folder && !first.blank)
{
let image = imagesData[first.index] || [];
let img = template._contentRight().querySelector('.r-img-i'+first.index+' oc-img img, .r-img-i'+first.index+' oc-img canvas');

if(img)
{
if(zoomMoveData.active)
return;

let rect = img.getBoundingClientRect();

currentScale = (image.width / rect.width + image.height / rect.height) / 2;

if(apply)
applyScale(animation, currentScale, center, (currentScale < 1) ? true : false, false);

return;
}
}
}

currentScale = 1;

if(apply)
Expand All @@ -1456,14 +1487,7 @@ function resetZoom(animation = true, index = false, apply = true)
}
else
{
template.contentRight('.image-position'+currentZoomIndex).css({
transition: 'transform '+animationDurationS+'s, z-index '+animationDurationS+'s',
transform: 'translateX(0px) translateY(0px) scale('+currentScale+')',
transformOrigin: 'center center',
zIndex: 1,
height: '',
willChange: '',
});
applyScale(animation, currentScale, true);

originalRect = false;
scalePrevData = {tranX: 0, tranX2: 0, tranY: 0, tranY2: 0, scale: 1, scrollTop: 0};
Expand Down Expand Up @@ -2913,8 +2937,6 @@ async function read(path, index = 1, end = false, isCanvas = false)
{
if(!haveZoom && !readingViewIs('scroll'))
{
console.log(axes);

if(key == 0 && (axes[0] < 0 || (axes[2] < 0 && !config.readingMagnifyingGlass)))
goPrevious();
else if(key == 1 && (axes[0] > 0|| (axes[2] > 0 && !config.readingMagnifyingGlass)))
Expand Down Expand Up @@ -3518,6 +3540,7 @@ module.exports = {
zoomIn: zoomIn,
zoomOut: zoomOut,
resetZoom: resetZoom,
applyScale: applyScale,
activeMagnifyingGlass: activeMagnifyingGlass,
changeMagnifyingGlass: changeMagnifyingGlass,
changePagesView: changePagesView,
Expand Down
6 changes: 4 additions & 2 deletions scripts/shortcuts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,11 @@ function loadShortcuts()
},
},
resetZoom: {
name: language.menu.view.resetZoom,
name: language.menu.view.resetZoom+'<br>'+language.menu.view.originalSize,
function: function(){
reading.resetZoom();
let center = true;
if(event instanceof PointerEvent) center = false;
reading.resetZoom(true, false, true, center);
return true;
},
},
Expand Down
2 changes: 1 addition & 1 deletion templates/reading.header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<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>
<div class="bar-buttons-separator"></div>
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.zoomIn}}" onclick="reading.zoomIn(true, true);">zoom_in</div>
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.resetZoom}}" onclick="reading.resetZoom();">zoom_out_map</div>
<div class="material-icon button button2 button-reset-zoom hover-text" hover-text="{{language.menu.view.originalSize}}" onclick="reading.resetZoom();">aspect_ratio</div>
<div class="material-icon button button2 hover-text" hover-text="{{language.menu.view.zoomOut}}" onclick="reading.zoomOut(true, true);">zoom_out</div>
<div class="bar-buttons-separator"></div>
<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>
Expand Down
6 changes: 3 additions & 3 deletions templates/settings.content.right.shortcuts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
<tbody>
{{#each shortcuts}}
<tr>
<td>{{name}}</td>
<td>{{{name}}}</td>
<td onclick="settings.changeShortcut('{{action}}', '{{key1}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key1}}')">{{key1}}</td>
<td onclick="settings.changeShortcut('{{action}}', '{{key2}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key2}}')">{{key2}}</td>
<td onclick="settings.changeShortcut('{{action}}', '{{key3}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key3}}')">{{key3}}</td>
<td onclick="settings.changeShortcut('{{action}}', '{{key4}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key4}}')">{{key4}}</td>
<td onclick="settings.changeShortcut('{{action}}', '{{key5}}', this)" oncontextmenu="settings.removeShortcut('{{action}}', '{{key5}}')">{{key5}}</td>
<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>
<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>
<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>
<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>
</tr>
{{/each}}
</tbody>
Expand Down
7 changes: 6 additions & 1 deletion themes/material-design/actions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1782,7 +1782,7 @@ table tbody td
border-top: 1px solid var(--md-sys-color-surface-variant);
border-right: 1px solid var(--md-sys-color-surface-variant);
text-align: center;
padding: 0px 24px;
padding: 12px 24px;
cursor: pointer;
position: relative;
transition: 0.2s border-color;
Expand Down Expand Up @@ -1827,4 +1827,9 @@ table tbody td:not(:first-child):active:before,
table tbody td:not(:first-child).gamepad-highlight:before
{
background-color: var(--md-sys-color-on-surface-variant-4);
}

table tbody td.lh0
{
line-height: 0px;
}
30 changes: 15 additions & 15 deletions themes/material-design/colors/typography.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
font-weight: var(--md-sys-typescale-display-large-font-weight);
font-size: var(--md-sys-typescale-display-large-font-size);
letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
line-height: var(--md-sys-typescale-display-large-height);
line-height: var(--md-sys-typescale-display-large-line-height);
text-transform: var(--md-sys-typescale-display-large-text-transform);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}
Expand All @@ -49,7 +49,7 @@
font-weight: var(--md-sys-typescale-display-medium-font-weight);
font-size: var(--md-sys-typescale-display-medium-font-size);
letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
line-height: var(--md-sys-typescale-display-medium-height);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
Expand All @@ -59,7 +59,7 @@
font-weight: var(--md-sys-typescale-display-small-font-weight);
font-size: var(--md-sys-typescale-display-small-font-size);
letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
line-height: var(--md-sys-typescale-display-small-height);
line-height: var(--md-sys-typescale-display-small-line-height);
text-transform: var(--md-sys-typescale-display-small-text-transform);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
Expand All @@ -69,7 +69,7 @@
font-weight: var(--md-sys-typescale-headline-large-font-weight);
font-size: var(--md-sys-typescale-headline-large-font-size);
letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
line-height: var(--md-sys-typescale-headline-large-height);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
Expand All @@ -79,7 +79,7 @@
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
font-size: var(--md-sys-typescale-headline-medium-font-size);
letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
line-height: var(--md-sys-typescale-headline-medium-height);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
Expand All @@ -89,7 +89,7 @@
font-weight: var(--md-sys-typescale-headline-small-font-weight);
font-size: var(--md-sys-typescale-headline-small-font-size);
letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
line-height: var(--md-sys-typescale-headline-small-height);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
Expand All @@ -99,7 +99,7 @@
font-weight: var(--md-sys-typescale-body-large-font-weight);
font-size: var(--md-sys-typescale-body-large-font-size);
letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
line-height: var(--md-sys-typescale-body-large-height);
line-height: var(--md-sys-typescale-body-large-line-height);
text-transform: var(--md-sys-typescale-body-large-text-transform);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
Expand All @@ -109,7 +109,7 @@
font-weight: var(--md-sys-typescale-body-medium-font-weight);
font-size: var(--md-sys-typescale-body-medium-font-size);
letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
line-height: var(--md-sys-typescale-body-medium-height);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
Expand All @@ -119,7 +119,7 @@
font-weight: var(--md-sys-typescale-body-small-font-weight);
font-size: var(--md-sys-typescale-body-small-font-size);
letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
line-height: var(--md-sys-typescale-body-small-height);
line-height: var(--md-sys-typescale-body-small-line-height);
text-transform: var(--md-sys-typescale-body-small-text-transform);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
Expand All @@ -129,7 +129,7 @@
font-weight: var(--md-sys-typescale-label-large-font-weight);
font-size: var(--md-sys-typescale-label-large-font-size);
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
line-height: var(--md-sys-typescale-label-large-height);
line-height: var(--md-sys-typescale-label-large-line-height);
text-transform: var(--md-sys-typescale-label-large-text-transform);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
Expand All @@ -139,7 +139,7 @@
font-weight: var(--md-sys-typescale-label-medium-font-weight);
font-size: var(--md-sys-typescale-label-medium-font-size);
letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
line-height: var(--md-sys-typescale-label-medium-height);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
Expand All @@ -149,7 +149,7 @@
font-weight: var(--md-sys-typescale-label-small-font-weight);
font-size: var(--md-sys-typescale-label-small-font-size);
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
line-height: var(--md-sys-typescale-label-small-height);
line-height: var(--md-sys-typescale-label-small-line-height);
text-transform: var(--md-sys-typescale-label-small-text-transform);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
Expand All @@ -159,7 +159,7 @@
font-weight: var(--md-sys-typescale-title-large-font-weight);
font-size: var(--md-sys-typescale-title-large-font-size);
letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
line-height: var(--md-sys-typescale-title-large-height);
line-height: var(--md-sys-typescale-title-large-line-height);
text-transform: var(--md-sys-typescale-title-large-text-transform);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
Expand All @@ -169,7 +169,7 @@
font-weight: var(--md-sys-typescale-title-medium-font-weight);
font-size: var(--md-sys-typescale-title-medium-font-size);
letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
line-height: var(--md-sys-typescale-title-medium-height);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
Expand All @@ -179,7 +179,7 @@
font-weight: var(--md-sys-typescale-title-small-font-weight);
font-size: var(--md-sys-typescale-title-small-font-size);
letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
line-height: var(--md-sys-typescale-title-small-height);
line-height: var(--md-sys-typescale-title-small-line-height);
text-transform: var(--md-sys-typescale-title-small-text-transform);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}

0 comments on commit 30df2fc

Please sign in to comment.