paginar 0.1.0

package/src/components/NavigationButton.ce.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+	name: "NavPrev",
+
+	props: {
+		target: String,
+	},
+
+	computed: {
+		type() {
+			return 'chapter'
+		},
+	}
+};
+</script>
+
+<template>
+	<button @click.prevent="$emit('clicked')" class="[ viewer-nav ]"
+		:class="type === 'cover' ? 'text-white' : 'text-gray-dark'">
+
+		<svg v-if="target === 'prev'" viewBox="0 0 20 20" fill="currentColor" class="[ viewer-nav-icon nav-prev ] arrow-narrow-left">
+			<path fill-rule="evenodd"
+				d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+				clip-rule="evenodd"></path>
+		</svg>
+
+		<svg v-if="target === 'next'" data-v-ef9c31bc="" viewBox="0 0 20 20" fill="currentColor"
+			class="[ viewer-nav-icon nav-next ] right-0 arrow-narrow-right">
+			<path fill-rule="evenodd"
+				d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+				clip-rule="evenodd"></path>
+		</svg>
+	</button>
+</template>

package/src/components/ReaderWrapper.vue

@@ -0,0 +1,16 @@
+<script setup>
+import usePagination from '../composables/usePagination'
+import useReaderSettings from '../composables/useReaderSettings'
+
+const { columns } = useReaderSettings
+const { currentPage } = usePagination
+</script>
+
+<template>
+	<div :class="columns" :style="`margin-left: -${100 * (currentPage - 1)}%`">
+		<div class="[ typeArea ] h-full relative
+			transition-opacity duration-100 opacity-100 px-24">
+			<slot></slot>
+		</div>
+	</div>
+</template>

package/src/components/icons/Close.vue

@@ -0,0 +1,6 @@
+<script setup></script>
+<template>
+  	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+	</svg>
+</template>

package/src/components/icons/DoubleColumn.vue

@@ -0,0 +1,15 @@
+<template>
+	<svg viewBox="0 0 653 441.2" fill="currentColor">
+		<rect x="73.2" y="143.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="82.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="203.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="263.7" width="195.2" height="20"></rect>
+		<rect x="73.2" y="319" width="195.2" height="20"></rect>
+		<rect x="384.7" y="143.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="82.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="203.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="263.7" width="195.2" height="20"></rect>
+		<rect x="384.7" y="319" width="195.2" height="20"></rect>
+		<path d="M0-0.6v7.5v7.5v411.8v14.4v0.6h653v-5v-10V14.4V2.5v-3.1H0z M638,426.2H15V14.4h623V426.2z"></path>
+	</svg>
+</template>

package/src/components/icons/Expand.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+<template>
+	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+			d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
+	</svg>
+</template>

package/src/components/icons/Eye.vue

@@ -0,0 +1,9 @@
+<script setup></script>
+<template>
+	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+			d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
+		</path>
+	</svg>
+</template>

package/src/components/icons/Home.vue

@@ -0,0 +1,6 @@
+<template>
+	<svg fill="none" stroke="currentColor" viewBox="0 0 20 22" xmlns="http://www.w3.org/2000/svg">
+		<path d="M1 8L10 1L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M7 21V11H13V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	</svg>
+</template>

package/src/components/icons/Moon.vue

@@ -0,0 +1,5 @@
+<template>
+  	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+	</svg>
+</template>

package/src/components/icons/SingleColumn.vue

@@ -0,0 +1,3 @@
+<template>
+	<svg viewBox="0 0 341.5 441.2" fill="currentColor"><rect data-v-acadaaca="" x="73.2" y="143.7" width="195.2" height="20"></rect><rect data-v-acadaaca="" x="73.2" y="82.7" width="195.2" height="20"></rect><rect data-v-acadaaca="" x="73.2" y="203.7" width="195.2" height="20"></rect><rect data-v-acadaaca="" x="73.2" y="263.7" width="195.2" height="20"></rect><rect data-v-acadaaca="" x="73.2" y="319" width="195.2" height="20"></rect><rect data-v-acadaaca="" x="0" y="-0.6" width="332.3" height="15"></rect><rect data-v-acadaaca="" x="0" y="426.2" width="332.3" height="15"></rect><rect data-v-acadaaca="" x="-209.4" y="216.2" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -216.2339 231.2339)" width="433.7" height="15"></rect><rect data-v-acadaaca="" x="108" y="211.9" transform="matrix(6.123234e-17 -1 1 6.123234e-17 105.4808 544.1859)" width="433.7" height="15"></rect></svg>
+</template>

