Skip to content

Commit 71fad97

Browse files
ollmollm
committed
New: Clip option on read
1 parent 809fc78 commit 71fad97

File tree

9 files changed

+138
-26
lines changed

9 files changed

+138
-26
lines changed

‎languages/ca.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@
5656
"readingManga": "Lectura de manga (Invertir)",
5757
"readingWebtoon": "Lectura de webtoon",
5858
"readingGlobal": "Configuració global",
59-
"readingConfigNew": "Nova configuració"
59+
"readingConfigNew": "Nova configuració",
60+
"clipHorizontal": "Retallar horitzontalment",
61+
"clipVertical": "Retallar verticalment"
6062
},
6163
"magnifyingGlass": {
6264
"main": "Lupa",

‎languages/en.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@
5757
"readingManga": "Reading manga (Inverted)",
5858
"readingWebtoon": "Reading webtoon",
5959
"readingGlobal": "Global configuration",
60-
"readingConfigNew": "New configuration"
60+
"readingConfigNew": "New configuration",
61+
"clipHorizontal": "Clip horizontal",
62+
"clipVertical": "Clip vertical"
6163
},
6264
"magnifyingGlass": {
6365
"main": "Magnifying glass",

‎languages/es.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@
5757
"readingManga": "Lectura de manga (Invertir)",
5858
"readingWebtoon": "Lectura de webtoon",
5959
"readingGlobal": "Configuración global",
60-
"readingConfigNew": "Nueva configuración"
60+
"readingConfigNew": "Nueva configuración",
61+
"clipHorizontal": "Recortar horizontalmente",
62+
"clipVertical": "Recortar verticalmente"
6163
},
6264
"magnifyingGlass": {
6365
"main": "Lupa",

‎scripts/opencomic.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@ document.addEventListener("keydown", event => {
2323

2424
});
2525

26+
var errorDialog = true;
2627

2728
window.addEventListener('error', function(evt) {
2829

29-
/*var error = false;
30+
var error = false;
3031

3132
if(evt.message)
3233
error = 'Error: '+evt.message +' at linenumber '+evt.lineno+':'+evt.colno+' of file '+evt.filename;
3334

34-
if(error !== false)
35+
if(error !== false && errorDialog)
3536
{
3637
if(electronRemote.dialog)
3738
{
@@ -46,7 +47,7 @@ window.addEventListener('error', function(evt) {
4647
{
4748
alert(error+(evt.error.stack ? ' '+evt.error.stack : ''));
4849
}
49-
}*/
50+
}
5051

5152
}, true);
5253

‎scripts/reading.js

+90-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var images = {}, imagesData = {}, imagesPath = {}, imagesNum = 0, contentNum = 0, imagesNumLoad = 0, currentIndex = 1, imagesPosition = {}, imagesFullPosition = {}, foldersPosition = {}, indexNum = 0, imagesDistribution = [], currentPageXY = {x: 0, y: 0};
2+
var images = {}, imagesData = {}, imagesDataClip = {}, imagesPath = {}, imagesNum = 0, contentNum = 0, imagesNumLoad = 0, currentIndex = 1, imagesPosition = {}, imagesFullPosition = {}, foldersPosition = {}, indexNum = 0, imagesDistribution = [], currentPageXY = {x: 0, y: 0};
33

