paginar 0.2.0 → 0.2.1

package/dist/style.css

@@ -1,18 +1,18 @@
 
-.width-enter-active[data-v-bbeb8542],
-.width-leave-active[data-v-bbeb8542] {
+.width-enter-active[data-v-a72e8c45],
+.width-leave-active[data-v-a72e8c45] {
 	transition: width .5s;
 }
-.width-enter-active>*[data-v-bbeb8542] {
+.width-enter-active>*[data-v-a72e8c45] {
 	transition-property: opacity;
 	transition-duration: .2s;
 	transition-delay: .3s;
 }
-.width-leave-active>*[data-v-bbeb8542] {
+.width-leave-active>*[data-v-a72e8c45] {
 	transition: opacity .25s;
 }
-.width-enter[data-v-bbeb8542],
-.width-leave-to[data-v-bbeb8542] {
+.width-enter[data-v-a72e8c45],
+.width-leave-to[data-v-a72e8c45] {
 	width: 0;
 }
 /*
@@ -647,8 +647,8 @@ video {
   margin-bottom: 2rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
 .ml-4 {
@@ -1089,6 +1089,10 @@ video {
     display: grid;
   }
 
+  .md\:w-\[40em\] {
+    width: 40em;
+  }
+
   .md\:w-2\/5 {
     width: 40%;
   }

package/package.json

@@ -4,7 +4,7 @@
 	"description": "A flipping page web component for reading long texts on the brower",
 	"main": "dist/index.es.js",
 	"module": "dist/index.es.js",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"

package/src/App.ce.vue

@@ -58,10 +58,12 @@ onMounted(async () => {
 watch(
 	props,
 	() => {
+		console.log(props)
 		if (props.hasOwnProperty('readerBlocked')) {
 			const readerBlocked = typeof props.readerBlocked === 'boolean'
 				? props.readerBlocked
 				: props.readerBlocked === 'true'
+			console.log(readerBlocked)
 			useReaderSettings.setBlocked(readerBlocked)
 		}
 	}

package/src/assets/main.css

@@ -133,8 +133,8 @@ header.wrapper {
 }
 
 #asidebar {
-	background: var(--theme-primary, #690000);
-	color: var(--theme-primary-extralight, #f3f4f6);
+	background: var(--sidebar-backgorund, #690000);
+	color: var(--sidebar-text, #f3f4f6);
 }
 
 /* slider */

package/src/components/FootnotesAside.vue

@@ -14,20 +14,13 @@ const showFootnotes = computed(() => useFootnotes.showFootnotes.value)
 const footnotes = computed(() => useFootnotes.footnotes.value)
 
 const oldBlockedValue = ref(null)
+const footnoteList = ref(null)
 
 function hideAside() {
 	useFootnotes.setHighlightedFootnote(null)
 	useFootnotes.setShowFootnotes(false)
 }
 
-onMounted(() => {
-	if (footnote.value) {
-		var topPos = document.getElementById(footnote.value.id).offsetTop
-		document.getElementById('asidebar').scrollTop = topPos - 50
-		document.getElementById(footnote.value.id).focus()
-	}
-})
-
 onKeyStroke('Escape', () => {
 	if (footnote.value || showFootnotes.value) {
 		hideAside()
@@ -49,6 +42,14 @@ watch(
 			}
 			oldBlockedValue.value = null
 		}
+
+		if (footnote.value) {
+			setTimeout(() => {
+				const element = footnoteList.value.querySelector(`#${footnote.value.id}`)
+				element.scrollIntoView()
+				element.focus()
+			}, 50)
+		}
 	}
 )
 
@@ -57,15 +58,15 @@ watch(
 <template>
 	<transition name="width">
 		<div v-if="show || showFootnotes" id="asidebar"
-			class="absolute top-0 right-0 w-96 flex-shrink-0 h-screen overflow-auto overflow-x-hidden z-20 shadow-2xl"
+			class="absolute top-0 right-0 w-96 md:w-[40em] flex-shrink-0 h-screen overflow-auto overflow-x-hidden z-20 shadow-2xl"
 		>
 			<button @click.prevent="hideAside()" class="fixed top-4 right-8 z-20">
 				<IconClose class="w-6 h-6 text-white" />
 			</button>
 
-			<div class="w-96 p-4">
+			<div class="w-full p-4">
 				<header class="text-areia py-4 pl-4">
-					<div class="flex items-center mb-10">
+					<div class="flex items-center mb-6">
 						<IconNotes class="w-8 h-8" />
 						<span class="ml-4">
 
@@ -78,10 +79,10 @@ watch(
 				</header>
 
 				<section>
-					<ul>
+					<ul ref="footnoteList">
 						<li v-for="(footnoteItem, index) in footnotes"
-							:key="footnoteItem._id"
-							:id="footnoteItem._id"
+							:key="footnoteItem.id"
+							:id="footnoteItem.id"
 							v-html="`<span class='footnote-index'>${index + 1}.</span> ${footnoteItem.text}`"
 							class="text-left border-b border-b-white/25 last:border-transparent
 								pb-10 mt-10 px-10 relative

package/src/composables/useFootnotes.js

@@ -22,7 +22,7 @@ function setHighlightedFootnote(footnote) {
 }
 
 function applyFootnote(event) {
-	const classList = event.target.classList.value.split(' ')
+	const classList = event.target.closest('.footnote')?.classList.value.split(' ')
 
 	if (classList.length === 0)
 		return

package/src/composables/useReferences.js

@@ -37,7 +37,9 @@ function applyReferences(contentRaw) {
 }
 
 function applyReference(event) {
-	const ref = state.references.find(item => item.cit === event.target.innerText)
+	const target = event.target.closest('.reference')?.getAttribute("data-ref")
+
+	const ref = state.references.find(item => target && item.cit === target)
 	if (ref) {
 		state.reference = ref
 	}

package/src/composables/useTextContent.js

@@ -32,14 +32,16 @@ async function initContent(contentString, contentWrapper) {
 	// if content comes from file, apply references to file
 	if (content?.summary?.[0]?.file) {
 		const text = await getContent(content.summary?.[0]?.file)
-		const newContent = applyReferences(text)
+		const newContent = content.applyReferences
+			? applyReferences(text)
+			: text
 		state.content = newContent
 
 	// else if content comes from slot, apply references to slot
 	} else {
 		const content = document.querySelectorAll('[slot="content"]')
 
-		if (content && content?.[0]?.innerHTML) {
+		if (content && content?.[0]?.innerHTML && content.applyReferences) {
 			const newContent = applyReferences(content?.[0]?.innerHTML)
 			if (newContent) {
 				content[0].innerHTML = newContent
@@ -75,11 +77,11 @@ function listenToClicks(contentWrapper) {
 }
 
 function getClickedReferenceData(event) {
-	if (event.target.classList.value.includes('reference')) {
+	if (event.target.closest('.reference')) {
 		useReferences.applyReference(event)
 	}
 
-	if (event.target.classList.value.includes('footnote')) {
+	if (event.target.closest('.footnote')) {
 		useFootnotes.applyFootnote(event)
 	}
 }

package/src/tailwind.css

@@ -630,8 +630,8 @@ video {
   margin-bottom: 2rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
 .ml-4 {
@@ -1072,6 +1072,10 @@ video {
     display: grid;
   }
 
+  .md\:w-\[40em\] {
+    width: 40em;
+  }
+
   .md\:w-2\/5 {
     width: 40%;
   }