paginar 0.2.3 → 0.2.5

package/dist/style.css

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

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,13 @@ 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,
+	willRedirect: false
 })
 
 const currentPage = computed(() => state.currentPage)
@@ -13,6 +17,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(() => {
@@ -29,10 +45,25 @@ watch(totalPages, () => {
 })
 
 // navigate by increase/decrease value
-function next() {
+function next(usingScroll = false) {
 	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 (usingScroll && state.nextTry < 4) {
+				state.nextTry += 1
+				return
+			}
+
+			if (state.willRedirect === false) {
+				const context = useTextContent.context.value
+				if (context.surround?.after) {
+					window.location.href = context.surround.after.link + (`?origin=prev`)
+					state.willRedirect = true
+				}
+			}
 		}
 	}
 }
@@ -43,16 +74,31 @@ onKeyStroke('ArrowRight', (e) => {
 
 function onWheel(event) {
 	if (event.wheelDelta < 0) {
-		next()
+		next(true)
 	} else {
-		prev()
+		prev(true)
 	}
 };
 
-function prev() {
+function prev(usingScroll = false) {
 	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 (usingScroll && state.prevTry < 4) {
+				state.prevTry += 1
+				return
+			}
+
+			if (state.willRedirect === false) {
+				const context = useTextContent.context.value
+				if (context.surround?.before) {
+					window.location.href = context.surround.before.link + (`?origin=next`)
+				}
+				state.willRedirect = true
+			}
 		}
 	}
 }

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

@@ -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));