44
//Calculates whether to add a blank image (If the reading is in double page and do not apply to the horizontals)
55
function blankPage(index)
@@ -10,9 +10,9 @@ function blankPage(index)
1010
{
1111
for(let i = index; i < (imagesNum + 1); i++)
1212
{
13-
if(typeof imagesData[i] !== 'undefined')
13+
if(typeof imagesDataClip[i] !== 'undefined')
1414
{
15-
if(imagesData[i].aspectRatio > 1)
15+
if(imagesDataClip[i].aspectRatio > 1)
1616
{
1717
return key % 2;
1818
}
@@ -29,6 +29,35 @@ function blankPage(index)
2929
}
3030
}
3131

32+
function calculateImagesDataWithClip()
33+
{
34+
imagesDataClip = {};
35+
36+
let imageClip = _config.readingImageClip;
37+
let clipVertical = (imageClip.top + imageClip.bottom) / 100;
38+
let clipHorizontal = (imageClip.left + imageClip.right) / 100;
39+
40+
if(clipVertical === 0 && clipHorizontal === 0)
41+
return imagesDataClip = imagesData;
42+
43+
for(let i = 1; i < (contentNum + 1); i++)
44+
{
45+
if(typeof imagesData[i] !== 'undefined')
46+
{
47+
let width = Math.round(imagesData[i].width * (1 - clipHorizontal));
48+
let height = Math.round(imagesData[i].height * (1 - clipVertical));
49+
50+
imagesDataClip[i] = {
51+
width: width,
52+
height: height,
53+
aspectRatio: (width / height),
54+
};
55+
}
56+
}
57+
58+
return imagesDataClip;
59+
}
60+
3261
//Calculates the distribution of the images depending on the user's configuration
3362
function calculateImagesDistribution()
3463
{
@@ -39,14 +68,14 @@ function calculateImagesDistribution()
3968
{
4069
var data = [];
4170

42-
if(_config.readingBlankPage && (!_config.readingDoNotApplyToHorizontals || (typeof imagesData[1] !== 'undefined' && imagesData[1].aspectRatio <= 1)))
71+
if(_config.readingBlankPage && (!_config.readingDoNotApplyToHorizontals || (typeof imagesDataClip[1] !== 'undefined' && imagesDataClip[1].aspectRatio <= 1)))
4372
data.push({index: false, folder: false, blank: true, width: 2});
4473

4574
for(let i = 1; i < (contentNum + 1); i++)
4675
{
47-
if(typeof imagesData[i] !== 'undefined')
76+
if(typeof imagesDataClip[i] !== 'undefined')
4877
{
49-
if(_config.readingDoNotApplyToHorizontals && imagesData[i].aspectRatio > 1)
78+
if(_config.readingDoNotApplyToHorizontals && imagesDataClip[i].aspectRatio > 1)
5079
{
5180
if(data.length > 0)
5281
{
@@ -57,7 +86,7 @@ function calculateImagesDistribution()
5786
}
5887

5988
data.push({index: i, folder: false, blank: false, width: 1});
60-
imagesData[i].position = indexNum;
89+
imagesDataClip[i].position = imagesData[i].position = indexNum;
6190
imagesDistribution.push(data);
6291
indexNum++;
6392
data = [];
@@ -68,7 +97,7 @@ function calculateImagesDistribution()
6897
data.push({index: false, folder: false, blank: true, width: 2});
6998

7099
data.push({index: i, folder: false, blank: false, width: 2});
71-
imagesData[i].position = indexNum;
100+
imagesDataClip[i].position = imagesData[i].position = indexNum;
72101
}
73102
}
74103
else
@@ -99,10 +128,10 @@ function calculateImagesDistribution()
99128
{
100129
for(let i = 1; i < (contentNum + 1); i++)
101130
{
102-
if(typeof imagesData[i] !== 'undefined')
131+
if(typeof imagesDataClip[i] !== 'undefined')
103132
{
104133
imagesDistribution.push([{index: i, folder: false, blank: false, width: 1}]);
105-
imagesData[i].position = indexNum;
134+
imagesDataClip[i].position = imagesData[i].position = indexNum;
106135
indexNum++;
107136
}
108137
else
@@ -170,6 +199,7 @@ function applyMangaReading(distribution)
170199
// Add images distribution to html
171200
function addHtmlImages()
172201
{
202+
calculateImagesDataWithClip();
173203
calculateImagesDistribution();
174204

175205
var _imagesDistribution = applyMangaReading(imagesDistribution);
@@ -228,16 +258,16 @@ function calcAspectRatio(first, second)
228258
if(first.folder)
229259
first.aspectRatio = 1;
230260
else if(first.blank)
231-
first.aspectRatio = second.folder ? 1 : imagesData[second.index].aspectRatio;
261+
first.aspectRatio = second.folder ? 1 : imagesDataClip[second.index].aspectRatio;
232262
else
233-
first.aspectRatio = imagesData[first.index].aspectRatio;
263+
first.aspectRatio = imagesDataClip[first.index].aspectRatio;
234264
}
235265
else
236266
{
237267
if(first.folder)
238268
first.aspectRatio = 1;
239269
else
240-
first.aspectRatio = imagesData[first.index].aspectRatio;
270+
first.aspectRatio = imagesDataClip[first.index].aspectRatio;
241271
}
242272

243273
return first;
@@ -268,6 +298,15 @@ function disposeImages(data = false)
268298

269299
var _imagesDistribution = applyMangaReading(imagesDistribution);
270300

301+
let imageClip = _config.readingImageClip;
302+
303+
let clipTop = imageClip.top / 100;
304+
let clipBottom = imageClip.bottom / 100;
305+
let clipVertical = clipTop + clipBottom;
306+
let clipLeft = imageClip.left / 100;
307+
let clipRight = imageClip.right / 100;
308+
let clipHorizontal = clipLeft + clipRight;
309+
271310
for(let key1 in _imagesDistribution)
272311
{
273312
var first = _imagesDistribution[key1][0];
@@ -307,22 +346,28 @@ function disposeImages(data = false)
307346
if(readingViewIs('scroll'))
308347
marginTop0 = marginTop1 = marginVertical;
309348

310-
template.contentRight('.image-position'+key1+'-0 img, .image-position'+key1+'-0 oc-img, .image-position'+key1+'-0 > div').css({
349+
template.contentRight('.image-position'+key1+'-0 oc-img, .image-position'+key1+'-0 > div').css({
311350
'height': imageHeight0+'px',
312351
'width': imageWidth0+'px',
313352
'margin-left': marginLeft0+'px',
314353
'margin-top': marginTop0+'px',
315354
'margin-bottom': ((readingViewIs('scroll') && ((+key1) + 1) == indexNum) ? marginVertical : 0)+'px',
316355
'margin-right': '0px',
356+
}).find('img').css({
357+
'height': imageHeight0+'px',
358+
'width': imageWidth0+'px',
317359
});
318360

319-
template.contentRight('.image-position'+key1+'-1 img, .image-position'+key1+'-1 oc-img, .image-position'+key1+'-1 > div').css({
361+
template.contentRight('.image-position'+key1+'-1 oc-img, .image-position'+key1+'-1 > div').css({
320362
'height': imageHeight1+'px',
321363
'width': imageWidth1+'px',
322364
'margin-left': marginLeft1+'px',
323365
'margin-top': marginTop1+'px',
324366
'margin-bottom': ((readingViewIs('scroll') && ((+key1) + 1) == indexNum) ? marginVertical : 0)+'px',
325367
'margin-right': '0px',
368+
}).find('img').css({
369+
'height': imageHeight1+'px',
370+
'width': imageWidth1+'px',
326371
});
327372
}
328373
else
@@ -365,13 +410,21 @@ function disposeImages(data = false)
365410
if(readingViewIs('scroll'))
366411
marginTop = marginVertical;
367412

368-
template.contentRight('.image-position'+key1+'-0 img, .image-position'+key1+'-0 oc-img, .image-position'+key1+'-0 > div').css({
413+
let imgHeight = (clipVertical > 0 ? (imageHeight / (1 - clipVertical)) : imageHeight);
414+
let imgWidth = (clipHorizontal > 0 ? (imageWidth / (1 - clipHorizontal)) : imageWidth);
415+
416+
template.contentRight('.image-position'+key1+'-0 oc-img, .image-position'+key1+'-0 > div').css({
369417
'height': imageHeight+'px',
370418
'width': imageWidth+'px',
371419
'margin-left': marginLeft+'px',
372420
'margin-top': marginTop+'px',
373421
'margin-bottom': ((readingViewIs('scroll') && ((+key1) + 1) == indexNum) ? marginVertical : 0)+'px',
374422
'margin-right': '0px',
423+
}).find('img').css({
424+
'height': imgHeight+'px',
425+
'width': imgWidth+'px',
426+
'margin-top': -(imgHeight * clipTop)+'px',
427+
'margin-left': -(imgWidth * clipLeft)+'px',
375428
});
376429
}
377430

@@ -1863,6 +1916,24 @@ function changePagesView(mode, value, save)
18631916
18641917
if(save) updateReadingPagesConfig('readingHorizontalsMargin', {margin: _config.readingHorizontalsMargin.margin, top: value, bottom: value, left: _config.readingHorizontalsMargin.left, right: _config.readingHorizontalsMargin.right});
18651918
}*/
1919+
else if(mode == 16) // Clip horizontal images
1920+
{
1921+
updateReadingPagesConfig('readingImageClip', {top: _config.readingImageClip.top, bottom: _config.readingImageClip.bottom, left: value, right: value});
1922+
1923+
addHtmlImages();
1924+
disposeImages();
1925+
calculateView();
1926+
stayInLine();
1927+
}
1928+
else if(mode == 17) // Clip vertical images
1929+
{
1930+
updateReadingPagesConfig('readingImageClip', {top: value, bottom: value, left: _config.readingImageClip.left, right: _config.readingImageClip.right});
1931+
1932+
addHtmlImages();
1933+
disposeImages();
1934+
calculateView();
1935+
stayInLine();
1936+
}
18661937
}
18671938

18681939
//Change the bookmark icon
@@ -2502,7 +2573,7 @@ var touchTimeout, mouseOut = {lens: false, body: false}, touchStart = false, mag
25022573
//It starts with the reading of a comic, events, argar images, counting images ...
25032574
function read(path, index = 1, end = false)
25042575
{
2505-
images = {}, imagesData = {}, imagesPath = {}, imagesNum = 0, contentNum = 0, imagesNumLoad = 0, currentIndex = index, foldersPosition = {}, currentScale = 1, previousScrollTop = 0, scalePrevData = {tranX: 0, tranY: 0, scale: 1};
2576+
images = {}, imagesData = {}, imagesDataClip = {}, imagesPath = {}, imagesNum = 0, contentNum = 0, imagesNumLoad = 0, currentIndex = index, foldersPosition = {}, currentScale = 1, previousScrollTop = 0, scalePrevData = {tranX: 0, tranY: 0, scale: 1};
25062577

25072578
loadReadingConfig(currentReadingConfigKey);
25082579

@@ -3177,6 +3248,7 @@ module.exports = {
31773248
contentNum: function(){return contentNum},
31783249
imagesNumLoad: imagesNumLoad,
31793250
imagesData: function(){return imagesData},
3251+
imagesDataClip: function(){return imagesDataClip},
31803252
goToImage: goToImage,
31813253
goToFolder: goToFolder,
31823254
goToIndex: function(v1, v2, v3, v4){readingDirection = true; goToIndex(v1, v2, v3, v4)},
@@ -3193,6 +3265,7 @@ module.exports = {
31933265
changeMagnifyingGlass: changeMagnifyingGlass,
31943266
changePagesView: changePagesView,
31953267
magnifyingGlassControl: magnifyingGlassControl,
3268+
addHtmlImages: addHtmlImages,
31963269
disposeImages: disposeImages,
31973270
calculateView: calculateView,
31983271
stayInLine: stayInLine,

‎scripts/storage.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var changes = 37; // Update this if readingPagesConfig is updated
1+
var changes = 39; // Update this if readingPagesConfig is updated
22

33
var readingPagesConfig = {
44
readingConfigName: '',
@@ -20,6 +20,12 @@ var readingPagesConfig = {
2020
left: 16,
2121
right: 16
2222
},
23+
readingImageClip: {
24+
top: 0,
25+
bottom: 0,
26+
left: 0,
27+
right: 0
28+
},
2329
readingDelayComicSkip: 1,
2430
readingDoublePage: false,
2531
readingDoNotApplyToHorizontals: true,

‎templates/reading.content.right.images.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
{{else if blank}}
1313
<div></div>
1414
{{else}}
15-
<img src="{{chain 'encodeSrcURI' 'invertBackslash' image}}" path="{{htmlQuote path}}" index="{{index}}">
15+
<oc-img>
16+
<img src="{{chain 'encodeSrcURI' 'invertBackslash' image}}" path="{{htmlQuote path}}" index="{{index}}">
17+
</oc-img>
1618
{{/if}}
1719
</div>
1820
{{/each}}

‎templates/reading.elements.menus.pages.html

+13
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,24 @@
7575
<div class="simple-slider-text">{{language.reading.pages.marginHorizontal}}<div><span>{{_config.readingHorizontalsMargin.left}}</span>px</div></div>
7676
<input class="range" type="range" max="{{_config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingHorizontalsMargin.left}}" onrange="reading.changePagesView(14, \{{value}}, \{{toEnd}})">
7777
</div>
78+
7879
<!--<div class="simple-slider reading-horizontals-margin{{#unless _config.readingHorizontalsMarginActive}} disable-pointer{{/unless}}">
7980
<div class="simple-slider-text">{{language.reading.pages.marginVertical}}<div><span>{{_config.readingHorizontalsMargin.top}}</span>px</div></div>
8081
<input class="range" type="range" max="{{_config.readingMaxMargin}}" min="0" list="marginlist" value="{{_config.readingHorizontalsMargin.top}}" onrange="reading.changePagesView(15, \{{value}}, \{{toEnd}})">
8182
</div>-->
8283

84+
<div class="menu-simple-separator-min"></div>
85+
86+
<div class="simple-slider reading-horizontals-margin" style="margin-top: 8px;">
87+
<div class="simple-slider-text">{{language.reading.pages.clipHorizontal}}<div><span>{{normalizeNumber _config.readingImageClip.left "0.1"}}</span>%</div></div>
88+
<input class="range" type="range" max="30" min="0" step="0.1" value="{{_config.readingImageClip.left}}" onrange="reading.changePagesView(16, \{{value}}, \{{toEnd}})">
89+
</div>
90+
91+
<div class="simple-slider reading-horizontals-margin" style="margin-top: 8px;">
92+
<div class="simple-slider-text">{{language.reading.pages.clipVertical}}<div><span>{{normalizeNumber _config.readingImageClip.top "0.1"}}</span>%</div></div>
93+
<input class="range" type="range" max="30" min="0" step="0.1" value="{{_config.readingImageClip.top}}" onrange="reading.changePagesView(17, \{{value}}, \{{toEnd}})">
94+
</div>
95+
8396
<div class="menu-simple-separator-min"></div>
8497
<div class="simple-slider">
8598
<div class="simple-slider-text">{{language.reading.pages.readingDelaySkip}}<div><span>{{normalizeNumber _config.readingDelayComicSkip "0.2"}}</span>s</div></div>

‎themes/material-design/reading.css

+12-1
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,25 @@
8383
height: 100%;
8484
}
8585

86-
.reading-body .r-img > img, .reading-lens .r-img > img, .reading-body .r-img.blank > div, .reading-lens .r-img.blank > div/*, .reading-body .r-folder, .reading-lens .r-folder*/
86+
.reading-body .r-img > oc-img, .reading-lens .r-img > oc-img, .reading-body .r-img.blank > div, .reading-lens .r-img.blank > div/*, .reading-body .r-folder, .reading-lens .r-folder*/
8787
{
8888
transition: background-color 0.2s;
8989
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px;
9090
background-color: #fff;
9191
display: block;
9292
}
9393

94+
.reading-body .r-img > oc-img, .reading-lens .r-img > oc-img
95+
{
96+
overflow: hidden;
97+
}
98+
99+
.reading-body .r-img > img, .reading-lens .r-img > img
100+
{
101+
background-color: #fff;
102+
display: block;
103+
}
104+
94105
.reading-body .r-folder, .reading-lens .r-folder
95106
{
96107
width: 100%;

0 commit comments

Comments
 (0)