caribaud
/
melpomene
1
0
Fork 0
Code Issues 9 Pull Requests 1 Releases 3 Wiki Activity

Compare commits

base: caribaud:main
Branches Tags
caribaud:main
caribaud:issues/15
caribaud:release/1.0.0
caribaud:issues/14
caribaud:dev
caribaud:1.0.0_RC3
caribaud:1.0.0_RC2
caribaud:1.0.0_RC1
...
compare: caribaud:1.0.0_RC3
Branches Tags
caribaud:issues/15
caribaud:release/1.0.0
caribaud:issues/14
caribaud:dev
caribaud:main
caribaud:1.0.0_RC3
caribaud:1.0.0_RC2
caribaud:1.0.0_RC1

12 Commits
main ... 1.0.0_RC3

Author SHA1 Message Date
caribaud 5f8d8873b3 Warn about floating height/width and round them 
Closes #8
 2023-05-27 16:16:49 +02:00
caribaud 81be7d477b Prevent external CSS img interferences 
Closes #10
 2023-05-27 16:02:06 +02:00
caribaud 350dd4bb0e Fix width / height computation 
Closes #9
 2023-05-27 15:56:31 +02:00
caribaud c1df87582d Change scrolling behaviour 2023-05-26 23:32:11 +02:00
caribaud 350b4b0d21 Bump version to 1.0.0_RC1 2023-05-26 19:32:31 +02:00
caribaud 23f59ff98a refactor HTML / CSS, add credits 2023-05-26 19:19:38 +02:00
caribaud b2b4532a4f Update HTML generation 2023-05-26 17:23:54 +02:00
caribaud 54bbeade8c Update HTML template 2023-05-26 17:15:45 +02:00
Christian Aribaud da1eba4676 Fixing help menu 2023-05-25 23:47:28 +02:00
caribaud c7830c3f17 Add possibility for global offset / scaling 2023-05-25 23:30:23 +02:00
caribaud 7179e44814 Allow for varying-size pages 2023-05-25 21:31:22 +02:00
caribaud 62303209f8 Set images size directly in HTML 2023-05-25 20:33:07 +02:00
9 changed files with 389 additions and 484 deletions
Show Stats Expand all files Collapse all files

12
README.md
View File

@ -30,10 +30,9 @@ Melpomene is mainly one JS file and one CSS file. You only need to include them
The JS files expect you to write some very specific HTML tags to be able to work. The JS files expect you to write some very specific HTML tags to be able to work.
To simplify things, you only need to copy-paste the content of `melpomene.html` into your own page and change a few things : To simplify things, you only need to copy-paste the content of `melpomene.html` into your own page and change a few things :
+ `data-pages-width` must be set to your comic pages width in px
+ `data-pages-height` must be set to your comic pages height in px
+ You must duplicate the `img` tag for each of you comic page and : + You must duplicate the `img` tag for each of you comic page and :
+ set `url` to the actual URL of your page + set `url` to the actual URL of your page
+ set `height` and `width` to the actual image sizes
+ set `data-zooms` with the zooms information, like so : `<zoom 1 width>, <zoom 1 height>, <zoom 1 x offset>, <zoom 1 y offset>; <zoom 2 width> ...` + set `data-zooms` with the zooms information, like so : `<zoom 1 width>, <zoom 1 height>, <zoom 1 x offset>, <zoom 1 y offset>; <zoom 2 width> ...`
+ example : `<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>` + example : `<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>`
@ -45,7 +44,6 @@ The following limitations are known and will be improved upon :
+ Mobile support is currently limited + Mobile support is currently limited
+ There are some performences issues + There are some performences issues
+ Your comic pages need to be the same size
# How to setup Melpomene ? # How to setup Melpomene ?
@ -82,6 +80,14 @@ If you wish to run a custom generation process, this generator can output a JSON
You are now ready to integrate Melpomene in your website! You are now ready to integrate Melpomene in your website!
## Advanced usage
If you need to do some global scaling / offset of all zooms in HTML (if for example you reuse zooms data for multiple resolutions), you can add the following attributes to the `<div id="reader-pages" ...>` tag :
+ `data-global-zoom-offset="<x offset float value>,<y offset float value>"` : offset all positions by the provided x / y values
+ If they become negative, they get clamped to 0 and width / height get reduced to compensate
+ If they become greater than the page size, they get clamped to the page size and width / height get reduced to compensate
+ `data-global-zoom-scale="<float value>"` : scale all positions / sizes by this factor
# Credits # Credits

83
demos/demo_data.js
View File

