paginar 0.3.3 → 0.3.5

package/src/composables/usePagination.js

@@ -1,125 +0,0 @@
-import { reactive, computed, watch } from 'vue'
-import { onKeyStroke } from '@vueuse/core'
-
-import useReaderSettings from './useReaderSettings'
-import useEstimatePages from './useEstimatePages'
-import useTextContent from './useTextContent'
-import useBrowser from './useBrowser'
-
-const state = reactive({
-	currentPage: 1,
-	nextTry: 0,
-	prevTry: 0,
-	willRedirect: false
-})
-
-const currentPage = computed(() => state.currentPage)
-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)
-	}
-
-	if (!useBrowser.isApple && !useBrowser.isSafari) {
-		addEventListener('wheel', onWheel)
-	}
-
-	setInterval(() => {
-		useEstimatePages.estimate(viewport, content)
-	}, 5000)
-}
-
-// when resizing the viewport, totalPages change
-// this watch is to currentPage inside totalPages range
-watch(totalPages, () => {
-	if (totalPages.value < currentPage.value) {
-		set(totalPages.value)
-	}
-})
-
-// navigate by increase/decrease value
-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
-				}
-			}
-		}
-	}
-}
-onKeyStroke('ArrowRight', (e) => {
-	e.preventDefault()
-	next()
-})
-
-function onWheel(event) {
-	if (event.wheelDelta < 0) {
-		next(true)
-	} else {
-		prev(true)
-	}
-};
-
-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
-			}
-		}
-	}
-}
-onKeyStroke('ArrowLeft', (e) => {
-	e.preventDefault()
-	prev()
-})
-
-// navigate to specific page
-function set(val) {
-	state.currentPage = val
-}
-
-export default {
-	currentPage,
-	totalPages,
-	next,
-	prev,
-	init,
-	set
-}

package/src/composables/useReaderSettings.js

@@ -1,174 +0,0 @@
-import { reactive, computed, watch } from 'vue'
-import useStyles from './useStyles'
-
-const state = reactive({
-	baseFont: 'Arial, sans-serif',
-	textFont: 'Times New Roman, serif',
-	fontsOptions: [
-		{ name: 'Times New Roman, serif' },
-		{ name: 'Georgia, serif' },
-		{ name: 'Arial, sans-serif' },
-		{ name: 'Verdana, sans-serif' },
-	],
-	fontSize: 16,
-	columns: 'double',
-	mode: 'light',
-	blocked: false,
-
-	bookTitle: null,
-	chapterTitle: null,
-	homeUrl: null,
-})
-
-const baseFont = computed(() => state.baseFont)
-const textFont = computed(() => state.textFont)
-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)
-
-const bookTitle = computed(() => state.bookTitle)
-const chapterTitle = computed(() => state.chapterTitle)
-const homeUrl = computed(() => state.homeUrl)
-
-watch(
-	[baseFont, textFont, fontSize, columns, mode],
-	() => saveSettings()
-)
-
-async function initSettings(settingsString) {
-	const settings = settingsString
-		? JSON.parse(settingsString)
-		: null
-
-	if (settings?.baseFont)
-		state.baseFont = settings.baseFont
-
-	if (settings?.textFont)
-		state.textFont = settings.textFont
-
-	if (settings?.fontSize)
-		state.fontSize = Number(settings.fontSize)
-
-	if (settings?.fontsOptions) {
-		state.fontsOptions = settings.fontsOptions
-		useStyles.fontLoader(settings.fontsOptions)
-
-		// baseFont
-		const defaultBaseFont = settings.fontsOptions.find(
-			item => item.defaultBaseFont
-		)
-		if (defaultBaseFont)
-			state.baseFont = defaultBaseFont.name
-
-		// textFont
-		const defaultTextFont = settings.fontsOptions.find(
-			item => item.defaultTextFont
-		)
-		if (defaultTextFont)
-			state.textFont = defaultTextFont.name
-	}
-
-	if (settings?.bookTitle)
-		state.bookTitle = settings.bookTitle
-
-	if (settings?.chapterTitle)
-		state.chapterTitle = settings.chapterTitle
-
-	if (settings?.homeUrl)
-		state.homeUrl = settings.homeUrl
-
-	loadSavedSettings(settings)
-}
-
-function loadSavedSettings(settings) {
-	const hasSettings = localStorage.getItem('readerSettings')
-
-	if (hasSettings) {
-		const savedSettings = JSON.parse(hasSettings)
-
-		state.fontSize = savedSettings.fontSize
-		state.columns = savedSettings.columns
-		state.mode = savedSettings.mode
-
-		if (settings?.fontsOptions &&
-			settings?.fontsOptions?.find(item => item.name === savedSettings.textFont)
-		) {
-			state.textFont = savedSettings.textFont
-		}
-
-		if (savedSettings.mode === 'dark') {
-			const htmlRoot = document.querySelector('html')
-			if (htmlRoot) {
-				htmlRoot.classList.remove("light")
-				htmlRoot.classList.add("dark")
-			}
-		}
-	}
-}
-
-function setColumns(value) {
-	state.columns = value
-}
-
-function setTextFont(value) {
-	state.textFont = value
-}
-
-function setFontSize(value) {
-	state.fontSize = value
-}
-
-function setBlocked(value) {
-	state.blocked = value
-}
-
-function setMode(value) {
-	state.mode = value
-
-	const htmlRoot = document.querySelector('html')
-	if (htmlRoot) {
-		if (htmlRoot.classList.contains("dark")) {
-			htmlRoot.classList.remove("dark")
-			htmlRoot.classList.add("light")
-
-		} else {
-			htmlRoot.classList.remove("light")
-			htmlRoot.classList.add("dark")
-		}
-	}
-}
-
-function saveSettings() {
-	localStorage.setItem(
-		'readerSettings',
-		JSON.stringify({
-			textFont: textFont.value,
-			fontSize: fontSize.value,
-			columns: columns.value,
-			mode: mode.value
-		})
-	)
-}
-
-export default {
-	baseFont,
-	textFont,
-	fontSize,
-	fontsOptions,
-	columns,
-	initSettings,
-	setColumns,
-	setTextFont,
-	setFontSize,
-	setBlocked,
-	mode,
-	blocked,
-	setMode,
-	saveSettings,
-
-	bookTitle,
-	chapterTitle,
-	homeUrl
-}

