paginar 0.2.8 → 0.3.1

package/src/composables/useReaderSettings.js

@@ -1,153 +1,174 @@
-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
-})
-
-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)
-
-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
-	}
-
-	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
-}
+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 +1,67 @@
-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,
-}
+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,43 +1,60 @@
-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 (err) {
-			console.log({ err })
-		}
-	}
-}
-
-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,
-	applyStylesheet
-}
+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
+}