@ -1,83 +0,0 @@
PAGES_ZOOMS = [
[1, 2481.0, 1327.1057, 0.0, 0.0],
[1, 593.15338, 1076.4635, 0.0, 1364.053],
[1, 890.72864, 491.29874, 830.81415, 1751.5],
[1, 2481.0, 1078.4192, 0.0, 1364.053],
[1, 562.77032, 909.44702, 102.48115, 2491.6567],
[1, 920.74463, 909.44702, 698.55927, 2491.6567],
[1, 728.776, 909.44702, 1652.3695, 2491.6567],
[2, 1459.9161, 960.62878, 99.857468, 103.85177],
[2, 788.87384, 960.62878, 1593.7252, 103.85177],
[2, 455.35007, 305.56384, 389.44412, 1376.0359],
[2, 2282.7415, 760.914, 99.857475, 1114.4093],
[2, 1069.9728, 496.29166, 101.85461, 1928.2478],
[2, 1209.7733, 496.29166, 1172.3267, 1928.2478],
[2, 788.87402, 926.67731, 101.85462, 2474.468],
[2, 415.40707, 926.67731, 924.68018, 2474.468],
[2, 1008.5604, 926.67731, 1372.0416, 2474.468],
[3, 2278.4634, 1424.0264, 103.9937, 103.9937],
[3, 457.3472, 589.15906, 816.83411, 469.33011],
[3, 618.69055, 832.04285, 104.47829, 1578.7172],
[3, 1170.7311, 832.04285, 756.71887, 1578.7172],
[3, 418.14838, 832.04285, 1962.6545, 1578.7172],
[3, 2280.6614, 940.57422, 100.82664, 2461.1147],
[4, 1128.3893, 547.21899, 100.85604, 101.85461],
[4, 1125.3937, 505.27878, 101.85462, 700.99945],
[4, 659.59674, 1104.1381, 1237.9126, 100.46677],
[4, 474.09705, 1104.7645, 1908.0801, 103.04887],
[4, 991.58466, 641.08496, 365.47833, 1256.2069],
[4, 2276.7502, 1268.1899, 101.85461, 1256.2069],
[4, 669.66565, 827.24689, 100.95136, 2574.8799],
[4, 1574.1992, 825.24969, 806.56573, 2576.877],
[5, 2270.7588, 1348.0758, 107.84606, 109.84322],
[5, 828.80096, 1879.4762, 104.70337, 1519.7256],
[5, 606.50098, 1877.479, 975.78717, 1521.7228],
[5, 755.02411, 1139.5406, 1623.401, 1521.7228],
[5, 757.02124, 680.4198, 1621.4038, 2716.7849],
[6, 2273.6387, 1248.3829, 104.50265, 107.32705],
[6, 624.19147, 440.60574, 1259.6805, 771.06006],
[6, 830.37231, 940.5238, 110.15143, 1415.0222],
[6, 1395.2515, 1313.3441, 985.71411, 1409.3734],
[6, 1321.8173, 796.47961, 112.97583, 2417.6829],
[6, 974.4165, 754.11365, 1403.7247, 2646.4587],
[7, 828.81702, 497.29019, 443.36716, 531.2417],
[7, 2275.0127, 1188.0789, 105.30553, 109.78442],
[7, 2275.0127, 804.28339, 105.30553, 1356.3481],
[7, 847.87823, 1182.9146, 105.30553, 2210.6436],
[7, 497.6918, 1185.7389, 994.37964, 2213.468],
[7, 854.35431, 1185.7389, 1528.7885, 2213.468],
[8, 2272.7561, 1228.2468, 101.85461, 107.84607],
[8, 497.29019, 756.91962, 994.58044, 569.18756],
[8, 2276.7502, 1052.4977, 101.85461, 1336.0929],
[8, 2278.7473, 958.63165, 101.85462, 2444.5107],
[9, 1131.1705, 453.31552, 101.67825, 103.09045],
[9, 1148.1168, 453.31552, 1232.8488, 103.09045],
[9, 1481.6407, 453.31552, 501.89209, 103.09045],
[9, 2282.1118, 855.79193, 98.853851, 604.42072],
[9, 1776.5449, 881.21149, 290.91275, 1355.71],
[9, 703.27454, 398.23981, 762.58685, 2863.9373],
[9, 2270.8142, 1132.5826, 107.32704, 2270.8142],
[10, 2278.7473, 1240.2297, 101.85461, 101.85461],
[10, 667.04791, 1016.549, 99.857468, 1390.016],
[10, 1583.7395, 1014.5519, 798.85974, 1390.016],
[10, 2280.7446, 944.65161, 99.857468, 2456.4937],
[11, 830.81415, 1194.2953, 97.860321, 101.85461],
[11, 774.89398, 1198.2897, 960.62885, 99.857468],
[11, 609.13055, 1192.2982, 1769.4744, 101.85461],
[11, 363.4812, 868.75995, 99.857468, 1348.0758],
[11, 1495.8649, 870.75714, 493.2959, 1346.0787],
[11, 357.48975, 870.75714, 2023.1123, 1348.0758],
[11, 529.24457, 499.28735, 103.85177, 2280.7446],
[11, 531.24176, 687.01941, 99.857468, 2716.123],
[11, 1022.5405, 1120.4008, 669.04504, 2280.7446],
[11, 657.06213, 1120.4008, 1725.5371, 2280.7446],
[12, 704.99371, 341.51254, 619.11633, 281.59805],
[12, 393.43842, 551.21326, 1459.9161, 159.77196],
[12, 2280.7446, 691.01367, 99.857468, 101.85461],
[12, 718.97375, 1198.2897, 99.857468, 840.79987],
[12, 712.9823, 1196.2925, 850.78564, 842.79706],
[12, 780.88538, 1192.2982, 1599.7167, 842.79706],
[12, 2366.6221, 1445.9362, 61.911629, 2049.0752],
[12, 922.68298, 551.21326, 984.59467, 2378.605],
[12, 631.09918, 211.69783, 1851.3574, 3289.3049],
]

85
demos/pepper_and_carrot_e35_highres.html
View File