package/src/composables/useReferences.js

@@ -1,67 +0,0 @@
-import { computed, reactive } from 'vue'
-
-const state = reactive({
-	references: [],
-	reference: null
-})
-
-const references = computed(() => state.references)
-
-function setReferences(references) {
-	state.references = references
-}
-
-const reference = computed(() => state.reference)
-
-function setHighlightedReference(reference) {
-	state.reference = reference
-}
-
-function applyReferences(contentRaw) {
-	if (state.references.length === 0 || !contentRaw)
-		return contentRaw
-
-	return state.references.reduce((content, reference) => {
-		if (!content) return content
-
-		if (content.includes(reference.cit)) {
-			const regex = new RegExp(reference.cit, 'g');
-			const newContent = content.replace(
-				regex,
-				`<span class='reference reference-${reference.cit.replaceAll(' ', '')}'>
-					${reference.cit}
-				</span>`
-			)
-			return newContent
-		}
-		return content
-	}, contentRaw)
-}
-
-function applyReference(event) {
-	const classList = event.target.closest('.reference')?.classList.value.split(' ')
-
-	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 {
-	references,
-	reference,
-	applyReference,
-	setReferences,
-	setHighlightedReference,
-	applyReferences,
-}

package/src/composables/useStyles.js

@@ -1,60 +0,0 @@
-function initStyles(props, rootComponent) {
-	const settings = props.readerSettings
-		? JSON.parse(props.readerSettings)
-		: null
-
-	if (props.cssFile) {
-		stylesheetLoader(props.cssFile, rootComponent)
-	}
-
-	if (props.cssString) {
-		applyStylesheet(props.cssString, rootComponent)
-	}
-
-	if (settings?.cssString) {
-		applyStylesheet(settings.cssString, rootComponent)
-	}
-}
-
-function fontLoader(fontsOptions) {
-	const fontsToLoad = fontsOptions.filter(item => item.link)
-
-	if (fontsToLoad.length > 0) {
-		const style = document.createElement('style')
-		const head = document.head || document.getElementsByTagName('head')[0]
-		head.appendChild(style)
-
-		style.type = 'text/css'
-		let css = ''
-		fontsToLoad.forEach(
-			item => css = css + `@import url(${item.link}); \n`
-		)
-		style.appendChild(document.createTextNode(css))
-	}
-}
-
-async function stylesheetLoader(stylesheet, ref) {
-	if (stylesheet) {
-		try {
-			const dataRef = await fetch(stylesheet)
-			const cssText = await dataRef.text()
-
-			applyStylesheet(cssText, ref)
-
-		} catch (_) {}
-	}
-}
-
-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 {
-	initStyles,
-	fontLoader,
-	stylesheetLoader,
-	applyStylesheet
-}

package/src/composables/useTextContent.js

@@ -1,113 +0,0 @@
-import { computed, reactive } from 'vue'
-import { useEventListener } from '@vueuse/core'
-
-import useReferences from './useReferences'
-import useFootnotes from './useFootnotes'
-
-const state = reactive({
-	summary: null,
-	content: null
-})
-
-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
-	const { setFootnotes } = useFootnotes
-
-	const content = contentString
-		? JSON.parse(contentString)
-		: null
-
-	if (content?.summary)
-		state.summary = content.summary
-
-	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)
-		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 && content.applyReferences) {
-			const newContent = applyReferences(content?.[0]?.innerHTML)
-			if (newContent) {
-				content[0].innerHTML = newContent
-			}
-		}
-	}
-
-	// after applying references above, now we start to listen to its clicks
-	listenToClicks(contentWrapper)
-}
-
-async function getContent(location) {
-	try {
-		const dataRef = await fetch(location)
-		const text = await dataRef.text()
-		return text
-	} catch (err) {
-		console.log({ err })
-		state.content = 'Ops, não foi possível carregar o arquivo solicitado.'
-	}
-}
-
-function applyContent(text) {
-	const { applyReferences } = useReferences
-	const newContent = applyReferences(text)
-	state.content = newContent
-}
-
-function listenToClicks(contentWrapper) {
-	setTimeout(() => {
-		useEventListener(contentWrapper, 'click', getClickedReferenceData)
-	}, 100)
-}
-
-function getClickedReferenceData(event) {
-	if (event.target.closest('.reference')) {
-		useReferences.applyReference(event)
-	}
-
-	if (event.target.closest('.footnote')) {
-		useFootnotes.applyFootnote(event)
-	}
-}
-
-export default {
-	content,
-	summary,
-	initContent,
-	getContent,
-	applyContent,
-	listenToClicks,
-	context
-}

package/src/main.js

@@ -1,19 +0,0 @@
-// https://maximomussini.com/posts/vue-custom-elements
-import { defineCustomElement } from 'vue'
-
-import App from './App.ce.vue'
-
-import tailwindStyles from  './tailwind.css'
-
-const styles = [
-	...[tailwindStyles],
-	...App.styles
-]
-
-customElements.define(
-	'paginate-content',
-	defineCustomElement({
-		...App,
-		styles
-	})
-)