package/src/components/icons/Summary.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg width="24" height="19" viewBox="0 0 24 19" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+		<line x1="5" y1="1.08447" x2="1" y2="1.08447" stroke-width="2" stroke-linecap="round"/>
+		<line x1="23" y1="1.04248" x2="11" y2="1.04248" stroke-width="2" stroke-linecap="round"/>
+		<line x1="23" y1="9.08447" x2="14" y2="9.08447" stroke-width="2" stroke-linecap="round"/>
+		<line x1="8" y1="9.14905" x2="4" y2="9.14905" stroke-width="2" stroke-linecap="round"/>
+		<line x1="23" y1="17.149" x2="10.9993" y2="17.149" stroke-width="2" stroke-linecap="round"/>
+		<line x1="5" y1="17.2429" x2="1" y2="17.2429" stroke-width="2" stroke-linecap="round"/>
+	</svg>
+</template>

package/src/components/icons/Sun.vue

@@ -0,0 +1,5 @@
+<template>
+  	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+	</svg>
+</template>

package/src/components/icons/ThreeDots.vue

@@ -0,0 +1,8 @@
+<script setup></script>
+<template>
+	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+			d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
+		</path>
+	</svg>
+</template>

package/src/composables/useEstimatePages.js

@@ -0,0 +1,28 @@
+import { computed, reactive } from 'vue'
+
+const state = reactive({
+	totalPages: 1
+})
+
+function estimate(viewport, content) {
+	if (viewport && content) {
+		const { width: viewportWidth } = viewport.value.getBoundingClientRect()
+		const { width: contentWidth } = content.value.getBoundingClientRect()
+
+		if (contentWidth > viewportWidth) {
+			state.totalPages = Math.ceil(contentWidth / viewportWidth)
+
+		} else {
+			state.totalPages = 1
+		}
+	} else {
+		state.totalPages = 1
+	}
+}
+
+const totalPages = computed(() => state.totalPages)
+
+export default {
+	totalPages,
+	estimate
+}

package/src/composables/usePagination.js

@@ -0,0 +1,57 @@
+import { reactive, computed, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import useEstimatePages from './useEstimatePages'
+
+const state = reactive({
+	currentPage: 1
+})
+
+const currentPage = computed(() => state.currentPage)
+const totalPages = computed(() => useEstimatePages.totalPages.value)
+
+function init(viewport, content) {
+	useEstimatePages.estimate(viewport, content)
+}
+
+// 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() {
+	if ((state.currentPage + 1) <= totalPages.value) {
+		state.currentPage = state.currentPage + 1
+	}
+}
+onKeyStroke('ArrowRight', (e) => {
+	e.preventDefault()
+	next()
+})
+
+function prev() {
+	if ((state.currentPage - 1) > 0) {
+		state.currentPage = state.currentPage - 1
+	}
+}
+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

@@ -0,0 +1,125 @@
+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: 'singleColumns',
+	mode: 'light'
+})
+
+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)
+
+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
+		}
+	}
+}
+
+function setColumns(value) {
+	state.columns = value
+}
+
+function setTextFont(value) {
+	state.textFont = value
+}
+
+function setFontSize(value) {
+	state.fontSize = value
+}
+
+function setMode(value) {
+	state.mode = value
+}
+
+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,
+	mode,
+	setMode,
+	saveSettings
+}

package/src/composables/useStyles.js

@@ -0,0 +1,38 @@
+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()
+
+			const style = document.createElement('style')
+			ref.value.appendChild(style)
+			style.type = 'text/css'
+			style.appendChild(document.createTextNode(cssText))
+
+		} catch (err) {
+			console.log({ err })
+		}
+	}
+}
+
+export default {
+	fontLoader,
+	stylesheetLoader
+}

package/src/composables/useTextContent.js

@@ -0,0 +1,40 @@
+import { computed, reactive } from 'vue'
+
+const state = reactive({
+	summary: null,
+	content: null
+})
+
+const content = computed(() => state.content)
+const summary = computed(() => state.summary)
+
+async function initContent(contentString) {
+	const content = contentString
+		? JSON.parse(contentString)
+		: null
+
+	if (content?.summary)
+		state.summary = content.summary
+
+	if (content?.summary?.[0]?.file) {
+		getContent(content.summary?.[0]?.file)
+	}
+}
+
+async function getContent(location) {
+	try {
+		const dataRef = await fetch(location)
+		const text = await dataRef.text()
+		state.content = text
+	} catch (err) {
+		console.log({ err })
+		state.content = 'Ops, não foi possível carregar o arquivo solicitado.'
+	}
+}
+
+export default {
+	content,
+	summary,
+	initContent,
+	getContent
+}

package/src/main.js

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