paginar 0.1.6 → 0.2.0

package/src/composables/useFootnotes.js

@@ -2,6 +2,7 @@ import { computed, reactive } from 'vue'
 
 const state = reactive({
 	footnotes: [],
+	showFootnotes: false,
 	footnote: null
 })
 
@@ -10,18 +11,40 @@ function setFootnotes(footnotes) {
 	state.footnotes = footnotes
 }
 
+const showFootnotes = computed(() => state.showFootnotes)
+function setShowFootnotes(value) {
+	state.showFootnotes = value
+}
+
 const footnote = computed(() => state.footnote)
 function setHighlightedFootnote(footnote) {
 	state.footnote = footnote
 }
 
-function initFootnotes() {
+function applyFootnote(event) {
+	const classList = event.target.classList.value.split(' ')
+
+	if (classList.length === 0)
+		return
+
+	const footnoteTarget = classList.find(
+		item => item.includes('footnote') && item !== 'footnote'
+	)
 
+	if (footnoteTarget) {
+		const ref = state.footnotes.find(item => item.id === footnoteTarget)
+		if (ref) {
+			state.footnote = ref
+		}
+	}
 }
 
 export default {
 	footnotes,
 	footnote,
 	setFootnotes,
-	setHighlightedFootnote
+	applyFootnote,
+	setHighlightedFootnote,
+	setShowFootnotes,
+	showFootnotes
 }

package/src/composables/usePagination.js

@@ -1,5 +1,7 @@
 import { reactive, computed, watch } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
+
+import useReaderSettings from './useReaderSettings'
 import useEstimatePages from './useEstimatePages'
 
 const state = reactive({
@@ -12,6 +14,10 @@ const totalPages = computed(() => useEstimatePages.totalPages.value)
 function init(viewport, content) {
 	useEstimatePages.estimate(viewport, content)
 	addEventListener('wheel', onWheel)
+
+	setInterval(() => {
+		useEstimatePages.estimate(viewport, content)
+	}, 5000)
 }
 
 // when resizing the viewport, totalPages change
@@ -24,8 +30,10 @@ watch(totalPages, () => {
 
 // navigate by increase/decrease value
 function next() {
-	if ((state.currentPage + 1) <= totalPages.value) {
-		state.currentPage = state.currentPage + 1
+	if (!useReaderSettings.blocked.value) {
+		if ((state.currentPage + 1) <= totalPages.value) {
+			state.currentPage = state.currentPage + 1
+		}
 	}
 }
 onKeyStroke('ArrowRight', (e) => {
@@ -42,8 +50,10 @@ function onWheel(event) {
 };
 
 function prev() {
-	if ((state.currentPage - 1) > 0) {
-		state.currentPage = state.currentPage - 1
+	if (!useReaderSettings.blocked.value) {
+		if ((state.currentPage - 1) > 0) {
+			state.currentPage = state.currentPage - 1
+		}
 	}
 }
 onKeyStroke('ArrowLeft', (e) => {

package/src/composables/useReaderSettings.js

@@ -12,7 +12,8 @@ const state = reactive({
 	],
 	fontSize: 16,
 	columns: 'single',
-	mode: 'light'
+	mode: 'light',
+	blocked: false
 })
 
 const baseFont = computed(() => state.baseFont)
@@ -21,6 +22,7 @@ const fontSize = computed(() => state.fontSize)
 const fontsOptions = computed(() => state.fontsOptions)
 const columns = computed(() => state.columns)
 const mode = computed(() => state.mode)
+const blocked = computed(() => state.blocked)
 
 watch(
 	[baseFont, textFont, fontSize, columns, mode],
@@ -101,6 +103,10 @@ function setFontSize(value) {
 	state.fontSize = value
 }
 
+function setBlocked(value) {
+	state.blocked = value
+}
+
 function setMode(value) {
 	state.mode = value
 
@@ -139,7 +145,9 @@ export default {
 	setColumns,
 	setTextFont,
 	setFontSize,
+	setBlocked,
 	mode,
+	blocked,
 	setMode,
 	saveSettings
 }

package/src/composables/useReferences.js

@@ -1,5 +1,4 @@
 import { computed, reactive } from 'vue'
-import { useEventListener } from '@vueuse/core'
 
 const state = reactive({
 	references: [],
@@ -37,27 +36,18 @@ function applyReferences(contentRaw) {
 	}, contentRaw)
 }
 
-function listenToReferencesClick(contentWrapper) {
-	setTimeout(() => {
-		useEventListener(contentWrapper, 'click', getClickedReferenceData)
-	}, 100)
-}
-
-function getClickedReferenceData(event) {
-	console.log(event.target.classList)
-	if (event.target.classList.value.includes('reference')) {
-		const ref = state.references.find(item => item.cit === event.target.innerText)
-		if (ref) {
-			state.reference = ref
-		}
+function applyReference(event) {
+	const ref = state.references.find(item => item.cit === event.target.innerText)
+	if (ref) {
+		state.reference = ref
 	}
 }
 
 export default {
 	references,
 	reference,
+	applyReference,
 	setReferences,
 	setHighlightedReference,
 	applyReferences,
-	listenToReferencesClick
 }

package/src/composables/useStyles.js

@@ -21,10 +21,7 @@ async function stylesheetLoader(stylesheet, ref) {
 			const dataRef = await fetch(stylesheet)
 			const cssText = await dataRef.text()
 
-			const style = document.createElement('style')
-			ref.value.appendChild(style)
-			style.type = 'text/css'
-			style.appendChild(document.createTextNode(cssText))
+			applyStylesheet(cssText, ref)
 
 		} catch (err) {
 			console.log({ err })
@@ -32,7 +29,15 @@ async function stylesheetLoader(stylesheet, ref) {
 	}
 }
 
+async function applyStylesheet(stylesheet, ref) {
+	const style = document.createElement('style')
+	ref.value.appendChild(style)
+	style.type = 'text/css'
+	style.appendChild(document.createTextNode(stylesheet))
+}
+
 export default {
 	fontLoader,
-	stylesheetLoader
+	stylesheetLoader,
+	applyStylesheet
 }

package/src/composables/useTextContent.js

@@ -1,6 +1,8 @@
 import { computed, reactive } from 'vue'
+import { useEventListener } from '@vueuse/core'
 
 import useReferences from './useReferences'
+import useFootnotes from './useFootnotes'
 
 const state = reactive({
 	summary: null,
@@ -11,7 +13,8 @@ const content = computed(() => state.content)
 const summary = computed(() => state.summary)
 
 async function initContent(contentString, contentWrapper) {
-	const { setReferences, applyReferences, listenToReferencesClick } = useReferences
+	const { setReferences, applyReferences } = useReferences
+	const { setFootnotes } = useFootnotes
 
 	const content = contentString
 		? JSON.parse(contentString)
@@ -23,6 +26,9 @@ async function initContent(contentString, contentWrapper) {
 	if (content?.references)
 		setReferences(content.references)
 
+	if (content?.footnotes)
+		setFootnotes(content.footnotes)
+
 	// if content comes from file, apply references to file
 	if (content?.summary?.[0]?.file) {
 		const text = await getContent(content.summary?.[0]?.file)
@@ -42,7 +48,7 @@ async function initContent(contentString, contentWrapper) {
 	}
 
 	// after applying references above, now we start to listen to its clicks
-	listenToReferencesClick(contentWrapper)
+	listenToClicks(contentWrapper)
 }
 
 async function getContent(location) {
@@ -62,10 +68,27 @@ function applyContent(text) {
 	state.content = newContent
 }
 
+function listenToClicks(contentWrapper) {
+	setTimeout(() => {
+		useEventListener(contentWrapper, 'click', getClickedReferenceData)
+	}, 100)
+}
+
+function getClickedReferenceData(event) {
+	if (event.target.classList.value.includes('reference')) {
+		useReferences.applyReference(event)
+	}
+
+	if (event.target.classList.value.includes('footnote')) {
+		useFootnotes.applyFootnote(event)
+	}
+}
+
 export default {
 	content,
 	summary,
 	initContent,
 	getContent,
-	applyContent
+	applyContent,
+	listenToClicks
 }

package/src/tailwind.css

@@ -563,10 +563,22 @@ video {
   position: relative;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -583,6 +595,10 @@ video {
   left: -0.5rem;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -614,6 +630,22 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -626,10 +658,6 @@ video {
   margin-left: 0.75rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -650,14 +678,22 @@ video {
   display: none;
 }
 
-.h-full {
-  height: 100%;
+.h-screen {
+  height: 100vh;
 }
 
 .h-6 {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -670,14 +706,22 @@ video {
   width: 100%;
 }
 
-.w-4\/5 {
-  width: 80%;
+.w-96 {
+  width: 24rem;
 }
 
 .w-6 {
   width: 1.5rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -686,6 +730,10 @@ video {
   width: 15rem;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -738,10 +786,18 @@ video {
   align-self: flex-end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -772,6 +828,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-b-white\/25 {
+  border-bottom-color: rgb(255 255 255 / 0.25);
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -800,6 +860,11 @@ video {
   padding-right: 2.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -810,11 +875,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -824,6 +884,14 @@ video {
   padding-top: 2.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -851,6 +919,10 @@ video {
   font-weight: 300;
 }
 
+.lowercase {
+  text-transform: lowercase;
+}
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -875,6 +947,10 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -891,6 +967,12 @@ video {
   opacity: 0.3;
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -915,12 +997,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -929,6 +1005,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -949,6 +1031,10 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.last\:border-transparent:last-child {
+  border-color: transparent;
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));