@ -11,59 +11,66 @@
<body> <body>
<div id="melpomene">
<!-- Melpomene comic reader --> <!-- Melpomene comic reader -->
<!-- Version 1.0.0_RC1 -->
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ --> <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="reader-frame">
<div id="reader-content-frame"> <div id="melpomene-content-frame">
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/> <div id="melpomene-pages" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/> <img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
<img loading="lazy" height="3503" width="2481" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
</div> </div>
<div id="focus-overlay" class="flex-col fill">
<div class="grow obscured animated"></div> <div id="melpomene-focus-container">
<div id="focus-overlay-height" class="flex animated" style="height:100%"> <div></div>
<div class="grow obscured animated"></div> <div id="melpomene-focus-col">
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div> <div></div>
<div class="grow obscured animated"></div> <div id="melpomene-focus"></div>
<div></div>
</div> </div>
<div class="grow obscured animated"></div> <div></div>
</div> </div>
<div id="nav-controls" class="fill">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div> <div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div> <div><div class="melpomene-key">&larr;</div>/ scroll up / clic : previous</div>
</div> <div><div class="melpomene-key">&rarr;</div>/ scroll down / clic : next</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div> <div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div> <div><div class="melpomene-key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div> <div><div class="melpomene-key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div> <div><div class="melpomene-key">V</div>: Toggle panel / page viewing mode</div>
<div>-----------------------</div>
<div id="melpomene-version" class="melpomene-credits">Melpomene comic reader - Unknown version</div>
<div class="melpomene-credits">CC-BY-NC-SA 4.0 / <a target="_blank" href="https://git.aribaud.net/caribaud/melpomene">credits</a></div>
</div>
<div id="melpomene-nav-controls">
<div onclick="moveReader(false,false)"></div>
<div onclick="moveReader(true,false)"></div>
</div> </div>
</div> </div>
<div id="melpomene-progress-container">
<div id="melpomene-progress-bar"></div>
<div id="melpomene-progress-sections"></div>
</div> </div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div> </div>
</div>
<!-- End of Melpomene comic reader -->
</body> </body>
<!-- melpomene_js.html import --> <!-- melpomene_js.html import -->
<script src="demo_data.js"></script>
<script src="../melpomene.js"></script> <script src="../melpomene.js"></script>
</html> </html>

69
demos/pepper_and_carrot_e35_highres_htmldata.html
View File

@ -1,69 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="demo.css">
<!-- melpomene_head.html import -->
<link rel="stylesheet" href="../melpomene.css">
</head>
<body>
<!-- Melpomene comic reader -->
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="reader-frame">
<div id="reader-content-frame">
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
</div>
<div id="focus-overlay" class="flex-col fill">
<div class="grow obscured animated"></div>
<div id="focus-overlay-height" class="flex animated" style="height:100%">
<div class="grow obscured animated"></div>
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
<div class="grow obscured animated"></div>
</div>
<div class="grow obscured animated"></div>
</div>
<div id="nav-controls" class="fill">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
</div>
</div>
</div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div>
</div>
<!-- End of Melpomene comic reader -->
</body>
<!-- melpomene_js.html import -->
<script src="../melpomene.js"></script>
</html>

83
demos/pepper_and_carrot_e35_lowres.html
View File

