Commit 69a78bfc authored by Julie Blanc's avatar Julie Blanc

sidenotes script, initial

parent 59576207
# Sidenotes script
A little script to do sidenotes in paged.js. Note that it's on experiment.
1. Download and call the script in the `<head>` of your document
```js
<script src="sidenotes.js" type="text/javascript"></script>
```
2. Define the sidenotes in HTML (use the class `sidenote`:
```html
<p>...felis ut purus.<span class="appelnote"></span><span class="sidenote">The text of my sidenote.</span> Morbi cursus ...</p>
```
The script need some CSS to work:
3. Set position absolute of sidenote (so that they are not taken into account in the fragmentation of pages):
```CSS
.sidenote {
display: block;
position: absolute;
}
```
4. Define the position and the size of sitenote areas
```CSS
.area-sidenote-left {
width: 150px;
position:absolute;
top: var(--margin-top);
}
.area-sidenote-right {
width: 150px;
position:absolute;
top: var(--margin-top);
left: calc(var(--width) - var(--margin-right));
}
```
5. Use the CSS counters
```CSS
body { counter-reset: appelnote sidenote; }
.appelnote { counter-increment: appelnote; }
.appelnote:before { content: counter(appelnote); }
.sidenote { counter-increment: sidenote; }
.sidenote:before { content: counter(sidenote) ". "; }
```
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Sidenotes
</title>
<!-- Styles -->
<link href="interface.css" rel="stylesheet" type='text/css'>
<link href="style.css" rel="stylesheet" type='text/css'>
<!-- Paged js-->
<!-- <script src="https://unpkg.com/pagedjs@0.0.4/dist/paged.polyfill.js"></script> -->
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<!-- Script sidenotes -->
<script src="sidenotes.js" type="text/javascript"></script>
</head>
<body>
<header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada lacus vehicula massa consequat, maximus faucibus
libero laoreet. Nullam maximus, diam consectetur tincidunt gravida, ligula orci venenatis dolor, facilisis dignissim
tellus libero vel turpis. Proin in elit mattis, egestas sapien eu, hendrerit est. Pellentesque aliquet dui non lorem
pellentesque posuere. Donec et erat efficitur, vulputate erat vitae, rhoncus mi. Aliquam rhoncus sem libero, non luctus
ex rutrum non. Proin ligula tortor, lacinia in urna et, suscipit lobortis dui. Praesent lacinia neque eget tincidunt
sagittis. Nunc egestas dui ac gravida consequat. Nunc porta viverra massa quis pharetra.
</p>
</header>
<section>
<p>
Integer ipsum felis, tincidunt eu laoreet et, cursus ac quam. Nulla gravida et nibh in elementum. Praesent iaculis eu erat
eget sagittis. Curabitur ut neque id nulla dignissim vehicula eu in augue. Donec pulvinar, velit eu cursus rhoncus,
mauris turpis venenatis leo, id malesuada tortor enim nec purus. Donec tincidunt, odio vel vestibulum sollicitudin,
nibh dolor tempor sapien, ac laoreet sem felis ut purus.
<span class="appelnote"></span>
<span class="sidenote">Vestibulum neque ex, ullamcorper sit amet diam sed, pharetra laoreet sem.</span>
Morbi cursus bibendum consectetur. Nullam vel lacus congue nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec imperdiet velit pharetra non. Aenean accumsan
nulla ac ex iaculis interdum. Curabitur hendrerit lacinia arcu non consequat. Nulla ornare, nibh id fermentum pharetra,
dolor ante laoreet ligula, id sodales nunc leo ut libero. Nam ut ipsum sit amet nunc dignissim porta vel sagittis nunc.
Vestibulum convallis fringilla ante sit amet ultrices. Vestibulum neque ex, ullamcorper sit amet diam sed, pharetra
laoreet sem.
</p>
<p>
Vestibulum velit massa, rhoncus non congue vitae, hendrerit eu metus. Donec lorem nisi, rutrum quis erat id, egestas iaculis
ex. Pellentesque lacinia blandit dignissim. Nam at lorem finibus, facilisis orci eu, pellentesque enim. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum lorem quis finibus mattis.
Vestibulum in ipsum cursus, mattis elit ut, sodales libero. Sed blandit iaculis ex, sit amet volutpat massa fringilla
sed. Proin porta enim justo, sed hendrerit leo efficitur sit amet. Maecenas ultrices nunc ut mi convallis vestibulum.
Morbi imperdiet blandit malesuada. Nulla rhoncus non turpis non gravida. Quisque cursus turpis urna, ac auctor nunc
ullamcorper id.
<span class="appelnote"></span>
<span class="sidenote">Nulla rhoncus non turpis non gravida. Quisque cursus turpis urna, ac auctor nunc ullamcorper id.</span>
</p>
<p>
Mauris at ligula id risus interdum cursus ut at massa. Fusce ut augue quis lacus maximus placerat at in quam. Ut id sem sed
ipsum lobortis laoreet. Sed dictum sodales nisi. Fusce lacus nulla, maximus quis malesuada egestas, egestas ut nulla.
Nulla id ultrices felis. Proin molestie quam nec varius vulputate. Nullam luctus sapien massa. Nullam ac dignissim
leo. Cras at neque sed neque faucibus ultrices a quis dolor. Donec vestibulum elit sed augue porta, et imperdiet velit
sodales. Suspendisse erat nibh, lacinia at varius sed, tempus vitae diam. Suspendisse potenti.
<span class="appelnote"></span>
<span class="sidenote">Suspendisse erat nibh, lacinia at varius sed, tempus vitae diam. Suspendisse potenti.</span>
</p>
<p>
Praesent velit massa, placerat in risus vitae, commodo tempor lectus. Donec eget accumsan nisl, gravida ornare dolor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed leo vel metus vulputate lobortis. Cras ultricies sagittis
metus, nec feugiat turpis rutrum iaculis. Nunc fermentum tristique erat et aliquam. Vivamus ut sagittis quam. Vestibulum
fringilla iaculis euismod.
<span class="appelnote"></span>
<span class="sidenote" id="sidenote">Vivamus ut sagittis quam. Vestibulum fringilla iaculis euismod.</span>
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada lacus vehicula massa consequat, maximus faucibus
libero laoreet. Nullam maximus, diam consectetur tincidunt gravida, ligula orci venenatis dolor, facilisis dignissim
tellus libero vel turpis. Proin in elit mattis, egestas sapien eu, hendrerit est. Pellentesque aliquet dui non lorem
pellentesque posuere. Donec et erat efficitur, vulputate erat vitae, rhoncus mi. Aliquam rhoncus sem libero, non luctus
ex rutrum non. Proin ligula tortor, lacinia in urna et, suscipit lobortis dui. Praesent lacinia neque eget tincidunt
sagittis. Nunc egestas dui ac gravida consequat. Nunc porta viverra massa quis pharetra.
<span class="appelnote"></span>
<span class="sidenote">Nunc egestas dui ac gravida consequat. Nunc porta viverra massa quis pharetra.</span>
</p>
<p>
Integer ipsum felis, tincidunt eu laoreet et, cursus ac quam. Nulla gravida et nibh in elementum. Praesent iaculis eu erat
eget sagittis. Curabitur ut neque id nulla dignissim vehicula eu in augue. Donec pulvinar, velit eu cursus rhoncus,
mauris turpis venenatis leo, id malesuada tortor enim nec purus. Donec tincidunt, odio vel vestibulum sollicitudin,
nibh dolor tempor sapien, ac laoreet sem felis ut purus. Morbi cursus bibendum consectetur. Nullam vel lacus congue
nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec imperdiet velit pharetra non. Aenean accumsan
nulla ac ex iaculis interdum. Curabitur hendrerit lacinia arcu non consequat. Nulla ornare, nibh id fermentum pharetra,
dolor ante laoreet ligula, id sodales nunc leo ut libero. Nam ut ipsum sit amet nunc dignissim porta vel sagittis nunc.
Vestibulum convallis fringilla ante sit amet ultrices. Vestibulum neque ex, ullamcorper sit amet diam sed, pharetra
laoreet sem.
<span class="appelnote"></span>
<span class="sidenote">Vestibulum neque ex, ullamcorper sit amet diam sed, pharetra laoreet sem.</span>
</p>
<p>
Vestibulum velit massa, rhoncus non congue vitae, hendrerit eu metus. Donec lorem nisi, rutrum quis erat id, egestas iaculis
ex. Pellentesque lacinia blandit dignissim. Nam at lorem finibus, facilisis orci eu, pellentesque enim. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum lorem quis finibus mattis.
Vestibulum in ipsum cursus, mattis elit ut, sodales libero. Sed blandit iaculis ex, sit amet volutpat massa fringilla
sed. Proin porta enim justo, sed hendrerit leo efficitur sit amet. Maecenas ultrices nunc ut mi convallis vestibulum.
Morbi imperdiet blandit malesuada. Nulla rhoncus non turpis non gravida. Quisque cursus turpis urna, ac auctor nunc
ullamcorper id.
<span class="appelnote"></span>
<span class="sidenote">Quisque cursus turpis urna, ac auctor nunc ullamcorper id.</span>
</p>
<div>
<p>
Mauris at ligula id risus interdum cursus ut at massa. Fusce ut augue quis lacus maximus placerat at in quam. Ut id sem sed
ipsum lobortis laoreet. Sed dictum sodales nisi. Fusce lacus nulla, maximus quis malesuada egestas, egestas ut nulla.
Nulla id ultrices felis. Proin molestie quam nec varius vulputate. Nullam luctus sapien massa. Nullam ac dignissim
leo. Cras at neque sed neque faucibus ultrices a quis dolor. Donec vestibulum elit sed augue porta, et imperdiet
velit sodales. Suspendisse erat nibh, lacinia at varius sed, tempus vitae diam. Suspendisse potenti.
<span
class="appelnote"></span>
<span class="sidenote">Suspendisse erat nibh, lacinia at varius sed, tempus vitae diam. Suspendisse potenti.</span>
</p>
<p>
Praesent velit massa, placerat in risus vitae, commodo tempor lectus. Donec eget accumsan nisl, gravida ornare dolor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed leo vel metus vulputate lobortis. Cras ultricies sagittis
metus, nec feugiat turpis rutrum iaculis. Nunc fermentum tristique erat et aliquam. Vivamus ut sagittis quam. Vestibulum
fringilla iaculis euismod.
<span class="appelnote"></span>
<span class="sidenote">Vivamus ut sagittis quam. Vestibulum fringilla iaculis euismod.</span>
</p>
</section>
</body>
\ No newline at end of file
/* To define how the book look on the screen: */
:root {
/* color for the interface */
--color-background: rgba(0, 0, 0, 0.2);
--color-marginBox: transparent;
--color-pageBox: transparent;
--color-paper: white;
/* color used for the baseline */
--color-baseline: transparent;
/* fonts for the book */
/* colors */
/* typographic related variables */
--font-size: 12px;
--font-lineHeight: 16px;
}
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 3em;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--width);
}
/* uncomment for recto/verso book.
--------------------------------------------------- */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
} */
}
\ No newline at end of file
class sidenote extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
// before pagedjs
beforePageLayout(content){
}
// after pagedjs
afterRendered(pages) {
let area = document.getElementsByClassName('pagedjs_area');
let classPage = "pagedjs_page";
let classPageLeft = "pagedjs_left_page";
let classPageRight = "pagedjs_right_page";
for (let a = 0; a < area.length; a++) {
let el = area[a];
let sidenote = area[a].getElementsByClassName('sidenote');
/* Add sidenotes area */
do {
el = el.parentElement;
if (el.classList.contains(classPageLeft) == true) {
/* add sidenote area to the left*/
let target = area[a].children[0];
let areaSidenoteLeft = document.createElement("div");
areaSidenoteLeft.className = 'area-sidenote-left';
target.parentNode.insertBefore(areaSidenoteLeft, target);
} else if (el.classList.contains(classPageRight) == true) {
/* add sidenote area to the right*/
let target = area[a].children[0];
let areaSidenoteRight = document.createElement("div");
areaSidenoteRight.className = 'area-sidenote-right';
target.parentNode.insertBefore(areaSidenoteRight, target);
}
} while (!el.classList.contains(classPage));
/* Move sidenotes in sidenotes area */
for (let i = 0; i < sidenote.length; i++) {
let elside = sidenote[i];
do {
elside = elside.parentElement;
if (elside.classList.contains(classPageLeft) == true) {
let areaLeft = elside.getElementsByClassName('area-sidenote-left')[0];
areaLeft.appendChild(sidenote[i]);
} else if (elside.classList.contains(classPageRight) == true) {
let areaRight = elside.getElementsByClassName('area-sidenote-right')[0];
areaRight.appendChild(sidenote[i]);
}
} while (!elside.classList.contains(classPage));
sidenote[i].style.position = "relative";
}
}
}
}
Paged.registerHandlers(sidenote);
/* layout page */
@page {
size: 160mm 210mm;
margin: 15mm 15mm;
}
@page:left{
margin-top:15mm;
margin-bottom:15mm;
margin-left:50mm;
margin-right: 15mm;
}
@page:right{
margin-top:15mm;
margin-bottom:15mm;
margin-right:50mm;
margin-left: 15mm;
}
p{ margin-top: 0; }
/* style notes */
.area-sidenote-left {
width: 150px;
position:absolute;
top: var(--margin-top);
padding-left: 10mm;
padding-right: 10mm;
}
.area-sidenote-right {
width: 150px;
top: var(--margin-top);
position:absolute;
left: calc(var(--width) - var(--margin-right));
padding-left: 10mm;
padding-right: 10mm;
}
body {
counter-reset: appelnote sidenote;
}
.sidenote {
display: block;
counter-increment: sidenote;
margin-bottom: 1rem;
position: absolute;
font-size: 12px;
}
.appelnote {
counter-increment: appelnote;
}
.appelnote:before {
content: counter(appelnote);
color: red;
}
.sidenote:before {
content: counter(sidenote) ". ";
}
.appelnote:before {
color: red;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment