@xiee/utils 1.12.31 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/default.css +2 -3
- package/css/default.min.css +1 -1
- package/css/default.min.css.map +1 -1
- package/css/pages.css +95 -0
- package/css/pages.min.css +2 -0
- package/css/pages.min.css.map +1 -0
- package/js/pages.js +111 -0
- package/js/pages.min.js +1 -0
- package/package.json +1 -1
package/css/default.css
CHANGED
|
@@ -4,12 +4,11 @@ body {
|
|
|
4
4
|
margin: auto;
|
|
5
5
|
padding: 1em;
|
|
6
6
|
line-height: 1.5;
|
|
7
|
-
box-sizing: border-box;
|
|
8
7
|
}
|
|
9
8
|
body, .abstract, code, .footnotes, #refs { font-size: .9em; }
|
|
10
9
|
li li { font-size: .95em; }
|
|
11
10
|
ul:has(li > input[type="checkbox"]) { list-style: none; padding-left: 1em; }
|
|
12
|
-
*,
|
|
11
|
+
*, :before, :after { box-sizing: border-box; }
|
|
13
12
|
a { color: steelblue; }
|
|
14
13
|
pre, img { max-width: 100%; }
|
|
15
14
|
pre, pre:hover { white-space: pre-wrap; word-break: break-all; }
|
|
@@ -79,7 +78,7 @@ section.footnotes {
|
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
@media print {
|
|
82
|
-
body {
|
|
81
|
+
body { max-width: 100%; }
|
|
83
82
|
tr, img { page-break-inside: avoid; }
|
|
84
83
|
}
|
|
85
84
|
@media only screen and (min-width: 992px) {
|
package/css/default.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
body{
|
|
1
|
+
body{max-width:800px;margin:auto;padding:1em;font-family:sans-serif;line-height:1.5}body,.abstract,code,.footnotes,#refs{font-size:.9em}li li{font-size:.95em}ul:has(li>input[type=checkbox]){padding-left:1em;list-style:none}*,:before,:after{box-sizing:border-box}a{color:#4682b4}pre,img{max-width:100%}pre,pre:hover{white-space:pre-wrap;word-break:break-all}pre code{padding:1em;display:block;overflow-x:auto}code{font-family:DejaVu Sans Mono,Droid Sans Mono,Lucida Console,Consolas,Monaco,monospace}:not(pre)>code,code[class],.box>div{background-color:#f8f8f8}pre>code:not([class]),pre>.language-plain,.box{background-color:inherit;border:1px solid #eee}pre>.message{border-color:#9eeaf9}pre>.warning{background:#fff3cd;border-color:#fff3cd}pre>.error{background:#f8d7da;border-color:#f8d7da}.fenced-chunk{border-left:1px solid #666}.code-fence{opacity:.4;border:1px dashed #666;border-left:2px solid;&:hover{opacity:inherit}}.box{margin:1em 0}.box>:first-child>p:first-child,.box>:last-child>p:last-child{padding:1em}.box>:first-child,.box>:first-child>p:first-child{margin-top:0}.box>:last-child,.box>:last-child>p:last-child{margin-bottom:0}.figure>p:has(img){text-align:center}table{border-top:1px solid #666;margin:auto;& thead th{border-bottom:1px solid #ddd}& th,& td{padding:5px}& thead,& tfoot,& tr:nth-child(2n){background:#eee}}blockquote{color:#666;border-left:.5em solid #eee;margin:0;padding:1px 1em}hr,.footnotes:before{border:1px dashed #ddd}.frontmatter{text-align:center}#TOC .numbered{padding-left:0;& li{list-style:none}& ul{padding-left:1em}}table,.body h2{border-bottom:1px solid #666}.body .appendix,.appendix~h2{border-bottom-style:dashed}.main-number:after{content:"."}.ref-number-fig:after,.ref-number-tab:after{content:":"}.cross-ref-chp:before{content:"Chapter "}.cross-ref-sec:before{content:"Section "}.cross-ref-fig:before,.ref-number-fig:before{content:"Figure "}.cross-ref-tab:before,.ref-number-tab:before{content:"Table "}.abstract,#refs{&:before{margin:1em auto;font-weight:700;display:block}}.abstract:before{content:"Abstract";text-align:center}#refs:before{content:"Bibliography";font-size:1.5em}.ref-paren-open:before{content:"("}.ref-paren-close:after{content:")"}.ref-semicolon:after{content:"; "}.ref-and:after{content:" and "}.ref-et-al:after{content:" et al.";font-style:italic}.footnote-ref a{&:before{content:"["}&:after{content:"]"}}section.footnotes{margin-top:2em;&:before{content:"";max-width:20em;display:block}}@media print{body{max-width:100%}tr,img{page-break-inside:avoid}}@media only screen and (width>=992px){pre{white-space:pre}}
|
|
2
2
|
/*# sourceMappingURL=default.min.css.map */
|
package/css/default.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,oFAOA,oDACA,sBACA,iEACA,uCACA,gBACA,uBACA,wDACA,mDACA,2FACA,6DACA,8FACA,kCACA,qDACA,mDACA,yCACA,oEAIE,yBAEF,kBACA,0EACA,+DACA,+DACA,qCACA,4CAEE,wCACA,sBACA,oDAEF,2EAMA,4CACA,+BACA,8BAEE,qBACA,uBAEF,4CACA,wDACA,+BACA,wDACA,yCACA,yCACA,+DACA,8DACA,gBACE,wDAEF,sDACA,oDACA,mCACA,mCACA,kCACA,+BACA,qDACA,gBACE,qBACA,qBAEF,iCAEE,kDAGF,aACE,oBACA,gCAEF,sCACE","sources":["default.css"],"sourcesContent":["body {\n font-family: sans-serif;\n max-width: 800px;\n margin: auto;\n padding: 1em;\n line-height: 1.5;\n}\nbody, .abstract, code, .footnotes, #refs { font-size: .9em; }\nli li { font-size: .95em; }\nul:has(li > input[type=\"checkbox\"]) { list-style: none; padding-left: 1em; }\n*, :before, :after { box-sizing: border-box; }\na { color: steelblue; }\npre, img { max-width: 100%; }\npre, pre:hover { white-space: pre-wrap; word-break: break-all; }\npre code { display: block; padding: 1em; overflow-x: auto; }\ncode { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; }\n:not(pre) > code, code[class], .box > div { background-color: #f8f8f8; }\npre > code:not([class]), pre > .language-plain, .box { background-color: inherit; border: 1px solid #eee; }\npre > .message { border-color: #9eeaf9; }\npre > .warning { background: #fff3cd; border-color: #fff3cd; }\npre > .error { background: #f8d7da; border-color: #f8d7da; }\n.fenced-chunk { border-left: 1px solid #666; }\n.code-fence {\n opacity: .4;\n border: 1px dashed #666;\n border-left: 2px solid;\n &:hover { opacity: inherit; }\n}\n.box { margin: 1em 0; }\n.box > :first-child > p:first-child, .box > :last-child > p:last-child { padding: 1em; }\n.box > :first-child, .box > :first-child > p:first-child { margin-top: 0; }\n.box > :last-child, .box > :last-child > p:last-child { margin-bottom: 0; }\n.figure > p:has(img) { text-align: center; }\ntable {\n margin: auto; border-top: 1px solid #666;\n thead th { border-bottom: 1px solid #ddd; }\n th, td { padding: 5px; }\n thead, tfoot, tr:nth-child(even) { background: #eee; }\n}\nblockquote {\n color: #666;\n margin: 0;\n padding: 1px 1em;\n border-left: .5em solid #eee;\n}\nhr, .footnotes::before { border: 1px dashed #ddd; }\n.frontmatter { text-align: center; }\n#TOC .numbered {\n padding-left: 0;\n li { list-style: none; }\n ul { padding-left: 1em; }\n}\ntable, .body h2 { border-bottom: 1px solid #666; }\n.body .appendix, .appendix ~ h2 { border-bottom-style: dashed; }\n.main-number::after { content: \".\"; }\n.ref-number-fig::after, .ref-number-tab::after { content: \":\"; }\n.cross-ref-chp::before { content: \"Chapter \"; }\n.cross-ref-sec::before { content: \"Section \"; }\n.cross-ref-fig::before, .ref-number-fig::before { content: \"Figure \"; }\n.cross-ref-tab::before, .ref-number-tab::before { content: \"Table \"; }\n.abstract, #refs {\n &::before { display: block; margin: 1em auto; font-weight: bold; }\n}\n.abstract::before { content: \"Abstract\"; text-align: center; }\n#refs::before { content: \"Bibliography\"; font-size: 1.5em; }\n.ref-paren-open::before { content: \"(\"; }\n.ref-paren-close::after { content: \")\"; }\n.ref-semicolon::after { content: \"; \"; }\n.ref-and::after { content: \" and \"; }\n.ref-et-al::after { content: \" et al.\"; font-style: italic; }\n.footnote-ref a {\n &::before { content: \"[\"; }\n &::after { content: \"]\"; }\n}\nsection.footnotes {\n margin-top: 2em;\n &::before { content: \"\"; display: block; max-width: 20em; }\n}\n\n@media print {\n body { max-width: 100%; }\n tr, img { page-break-inside: avoid; }\n}\n@media only screen and (min-width: 992px) {\n pre { white-space: pre; }\n}\n"],"names":[]}
|
package/css/pages.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--paper-width: 210mm;
|
|
3
|
+
--paper-height: 297mm;
|
|
4
|
+
--paper-margin-top: 40px;
|
|
5
|
+
--paper-margin-right: 80px;
|
|
6
|
+
--paper-margin-bottom: 40px;
|
|
7
|
+
--paper-margin-left: 80px;
|
|
8
|
+
--page-header-height: 40px;
|
|
9
|
+
--page-header-bottom: 40px;
|
|
10
|
+
--page-footer-height: 40px;
|
|
11
|
+
--page-footer-top: 40px;
|
|
12
|
+
}
|
|
13
|
+
@page {
|
|
14
|
+
size: var(--paper-width) var(--paper-height);
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
@page multiple {
|
|
18
|
+
margin-top: var(--paper-margin-top);
|
|
19
|
+
margin-bottom: var(--paper-margin-bottom);
|
|
20
|
+
}
|
|
21
|
+
.page-multiple {
|
|
22
|
+
page: multiple;
|
|
23
|
+
}
|
|
24
|
+
.pagesjs {
|
|
25
|
+
padding: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
margin: 5mm;
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
gap: 5mm;
|
|
32
|
+
.pagesjs-page {
|
|
33
|
+
width: var(--paper-width);
|
|
34
|
+
height: var(--paper-height);
|
|
35
|
+
padding: var(--paper-margin-top) var(--paper-margin-right) var(--paper-margin-bottom) var(--paper-margin-left);
|
|
36
|
+
page-break-after: always;
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
.pagesjs-header, .pagesjs-footer {
|
|
43
|
+
font-size: .9em;
|
|
44
|
+
display: flex;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
}
|
|
47
|
+
.pagesjs-header {
|
|
48
|
+
flex: var(--page-header-height) 0 0;
|
|
49
|
+
margin-bottom: var(--page-header-bottom);
|
|
50
|
+
align-items: end;
|
|
51
|
+
}
|
|
52
|
+
.pagesjs-footer {
|
|
53
|
+
flex: var(--page-footer-height) 0 0;
|
|
54
|
+
margin-top: var(--page-footer-top);
|
|
55
|
+
align-items: start;
|
|
56
|
+
}
|
|
57
|
+
.pagesjs-body {
|
|
58
|
+
flex-grow: 1;
|
|
59
|
+
}
|
|
60
|
+
.pagesjs-header::before {
|
|
61
|
+
content: attr(data-main-title);
|
|
62
|
+
}
|
|
63
|
+
.pagesjs-header::after {
|
|
64
|
+
content: attr(data-page-title);
|
|
65
|
+
}
|
|
66
|
+
.pagesjs-footer::before {
|
|
67
|
+
content: " ";
|
|
68
|
+
}
|
|
69
|
+
.pagesjs-footer::after {
|
|
70
|
+
content: attr(data-page-number);
|
|
71
|
+
}
|
|
72
|
+
@media only screen {
|
|
73
|
+
.pagesjs {
|
|
74
|
+
background-color: #f7f7f7;
|
|
75
|
+
.pagesjs-page {
|
|
76
|
+
background-color: white;
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@media print {
|
|
82
|
+
.pagesjs {
|
|
83
|
+
margin: 0;
|
|
84
|
+
gap: 0;
|
|
85
|
+
.page-multiple {
|
|
86
|
+
padding: 0 var(--paper-margin-right) 0 var(--paper-margin-left);
|
|
87
|
+
.pagesjs-header {
|
|
88
|
+
margin-top: calc(0 - var(--page-header-bottom) - var(--page-header-height));
|
|
89
|
+
}
|
|
90
|
+
.pagesjs-footer {
|
|
91
|
+
margin-bottom: calc(0 - var(--page-footer-top) - var(--page-footer-height));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
:root{--paper-width:210mm;--paper-height:297mm;--paper-margin-top:40px;--paper-margin-right:80px;--paper-margin-bottom:40px;--paper-margin-left:80px;--page-header-height:40px;--page-header-bottom:40px;--page-footer-height:40px;--page-footer-top:40px}@page{size:var(--paper-width)var(--paper-height);margin:0}@page multiple{margin-top:var(--paper-margin-top);margin-bottom:var(--paper-margin-bottom)}.page-multiple{page:multiple}.pagesjs{flex-wrap:wrap;justify-content:center;gap:5mm;max-width:100%;margin:5mm;padding:0;display:flex;& .pagesjs-page{width:var(--paper-width);height:var(--paper-height);padding:var(--paper-margin-top)var(--paper-margin-right)var(--paper-margin-bottom)var(--paper-margin-left);page-break-after:always;flex-direction:column;justify-content:space-between;display:flex}}.pagesjs-header,.pagesjs-footer{justify-content:space-between;font-size:.9em;display:flex}.pagesjs-header{flex:var(--page-header-height)0 0;margin-bottom:var(--page-header-bottom);align-items:end}.pagesjs-footer{flex:var(--page-footer-height)0 0;margin-top:var(--page-footer-top);align-items:start}.pagesjs-body{flex-grow:1}.pagesjs-header:before{content:attr(data-main-title)}.pagesjs-header:after{content:attr(data-page-title)}.pagesjs-footer:before{content:" "}.pagesjs-footer:after{content:attr(data-page-number)}@media only screen{.pagesjs{background-color:#f7f7f7;& .pagesjs-page{background-color:#fff;overflow-y:auto}}}@media print{.pagesjs{gap:0;margin:0;& .page-multiple{padding:0 var(--paper-margin-right)0 var(--paper-margin-left);& .pagesjs-header{margin-top:calc(0 - var(--page-header-bottom) - var(--page-header-height))}& .pagesjs-footer{margin-bottom:calc(0 - var(--page-footer-top) - var(--page-footer-height))}}}}
|
|
2
|
+
/*# sourceMappingURL=pages.min.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,0PAYA,0DAIA,2FAIA,6BAGA,wGAQE,yQAUF,0FAKA,0GAKA,sGAKA,0BAGA,qDAGA,oDAGA,mCAGA,qDAGA,mBACE,kCAEE,wDAMJ,aACE,wBAGE,+EAEE,6FAGA","sources":["pages.css"],"sourcesContent":[":root {\n --paper-width: 210mm;\n --paper-height: 297mm;\n --paper-margin-top: 40px;\n --paper-margin-right: 80px;\n --paper-margin-bottom: 40px;\n --paper-margin-left: 80px;\n --page-header-height: 40px;\n --page-header-bottom: 40px;\n --page-footer-height: 40px;\n --page-footer-top: 40px;\n}\n@page {\n size: var(--paper-width) var(--paper-height);\n margin: 0;\n}\n@page multiple {\n margin-top: var(--paper-margin-top);\n margin-bottom: var(--paper-margin-bottom);\n}\n.page-multiple {\n page: multiple;\n}\n.pagesjs {\n padding: 0;\n max-width: 100%;\n margin: 5mm;\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 5mm;\n .pagesjs-page {\n width: var(--paper-width);\n height: var(--paper-height);\n padding: var(--paper-margin-top) var(--paper-margin-right) var(--paper-margin-bottom) var(--paper-margin-left);\n \tpage-break-after: always;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n}\n.pagesjs-header, .pagesjs-footer {\n font-size: .9em;\n display: flex;\n justify-content: space-between;\n}\n.pagesjs-header {\n flex: var(--page-header-height) 0 0;\n margin-bottom: var(--page-header-bottom);\n align-items: end;\n}\n.pagesjs-footer {\n flex: var(--page-footer-height) 0 0;\n margin-top: var(--page-footer-top);\n align-items: start;\n}\n.pagesjs-body {\n flex-grow: 1;\n}\n.pagesjs-header::before {\n content: attr(data-main-title);\n}\n.pagesjs-header::after {\n content: attr(data-page-title);\n}\n.pagesjs-footer::before {\n content: \" \";\n}\n.pagesjs-footer::after {\n content: attr(data-page-number);\n}\n@media only screen {\n .pagesjs {\n background-color: #f7f7f7;\n .pagesjs-page {\n background-color: white;\n overflow-y: auto;\n }\n }\n}\n@media print {\n .pagesjs {\n margin: 0;\n gap: 0;\n .page-multiple {\n padding: 0 var(--paper-margin-right) 0 var(--paper-margin-left);\n .pagesjs-header {\n margin-top: calc(0 - var(--page-header-bottom) - var(--page-header-height));\n }\n .pagesjs-footer {\n margin-bottom: calc(0 - var(--page-footer-top) - var(--page-footer-height));\n }\n }\n }\n}\n"],"names":[]}
|
package/js/pages.js
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
// move elements into page boxes such that each box contains as many elements as
|
|
2
|
+
// possible and will not exceed the given size (e.g. A4 paper)
|
|
3
|
+
(d => {
|
|
4
|
+
function $(s, el = d) { return el.querySelector(s); }
|
|
5
|
+
function $$(s, el = d) { return el.querySelectorAll(s); }
|
|
6
|
+
|
|
7
|
+
const tpl = d.createElement('div');
|
|
8
|
+
tpl.className = 'pagesjs-page';
|
|
9
|
+
tpl.innerHTML = `<div class="pagesjs-header"></div>
|
|
10
|
+
<div class="pagesjs-body"></div>
|
|
11
|
+
<div class="pagesjs-footer"></div>`;
|
|
12
|
+
let box, box_body, H;
|
|
13
|
+
function newPage(el) {
|
|
14
|
+
box = el || tpl.cloneNode(true); box_body = box.children[1];
|
|
15
|
+
return box;
|
|
16
|
+
}
|
|
17
|
+
function fill(el) {
|
|
18
|
+
// if the element is already a page, just use it as the box
|
|
19
|
+
if (el.classList.contains('pagesjs-page')) {
|
|
20
|
+
box.after(el);
|
|
21
|
+
!$('.pagesjs-body', el) && el.insertAdjacentHTML('afterbegin', tpl.innerHTML);
|
|
22
|
+
// if current element is not empty, fill its content into the box
|
|
23
|
+
if (el.childElementCount > 3) {
|
|
24
|
+
el.children[1].append(...[...el.children].slice(3));
|
|
25
|
+
el.after(newPage()); // create a new empty page
|
|
26
|
+
} else {
|
|
27
|
+
newPage(el);
|
|
28
|
+
}
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
// create a new box in case of too much content (exceeding original height)
|
|
32
|
+
if (box.scrollHeight > H) {
|
|
33
|
+
const box2 = tpl.cloneNode(true), box_body2 = box2.children[1];
|
|
34
|
+
box.after(box2);
|
|
35
|
+
// if there's more than one child in the box, move the last child out
|
|
36
|
+
box_body.childElementCount > 1 && box_body2.append(box_body.lastElementChild);
|
|
37
|
+
[box, box_body] = [box2, box_body2];
|
|
38
|
+
}
|
|
39
|
+
box_body.append(el);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// use data-short-title of a header if exists, and fall back to inner text
|
|
43
|
+
function shortTitle(h) {
|
|
44
|
+
return h && (h.dataset['shortTitle'] || h.innerText);
|
|
45
|
+
}
|
|
46
|
+
const main = shortTitle($('h1.title, .frontmatter h1, .title, h1')), // main title
|
|
47
|
+
ps = ($$('h1').length > 1 ? 'h1' : 'h2') + ':not(.frontmatter *)', // page title selector
|
|
48
|
+
tb = ['top', 'bottom'].map(i => {
|
|
49
|
+
const v = getComputedStyle(d.documentElement).getPropertyValue(`--paper-margin-${i}`);
|
|
50
|
+
return +v.replace('px', '') || 0;
|
|
51
|
+
}); // top/bottom page margin
|
|
52
|
+
|
|
53
|
+
// calculate how many new pages we need for overflowed content (this is just
|
|
54
|
+
// an estimate; if not accurate, use <div class="pagesjs-page" data-pages-offset="N">
|
|
55
|
+
// to provide a number manually)
|
|
56
|
+
function calcPages(box) {
|
|
57
|
+
let n = +box.dataset['pagesOffset'];
|
|
58
|
+
if (n) return n;
|
|
59
|
+
const h = box.scrollHeight;
|
|
60
|
+
n = Math.ceil(h/H);
|
|
61
|
+
if (n <= 1) return n;
|
|
62
|
+
// consider top/bottom page margin and table headers (which may be repeated on each page)
|
|
63
|
+
const m = tb.concat([...$$('thead', box)].map(el => +el.offsetHeight)).reduce((m1, m2) => m1 + m2);
|
|
64
|
+
if (!m) return n;
|
|
65
|
+
function newPages() { return Math.ceil((h + (n - 1) * m)/H); }
|
|
66
|
+
let n2 = newPages();
|
|
67
|
+
while (n2 > n) {
|
|
68
|
+
n = n2; n2 = newPages();
|
|
69
|
+
}
|
|
70
|
+
return n;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function paginate() {
|
|
74
|
+
const cls = d.body.classList;
|
|
75
|
+
if (cls.contains('pagesjs')) return; // already paginated
|
|
76
|
+
|
|
77
|
+
cls.add('pagesjs');
|
|
78
|
+
d.body.insertAdjacentElement('afterbegin', newPage());
|
|
79
|
+
H = box.clientHeight;
|
|
80
|
+
|
|
81
|
+
$$('.frontmatter, #TOC, .abstract').forEach(fill);
|
|
82
|
+
$$('.body').forEach(el => {
|
|
83
|
+
[...el.children].map(fill);
|
|
84
|
+
el.childElementCount === 0 && el.remove();
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
// add page number, title, etc. to data-* attributes of page elements
|
|
88
|
+
let page_title, i = 0;
|
|
89
|
+
$$('.pagesjs-page').forEach(box => {
|
|
90
|
+
if (box.innerText === '') return box.remove(); // remove empty pages
|
|
91
|
+
const N = calcPages(box);
|
|
92
|
+
if (N > 1) box.classList.add('page-multiple');
|
|
93
|
+
i += N;
|
|
94
|
+
const info = {
|
|
95
|
+
'pageNumber': i, 'mainTitle': main, 'pageTitle': page_title
|
|
96
|
+
};
|
|
97
|
+
[box.children[0], box.children[2]].forEach(el => {
|
|
98
|
+
for (const key in info) info[key] && (el.dataset[key] = info[key]);
|
|
99
|
+
});
|
|
100
|
+
// find page title for next page
|
|
101
|
+
page_title = shortTitle([...$$(ps, box)].pop()) || page_title;
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
addEventListener('beforeprint', paginate);
|
|
105
|
+
// persistent pagination upon page reload (press p again to cancel it)
|
|
106
|
+
let pg = sessionStorage.getItem('pagesjs');
|
|
107
|
+
pg && paginate();
|
|
108
|
+
addEventListener('keypress', e => e.key === 'p' && (
|
|
109
|
+
paginate(), pg = pg ? '' : '1', sessionStorage.setItem('pagesjs', pg), pg || location.reload()
|
|
110
|
+
));
|
|
111
|
+
})(document);
|
package/js/pages.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(e=>{function t(t,n=e){return n.querySelector(t)}function n(t,n=e){return n.querySelectorAll(t)}const r=e.createElement("div");let a,s,i;function o(e){return a=e||r.cloneNode(!0),s=a.children[1],a}function c(e){if(e.classList.contains("pagesjs-page"))return a.after(e),!t(".pagesjs-body",e)&&e.insertAdjacentHTML("afterbegin",r.innerHTML),void(e.childElementCount>3?(e.children[1].append(...[...e.children].slice(3)),e.after(o())):o(e));if(a.scrollHeight>i){const e=r.cloneNode(!0),t=e.children[1];a.after(e),s.childElementCount>1&&t.append(s.lastElementChild),[a,s]=[e,t]}s.append(e)}function l(e){return e&&(e.dataset.shortTitle||e.innerText)}r.className="pagesjs-page",r.innerHTML='<div class="pagesjs-header"></div>\n<div class="pagesjs-body"></div>\n<div class="pagesjs-footer"></div>';const d=l(t("h1.title, .frontmatter h1, .title, h1")),p=(n("h1").length>1?"h1":"h2")+":not(.frontmatter *)",f=["top","bottom"].map((t=>+getComputedStyle(e.documentElement).getPropertyValue(`--paper-margin-${t}`).replace("px","")||0));function u(){const t=e.body.classList;if(t.contains("pagesjs"))return;t.add("pagesjs"),e.body.insertAdjacentElement("afterbegin",o()),i=a.clientHeight,n(".frontmatter, #TOC, .abstract").forEach(c),n(".body").forEach((e=>{[...e.children].map(c),0===e.childElementCount&&e.remove()}));let r,s=0;n(".pagesjs-page").forEach((e=>{if(""===e.innerText)return e.remove();const t=function(e){let t=+e.dataset.pagesOffset;if(t)return t;const r=e.scrollHeight;if(t=Math.ceil(r/i),t<=1)return t;const a=f.concat([...n("thead",e)].map((e=>+e.offsetHeight))).reduce(((e,t)=>e+t));if(!a)return t;function s(){return Math.ceil((r+(t-1)*a)/i)}let o=s();for(;o>t;)t=o,o=s();return t}(e);t>1&&e.classList.add("page-multiple"),s+=t;const a={pageNumber:s,mainTitle:d,pageTitle:r};[e.children[0],e.children[2]].forEach((e=>{for(const t in a)a[t]&&(e.dataset[t]=a[t])})),r=l([...n(p,e)].pop())||r}))}addEventListener("beforeprint",u);let g=sessionStorage.getItem("pagesjs");g&&u(),addEventListener("keypress",(e=>"p"===e.key&&(u(),g=g?"":"1",sessionStorage.setItem("pagesjs",g),g||location.reload())))})(document);
|