paginar 0.1.7 → 0.2.1

package/dist/style.css

@@ -1,3 +1,20 @@
+
+.width-enter-active[data-v-a72e8c45],
+.width-leave-active[data-v-a72e8c45] {
+	transition: width .5s;
+}
+.width-enter-active>*[data-v-a72e8c45] {
+	transition-property: opacity;
+	transition-duration: .2s;
+	transition-delay: .3s;
+}
+.width-leave-active>*[data-v-a72e8c45] {
+	transition: opacity .25s;
+}
+.width-enter[data-v-a72e8c45],
+.width-leave-to[data-v-a72e8c45] {
+	width: 0;
+}
 /*
 ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
 */
@@ -563,10 +580,22 @@ video {
   position: relative;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -583,6 +612,10 @@ video {
   left: -0.5rem;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -614,6 +647,22 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -626,10 +675,6 @@ video {
   margin-left: 0.75rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -650,14 +695,22 @@ video {
   display: none;
 }
 
-.h-full {
-  height: 100%;
+.h-screen {
+  height: 100vh;
 }
 
 .h-6 {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -670,14 +723,22 @@ video {
   width: 100%;
 }
 
-.w-4\/5 {
-  width: 80%;
+.w-96 {
+  width: 24rem;
 }
 
 .w-6 {
   width: 1.5rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -686,6 +747,10 @@ video {
   width: 15rem;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -738,10 +803,18 @@ video {
   align-self: flex-end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -772,6 +845,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-b-white\/25 {
+  border-bottom-color: rgb(255 255 255 / 0.25);
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -800,6 +877,11 @@ video {
   padding-right: 2.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -810,11 +892,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -824,6 +901,14 @@ video {
   padding-top: 2.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -851,6 +936,10 @@ video {
   font-weight: 300;
 }
 
+.lowercase {
+  text-transform: lowercase;
+}
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -875,6 +964,10 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -891,6 +984,12 @@ video {
   opacity: 0.3;
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -915,12 +1014,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -929,6 +1022,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -949,6 +1048,10 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.last\:border-transparent:last-child {
+  border-color: transparent;
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -986,6 +1089,10 @@ video {
     display: grid;
   }
 
+  .md\:w-\[40em\] {
+    width: 40em;
+  }
+
   .md\:w-2\/5 {
     width: 40%;
   }

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

package/src/App.ce.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue'
+import { ref, onMounted, defineProps, watch } from 'vue'
 import { useWindowSize, watchDebounced } from '@vueuse/core'
 
 import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
@@ -8,18 +8,19 @@ import EngineWrapper from './components/EngineWrapper.vue'
 import ReaderWrapper from './components/ReaderWrapper.vue'
 import ReferencePopup from './components/ReferencePopup.vue'
 import FooterSlot from './components/FooterSlot.vue'
+import FootnotesAside from './components/FootnotesAside.vue'
 
 import usePagination from './composables/usePagination'
 import useEstimatePages from './composables/useEstimatePages'
 import useTextContent from './composables/useTextContent'
 import useReaderSettings from './composables/useReaderSettings'
-import useReferences from './composables/useReferences'
 import useStyles from './composables/useStyles'
 
 const props = defineProps({
 	bookTitle: String,
 	bookContent: String,
 	readerSettings: String,
+	readerBlocked: Boolean,
 	rootClass: {
 		type: String,
 		default: ''
@@ -30,8 +31,7 @@ const props = defineProps({
 
 const { initSettings, baseFont, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
 const { currentPage, totalPages, init } = usePagination
-const { content } = useTextContent
-const { listenToReferencesClick } = useReferences
+const { content, listenToClicks } = useTextContent
 const { width, height } = useWindowSize()
 
 const readerComponent = ref(null)
@@ -42,6 +42,10 @@ onMounted(async () => {
 	init(readerComponent, contentArea)
 	initSettings(props.readerSettings)
 
+	if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
+		useReaderSettings.setBlocked(props.readerBlocked)
+	}
+
 	if (props.cssFile) {
 		useStyles.stylesheetLoader(props.cssFile, rootComponent)
 	}
@@ -51,6 +55,20 @@ onMounted(async () => {
 	}
 })
 
+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)
+		}
+	}
+)
+
 watchDebounced(
 	[width, height, content, columns, fontSize, textFont],
 	() => {
@@ -63,7 +81,7 @@ watchDebounced(
 )
 
 watchDebounced(content,
-	() => listenToReferencesClick(contentArea),
+	() => listenToClicks(contentArea),
 	{ debounce: 125, maxWait: 250 }
 )
 
@@ -126,6 +144,8 @@ watchDebounced(content,
 
 			<ReferencePopup />
 		</main>
+
+		<FootnotesAside />
 	</div>
 </template>
 

package/src/assets/main.css

@@ -132,6 +132,11 @@ header.wrapper {
 	}
 }
 
+#asidebar {
+	background: var(--sidebar-backgorund, #690000);
+	color: var(--sidebar-text, #f3f4f6);
+}
+
 /* slider */
 
 .slider-target,.slider-target *{

package/src/components/FootnotesAside.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, onMounted, watch, ref } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+
+import useFootnotes from '../composables/useFootnotes'
+import useReaderSettings from '../composables/useReaderSettings'
+
+import IconClose from '../components/icons/Close.vue'
+import IconNotes from '../components/icons/Notes.vue'
+
+const show = computed(() => useFootnotes.footnote.value)
+const footnote = computed(() => useFootnotes.footnote.value)
+const showFootnotes = computed(() => useFootnotes.showFootnotes.value)
+const footnotes = computed(() => useFootnotes.footnotes.value)
+
+const oldBlockedValue = ref(null)
+const footnoteList = ref(null)
+
+function hideAside() {
+	useFootnotes.setHighlightedFootnote(null)
+	useFootnotes.setShowFootnotes(false)
+}
+
+onKeyStroke('Escape', () => {
+	if (footnote.value || showFootnotes.value) {
+		hideAside()
+	}
+})
+
+watch(
+	[footnote, showFootnotes],
+	() => {
+		if (footnote.value || showFootnotes.value) {
+			if (useReaderSettings.blocked.value === false) {
+				oldBlockedValue.value = useReaderSettings.blocked.value
+			}
+			useReaderSettings.setBlocked(true)
+
+		} else {
+			if (oldBlockedValue.value === false) {
+				useReaderSettings.setBlocked(oldBlockedValue.value)
+			}
+			oldBlockedValue.value = null
+		}
+
+		if (footnote.value) {
+			setTimeout(() => {
+				const element = footnoteList.value.querySelector(`#${footnote.value.id}`)
+				element.scrollIntoView()
+				element.focus()
+			}, 50)
+		}
+	}
+)
+
+</script>
+
+<template>
+	<transition name="width">
+		<div v-if="show || showFootnotes" id="asidebar"
+			class="absolute top-0 right-0 w-96 md:w-[40em] flex-shrink-0 h-screen overflow-auto overflow-x-hidden z-20 shadow-2xl"
+		>
+			<button @click.prevent="hideAside()" class="fixed top-4 right-8 z-20">
+				<IconClose class="w-6 h-6 text-white" />
+			</button>
+
+			<div class="w-full p-4">
+				<header class="text-areia py-4 pl-4">
+					<div class="flex items-center mb-6">
+						<IconNotes class="w-8 h-8" />
+						<span class="ml-4">
+
+							Notas de rodapé
+							<span class="ml-10">
+								{{ footnotes.length }}
+							</span>
+						</span>
+					</div>
+				</header>
+
+				<section>
+					<ul ref="footnoteList">
+						<li v-for="(footnoteItem, index) in footnotes"
+							:key="footnoteItem.id"
+							:id="footnoteItem.id"
+							v-html="`<span class='footnote-index'>${index + 1}.</span> ${footnoteItem.text}`"
+							class="text-left border-b border-b-white/25 last:border-transparent
+								pb-10 mt-10 px-10 relative
+							"
+							:class="footnote && footnote.id !== footnoteItem.id
+								? 'opacity-50'
+								: 'opacity-100'
+							"></li>
+					</ul>
+				</section>
+			</div>
+		</div>
+	</transition>
+</template>
+
+
+
+<style scoped>
+.width-enter-active,
+.width-leave-active {
+	transition: width .5s;
+}
+
+.width-enter-active>* {
+	transition-property: opacity;
+	transition-duration: .2s;
+	transition-delay: .3s;
+}
+
+.width-leave-active>* {
+	transition: opacity .25s;
+}
+
+.width-enter,
+.width-leave-to {
+	width: 0;
+}
+</style>

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

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { onClickOutside, onKeyStroke, useFullscreen } from '@vueuse/core'
 
+import useReaderSettings from '../../../composables/useReaderSettings'
+
 import IconThreeDots from '../../icons/ThreeDots.vue'
 import IconClose from '../../icons/Close.vue'
 import IconExpand from '../../icons/Expand.vue'
@@ -11,7 +13,11 @@ const show = ref(false)
 const button = ref(null)
 
 const toggleSummary = () => show.value = !show.value
-const hide = () => show.value = false
+const hide = () => {
+	if (!useReaderSettings.blocked.value) {
+		show.value = false
+	}
+}
 
 onClickOutside(button, () => hide())
 onKeyStroke('Escape', () => hide())

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

@@ -1,9 +1,14 @@
 <script setup>
 import IconEye from '../../icons/Eye.vue'
+import IconFootnote from '../../icons/Footnote.vue'
+
 import OptionsColumns from './OptionsColumns.vue';
 import OptionsFontFamily from './OptionsFontFamily.vue';
 import OptionsFontSize from './OptionsFontSize.vue';
 import OptionsColor from './OptionsColor.vue'
+
+import useFootnotes from '../../../composables/useFootnotes'
+
 </script>
 
 <template>
@@ -18,7 +23,17 @@ import OptionsColor from './OptionsColor.vue'
 
 			<slot name="optionsTop" />
 
-			<div class="w-full flex justify-center items-center py-3">
+			<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 class="w-full flex justify-center items-center py-3 lowercase">
 				<IconEye class="w-6 h-6" />
 				<span class="ml-4">Visualização</span>
 			</div>

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

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
 
+import useReaderSettings from '../../../composables/useReaderSettings'
+
 import IconHome from '../../icons/Home.vue'
 import IconClose from '../../icons/Close.vue'
 import IconSummary from '../../icons/Summary.vue'
@@ -11,7 +13,11 @@ const show = ref(false)
 const button = ref(null)
 
 const toggleSummary = () => show.value = !show.value
-const hide = () => show.value = false
+const hide = () => {
+	if (!useReaderSettings.blocked.value) {
+		show.value = false
+	}
+}
 
 onClickOutside(button, () => hide())
 onKeyStroke('Escape', () => hide())

package/src/components/ReferencePopup.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { onKeyStroke } from '@vueuse/core'
+
+import useReaderSettings from '../composables/useReaderSettings'
 import useReferences from '../composables/useReferences'
+
 const { reference, setHighlightedReference } = useReferences
 
 function closeRef() {
@@ -8,7 +11,9 @@ function closeRef() {
 }
 
 onKeyStroke('Escape', () => {
-	setHighlightedReference(null)
+	if (!useReaderSettings.blocked.value) {
+		setHighlightedReference(null)
+	}
 })
 
 </script>

package/src/components/icons/Footnote.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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+	</svg>
+</template>

package/src/components/icons/Notes.vue

@@ -0,0 +1,5 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+	</svg>
+</template>

package/src/composables/useEstimatePages.js

@@ -1,28 +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
-}
+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
+}