@xiee/utils 1.13.0 → 1.13.1
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/article.css +12 -10
- package/css/article.min.css +1 -1
- package/css/article.min.css.map +1 -1
- package/css/pages.css +72 -15
- package/css/pages.min.css +1 -1
- package/css/pages.min.css.map +1 -1
- package/js/pages.js +54 -11
- package/js/pages.min.js +1 -1
- package/package.json +1 -1
package/css/article.css
CHANGED
|
@@ -87,16 +87,18 @@ body, blockquote, .side, .menu { background: #fafafa; }
|
|
|
87
87
|
|
|
88
88
|
@media (min-width: 1264.02px) {
|
|
89
89
|
.article, .body, .appendix { position: relative; }
|
|
90
|
-
#TOC
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
#TOC.side {
|
|
91
|
+
.active {
|
|
92
|
+
color: limegreen;
|
|
93
|
+
}
|
|
94
|
+
li li .active {
|
|
95
|
+
border-left: 3px solid;
|
|
96
|
+
margin-left: calc(-1em - 3px);
|
|
97
|
+
padding-left: 1em;
|
|
98
|
+
}
|
|
99
|
+
li:not(:has(.active)) ul {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
100
102
|
}
|
|
101
103
|
.note-ref { cursor: pointer; }
|
|
102
104
|
.note-ref:hover + .side {
|
package/css/article.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
body,blockquote,.side,.menu{background:#fafafa}.article-list,.body,.single main,.single .appendix,.body~.appendix,.frontmatter,.fullwidth,.embed-left,.embed-right{background:#fff;margin-top:2em;padding:1em;box-shadow:0 0 8px #ccc}.article-meta{background:#f8f8f8}.article-meta .terms,.appendix,.footnotes,main .side>*,.body .side,figcaption,.caption{font-size:.9em}.single .appendix,.body~.appendix,.frontmatter{background:0 0}.appendix h2{border-bottom:1px dashed #666}#TOC{top:0}#TOC ul{list-style-position:inside}#TOC>ul{margin:0;padding:0}#TOC li>ul{padding-left:1em}#TOC .numbered{list-style:none}#TOC a{text-decoration:none}#TOC ul ul{border-left:1px solid #b0c4de}.bg-number{color:#fff;background:#789;border-radius:5px;padding:1px 5px}.side{width:200px;margin:0 auto}.side-left{float:left;clear:left;margin-left:calc(-200px - 2em);position:sticky}.side-right{float:right;clear:right;margin-right:calc(-200px - 2em)}.quote-left,.quote-right{width:45%}.embed-left,.embed-right{margin-top:auto;padding:0}.quote-left,.embed-left{float:left;margin-right:1em}.quote-right,.embed-right{float:right;margin-left:1em}.embed-left{margin-left:calc(-200px - 2em)}.embed-right{margin-right:calc(-200px - 2em)}.side>:first-child,.embed-left>:first-child,.embed-right>:first-child{margin-top:0}.embed-left>:last-child,.embed-right>:last-child{margin-bottom:0}.quote-left>:first-child,.quote-right>:first-child{padding-top:.1px}.quote-left>:last-child,.quote-right>:last-child{padding-bottom:.1px}.fullwidth,.fullwidth *{margin:auto 0}.fullwidth *{max-width:calc(100vw - 4em)}.fullscroll *{max-width:initial}.fullwidth{float:left;background:#fff;min-width:100%;max-width:calc(100vw - 2em);margin:1em 0 1em 50%;transform:translate(-50%)}.fullscroll,.fullscroll figure,.fullscroll .figure{overflow-x:auto}.fullwidth figcaption,.fullwidth .caption{width:800px;margin-left:calc(50% - 400px);padding:1em 1em 0}@media (width>=1264.02px){.article,.body,.appendix{position:relative}#TOC .active{color:#32cd32}
|
|
1
|
+
body,blockquote,.side,.menu{background:#fafafa}.article-list,.body,.single main,.single .appendix,.body~.appendix,.frontmatter,.fullwidth,.embed-left,.embed-right{background:#fff;margin-top:2em;padding:1em;box-shadow:0 0 8px #ccc}.article-meta{background:#f8f8f8}.article-meta .terms,.appendix,.footnotes,main .side>*,.body .side,figcaption,.caption{font-size:.9em}.single .appendix,.body~.appendix,.frontmatter{background:0 0}.appendix h2{border-bottom:1px dashed #666}#TOC{top:0}#TOC ul{list-style-position:inside}#TOC>ul{margin:0;padding:0}#TOC li>ul{padding-left:1em}#TOC .numbered{list-style:none}#TOC a{text-decoration:none}#TOC ul ul{border-left:1px solid #b0c4de}.bg-number{color:#fff;background:#789;border-radius:5px;padding:1px 5px}.side{width:200px;margin:0 auto}.side-left{float:left;clear:left;margin-left:calc(-200px - 2em);position:sticky}.side-right{float:right;clear:right;margin-right:calc(-200px - 2em)}.quote-left,.quote-right{width:45%}.embed-left,.embed-right{margin-top:auto;padding:0}.quote-left,.embed-left{float:left;margin-right:1em}.quote-right,.embed-right{float:right;margin-left:1em}.embed-left{margin-left:calc(-200px - 2em)}.embed-right{margin-right:calc(-200px - 2em)}.side>:first-child,.embed-left>:first-child,.embed-right>:first-child{margin-top:0}.embed-left>:last-child,.embed-right>:last-child{margin-bottom:0}.quote-left>:first-child,.quote-right>:first-child{padding-top:.1px}.quote-left>:last-child,.quote-right>:last-child{padding-bottom:.1px}.fullwidth,.fullwidth *{margin:auto 0}.fullwidth *{max-width:calc(100vw - 4em)}.fullscroll *{max-width:initial}.fullwidth{float:left;background:#fff;min-width:100%;max-width:calc(100vw - 2em);margin:1em 0 1em 50%;transform:translate(-50%)}.fullscroll,.fullscroll figure,.fullscroll .figure{overflow-x:auto}.fullwidth figcaption,.fullwidth .caption{width:800px;margin-left:calc(50% - 400px);padding:1em 1em 0}@media (width>=1264.02px){.article,.body,.appendix{position:relative}#TOC.side{& .active{color:#32cd32}& li li .active{border-left:3px solid;margin-left:calc(-1em - 3px);padding-left:1em}& li:not(:has(.active)) ul{display:none}}.note-ref{cursor:pointer}.note-ref:hover+.side{z-index:1;box-sizing:content-box;background-color:#f8f8f8;margin-left:1em;padding:.5em;display:inline-block;position:absolute}}@media (width<=1264px){#TOC{position:initial;float:none;columns:2;border:1px solid #eee;border-radius:5px;padding:1em}.side{width:100%}main .side,.body .side{color:#2f4f4f;padding:0 2em}.side-left,.side-right{clear:both;background:0 0;margin:1em auto}:not(.note-ref)+.side{float:none}.footnote-ref+.footnotes{float:left}.side>:last-child{margin-bottom:0}.embed-left,.embed-right{float:inherit;margin:auto;padding:1em}}@media (width<=800px){body{padding:initial}main,.body{padding:0 .5em}#TOC{columns:1}.quote-left,.quote-right{width:inherit;float:inherit;margin:auto}.fullwidth:not(.fullscroll) *{max-width:100%}.fullwidth{margin:initial;transform:initial;float:none;min-width:initial;background:0 0;border:none}.fullwidth figcaption,.fullwidth .caption{margin:initial;padding:initial}}@media print{body{background:0 0}}
|
|
2
2
|
/*# sourceMappingURL=article.min.css.map */
|
package/css/article.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,+CACA,uLAMA,iCACA,sGACA,8DACA,2CACA,WACA,mCACA,2BAIA,4BACA,+BACA,4BAGA,yCAGA,wEAQA,gCAIA,gFAMA,oEAKA,mCACA,mDAIA,oDAIA,sDAIA,2CACA,6CACA,mFACA,iEACA,oEACA,qEAGA,sCACA,yCACA,gCACA,gIAQA,mEACA,sGAMA,0BACE,2CACA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,+CACA,uLAMA,iCACA,sGACA,8DACA,2CACA,WACA,mCACA,2BAIA,4BACA,+BACA,4BAGA,yCAGA,wEAQA,gCAIA,gFAMA,oEAKA,mCACA,mDAIA,oDAIA,sDAIA,2CACA,6CACA,mFACA,iEACA,oEACA,qEAGA,sCACA,yCACA,gCACA,gIAQA,mEACA,sGAMA,0BACE,2CACA,UACE,wBAGA,oFAKA,yCAIF,yBACA,qJAUF,uBACE,+FAQA,iBACA,mDAIA,iEAKA,iCACA,oCACA,kCACA,gEAMF,sBACE,qBACA,0BACA,eACA,iEAKA,6CACA,oGAQA,0EAMF,aACE","sources":["article.css"],"sourcesContent":["body, blockquote, .side, .menu { background: #fafafa; }\n.article-list, .body, .single main, .single .appendix, .body ~ .appendix, .frontmatter, .fullwidth, .embed-left, .embed-right {\n margin-top: 2em;\n padding: 1em;\n box-shadow: 0 0 8px #ccc;\n background: #fff;\n}\n.article-meta { background: #f8f8f8; }\n.article-meta .terms, .appendix, .footnotes, main .side > *, .body .side, figcaption, .caption { font-size: .9em; }\n.single .appendix, .body ~ .appendix, .frontmatter { background: none; }\n.appendix h2 { border-bottom: 1px dashed #666; }\n#TOC { top: 0; }\n#TOC ul { list-style-position: inside; }\n#TOC > ul {\n padding: 0;\n margin: 0;\n}\n#TOC li > ul { padding-left: 1em; }\n#TOC .numbered { list-style: none; }\n#TOC a {\n text-decoration: none;\n}\n#TOC ul ul {\n border-left: 1px solid lightsteelblue;\n}\n.bg-number {\n padding: 1px 5px;\n border-radius: 5px;\n background: lightslategray;\n color: #fff;\n}\n\n/* left/right elements*/\n.side {\n width: 200px;\n margin: 0 auto;\n}\n.side-left {\n float: left;\n clear: left;\n margin-left: calc(-200px - 2em);\n position: sticky;\n}\n.side-right {\n float: right;\n clear: right;\n margin-right: calc(-200px - 2em);\n}\n.quote-left, .quote-right { width: 45%; }\n.embed-left, .embed-right {\n margin-top: auto;\n padding: 0;\n}\n.quote-left, .embed-left {\n float: left;\n margin-right: 1em;\n}\n.quote-right, .embed-right {\n float: right;\n margin-left: 1em;\n}\n.embed-left { margin-left: calc(-200px - 2em); }\n.embed-right { margin-right: calc(-200px - 2em); }\n.side > :first-child, .embed-left > :first-child, .embed-right > :first-child { margin-top: 0; }\n.embed-left > :last-child, .embed-right > :last-child { margin-bottom: 0; }\n.quote-left > :first-child, .quote-right > :first-child { padding-top: .1px; }\n.quote-left > :last-child, .quote-right > :last-child { padding-bottom: .1px; }\n\n/* wide elements */\n.fullwidth, .fullwidth * { margin: auto 0; }\n.fullwidth * { max-width: calc(100vw - 4em); }\n.fullscroll * { max-width: initial; }\n.fullwidth {\n max-width: calc(100vw - 2em);\n margin: 1em 0 1em 50%;\n transform: translateX(-50%);\n float: left;\n min-width: 100%;\n background: #fff;\n}\n.fullscroll, .fullscroll figure, .fullscroll .figure { overflow-x: auto; }\n.fullwidth figcaption, .fullwidth .caption {\n margin-left: calc(50% - 400px);\n width: 800px;\n padding: 1em 1em 0;\n}\n\n@media (min-width: 1264.02px) {\n .article, .body, .appendix { position: relative; }\n #TOC.side {\n .active {\n color: limegreen;\n }\n li li .active {\n border-left: 3px solid;\n margin-left: calc(-1em - 3px);\n padding-left: 1em;\n }\n li:not(:has(.active)) ul {\n display: none;\n }\n }\n .note-ref { cursor: pointer; }\n .note-ref:hover + .side {\n display: inline-block;\n background-color: #f8f8f8;\n position: absolute;\n z-index: 1;\n margin-left: 1em;\n padding: .5em;\n box-sizing: content-box;\n }\n}\n@media (max-width: 1264px) {\n #TOC {\n border: 1px solid #eee;\n border-radius: 5px;\n padding: 1em;\n position: initial;\n float: none;\n columns: 2;\n }\n .side { width: 100%; }\n main .side, .body .side {\n padding: 0 2em;\n color: darkslategray;\n }\n .side-left, .side-right {\n clear: both;\n margin: 1em auto;\n background: none;\n }\n :not(.note-ref) + .side { float: none; }\n .footnote-ref + .footnotes { float: left; }\n .side > :last-child { margin-bottom: 0; }\n .embed-left, .embed-right {\n float: inherit;\n margin: auto;\n padding: 1em;\n }\n}\n@media (max-width: 800px) {\n body { padding: initial; }\n main, .body { padding: 0 .5em 0; }\n #TOC { columns: 1; }\n .quote-left, .quote-right {\n width: inherit;\n float: inherit;\n margin: auto;\n }\n .fullwidth:not(.fullscroll) * { max-width: 100%; }\n .fullwidth {\n margin: initial;\n transform: initial;\n float: none;\n min-width: initial;\n background: none;\n border: none;\n }\n .fullwidth figcaption, .fullwidth .caption {\n margin: initial;\n padding: initial;\n }\n}\n\n@media print {\n body {\n background: none;\n }\n}\n"],"names":[]}
|
package/css/pages.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--paper-margin-right: 80px;
|
|
6
6
|
--paper-margin-bottom: 40px;
|
|
7
7
|
--paper-margin-left: 80px;
|
|
8
|
+
--paper-margin: var(--paper-margin-top) var(--paper-margin-right) var(--paper-margin-bottom) var(--paper-margin-left);
|
|
8
9
|
--page-header-height: 40px;
|
|
9
10
|
--page-header-bottom: 40px;
|
|
10
11
|
--page-footer-height: 40px;
|
|
@@ -32,11 +33,66 @@
|
|
|
32
33
|
.pagesjs-page {
|
|
33
34
|
width: var(--paper-width);
|
|
34
35
|
height: var(--paper-height);
|
|
35
|
-
padding: var(--paper-margin
|
|
36
|
+
padding: var(--paper-margin);
|
|
36
37
|
page-break-after: always;
|
|
37
38
|
display: flex;
|
|
38
39
|
flex-direction: column;
|
|
39
40
|
justify-content: space-between;
|
|
41
|
+
img {
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
pre {
|
|
45
|
+
white-space: pre-wrap;
|
|
46
|
+
}
|
|
47
|
+
.chapter-before, .chapter-after {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
.frontmatter, &.chapter {
|
|
51
|
+
min-height: unset;
|
|
52
|
+
}
|
|
53
|
+
#TOC {
|
|
54
|
+
border: none;
|
|
55
|
+
padding: 0;
|
|
56
|
+
margin-left: auto;
|
|
57
|
+
a {
|
|
58
|
+
display: flex;
|
|
59
|
+
&::after {
|
|
60
|
+
content: attr(data-page-number);
|
|
61
|
+
align-self: end;
|
|
62
|
+
}
|
|
63
|
+
.section-number {
|
|
64
|
+
margin-right: .3em;
|
|
65
|
+
}
|
|
66
|
+
.dot-leader {
|
|
67
|
+
flex: 1 0 2em;
|
|
68
|
+
border-bottom: dashed 1px;
|
|
69
|
+
margin: 0 1ex 1ex;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.footnotes::before {
|
|
74
|
+
content: "";
|
|
75
|
+
display: block;
|
|
76
|
+
max-width: 20em;
|
|
77
|
+
border-top: solid 1px;
|
|
78
|
+
}
|
|
79
|
+
&:first-child:is(.page-book *) {
|
|
80
|
+
padding: 0;
|
|
81
|
+
.pagesjs-header, .pagesjs-footer {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
.frontmatter {
|
|
85
|
+
margin: 0;
|
|
86
|
+
padding: var(--paper-margin);
|
|
87
|
+
height: 100%;
|
|
88
|
+
.title {
|
|
89
|
+
margin-top: calc(0px - var(--paper-margin-top));
|
|
90
|
+
}
|
|
91
|
+
& > div {
|
|
92
|
+
margin: 0 calc(0px - var(--paper-margin-right)) 0 calc(0px - var(--paper-margin-left));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
40
96
|
}
|
|
41
97
|
}
|
|
42
98
|
.pagesjs-header, .pagesjs-footer {
|
|
@@ -45,29 +101,30 @@
|
|
|
45
101
|
justify-content: space-between;
|
|
46
102
|
}
|
|
47
103
|
.pagesjs-header {
|
|
48
|
-
flex: var(--page-header-height)
|
|
104
|
+
flex: 0 0 var(--page-header-height);
|
|
49
105
|
margin-bottom: var(--page-header-bottom);
|
|
50
106
|
align-items: end;
|
|
107
|
+
&::before {
|
|
108
|
+
content: attr(data-main-title);
|
|
109
|
+
}
|
|
110
|
+
&::after {
|
|
111
|
+
content: attr(data-page-title);
|
|
112
|
+
}
|
|
51
113
|
}
|
|
52
114
|
.pagesjs-footer {
|
|
53
|
-
flex: var(--page-footer-height)
|
|
115
|
+
flex: 0 0 var(--page-footer-height);
|
|
54
116
|
margin-top: var(--page-footer-top);
|
|
55
117
|
align-items: start;
|
|
118
|
+
&::before {
|
|
119
|
+
content: " ";
|
|
120
|
+
}
|
|
121
|
+
&::after {
|
|
122
|
+
content: attr(data-page-number);
|
|
123
|
+
}
|
|
56
124
|
}
|
|
57
125
|
.pagesjs-body {
|
|
58
126
|
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);
|
|
127
|
+
position: relative;
|
|
71
128
|
}
|
|
72
129
|
@media only screen {
|
|
73
130
|
.pagesjs {
|
package/css/pages.min.css
CHANGED
|
@@ -1,2 +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-
|
|
1
|
+
:root{--paper-width:210mm;--paper-height:297mm;--paper-margin-top:40px;--paper-margin-right:80px;--paper-margin-bottom:40px;--paper-margin-left:80px;--paper-margin:var(--paper-margin-top)var(--paper-margin-right)var(--paper-margin-bottom)var(--paper-margin-left);--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);page-break-after:always;flex-direction:column;justify-content:space-between;display:flex;& img{max-width:100%}& pre{white-space:pre-wrap}& .chapter-before,& .chapter-after{display:none}& .frontmatter,&.chapter{min-height:unset}& #TOC{border:none;margin-left:auto;padding:0;& a{display:flex;&:after{content:attr(data-page-number);align-self:end}& .section-number{margin-right:.3em}& .dot-leader{border-bottom:1px dashed;flex:1 0 2em;margin:0 1ex 1ex}}}& .footnotes:before{content:"";border-top:1px solid;max-width:20em;display:block}&:first-child:is(.page-book *){padding:0;& .pagesjs-header,& .pagesjs-footer{display:none}& .frontmatter{padding:var(--paper-margin);height:100%;margin:0;& .title{margin-top:calc(0px - var(--paper-margin-top))}&>div{margin:0 calc(0px - var(--paper-margin-right))0 calc(0px - var(--paper-margin-left))}}}}}.pagesjs-header,.pagesjs-footer{justify-content:space-between;font-size:.9em;display:flex}.pagesjs-header{flex:0 0 var(--page-header-height);margin-bottom:var(--page-header-bottom);align-items:end;&:before{content:attr(data-main-title)}&:after{content:attr(data-page-title)}}.pagesjs-footer{flex:0 0 var(--page-footer-height);margin-top:var(--page-footer-top);align-items:start;&:before{content:" "}&:after{content:attr(data-page-number)}}.pagesjs-body{flex-grow:1;position:relative}@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
2
|
/*# sourceMappingURL=pages.min.css.map */
|
package/css/pages.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,4WAaA,0DAIA,2FAIA,6BAGA,wGAQE,yLAQE,qBAGA,2BAGA,gDAGA,0CAGA,8CAIE,iBAEE,sDAIA,oCAGA,uEAOJ,iFAMA,yCAEE,iDAGA,gEAIE,wDAGA,+FAOR,0FAKA,2GAIE,uCAGA,uCAIF,uGAIE,qBAGA,wCAIF,4CAIA,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 --paper-margin: var(--paper-margin-top) var(--paper-margin-right) var(--paper-margin-bottom) var(--paper-margin-left);\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);\n \tpage-break-after: always;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n img {\n max-width: 100%;\n }\n pre {\n white-space: pre-wrap;\n }\n .chapter-before, .chapter-after {\n display: none;\n }\n .frontmatter, &.chapter {\n min-height: unset;\n }\n #TOC {\n border: none;\n padding: 0;\n margin-left: auto;\n a {\n display: flex;\n &::after {\n content: attr(data-page-number);\n align-self: end;\n }\n .section-number {\n margin-right: .3em;\n }\n .dot-leader {\n flex: 1 0 2em;\n border-bottom: dashed 1px;\n margin: 0 1ex 1ex;\n }\n }\n }\n .footnotes::before {\n content: \"\";\n display: block;\n max-width: 20em;\n border-top: solid 1px;\n }\n &:first-child:is(.page-book *) {\n padding: 0;\n .pagesjs-header, .pagesjs-footer {\n display: none;\n }\n .frontmatter {\n margin: 0;\n padding: var(--paper-margin);\n height: 100%;\n .title {\n margin-top: calc(0px - var(--paper-margin-top));\n }\n & > div {\n margin: 0 calc(0px - var(--paper-margin-right)) 0 calc(0px - var(--paper-margin-left));\n }\n }\n }\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: 0 0 var(--page-header-height);\n margin-bottom: var(--page-header-bottom);\n align-items: end;\n &::before {\n content: attr(data-main-title);\n }\n &::after {\n content: attr(data-page-title);\n }\n}\n.pagesjs-footer {\n flex: 0 0 var(--page-footer-height);\n margin-top: var(--page-footer-top);\n align-items: start;\n &::before {\n content: \" \";\n }\n &::after {\n content: attr(data-page-number);\n }\n}\n.pagesjs-body {\n flex-grow: 1;\n position: relative;\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
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// move elements into page boxes such that each box contains as many elements as
|
|
2
2
|
// possible and will not exceed the given size (e.g. A4 paper)
|
|
3
3
|
(d => {
|
|
4
|
-
function $(s, el = d) { return el
|
|
5
|
-
function $$(s, el = d) { return el.querySelectorAll(s); }
|
|
4
|
+
function $(s, el = d) { return el?.querySelector(s); }
|
|
5
|
+
function $$(s, el = d) { return el ? el.querySelectorAll(s) : []; }
|
|
6
6
|
|
|
7
|
-
const tpl = d.createElement('div');
|
|
7
|
+
const tpl = d.createElement('div'), book = $$('h1').length > 1;
|
|
8
8
|
tpl.className = 'pagesjs-page';
|
|
9
9
|
tpl.innerHTML = `<div class="pagesjs-header"></div>
|
|
10
10
|
<div class="pagesjs-body"></div>
|
|
@@ -14,6 +14,12 @@
|
|
|
14
14
|
box = el || tpl.cloneNode(true); box_body = box.children[1];
|
|
15
15
|
return box;
|
|
16
16
|
}
|
|
17
|
+
function removeBlank(el) {
|
|
18
|
+
if (!el) return false;
|
|
19
|
+
const v = el.innerText.trim() === '';
|
|
20
|
+
v && el.remove();
|
|
21
|
+
return v;
|
|
22
|
+
}
|
|
17
23
|
function fill(el) {
|
|
18
24
|
// if the element is already a page, just use it as the box
|
|
19
25
|
if (el.classList.contains('pagesjs-page')) {
|
|
@@ -26,9 +32,9 @@
|
|
|
26
32
|
} else {
|
|
27
33
|
newPage(el);
|
|
28
34
|
}
|
|
29
|
-
return;
|
|
35
|
+
return el;
|
|
30
36
|
}
|
|
31
|
-
// create a new box
|
|
37
|
+
// create a new box when too much content (exceeding original height)
|
|
32
38
|
if (box.scrollHeight > H) {
|
|
33
39
|
const box2 = tpl.cloneNode(true), box_body2 = box2.children[1];
|
|
34
40
|
box.after(box2);
|
|
@@ -37,6 +43,7 @@
|
|
|
37
43
|
[box, box_body] = [box2, box_body2];
|
|
38
44
|
}
|
|
39
45
|
box_body.append(el);
|
|
46
|
+
return box;
|
|
40
47
|
}
|
|
41
48
|
|
|
42
49
|
// use data-short-title of a header if exists, and fall back to inner text
|
|
@@ -44,7 +51,7 @@
|
|
|
44
51
|
return h && (h.dataset['shortTitle'] || h.innerText);
|
|
45
52
|
}
|
|
46
53
|
const main = shortTitle($('h1.title, .frontmatter h1, .title, h1')), // main title
|
|
47
|
-
ps = (
|
|
54
|
+
ps = (book ? 'h1' : 'h2') + ':not(.frontmatter *)', // page title selector
|
|
48
55
|
tb = ['top', 'bottom'].map(i => {
|
|
49
56
|
const v = getComputedStyle(d.documentElement).getPropertyValue(`--paper-margin-${i}`);
|
|
50
57
|
return +v.replace('px', '') || 0;
|
|
@@ -74,20 +81,45 @@
|
|
|
74
81
|
const cls = d.body.classList;
|
|
75
82
|
if (cls.contains('pagesjs')) return; // already paginated
|
|
76
83
|
|
|
77
|
-
cls.add('pagesjs');
|
|
84
|
+
cls.add('pagesjs'); book && cls.add('page-book');
|
|
78
85
|
d.body.insertAdjacentElement('afterbegin', newPage());
|
|
79
|
-
H = box.clientHeight;
|
|
86
|
+
H = box.clientHeight || window.innerHeight; // use window height if box height not specified
|
|
80
87
|
|
|
81
|
-
|
|
88
|
+
// remove possible classes on TOC/footnotes that we don't need for printing
|
|
89
|
+
$$(':is(#TOC, .footnotes):is(.side-left, .side-right).side').forEach(el => {
|
|
90
|
+
el.classList.remove('side', 'side-left', 'side-right');
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// iteratively add elements to pages
|
|
94
|
+
$$('.frontmatter, #TOC, .abstract').forEach(el => {
|
|
95
|
+
book ? (box_body.append(el), box.after(newPage())) : fill(el);
|
|
96
|
+
});
|
|
82
97
|
$$('.body').forEach(el => {
|
|
83
|
-
|
|
98
|
+
// preserve book chapter classes if exist
|
|
99
|
+
const extra = ['chapter', 'appendix'].filter(i => el.classList.contains(i));
|
|
100
|
+
book && box.after(newPage());
|
|
101
|
+
[...el.children].map(c => fill(c).classList.add(...extra));
|
|
84
102
|
el.childElementCount === 0 && el.remove();
|
|
85
103
|
});
|
|
104
|
+
// clean up an empty div for books
|
|
105
|
+
book && removeBlank(box.nextElementSibling);
|
|
106
|
+
|
|
107
|
+
// add dot leaders to TOC
|
|
108
|
+
const toc = $('#TOC');
|
|
109
|
+
$$('a[href^="#"]', toc).forEach(a => {
|
|
110
|
+
const s = d.createElement('span'), // move TOC item content into a span
|
|
111
|
+
n = a.firstElementChild; // if first child is section number, exclude it
|
|
112
|
+
n?.classList.contains('section-number') ? n.after(s) : a.insertAdjacentElement('afterbegin', s);
|
|
113
|
+
while (s.nextSibling) s.append(s.nextSibling);
|
|
114
|
+
a.insertAdjacentHTML('beforeend', '<span class="dot-leader"></span>');
|
|
115
|
+
a.dataset['pageNumber'] = '000'; // placeholder for page numbers
|
|
116
|
+
});
|
|
86
117
|
|
|
87
118
|
// add page number, title, etc. to data-* attributes of page elements
|
|
88
119
|
let page_title, i = 0;
|
|
89
120
|
$$('.pagesjs-page').forEach(box => {
|
|
90
|
-
if (box
|
|
121
|
+
if (removeBlank(box)) return; // remove empty pages
|
|
122
|
+
book && $(ps, box) && (page_title = ''); // empty title for first page of chapter
|
|
91
123
|
const N = calcPages(box);
|
|
92
124
|
if (N > 1) box.classList.add('page-multiple');
|
|
93
125
|
i += N;
|
|
@@ -99,6 +131,17 @@
|
|
|
99
131
|
});
|
|
100
132
|
// find page title for next page
|
|
101
133
|
page_title = shortTitle([...$$(ps, box)].pop()) || page_title;
|
|
134
|
+
let ft; // first footnote on page
|
|
135
|
+
// move all footnotes after the page body
|
|
136
|
+
$$('.footnotes', box).forEach((el, i) => {
|
|
137
|
+
i === 0 ? (ft = el, box.children[1].after(el)) : (ft.append(...el.children), el.remove());
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
// add page numbers to TOC with data-* attributes
|
|
142
|
+
$$('a[href^="#"]', toc).forEach(a => {
|
|
143
|
+
const p = $(`.pagesjs-page:has(${a.getAttribute('href')}) .pagesjs-header`);
|
|
144
|
+
a.dataset['pageNumber'] = p ? p.dataset['pageNumber'] : '';
|
|
102
145
|
});
|
|
103
146
|
}
|
|
104
147
|
addEventListener('beforeprint', paginate);
|
package/js/pages.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(e=>{function t(t,n=e){return n
|
|
1
|
+
(e=>{function t(t,n=e){return n?.querySelector(t)}function n(t,n=e){return n?n.querySelectorAll(t):[]}const a=e.createElement("div"),r=n("h1").length>1;let s,i,o;function c(e){return s=e||a.cloneNode(!0),i=s.children[1],s}function l(e){if(!e)return!1;const t=""===e.innerText.trim();return t&&e.remove(),t}function d(e){if(e.classList.contains("pagesjs-page"))return s.after(e),!t(".pagesjs-body",e)&&e.insertAdjacentHTML("afterbegin",a.innerHTML),e.childElementCount>3?(e.children[1].append(...[...e.children].slice(3)),e.after(c())):c(e),e;if(s.scrollHeight>o){const e=a.cloneNode(!0),t=e.children[1];s.after(e),i.childElementCount>1&&t.append(i.lastElementChild),[s,i]=[e,t]}return i.append(e),s}function p(e){return e&&(e.dataset.shortTitle||e.innerText)}a.className="pagesjs-page",a.innerHTML='<div class="pagesjs-header"></div>\n<div class="pagesjs-body"></div>\n<div class="pagesjs-footer"></div>';const f=p(t("h1.title, .frontmatter h1, .title, h1")),h=(r?"h1":"h2")+":not(.frontmatter *)",g=["top","bottom"].map((t=>+getComputedStyle(e.documentElement).getPropertyValue(`--paper-margin-${t}`).replace("px","")||0));function u(){const a=e.body.classList;if(a.contains("pagesjs"))return;a.add("pagesjs"),r&&a.add("page-book"),e.body.insertAdjacentElement("afterbegin",c()),o=s.clientHeight||window.innerHeight,n(":is(#TOC, .footnotes):is(.side-left, .side-right).side").forEach((e=>{e.classList.remove("side","side-left","side-right")})),n(".frontmatter, #TOC, .abstract").forEach((e=>{r?(i.append(e),s.after(c())):d(e)})),n(".body").forEach((e=>{const t=["chapter","appendix"].filter((t=>e.classList.contains(t)));r&&s.after(c()),[...e.children].map((e=>d(e).classList.add(...t))),0===e.childElementCount&&e.remove()})),r&&l(s.nextElementSibling);const u=t("#TOC");n('a[href^="#"]',u).forEach((t=>{const n=e.createElement("span"),a=t.firstElementChild;for(a?.classList.contains("section-number")?a.after(n):t.insertAdjacentElement("afterbegin",n);n.nextSibling;)n.append(n.nextSibling);t.insertAdjacentHTML("beforeend",'<span class="dot-leader"></span>'),t.dataset.pageNumber="000"}));let m,b=0;n(".pagesjs-page").forEach((e=>{if(l(e))return;r&&t(h,e)&&(m="");const a=function(e){let t=+e.dataset.pagesOffset;if(t)return t;const a=e.scrollHeight;if(t=Math.ceil(a/o),t<=1)return t;const r=g.concat([...n("thead",e)].map((e=>+e.offsetHeight))).reduce(((e,t)=>e+t));if(!r)return t;function s(){return Math.ceil((a+(t-1)*r)/o)}let i=s();for(;i>t;)t=i,i=s();return t}(e);a>1&&e.classList.add("page-multiple"),b+=a;const s={pageNumber:b,mainTitle:f,pageTitle:m};let i;[e.children[0],e.children[2]].forEach((e=>{for(const t in s)s[t]&&(e.dataset[t]=s[t])})),m=p([...n(h,e)].pop())||m,n(".footnotes",e).forEach(((t,n)=>{0===n?(i=t,e.children[1].after(t)):(i.append(...t.children),t.remove())}))})),n('a[href^="#"]',u).forEach((e=>{const n=t(`.pagesjs-page:has(${e.getAttribute("href")}) .pagesjs-header`);e.dataset.pageNumber=n?n.dataset.pageNumber:""}))}addEventListener("beforeprint",u);let m=sessionStorage.getItem("pagesjs");m&&u(),addEventListener("keypress",(e=>"p"===e.key&&(u(),m=m?"":"1",sessionStorage.setItem("pagesjs",m),m||location.reload())))})(document);
|