@ -11,67 +11,66 @@
<body> <body>
<!-- melpomene_reader.html import --> <div id="melpomene">
<!-- Melpomene comic reader --> <!-- Melpomene comic reader -->
<!-- Version 1.0.0_RC1 -->
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ --> <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="reader-frame">
<div id="reader-content-frame">
<div id="reader-pages" class="animated" data-pages-width="2481" data-pages-height="3503" hidden> <div id="melpomene-content-frame">
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/> <div id="melpomene-pages" data-global-zoom-scale="0.4836759371221282" data-global-zoom-offset="0,-70" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg" data-zooms="2481.0,1327.1057,0.0,0.0;593.15338,1076.4635,0.0,1364.053;890.72864,491.29874,830.81415,1751.5;2481.0,1078.4192,0.0,1364.053;562.77032,909.44702,102.48115,2491.6567;920.74463,909.44702,698.55927,2491.6567;728.776,909.44702,1652.3695,2491.6567"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg" data-zooms="1459.9161,960.62878,99.857468,103.85177;788.87384,960.62878,1593.7252,103.85177;455.35007,305.56384,389.44412,1376.0359;2282.7415,760.914,99.857475,1114.4093;1069.9728,496.29166,101.85461,1928.2478;1209.7733,496.29166,1172.3267,1928.2478;788.87402,926.67731,101.85462,2474.468;415.40707,926.67731,924.68018,2474.468;1008.5604,926.67731,1372.0416,2474.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg" data-zooms="2278.4634,1424.0264,103.9937,103.9937;457.3472,589.15906,816.83411,469.33011;618.69055,832.04285,104.47829,1578.7172;1170.7311,832.04285,756.71887,1578.7172;418.14838,832.04285,1962.6545,1578.7172;2280.6614,940.57422,100.82664,2461.1147"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg" data-zooms="1128.3893,547.21899,100.85604,101.85461;1125.3937,505.27878,101.85462,700.99945;659.59674,1104.1381,1237.9126,100.46677;474.09705,1104.7645,1908.0801,103.04887;991.58466,641.08496,365.47833,1256.2069;2276.7502,1268.1899,101.85461,1256.2069;669.66565,827.24689,100.95136,2574.8799;1574.1992,825.24969,806.56573,2576.877"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg" data-zooms="2270.7588,1348.0758,107.84606,109.84322;828.80096,1879.4762,104.70337,1519.7256;606.50098,1877.479,975.78717,1521.7228;755.02411,1139.5406,1623.401,1521.7228;757.02124,680.4198,1621.4038,2716.7849"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg" data-zooms="2273.6387,1248.3829,104.50265,107.32705;624.19147,440.60574,1259.6805,771.06006;830.37231,940.5238,110.15143,1415.0222;1395.2515,1313.3441,985.71411,1409.3734;1321.8173,796.47961,112.97583,2417.6829;974.4165,754.11365,1403.7247,2646.4587"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg" data-zooms="828.81702,497.29019,443.36716,531.2417;2275.0127,1188.0789,105.30553,109.78442;2275.0127,804.28339,105.30553,1356.3481;847.87823,1182.9146,105.30553,2210.6436;497.6918,1185.7389,994.37964,2213.468;854.35431,1185.7389,1528.7885,2213.468"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg" data-zooms="2272.7561,1228.2468,101.85461,107.84607;497.29019,756.91962,994.58044,569.18756;2276.7502,1052.4977,101.85461,1336.0929;2278.7473,958.63165,101.85462,2444.5107"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg" data-zooms="1131.1705,453.31552,101.67825,103.09045;1148.1168,453.31552,1232.8488,103.09045;1481.6407,453.31552,501.89209,103.09045;2282.1118,855.79193,98.853851,604.42072;1776.5449,881.21149,290.91275,1355.71;703.27454,398.23981,762.58685,2863.9373;2270.8142,1132.5826,107.32704,2270.8142"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/> <img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg" data-zooms="2278.7473,1240.2297,101.85461,101.85461;667.04791,1016.549,99.857468,1390.016;1583.7395,1014.5519,798.85974,1390.016;2280.7446,944.65161,99.857468,2456.4937"/>
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg" data-zooms="830.81415,1194.2953,97.860321,101.85461;774.89398,1198.2897,960.62885,99.857468;609.13055,1192.2982,1769.4744,101.85461;363.4812,868.75995,99.857468,1348.0758;1495.8649,870.75714,493.2959,1346.0787;357.48975,870.75714,2023.1123,1348.0758;529.24457,499.28735,103.85177,2280.7446;531.24176,687.01941,99.857468,2716.123;1022.5405,1120.4008,669.04504,2280.7446;657.06213,1120.4008,1725.5371,2280.7446"/>
<img loading="lazy" height="1660" width="1200" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/low-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg" data-zooms="704.99371,341.51254,619.11633,281.59805;393.43842,551.21326,1459.9161,159.77196;2280.7446,691.01367,99.857468,101.85461;718.97375,1198.2897,99.857468,840.79987;712.9823,1196.2925,850.78564,842.79706;780.88538,1192.2982,1599.7167,842.79706;2366.6221,1445.9362,61.911629,2049.0752;922.68298,551.21326,984.59467,2378.605;631.09918,211.69783,1851.3574,3289.3049"/>
</div> </div>
<div id="focus-overlay" class="flex-col fill"> <div id="melpomene-focus-container">
<div class="grow obscured animated"></div> <div></div>
<div id="focus-overlay-height" class="flex animated" style="height:100%"> <div id="melpomene-focus-col">
<div class="grow obscured animated"></div> <div></div>
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div> <div id="melpomene-focus"></div>
<div class="grow obscured animated"></div> <div></div>
</div> </div>
<div class="grow obscured animated"></div> <div></div>
</div> </div>
<div id="nav-controls" class="fill"> <div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div> <div><div class="melpomene-key">&larr;</div>/ scroll up / clic : previous</div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div> <div><div class="melpomene-key">&rarr;</div>/ scroll down / clic : next</div>
</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div> <div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div> <div><div class="melpomene-key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div> <div><div class="melpomene-key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div> <div><div class="melpomene-key">V</div>: Toggle panel / page viewing mode</div>
<div>-----------------------</div>
<div id="melpomene-version" class="melpomene-credits">Melpomene comic reader - Unknown version</div>
<div class="melpomene-credits">CC-BY-NC-SA 4.0 / <a target="_blank" href="https://git.aribaud.net/caribaud/melpomene">credits</a></div>
</div>
<div id="melpomene-nav-controls">
<div onclick="moveReader(false,false)"></div>
<div onclick="moveReader(true,false)"></div>
</div> </div>
</div> </div>
<div id="melpomene-progress-container">
<div id="melpomene-progress-bar"></div>
<div id="melpomene-progress-sections"></div>
</div> </div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div> </div>
</div>
<!-- End of Melpomene comic reader -->
</body> </body>
<!-- melpomene_js.html import --> <!-- melpomene_js.html import -->
<script src="demo_data.js"></script>
<script src="../melpomene.js"></script> <script src="../melpomene.js"></script>
</html> </html>

184
melpomene.css
View File

