paginar 0.2.8 → 0.3.0

package/dist/style.css

@@ -608,10 +608,6 @@ video {
   right: -0.5rem;
 }
 
-.-left-2 {
-  left: -0.5rem;
-}
-
 .z-20 {
   z-index: 20;
 }
@@ -917,6 +913,11 @@ video {
   text-align: center;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1072,10 +1073,6 @@ video {
     right: 4rem;
   }
 
-  .md\:left-16 {
-    left: 4rem;
-  }
-
   .md\:flex {
     display: flex;
   }

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

package/src/App.ce.vue

@@ -30,8 +30,8 @@ const props = defineProps({
 	cssString: String
 })
 
-const { initSettings, baseFont, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
-const { currentPage, totalPages, init } = usePagination
+const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
+const { currentPage, totalPages } = usePagination
 const { content, listenToClicks } = useTextContent
 const { width, height } = useWindowSize()
 
@@ -40,31 +40,23 @@ const contentArea = ref(null)
 const rootComponent = ref(null)
 
 onMounted(async () => {
-	init(readerComponent, contentArea)
-	initSettings(props.readerSettings)
+	usePagination.init(readerComponent, contentArea)
+	useReaderSettings.initSettings(props.readerSettings)
+	useStyles.initStyles(props, rootComponent)
 
 	if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
 		useReaderSettings.setBlocked(props.readerBlocked)
 	}
 
-	if (props.cssFile) {
-		useStyles.stylesheetLoader(props.cssFile, rootComponent)
-	}
-
-	if (props.cssString) {
-		useStyles.applyStylesheet(props.cssString, rootComponent)
-	}
 })
 
 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)
 		}
 	}
