paginar 0.1.0 → 0.1.2

package/dist/style.css

@@ -551,6 +551,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -563,6 +567,10 @@ video {
   right: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .top-14 {
   top: 3.5rem;
 }
@@ -575,6 +583,10 @@ video {
   left: -0.5rem;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -602,6 +614,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -610,10 +626,6 @@ video {
   margin-left: 0.75rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -654,14 +666,18 @@ video {
   height: 1.25rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-full {
   width: 100%;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -718,18 +734,22 @@ video {
   --tw-divide-opacity: 0.75;
 }
 
-.overflow-hidden {
-  overflow: hidden;
+.self-end {
+  align-self: flex-end;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
+.overflow-hidden {
+  overflow: hidden;
 }
 
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -747,16 +767,6 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-gray-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -767,25 +777,11 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
@@ -794,6 +790,16 @@ video {
   padding: 0.75rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .px-24 {
   padding-left: 6rem;
   padding-right: 6rem;
@@ -814,11 +820,6 @@ video {
   padding-right: 0.75rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -859,6 +860,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -927,6 +933,10 @@ video {
   transition-duration: 100ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .duration-75 {
   transition-duration: 75ms;
 }
@@ -945,11 +955,6 @@ video {
 }
 
 @media (prefers-color-scheme: dark) {
-  .dark\:border-white {
-    --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }
-
   .dark\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -957,6 +962,14 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:bottom-14 {
+    bottom: 3.5rem;
+  }
+
+  .md\:right-3 {
+    right: 0.75rem;
+  }
+
   .md\:right-16 {
     right: 4rem;
   }
@@ -972,4 +985,8 @@ video {
   .md\:grid {
     display: grid;
   }
+
+  .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.0",
+	"version": "0.1.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"
@@ -20,8 +20,10 @@
 		"preview": "vite preview --port 4173"
 	},
 	"dependencies": {
+		"@vueform/slider": "^2.1.5",
 		"@vueuse/core": "^9.2.0",
-		"vue": "^3.2.37"
+		"vue": "^3.2.37",
+		"vue-slider-component": "^4.1.0-beta.2"
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^3.0.1",

package/src/App.ce.vue

@@ -1,17 +1,19 @@
 <script setup>
-import { ref, onMounted, defineProps } from 'vue'
+import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue'
 import { useWindowSize, watchDebounced } from '@vueuse/core'
 
-import HeaderSlot from './components/HeaderSlot/HeaderSlot.ce.vue'
-import FileContent from './components/FileContent.ce.vue'
+import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
+import BookContent from './components/BookContent.vue'
 import EngineWrapper from './components/EngineWrapper.vue'
 import ReaderWrapper from './components/ReaderWrapper.vue'
-import FooterSlot from './components/FooterSlot.ce.vue'
+import ReferencePopup from './components/ReferencePopup.vue'
+import FooterSlot from './components/FooterSlot.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({
@@ -21,9 +23,10 @@ const props = defineProps({
 	cssFile: String
 })
 
-const { initSettings, baseFont, textFont, fontSize, columns, setColumns } = useReaderSettings
+const { initSettings, baseFont, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
 const { currentPage, totalPages, init } = usePagination
 const { content } = useTextContent
+const { listenToReferencesClick } = useReferences
 const { width, height } = useWindowSize()
 
 const readerComponent = ref(null)
@@ -49,56 +52,63 @@ watchDebounced(
 	},
 	{ debounce: 125, maxWait: 250 }
 )
+
+watchDebounced(content,
+	() => listenToReferencesClick(contentArea),
+	{ debounce: 125, maxWait: 250 }
+)
+
 </script>
 
 <template>
-	<main ref="rootComponent" :style="`font-family: ${baseFont}`">
-		<HeaderSlot>
-			<template #header>
-				<slot name="header">
-					<p class="text-white text-center text-xs">
-						{{ props.bookTitle }}
-					</p>
-				</slot>
-			</template>
-
-			<template #summaryTop>
-				<slot name="summaryTop"></slot>
-			</template>
-
-			<template #summaryBottom>
-				<slot name="summaryBottom"></slot>
-			</template>
-
-			<template #optionsTop>
-				<slot name="optionsTop"></slot>
-			</template>
-
-			<template #optionsBottom>
-				<slot name="optionsBottom"></slot>
-			</template>
-		</HeaderSlot>
-
-		<EngineWrapper>
-			<div id="reader-component" ref="readerComponent">
-				<ReaderWrapper>
-					<section id="content-area" ref="contentArea"
-						:style="`font-family: ${textFont}; font-size: ${fontSize}px`"
-					>
-						<slot name="content">
-							<!-- default when no content slot, and there is a summary -->
-							<FileContent :bookContent="bookContent" />
-						</slot>
-					</section>
-				</ReaderWrapper>
-			</div>
-		</EngineWrapper>
-
-		<FooterSlot
-			:currPage="currentPage"
-			:totalPages="totalPages"
-		/>
-	</main>
+	<div class="rootWrapper">
+		<main id="rootComponent" ref="rootComponent" :class="mode" :style="`font-family: ${baseFont}`">
+			<HeaderSlot>
+				<template #header>
+					<slot name="header">
+						<p class="text-white text-center text-xs">
+							{{ props.bookTitle }}
+						</p>
+					</slot>
+				</template>
+
+				<template #summaryTop>
+					<slot name="summaryTop"></slot>
+				</template>
+
+				<template #summaryBottom>
+					<slot name="summaryBottom"></slot>
+				</template>
+
+				<template #optionsTop>
+					<slot name="optionsTop"></slot>
+				</template>
+
+				<template #optionsBottom>
+					<slot name="optionsBottom"></slot>
+				</template>
+			</HeaderSlot>
+
+			<EngineWrapper>
+				<div id="reader-component" ref="readerComponent">
+					<ReaderWrapper>
+						<section id="content-area" ref="contentArea"
+							:style="`font-family: ${textFont}; font-size: ${fontSize}px`">
+							<BookContent :bookContent="bookContent">
+								<template #content>
+									<slot name="content"></slot>
+								</template>
+							</BookContent>
+						</section>
+					</ReaderWrapper>
+				</div>
+			</EngineWrapper>
+
+			<FooterSlot :currPage="currentPage" :totalPages="totalPages" />
+
+			<ReferencePopup />
+		</main>
+	</div>
 </template>
 
 <style lang="scss" src="./assets/main.css"></style>