@ -1,43 +1,8 @@
/* Melpomene webcomic reader CSS */ /* Melpomene webcomic reader CSS */
/* Version 1.0.0 - UNSTABLE */ /* Version 1.0.0_RC1 */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */ /* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
:root { #melpomene-focus-container, #melpomene-nav-controls, #melpomene-progress-sections {
--reader-progressbar-height: 0.3em;
}
.animated {
transition: all 1.5s ease;
}
#reader-frame {
display: flex;
flex-direction: column;
}
#reader-content-frame {
flex: 1;
position: relative;
overflow: hidden;
}
#reader-pages {
position: absolute;
flex-direction: row;
left: 0px;
right: 0px;
transform-origin: top left;
transform: scale(1) translate(0);
}
#reader-pages > img {
display: inline-block;
opacity: 0;
transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
flex-shrink: 0;
}
.fill {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -45,82 +10,100 @@
height: 100%; height: 100%;
} }
.obscured { #melpomene, #melpomene-focus-container, #melpomene-pages, #melpomene-nav-controls, #melpomene-focus-col {
background-color: rgba(0, 0, 0, 0.85);
}
.flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.flex-col { #melpomene-pages, #melpomene-focus-container * {
display: flex; transition: all 1.5s ease;
}
#melpomene, #melpomene-focus-col {
flex-direction: column; flex-direction: column;
} }
.grow { #melpomene {
flex: 1 height: 100%;
width: 100%;
border: 2px solid;
box-sizing: border-box;
background-color: black;
} }
#nav-controls { /* Reset images style to avoid external CSS interfering */
display: grid; #melpomene img {
all: initial;
}
#melpomene-content-frame {
position: relative;
flex: 1;
overflow: hidden;
}
#melpomene-pages {
transform-origin: top left;
transform: scale(1) translate(0);
align-items: center;
width: fit-content;
height: fit-content;
}
#melpomene-pages > img {
display: inline-block;
opacity: 0;
transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */
}
#melpomene-focus-container * {
background-color: rgba(0, 0, 0, 0.85);
flex-grow: 1;
}
#melpomene-focus-col, #melpomene-focus {
background-color: initial;
flex-grow: 0;
}
#melpomene-focus {
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
}
#melpomene-nav-controls {
display: flex;
grid-template-areas: grid-template-areas:
"left top right" "left top right"
"left center right" "left center right"
"left bottom right"; "left bottom right";
}
#nav-controls {
grid-template-columns: 33% 0 1fr; grid-template-columns: 33% 0 1fr;
grid-template-rows: auto; grid-template-rows: auto;
} }
#nav-controls > div { #melpomene-nav-controls > div {
flex-grow: 1;
cursor: pointer; cursor: pointer;
} }
.top { #melpomene-nav-controls > div:first-child {
grid-area: top; width: 35%;
flex-grow: 0
} }
.left { #melpomene-help-menu {
grid-area: left;
}
.right { position: absolute;
grid-area: right; bottom: 0;
} right: 0;
.top {
grid-area: top;
}
.bottom {
grid-area: bottom;
}
.focus {
box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 0.85);
}
#help-menu{
font-size: 120%; font-size: 120%;
display: flex;
flex-direction: column;
color: white;
background-color: rgba(0,0,0,0.8)
border: 0.1em solid black;
height: 100%;
justify-content: end;
box-sizing: border-box;
align-items: end;
}
#help-menu > #help-controls { color: white;
background-color: rgba(0,0,0,0.8);
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
background-color: rgba(0,0,0,0.5);
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
transition: all 1.7s cubic-bezier(.76,.05,.86,.06); transition: all 1.7s cubic-bezier(.76,.05,.86,.06);
@ -130,18 +113,28 @@
transform: translate(0, calc(100% - 2em)); transform: translate(0, calc(100% - 2em));
} }
#help-menu > #help-controls:hover { #melpomene-help-menu:hover {
opacity: 1; opacity: 1;
transition: all 0.3s linear; transition: all 0.3s linear;
transform: translate(0, 0); transform: translate(0, 0);
} }
#help-menu > #help-controls > div { #melpomene-help-menu * {
margin-top: 1em; margin-top: 1em;
text-align: center; text-align: center;
} }
.key { #melpomene-help-menu .melpomene-credits {
margin-top: 0.5em;
font-size: 70%;
text-align: right;
}
#melpomene-help-menu .melpomene-credits a {
color: white;
}
.melpomene-key {
display: inline; display: inline;
margin: 0 0.5em; margin: 0 0.5em;
border: 1px white solid; border: 1px white solid;
@ -149,28 +142,23 @@
border-radius: 0.2em; border-radius: 0.2em;
} }
#reader-progress-container { #melpomene-progress-container {
background-color: dimgray; background-color: dimgray;
position: relative; position: relative;
} }
#reader-progress-bar{ #melpomene-progress-bar{
height: var(--reader-progressbar-height); height: 0.3em;
background-color: whitesmoke; background-color: whitesmoke;
width: 0%;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
width: 0%;
} }
#reader-progress-pages { #melpomene-progress-sections {
display: flex; display: flex;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
} }
#reader-progress-pages > * { #melpomene-progress-sections > * {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border-right: 0.3em black solid; border-right: 0.3em black solid;

68
melpomene.html
View File

@ -1,39 +1,45 @@
<!-- Melpomene comic reader --> <div id="melpomene">
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ --> <!-- Melpomene comic reader -->
<div id="reader-frame"> <!-- Version 1.0.0_RC1 -->
<div id="reader-content-frame"> <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<!-- replace all 'xxxx' with the actual value -->
<div id="reader-pages" class="animated" data-pages-width="xxxx" data-pages-height="xxxx" hidden> <div id="melpomene-content-frame">
<img loading="lazy" src="xxxx" data-zooms="xxxx"/>
<!-- duplicate img for each comic page --> <div id="melpomene-pages" hidden>
<!-- your img tags here, see documentation -->
</div> </div>
<div id="focus-overlay" class="flex-col fill">
<div class="grow obscured animated"></div> <div id="melpomene-focus-container">
<div id="focus-overlay-height" class="flex animated" style="height:100%"> <div></div>
<div class="grow obscured animated"></div> <div id="melpomene-focus-col">
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div> <div></div>
<div class="grow obscured animated"></div> <div id="melpomene-focus"></div>
<div></div>
</div> </div>
<div class="grow obscured animated"></div> <div></div>
</div> </div>
<div id="nav-controls" class="fill">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div> <div id="melpomene-help-menu" style="opacity:1; transform: translate(0,0);">
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div> <div><div class="melpomene-key">&larr;</div>/ scroll up / clic : previous</div>
</div> <div><div class="melpomene-key">&rarr;</div>/ scroll down / clic : next</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div> <div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div> <div><div class="melpomene-key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div> <div><div class="melpomene-key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div> <div><div class="melpomene-key">V</div>: Toggle panel / page viewing mode</div>
<div>-----------------------</div>
<div id="melpomene-version" class="melpomene-credits">Melpomene comic reader - Unknown version</div>
<div class="melpomene-credits">CC-BY-NC-SA 4.0 / <a target="_blank" href="https://git.aribaud.net/caribaud/melpomene">credits</a></div>
</div>
<div id="melpomene-nav-controls">
<div onclick="moveReader(false,false)"></div>
<div onclick="moveReader(true,false)"></div>
</div> </div>
</div> </div>
<div id="melpomene-progress-container">
<div id="melpomene-progress-bar"></div>
<div id="melpomene-progress-sections"></div>
</div> </div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div>
</div> </div>
<!-- End of Melpomene comic reader -->

169
melpomene.js
View File