@@ -103,8 +95,11 @@ watchDebounced(content,
 			<HeaderSlot>
 				<template #header>
 					<slot name="header">
+						<p class="text-white text-center text-sm">
+							{{ props.bookTitle || bookTitle }}
+						</p>
 						<p class="text-white text-center text-xs">
-							{{ props.bookTitle }}
+							{{ props.chapterTitle || chapterTitle }}
 						</p>
 					</slot>
 				</template>

package/src/components/HeaderSlot/HeaderSlot.vue

@@ -4,7 +4,7 @@ import OptionsButton from './OptionsButton/OptionsButton.vue';
 </script>
 
 <template>
-	<div class="bg-primary flex justify-between items-center p-4">
+	<header id="component-header" class="bg-primary flex justify-between items-center p-4">
 		<summary-button>
 			<template #summaryTop>
 				<slot name="summaryTop" />
@@ -14,7 +14,7 @@ import OptionsButton from './OptionsButton/OptionsButton.vue';
 			</template>
 		</summary-button>
 
-		<div>
+		<div id="header-titles">
 			<slot name="header" />
 		</div>
 
@@ -26,5 +26,5 @@ import OptionsButton from './OptionsButton/OptionsButton.vue';
 				<slot name="optionsBottom" />
 			</template>
 		</options-button>
-	</div>
+	</header>
 </template>

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

@@ -26,11 +26,11 @@ const { toggle: toggleFullScreen } = useFullscreen()
 </script>
 
 <template>
-	<div ref="button" class="relative">
+	<div id="options-menu" ref="button" class="relative">
 		<div class="flex">
 			<button @click.prevent="toggleSummary()"
 				class="border p-3 shadow flex items-center border-white text-white"
-				id="summary-menu" aria-haspopup="true" :aria-expanded="show"
+				id="options-button" aria-haspopup="true" :aria-expanded="show"
 			>
 				<span class="block mr-3">
 					Opções

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

@@ -8,7 +8,7 @@ const { mode, setMode } = useReaderSettings
 </script>
 
 <template>
-	<button @click.prevent="setMode('light')"
+	<button id="lightmode-button" @click.prevent="setMode('light')"
 		title="Leitura diurna"
 		class="font-light text-base border w-full h-10 flex justify-center items-center"
 		:class="{
@@ -17,7 +17,7 @@ const { mode, setMode } = useReaderSettings
 		<IconSun class="w-5 h-5" />
 	</button>
 
-	<button @click.prevent="setMode('dark')"
+	<button id="darkmode-button" @click.prevent="setMode('dark')"
 		title="Leitura noturna"
 		class="font-light text-base border w-full h-10 flex justify-center items-center"
 		:class="{

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

@@ -17,8 +17,9 @@ const isSafari = computed(() => {
 </script>
 
 <template>
-	<div class="w-full hidden md:grid grid-cols-3 gap-2 mt-3">
+	<div id="columns-menu" class="w-full hidden md:grid grid-cols-3 gap-2 mt-3">
 		<button
+			id="single-column-button"
 			class="col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border"
 			:class="{
 				'border-gray-300': columns !== 'single',
@@ -33,6 +34,7 @@ const isSafari = computed(() => {
 		</button>
 
 		<button
+			id="double-column-button"
 			class="col-span-2 text-primary text-center cursor-pointer py-3 rounded-sm border"
 			:class="{
 				'border-gray-300': columns !== 'double',

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

@@ -23,17 +23,21 @@ import useFootnotes from '../../../composables/useFootnotes'
 
 			<slot name="optionsTop" />
 
-			<button @click.prevent="useFootnotes.setShowFootnotes(true)"
-				class="w-full flex justify-center items-center py-3 lowercase"
-			>
-				<IconFootnote class="w-6 h-6" />
-				<span class="ml-4">Notas de rodapé</span>
-			</button>
-
-			<div class="w-full border-b border-areia my-3"></div>
+			<div id="footnotes-button">
+				<button @click.prevent="useFootnotes.setShowFootnotes(true)"
+					class="w-full flex justify-center items-center py-3 lowercase"
+				>
+					<IconFootnote class="w-6 h-6" />
+					<span class="ml-4">Notas de rodapé</span>
+				</button>
+
+				<div class="w-full border-b border-areia my-3"></div>
+			</div>
 
 
-			<div class="w-full flex justify-center items-center py-3 lowercase">
+			<div class="w-full flex justify-center items-center py-3 lowercase"
+				id="visualize-title"
+			>
 				<IconEye class="w-6 h-6" />
 				<span class="ml-4">Visualização</span>
 			</div>

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

@@ -5,7 +5,7 @@ const { textFont, fontsOptions, setTextFont } = useReaderSettings
 </script>
 
 <template>
-	<div class="w-full grid grid-cols-4 gap-2 my-3">
+	<div id="font-family-menu" class="w-full grid grid-cols-4 gap-2 my-3">
 		<button v-for="font in fontsOptions" :key="font.name" @click.prevent="setTextFont(font.name)"
 			class="font-light text-lg text-primary tracking-wide border border-urucum w-full h-10 flex justify-center items-center"
 			:class="{

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

@@ -5,12 +5,12 @@ const { fontSize, setFontSize } = useReaderSettings
 </script>
 
 <template>
-	<button @click.prevent="setFontSize(fontSize + 1)"
+	<button id="fontsize-add-button" @click.prevent="setFontSize(fontSize + 1)"
 		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
 		+ A
 	</button>
 
-	<button @click.prevent="setFontSize(fontSize - 1)"
+	<button id="fontsize-subtr-button" @click.prevent="setFontSize(fontSize - 1)"
 		class="font-light text-base border border-urucum w-full h-10 flex justify-center items-center">
 		- A
 	</button>

package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue

@@ -12,6 +12,8 @@ import SummaryDropdown from './SummaryDropdown.vue'
 const show = ref(false)
 const button = ref(null)
 
+const { homeUrl } = useReaderSettings
+
 const toggleSummary = () => show.value = !show.value
 const hide = () => {
 	if (!useReaderSettings.blocked.value) {
@@ -24,42 +26,45 @@ onKeyStroke('Escape', () => hide())
 </script>
 
 <template>
-	<div ref="button" class="relative">
+	<div id="summary-menu" ref="button" class="relative">
 		<div class="flex">
-			<a href="/" title="Homepage"
+			<a v-if="homeUrl"
+				:href="homeUrl" title="Homepage" id="home-button"
 				class="hidden md:flex items-center border p-3 shadow mr-3
 					border-white text-white"
 			>
 				<IconHome class="w-6 h-6"/>
 			</a>
 
-			<button
-				@click.prevent="toggleSummary()"
-				class="border p-3 shadow flex items-center border-white text-white"
-				id="summary-menu" aria-haspopup="true" :aria-expanded="show"
-			>
-				<IconSummary v-if="!show" />
-				<IconClose v-else class="w-6 h-6" />
+			<div class="position-relative">
+				<button
+					@click.prevent="toggleSummary()"
+					class="border p-3 shadow flex items-center border-white text-white"
+					id="summary-button" aria-haspopup="true" :aria-expanded="show"
+				>
+					<IconSummary v-if="!show" />
+					<IconClose v-else class="w-6 h-6" />
 
-				<span class="block ml-3">
-					Sumário
-				</span>
-			</button>
-		</div>
+					<span class="block ml-3">
+						Sumário
+					</span>
+				</button>
 
-		<transition enter-active-class="transition ease-out duration-100 transform" enter-class="opacity-0 scale-95"
-			enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75 transform"
-			leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
-		>
-			<SummaryDropdown v-if="show">
-				<template #summaryTop>
-					<slot name="summaryTop"/>
-				</template>
+				<transition enter-active-class="transition ease-out duration-100 transform" enter-class="opacity-0 scale-95"
+					enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75 transform"
+					leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
+				>
+					<SummaryDropdown v-if="show">
+						<template #summaryTop>
+							<slot name="summaryTop"/>
+						</template>
 
-				<template #summaryBottom>
-					<slot name="summaryBottom"/>
-				</template>
-			</SummaryDropdown>
-		</transition>
+						<template #summaryBottom>
+							<slot name="summaryBottom"/>
+						</template>
+					</SummaryDropdown>
+				</transition>
+			</div>
+		</div>
 	</div>
 </template>

package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue

@@ -12,7 +12,7 @@ async function getChapter(item) {
 
 <template>
 	<div class="absolute top-14 py-4 px-3 shadow-lg w-60 md:w-104
-			text-areia -left-2 md:left-16 z-10 bg-white" :role="Sumário" aria-orientation="vertical"
+			text-areia z-10 bg-white" :role="Sumário" aria-orientation="vertical"
 		aria-labelledby="summary-menu">
 		<nav>
 			<slot name="summaryTop" />

package/src/composables/useReaderSettings.js

@@ -13,7 +13,11 @@ const state = reactive({
 	fontSize: 16,
 	columns: 'double',
 	mode: 'light',
-	blocked: false
+	blocked: false,
+
+	bookTitle: null,
+	chapterTitle: null,
+	homeUrl: null,
 })
 
 const baseFont = computed(() => state.baseFont)
@@ -24,6 +28,10 @@ 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()
@@ -62,6 +70,15 @@ async function initSettings(settingsString) {
 			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)
 }
 
@@ -149,5 +166,9 @@ export default {
 	mode,
 	blocked,
 	setMode,
-	saveSettings
+	saveSettings,
+
+	bookTitle,
+	chapterTitle,
+	homeUrl
 }

package/src/composables/useStyles.js

@@ -1,3 +1,21 @@
+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)
 
@@ -23,9 +41,7 @@ async function stylesheetLoader(stylesheet, ref) {
 
 			applyStylesheet(cssText, ref)
 
-		} catch (err) {
-			console.log({ err })
-		}
+		} catch (_) {}
 	}
 }
 
@@ -37,6 +53,7 @@ async function applyStylesheet(stylesheet, ref) {
 }
 
 export default {
+	initStyles,
 	fontLoader,
 	stylesheetLoader,
 	applyStylesheet

package/src/tailwind.css

@@ -591,10 +591,6 @@ video {
   right: -0.5rem;
 }
 
-.-left-2 {
-  left: -0.5rem;
-}
-
 .z-20 {
   z-index: 20;
 }
@@ -900,6 +896,11 @@ video {
   text-align: center;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1055,10 +1056,6 @@ video {
     right: 4rem;
   }
 
-  .md\:left-16 {
-    left: 4rem;
-  }
-
   .md\:flex {
     display: flex;
   }