paginar 0.1.7 → 0.2.0

package/demo/slot/slot-chapter1.html

@@ -27,11 +27,19 @@
 			color: var(--theme-primary-extralight, #690000);
 			background: var(--theme-secondary, #ffa03c);
 		}
+
+		.reference, .footnote {
+			border-bottom: 1px dotted #333;
+			cursor: pointer;
+		}
+		.reference:hover, .footnote:hover {
+			border-bottom: 2px solid #333;
+		}
 	</style>
 
 	<div id="app">
 		<paginate-content id="pagination-el" book-title="A Tale of Two Cities"
-			css-string="#rootComponent.currentPage-1{background-color: red !important; transition: background-color 200ms linear;}"
+			css-string="#rootComponent.currentPage-1{background-color: transparent !important; transition: background-color 200ms linear;}"
 		>
 			<div slot="header">
 				<img src="https://sabia.pub/images/logo-mobile-dark.svg" style="height: 40px">
@@ -42,11 +50,11 @@
 				</h2>
 				<p>
 					It was the (LUGONES, 1978) best of times, it was the worst of times, it was the age of
-					wisdom, it was the age of foolishness, it was the epoch of belief, it was
+					wisdom, it was the age of <span class="footnote footnote1">foolishness</span>, it was the epoch of belief, it was
 					the epoch of incredulity, it was the season of Light, it was the season
 					of Darkness, it was the spring of hope (GAMA, 2019), it was the winter of despair, we
 					had everything before us, we had nothing before us, we were all going
-					direct to Heaven, we were all going direct the other way—in short,
+					direct to Heaven, <span class="footnote footnote2">we were all going</span> direct the other way—in short,
 					the period was so far like the present period (GAMA, 2019), that some of its noisiest
 					authorities insisted on its being received, for good or for evil, in the
 					superlative degree of comparison only.
@@ -140,7 +148,7 @@
 	</div>
 	<script>
 		const settings = {
-			baseFont: 'Verdana, sans-serif',
+			baseFont: 'Verdana, sans-serif'
 		}
 
 		const content = {
@@ -163,6 +171,17 @@
 					"cit": "LUGONES, 1978",
 					"ref": "LUGONES, Maria. <strong>Colonialidad y género</strong>. Tábula Rasa, Bogotá, Colômbia, n. 9, p. 73-101, julho-dezembro de 1978."
 				}
+			],
+
+			footnotes: [
+				{
+					"id": "footnote1",
+					"text": "Foot note text lorem ipsum"
+				},
+				{
+					"id": "footnote2",
+					"text": "The meaning of ontology is complex, but it generally refers to the philosophical study of the nature of being, becoming or existing. Escobar uses this concept to stress the power of design to create ways of being and doing through its processes and products. "
+				}
 			]
 		}
 
@@ -170,6 +189,17 @@
 		if (paginationEl) {
 			paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
 			paginationEl.setAttribute("book-content", JSON.stringify(content))
+
+			// TESTE DE BLOQUEAR O PAGINADOR
+			// setTimeout(() => {
+			// 	console.log('vai chamar')
+			// 	paginationEl.setAttribute("reader-blocked", JSON.stringify(true))
+
+			// 	setTimeout(() => {
+			// 		console.log('vai chamar 2')
+			// 		paginationEl.setAttribute("reader-blocked", JSON.stringify(false))
+			// 	}, 2000)
+			// }, 2000)
 		}
 	</script>
 	<script type="module" src="/src/main.js"></script>