@ -1,5 +1,5 @@
/* Melpomene webcomic reader JS */ /* Melpomene webcomic reader JS */
/* Version 1.0.0 - UNSTABLE */ /* Version 1.0.0_RC1 */
/* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */ /* CC-BY-NC-SA : https://git.aribaud.net/caribaud/melpomene/ */
//============ //============
@ -25,15 +25,18 @@ DELAY_BEFORE_HIDDING_CONTROLS = 4000;
// STATES CONSTANTS // STATES CONSTANTS
//==================== //====================
READER_FRAME = document.getElementById("reader-frame") MELPOMENE_VERSION = "1.0.0_RC1"
READER_CONTENT_FRAME = document.getElementById("reader-content-frame")
READER_PAGES = document.getElementById("reader-pages") READER_FRAME = document.getElementById("melpomene")
FOCUS_OVERLAY_HEIGHT = document.getElementById("focus-overlay-height") READER_CONTENT_FRAME = document.getElementById("melpomene-content-frame")
FOCUS_OVERLAY_WIDTH = document.getElementById("focus-overlay-width") READER_PAGES = document.getElementById("melpomene-pages")
HELP_CONTROLS = document.getElementById("help-controls") FOCUS_OVERLAY_HEIGHT = document.getElementById("melpomene-focus")
PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container") FOCUS_OVERLAY_WIDTH = document.getElementById("melpomene-focus-col")
PROGRESS_BAR = document.getElementById("reader-progress-bar") HELP_CONTROLS = document.getElementById("melpomene-help-menu")
PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages") PROGRESS_BAR_CONTAINER = document.getElementById("melpomene-progress-container")
PROGRESS_BAR = document.getElementById("melpomene-progress-bar")
PROGRESS_BAR_PAGES = document.getElementById("melpomene-progress-sections")
VERSION_DISPLAY = document.getElementById("melpomene-version")
//=========================== //===========================
// STATES GLOBAL VARIABLES // STATES GLOBAL VARIABLES
@ -61,6 +64,33 @@ MOUSEWHELL_WAIT = false
// Zooms utilites // Zooms utilites
// -------------- // --------------
function globalZoomScale(){
if (READER_PAGES.dataset.globalZoomScale != undefined){
return parseFloat(READER_PAGES.dataset.globalZoomScale)
}
return 1.0
}
function globalZoomOffsetX(){
if (READER_PAGES.dataset.globalZoomOffset != undefined){
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[0])
}
return 0.0
}
function globalZoomOffsetY(){
if (READER_PAGES.dataset.globalZoomOffset != undefined){
return parseFloat(READER_PAGES.dataset.globalZoomOffset.split(',')[1])
}
return 0.0
}
function loadZoomsFromImgTagsIfRequired(){ function loadZoomsFromImgTagsIfRequired(){
// Zooms may be defined by another JS file // Zooms may be defined by another JS file
@ -149,37 +179,48 @@ function getPagesCount() {
return READER_PAGES.childElementCount return READER_PAGES.childElementCount
} }
function pageOriginalHeight() { function pageOriginalHeight(pageNumber) {
return parseInt(READER_PAGES.dataset.pagesHeight) return READER_PAGES.children[pageNumber - 1].naturalHeight
} }
function pageOriginalWidth() { function pageOriginalWidth(pageNumber) {
return parseInt(READER_PAGES.dataset.pagesWidth) return READER_PAGES.children[pageNumber - 1].naturalWidth
} }
function readerFrameRatio() { function readerFrameRatio() {
return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight
} }
function pageRatio() { function pageRatio(pageNumber) {
return READER_PAGES.dataset.pagesWidth / READER_PAGES.dataset.pagesHeight return READER_PAGES.children[pageNumber - 1].naturalWidth / READER_PAGES.children[pageNumber - 1].naturalHeight
} }
function isFrameRatioWiderThanPage(){ function pageMaxHeight(){
return readerFrameRatio() > pageRatio() let max_height = 0
}
function pageToFrameScaleFactor(useHeight){ for (var i = 0; i < READER_PAGES.children.length; i++) {
// The scale factor to apply to a page so it exactly fit in the reader frame if(READER_PAGES.children[i].naturalHeight > max_height){
if (useHeight) { max_height = READER_PAGES.children[i].naturalHeight
return READER_CONTENT_FRAME.clientHeight / pageOriginalHeight()
} }
return READER_CONTENT_FRAME.clientWidth / pageOriginalWidth() }
return max_height
} }
function totalPagesWidth() { function pageVerticalOffset(pageNumber) {
// The width of all cumuled pages with scale factor applied return ( pageMaxHeight() - pageOriginalHeight(pageNumber) ) / 2
return pageOriginalWidth() * getPagesCount() }
function previousPagesWidth(pageNumber) {
// The width of all previous pages relative to the provided index
let totalWidth = 0
for (let idx = 0; idx < pageNumber - 1; idx++){
totalWidth = totalWidth + READER_PAGES.children[idx].naturalWidth
}
return totalWidth
} }
// ========= // =========
@ -205,7 +246,6 @@ function initReader(){
for (var i = 0; i < READER_PAGES.children.length; i++) { for (var i = 0; i < READER_PAGES.children.length; i++) {
let img = READER_PAGES.children[i]; let img = READER_PAGES.children[i];
img.style.width = 100 / getPagesCount() + "%"
visibilityObserver.observe(img) visibilityObserver.observe(img)
PROGRESS_BAR_PAGES.appendChild(document.createElement("div")) PROGRESS_BAR_PAGES.appendChild(document.createElement("div"))
@ -226,22 +266,53 @@ function initReader(){
function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
// First, scale so the page is at scale 1 compared to the frame // Keep original values for registering
READER_PAGES.style.transform = "scale(" + totalPagesWidth() / READER_CONTENT_FRAME.clientWidth + ")" o_width = width
o_height = height
o_posx = posx
o_posy = posy
// Then, move to the correct page // Apply global offsets before scales if we are displaying a zoom
READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )" + READER_PAGES.style.transform // Pages display uses width & height = 0
if (width != 0 || height != 0){
width = width * globalZoomScale()
height = height * globalZoomScale()
posx = (posx + globalZoomOffsetX()) * globalZoomScale()
posy = (posy + globalZoomOffsetY()) * globalZoomScale()
}
// reduce width if offset sent us outside of page
if (posx < 0) {
width = width + posx
posx = 0
}
if ((posx + width) > pageOriginalWidth(pageNumber)) {
width = pageOriginalWidth(pageNumber) - posx
}
// reduce height if offset sent us outside of page
if (posy < 0) {
height = height + posy
posy = 0
}
if ((posy + height) > pageOriginalHeight(pageNumber)) {
height = pageOriginalHeight(pageNumber) - posy
}
// Align the top-left corner of the frame with the page
READER_PAGES.style.transform = "translate(-" + previousPagesWidth(pageNumber) + "px, -" + pageVerticalOffset(pageNumber) + "px )"
// Then move so the top-left point of the zoom match the frame top-left // Then move so the top-left point of the zoom match the frame top-left
READER_PAGES.style.transform = "translate(" + (- posx) + "px, " + (-posy) + "px )" + READER_PAGES.style.transform READER_PAGES.style.transform = "translate(" + (- posx) + "px, " + (-posy) + "px )" + READER_PAGES.style.transform
// Then, scale so the zoom would fit the frame, and center the zoom // Then, scale so the zoom would fit the frame, and center the zoom
if (width == 0){ if (width == 0){
width = pageOriginalWidth() width = pageOriginalWidth(pageNumber)
} }
if (height == 0){ if (height == 0){
height = pageOriginalHeight() height = pageOriginalHeight(pageNumber)
} }
zoomRatio = width / height zoomRatio = width / height
@ -272,11 +343,12 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
updateFocusByHeight(scaledHeight) updateFocusByHeight(scaledHeight)
} }
// Use values before global offset / scale
CURRENT_PAGE = pageNumber CURRENT_PAGE = pageNumber
CURRENT_WIDTH = width CURRENT_WIDTH = o_width
CURRENT_HEIGHT = height CURRENT_HEIGHT = o_height
CURRENT_X = posx CURRENT_X = o_posx
CURRENT_Y = posy CURRENT_Y = o_posy
} }
function refreshReaderDisplay() { function refreshReaderDisplay() {
@ -387,7 +459,19 @@ function handleKeyPress(key){
} }
function handleMouseWhell(deltaY){ function handleMouseWhell(event){
// Only handle scroll event if the target is the nav controls
// to avoid preventing page scrolling.
// Do disable page scrolling when we do prev/next, though
if (! READER_FRAME.contains(event.target)){
return
}
event.preventDefault()
event.stopPropagation()
if (MOUSEWHELL_WAIT){ if (MOUSEWHELL_WAIT){
return return
@ -398,7 +482,7 @@ function handleMouseWhell(deltaY){
}, MOUSEWHELL_MIN_DELAY) }, MOUSEWHELL_MIN_DELAY)
} }
if (deltaY > 0) { if (event.deltaY > 0) {
moveReader(true, false) moveReader(true, false)
} }
@ -412,6 +496,7 @@ function handleMouseWhell(deltaY){
// ====== // ======
window.addEventListener("load", (event) => { window.addEventListener("load", (event) => {
VERSION_DISPLAY.innerText = VERSION_DISPLAY.innerText.replace("Unknown version", MELPOMENE_VERSION)
initReader() initReader()
}); });
@ -424,5 +509,5 @@ addEventListener("keydown", (event) => {
}); });
addEventListener("wheel", (event) => { addEventListener("wheel", (event) => {
handleMouseWhell(event.deltaY) handleMouseWhell(event)
}); }, { passive:false });

