paginar 0.2.5 → 0.2.7

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.5",
+	"version": "0.2.7",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"
@@ -12,7 +12,7 @@
 	"license": "Apache-2.0",
 	"homepage": "https://github.com/educkf/paginar",
 	"scripts": {
-		"dev": "concurrently \"npm run start:css\" \"npm run start\"",
+		"dev": "concurrently \"npm run start:css\" \"npm run start --host\"",
 		"start": "vite",
 		"start:css": "tailwindcss -o src/tailwind.css --watch",
 		"build": "npm run build:css && vite build",

package/src/App.ce.vue

@@ -15,6 +15,7 @@ import useEstimatePages from './composables/useEstimatePages'
 import useTextContent from './composables/useTextContent'
 import useReaderSettings from './composables/useReaderSettings'
 import useStyles from './composables/useStyles'
+import useBrowser from './composables/useBrowser'
 
 const props = defineProps({
 	bookTitle: String,
@@ -88,7 +89,7 @@ watchDebounced(content,
 </script>
 
 <template>
-	<div class="rootWrapper">
+	<div class="rootWrapper" :class="useBrowser.isSafari ? 'safari' : ''">
 		<main id="rootComponent"
 			ref="rootComponent"
 			:class="mode

package/src/assets/main.css

@@ -46,6 +46,15 @@ header.wrapper {
     width: 100%;
 }
 
+.rootWrapper.safari {
+	max-height: initial;
+	height: initial;
+}
+
+.rootWrapper.safari #engine {
+	height: auto !important;
+}
+
 #reader-component {
 	width: 100%;
 }
@@ -65,7 +74,7 @@ header.wrapper {
     width: 100%;
 }
 
-.columns-double .columnsArea {
+.rootWrapper:not(.safari) .columns-double .columnsArea {
 	-moz-column-count: 2;
     column-count: 2;
     grid-column-gap: 0;
@@ -81,7 +90,7 @@ header.wrapper {
 	}
 }
 
-.columns-single .columnsArea {
+.rootWrapper:not(.safari) .columns-single .columnsArea {
 	column-count: 1;
 	column-gap: 0;
 	height: 100%;
@@ -139,6 +148,11 @@ header.wrapper {
 
 /* slider */
 
+.rootWrapper.safari .slider-target,
+.rootWrapper.safari .slider-target *{
+	display: none !important;
+}
+
 .slider-target,.slider-target *{
     -webkit-touch-callout:none;
     -webkit-tap-highlight-color:rgba(0,0,0,0);

package/src/components/EngineWrapper.vue

@@ -1,15 +1,15 @@
-<script setup>
-import NavigationButton from './NavigationButton.vue'
-import usePagination from '../composables/usePagination'
-const { next, prev } = usePagination
-</script>
-
-<template>
-	<div id="engine" class="pt-10 transition-colors">
-		<div class="engineWrapper overflow-hidden">
-			<NavigationButton target="prev" @clicked="prev()" />
-			<slot></slot>
-			<NavigationButton target="next" @clicked="next()" />
-		</div>
-	</div>
-</template>
+<script setup>
+import NavigationButton from './NavigationButton.vue'
+import usePagination from '../composables/usePagination'
+const { next, prev } = usePagination
+</script>
+
+<template>
+	<div id="engine" class="pt-10 transition-colors">
+		<div class="engineWrapper overflow-hidden">
+			<NavigationButton target="prev" @clicked="prev()" />
+			<slot></slot>
+			<NavigationButton target="next" @clicked="next()" />
+		</div>
+	</div>
+</template>

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

@@ -1,5 +1,7 @@
 <script setup>
+import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
+
 import SingleColumn from '../../icons/SingleColumn.vue'
 import DoubleColumn from '../../icons/DoubleColumn.vue'
 
@@ -7,6 +9,11 @@ import useReaderSettings from '../../../composables/useReaderSettings'
 const { columns, setColumns } = useReaderSettings
 const { width } = useWindowSize()
 
+const isSafari = computed(() => {
+	const ua = navigator.userAgent.toLowerCase()
+	return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1
+})
+
 </script>
 
 <template>
@@ -15,11 +22,12 @@ const { width } = useWindowSize()
 			class="col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border"
 			:class="{
 				'border-gray-300': columns !== 'single',
-				'bg-primary-extralight border-2 border-primary': columns === 'single'
+				'bg-primary-extralight border-2 border-primary': columns === 'single',
+				'opacity-30 cursor-default': isSafari
 			}"
-			@click.prevent="setColumns('single')"
+			@click.prevent="!isSafari ? setColumns('single') : null"
 			aria-label="Coluna única"
-			title="Coluna única"
+			:title="isSafari ? 'O navegador Safari não aceita visualização de coluna única.' : 'Coluna única'"
 		>
 			<SingleColumn class="mx-auto h-10 opacity-75" />
 		</button>

package/src/composables/useBrowser.js

@@ -0,0 +1,16 @@
+const isSafari = [
+	'iPad Simulator',
+	'iPhone Simulator',
+	'iPod Simulator',
+	'iPad',
+	'iPhone',
+	'iPod'
+].includes(navigator.platform)
+	|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+
+const isApple = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
+export default {
+	isSafari,
+	isApple
+}

package/src/composables/useEstimatePages.js

@@ -1,31 +1,31 @@
-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)
-			return Math.ceil(contentWidth / viewportWidth)
-
-		} else {
-			state.totalPages = 1
-			return 1
-		}
-	} else {
-		state.totalPages = 1
-		return 1
-	}
-}
-
-const totalPages = computed(() => state.totalPages)
-
-export default {
-	totalPages,
-	estimate
-}
+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)
+			return Math.ceil(contentWidth / viewportWidth)
+
+		} else {
+			state.totalPages = 1
+			return 1
+		}
+	} else {
+		state.totalPages = 1
+		return 1
+	}
+}
+
+const totalPages = computed(() => state.totalPages)
+
+export default {
+	totalPages,
+	estimate
+}

package/src/composables/usePagination.js

@@ -4,6 +4,7 @@ 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,
@@ -29,7 +30,9 @@ function init(viewport, content) {
 		}, 200)
 	}
 
-	addEventListener('wheel', onWheel)
+	if (!useBrowser.isApple && !useBrowser.isSafari) {
+		addEventListener('wheel', onWheel)
+	}
 
 	setInterval(() => {
 		useEstimatePages.estimate(viewport, content)

package/src/composables/useReaderSettings.js

@@ -11,7 +11,7 @@ const state = reactive({
 		{ name: 'Verdana, sans-serif' },
 	],
 	fontSize: 16,
-	columns: 'single',
+	columns: 'double',
 	mode: 'light',
 	blocked: false
 })

package/src/tailwind.css

@@ -658,6 +658,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -750,6 +754,10 @@ video {
   cursor: pointer;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -838,6 +846,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -850,6 +863,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -888,6 +905,10 @@ video {
   padding-left: 1rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }

package/vite.config.js

@@ -16,6 +16,10 @@ export default defineConfig({
 		'process.env': {}
 	},
 
+	server: {
+		host: true
+	},
+
 	build: {
 		lib: {
 			entry: 'src/main.js',