paginar 0.2.2 → 0.2.4

package/dist/style.css

@@ -1,18 +1,18 @@
 
-.width-enter-active[data-v-d4774932],
-.width-leave-active[data-v-d4774932] {
+.width-enter-active[data-v-4f3c3c73],
+.width-leave-active[data-v-4f3c3c73] {
 	transition: width .5s;
 }
-.width-enter-active>*[data-v-d4774932] {
+.width-enter-active>*[data-v-4f3c3c73] {
 	transition-property: opacity;
 	transition-duration: .2s;
 	transition-delay: .3s;
 }
-.width-leave-active>*[data-v-d4774932] {
+.width-leave-active>*[data-v-4f3c3c73] {
 	transition: opacity .25s;
 }
-.width-enter[data-v-d4774932],
-.width-leave-to[data-v-d4774932] {
+.width-enter[data-v-4f3c3c73],
+.width-leave-to[data-v-4f3c3c73] {
 	width: 0;
 }
 /*
@@ -659,10 +659,6 @@ video {
   margin-left: 2.5rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -863,6 +859,10 @@ video {
   padding: 1rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -950,11 +950,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));

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.2",
+	"version": "0.2.4",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"

package/src/components/FootnotesAside.vue

@@ -85,7 +85,7 @@ watch(
 							: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
-								mb-10 pt-10 px-10 relative
+								p-10 relative
 							"
 							:class="footnote && footnote.id !== footnoteItem.id
 								? 'opacity-50'

package/src/components/HeaderSlot/OptionsButton/OptionsColor.vue

@@ -10,18 +10,18 @@ const { mode, setMode } = useReaderSettings
 <template>
 	<button @click.prevent="setMode('light')"
 		title="Leitura diurna"
-		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center"
+		class="font-light text-base border w-full h-10 flex justify-center items-center"
 		:class="{
-			'bg-primary-extralight text-gray-800 border-2 border-primary': mode === 'light'
+			'bg-primary-extralight text-primary border-2 border-primary': mode === 'light'
 		}">
 		<IconSun class="w-5 h-5" />
 	</button>
 
 	<button @click.prevent="setMode('dark')"
 		title="Leitura noturna"
-		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center"
+		class="font-light text-base border w-full h-10 flex justify-center items-center"
 		:class="{
-			'bg-primary-extralight text-gray-800 border-2 border-primary':  mode === 'dark'
+			'bg-primary-extralight text-primary border-2 border-primary':  mode === 'dark'
 		}">
 		<IconMoon class="w-5 h-5" />
 	</button>

package/src/composables/useEstimatePages.js

@@ -11,12 +11,15 @@ function estimate(viewport, content) {
 
 		if (contentWidth > viewportWidth) {
 			state.totalPages = Math.ceil(contentWidth / viewportWidth)
+			return Math.ceil(contentWidth / viewportWidth)
 
 		} else {
 			state.totalPages = 1
+			return 1
 		}
 	} else {
 		state.totalPages = 1
+		return 1
 	}
 }
 

package/src/composables/usePagination.js

@@ -3,9 +3,12 @@ import { onKeyStroke } from '@vueuse/core'
 
 import useReaderSettings from './useReaderSettings'
 import useEstimatePages from './useEstimatePages'
+import useTextContent from './useTextContent'
 
 const state = reactive({
-	currentPage: 1
+	currentPage: 1,
+	nextTry: 0,
+	prevTry: 0
 })
 
 const currentPage = computed(() => state.currentPage)
@@ -13,6 +16,18 @@ const totalPages = computed(() => useEstimatePages.totalPages.value)
 
 function init(viewport, content) {
 	useEstimatePages.estimate(viewport, content)
+
+	// check if there is a query string for oring, and
+	// if previews chapter was the next one. If so,
+	// start from the end, as we are coming backwards
+	const urlParams = new URLSearchParams(window.location.search)
+	const origin = urlParams.get('origin')
+	if (origin && origin === 'next') {
+		setTimeout(() => {
+			state.currentPage = totalPages.value
+		}, 200)
+	}
+
 	addEventListener('wheel', onWheel)
 
 	setInterval(() => {
@@ -33,6 +48,17 @@ function next() {
 	if (!useReaderSettings.blocked.value) {
 		if ((state.currentPage + 1) <= totalPages.value) {
 			state.currentPage = state.currentPage + 1
+		} else {
+			// prevent going too fast to next chapter on
+			// stronger scroll
+			if (state.nextTry < 4) {
+				state.nextTry += 1
+				return
+			}
+			const context = useTextContent.context.value
+			if (context.surround?.after) {
+				window.location.href = context.surround.after.link + (`?origin=prev`)
+			}
 		}
 	}
 }
@@ -53,6 +79,17 @@ function prev() {
 	if (!useReaderSettings.blocked.value) {
 		if ((state.currentPage - 1) > 0) {
 			state.currentPage = state.currentPage - 1
+		} else {
+			// prevent going too fast to prev chapter on
+			// stronger scroll
+			if (state.prevTry < 4) {
+				state.prevTry += 1
+				return
+			}
+			const context = useTextContent.context.value
+			if (context.surround?.before) {
+				window.location.href = context.surround.before.link + (`?origin=next`)
+			}
 		}
 	}
 }

package/src/composables/useReferences.js

@@ -28,7 +28,9 @@ function applyReferences(contentRaw) {
 			const regex = new RegExp(reference.cit, 'g');
 			const newContent = content.replace(
 				regex,
-				`<span class='reference' data-ref='${reference.cit}'>${reference.cit}</span>`
+				`<span class='reference reference-${reference.cit.replaceAll(' ', '')}'>
+					${reference.cit}
+				</span>`
 			)
 			return newContent
 		}
@@ -37,12 +39,22 @@ function applyReferences(contentRaw) {
 }
 
 function applyReference(event) {
-	const target = event.target.closest('.reference')?.getAttribute("data-ref")
+	const classList = event.target.closest('.reference')?.classList.value.split(' ')
 
-	const ref = state.references.find(item => target && item.cit === target)
-	if (ref) {
-		state.reference = ref
+	if (classList.length === 0)
+		return
+
+	const target = classList.find(item => item.startsWith('reference-'))
+
+	if (target) {
+		const ref = state.references.find(
+			item => target && item.cit.replaceAll(' ', '') === target.replace('reference-', '')
+		)
+		if (ref) {
+			state.reference = ref
+		}
 	}
+
 }
 
 export default {

package/src/composables/useTextContent.js

@@ -11,6 +11,22 @@ const state = reactive({
 
 const content = computed(() => state.content)
 const summary = computed(() => state.summary)
+const context = computed(() => {
+	const current = state.summary.findIndex(
+		chapter => window.location.href.includes(chapter.link)
+	)
+	return {
+		chapter: state.summary[current],
+		surround: {
+			before: current - 1 >= 0
+				? state.summary[current - 1]
+				: null,
+			after: current + 1 <= state.summary.length
+				? state.summary[current + 1]
+				: null,
+		}
+	}
+})
 
 async function initContent(contentString, contentWrapper) {
 	const { setReferences, applyReferences } = useReferences
@@ -92,5 +108,6 @@ export default {
 	initContent,
 	getContent,
 	applyContent,
-	listenToClicks
+	listenToClicks,
+	context
 }

package/src/tailwind.css

@@ -642,10 +642,6 @@ video {
   margin-left: 2.5rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -846,6 +842,10 @@ video {
   padding: 1rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -933,11 +933,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));