From c35e4268389e54c61504e86ba4edade4c2971267 Mon Sep 17 00:00:00 2001 From: caribaud Date: Mon, 22 May 2023 01:12:37 +0200 Subject: [PATCH 01/32] Fix licence button URL --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e21b8a..bc44932 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Melpomene -![](https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png) +![](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png) Melpomene is a a simple, HTML/CSS/JS webcomic reading utility . From 62303209f8b7ea975ac4cf4bbdc29cdf5f83dc83 Mon Sep 17 00:00:00 2001 From: caribaud Date: Thu, 25 May 2023 20:33:07 +0200 Subject: [PATCH 02/32] Set images size directly in HTML --- demos/pepper_and_carrot_e35_highres.html | 26 +++++++++---------- ...epper_and_carrot_e35_highres_htmldata.html | 26 +++++++++---------- demos/pepper_and_carrot_e35_lowres.html | 26 +++++++++---------- melpomene.js | 8 ++---- 4 files changed, 41 insertions(+), 45 deletions(-) diff --git a/demos/pepper_and_carrot_e35_highres.html b/demos/pepper_and_carrot_e35_highres.html index d2b5845..c6949ea 100644 --- a/demos/pepper_and_carrot_e35_highres.html +++ b/demos/pepper_and_carrot_e35_highres.html @@ -16,18 +16,18 @@
@@ -66,4 +66,4 @@ - \ No newline at end of file + diff --git a/demos/pepper_and_carrot_e35_highres_htmldata.html b/demos/pepper_and_carrot_e35_highres_htmldata.html index b83695d..84881c6 100644 --- a/demos/pepper_and_carrot_e35_highres_htmldata.html +++ b/demos/pepper_and_carrot_e35_highres_htmldata.html @@ -16,18 +16,18 @@
@@ -66,4 +66,4 @@ - \ No newline at end of file + diff --git a/demos/pepper_and_carrot_e35_lowres.html b/demos/pepper_and_carrot_e35_lowres.html index fdd239b..011ea93 100644 --- a/demos/pepper_and_carrot_e35_lowres.html +++ b/demos/pepper_and_carrot_e35_lowres.html @@ -19,18 +19,18 @@
@@ -74,4 +74,4 @@ - \ No newline at end of file + diff --git a/melpomene.js b/melpomene.js index 324d9d5..1501b23 100644 --- a/melpomene.js +++ b/melpomene.js @@ -205,7 +205,6 @@ function initReader(){ for (var i = 0; i < READER_PAGES.children.length; i++) { let img = READER_PAGES.children[i]; - img.style.width = 100 / getPagesCount() + "%" visibilityObserver.observe(img) PROGRESS_BAR_PAGES.appendChild(document.createElement("div")) @@ -226,11 +225,8 @@ function initReader(){ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){ - // First, scale so the page is at scale 1 compared to the frame - READER_PAGES.style.transform = "scale(" + totalPagesWidth() / READER_CONTENT_FRAME.clientWidth + ")" - - // Then, move to the correct page - READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )" + READER_PAGES.style.transform + // Move to the correct page + READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )" // 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 From 7179e44814096c115092c6631f96557aca3fd9d4 Mon Sep 17 00:00:00 2001 From: caribaud Date: Thu, 25 May 2023 21:31:22 +0200 Subject: [PATCH 03/32] Allow for varying-size pages --- README.md | 6 +- demos/demo_data.js | 83 ------------------- demos/pepper_and_carrot_e35_highres.html | 28 +++---- ...epper_and_carrot_e35_highres_htmldata.html | 69 --------------- demos/pepper_and_carrot_e35_lowres.html | 77 ----------------- melpomene.css | 9 +- melpomene.js | 55 +++++++----- zooms_generator.py | 17 ++-- 8 files changed, 61 insertions(+), 283 deletions(-) delete mode 100644 demos/demo_data.js delete mode 100644 demos/pepper_and_carrot_e35_highres_htmldata.html delete mode 100644 demos/pepper_and_carrot_e35_lowres.html diff --git a/README.md b/README.md index 6e21b8a..4fd34e9 100644 --- a/README.md +++ b/README.md @@ -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. 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 : + 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 : `, , , ; ...` + example : `` @@ -45,7 +44,6 @@ The following limitations are known and will be improved upon : + Mobile support is currently limited + There are some performences issues -+ Your comic pages need to be the same size # How to setup Melpomene ? @@ -85,4 +83,4 @@ You are now ready to integrate Melpomene in your website! # Credits -Most examples and the documentation of Melpomene uses illustrations from David "Deevad" Revoy's "Pepper & Carrot" webcomic, which is published under CC-BY 4.0. Full licence [here](https://www.peppercarrot.com/en/license/index.html). \ No newline at end of file +Most examples and the documentation of Melpomene uses illustrations from David "Deevad" Revoy's "Pepper & Carrot" webcomic, which is published under CC-BY 4.0. Full licence [here](https://www.peppercarrot.com/en/license/index.html). diff --git a/demos/demo_data.js b/demos/demo_data.js deleted file mode 100644 index dffd7ed..0000000 --- a/demos/demo_data.js +++ /dev/null @@ -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], -] diff --git a/demos/pepper_and_carrot_e35_highres.html b/demos/pepper_and_carrot_e35_highres.html index c6949ea..b3b7d02 100644 --- a/demos/pepper_and_carrot_e35_highres.html +++ b/demos/pepper_and_carrot_e35_highres.html @@ -15,19 +15,19 @@
- - -
+
←
/ scroll up / clic : previous
→
/ scroll down / clic : next
@@ -52,6 +48,10 @@
V
: Toggle panel / page viewing mode
+
diff --git a/melpomene.html b/melpomene.html index 5484c8c..0dc93ba 100644 --- a/melpomene.html +++ b/melpomene.html @@ -16,11 +16,7 @@
- -
+
←
/ scroll up / clic : previous
→
/ scroll down / clic : next
@@ -30,6 +26,10 @@
V
: Toggle panel / page viewing mode
+
diff --git a/zooms_generator.py b/zooms_generator.py index 24d900c..d075a87 100644 --- a/zooms_generator.py +++ b/zooms_generator.py @@ -27,11 +27,7 @@ HTML_END_CONSTANT = """\
- -
+
←
/ scroll up / clic : previous
→
/ scroll down / clic : next
@@ -41,6 +37,10 @@ HTML_END_CONSTANT = """\
V
: Toggle panel / page viewing mode
+
From 54bbeade8ca4927320f5622ba13bfbc76a187fc0 Mon Sep 17 00:00:00 2001 From: caribaud Date: Fri, 26 May 2023 17:12:54 +0200 Subject: [PATCH 06/32] Update HTML template --- melpomene.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/melpomene.html b/melpomene.html index 0dc93ba..af11d7b 100644 --- a/melpomene.html +++ b/melpomene.html @@ -2,10 +2,8 @@
- -