74
zooms_generator.py
View File

@ -1,5 +1,5 @@
# Melpomene webcomic reader JSON/JS/HTML generator # Melpomene webcomic reader JSON/JS/HTML generator
# Version 1.0.0 - UNSTABLE # Version 1.0.0_RC1
# CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ # CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/
import sys import sys
@ -10,45 +10,8 @@ import argparse
from pathlib import Path from pathlib import Path
HTML_START_CONSTANT = """\ HTML_TEMPLATE = Path(__file__).parent / "melpomene.html"
<!-- Melpomene comic reader --> HTML_TO_REPLACE = "<!-- your img tags here, see documentation -->"
<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
<div id="reader-frame">
<div id="reader-content-frame">
"""
HTML_END_CONSTANT = """\
<div id="focus-overlay" class="flex-col fill">
<div class="grow obscured animated"></div>
<div id="focus-overlay-height" class="flex animated" style="height:100%">
<div class="grow obscured animated"></div>
<div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
<div class="grow obscured animated"></div>
</div>
<div class="grow obscured animated"></div>
</div>
<div id="nav-controls" class="fill">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1; transform: translate(0,0);">
<div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
<div><div class="key">&rarr;</div>/ scroll down / clic : next</div>
<div>-----------------------</div>
<div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">P</div>: Toggle progress bar</div>
<div><div class="key">V</div>: Toggle panel / page viewing mode</div>
</div>
</div>
</div>
<div id="reader-progress-container">
<div id="reader-progress-bar"></div>
<div id="reader-progress-pages"></div>
</div>
</div>
<!-- End of Melpomene comic reader -->
"""
def extract_zooms(src_folder): def extract_zooms(src_folder):
@ -69,17 +32,20 @@ def extract_zooms(src_folder):
zooms[idx] = { zooms[idx] = {
"name": svg_path.stem, "name": svg_path.stem,
"width": 0,
"height": 0,
"zooms": [], "zooms": [],
} }
tree = ET.parse(svg_path) tree = ET.parse(svg_path)
root = tree.getroot() root = tree.getroot()
for svg in root.findall('.//{*}svg'): if "." in root.get("width"):
if area.get("width") > max_width: print(f"WARNING: file {svg_path} has a floating width, it will be rounded", file=sys.stderr)
max_width = area.get("width") zooms[idx]["width"] = round(float(root.get("width")))
if area.get("height") > max_width: if "." in root.get("height"):
max_width = area.get("height") print(f"WARNING: file {svg_path} has a floating height, it will be rounded", file=sys.stderr)
zooms[idx]["height"] = round(float(root.get("height")))
for area in root.findall('.//{*}rect'): for area in root.findall('.//{*}rect'):
zooms[idx]["zooms"].append([ zooms[idx]["zooms"].append([
@ -116,21 +82,21 @@ def write_json_or_js(zooms, dest_file, is_js):
def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention): def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention):
with open(dest_file, "w") as data_file: img_tags = ""
data_file.write(HTML_START_CONSTANT)
data_file.write(f' <div id="reader-pages" class="animated" data-pages-width="{pages_width}" data-pages-height="{pages_height}" hidden>\n')
for page_idx in sorted(zooms.keys()): for page_idx in sorted(zooms.keys()):
img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}" img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]] zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
zoom_html_str = ';'.join(zoom_html_data) zoom_html_str = ';'.join(zoom_html_data)
data_file.write(f' <img loading="lazy" src="{img_url}" data-zooms="{zoom_html_str}"/>\n') img_tags = img_tags + f' <img loading="lazy" height="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n'
data_file.write(f' </div>\n') img_tags = img_tags.strip()
with open(HTML_TEMPLATE) as template_file, open(dest_file, "w") as data_file:
data = template_file.read().replace(HTML_TO_REPLACE, img_tags)
data_file.write(data)
data_file.write(HTML_END_CONSTANT)
def generate_argparse(): def generate_argparse():
""" Generate Melpomene's generator input parser""" """ Generate Melpomene's generator input parser"""