paginar 0.2.8 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/.editorconfig +13 -13
  2. package/.env +1 -1
  3. package/.vscode/extensions.json +3 -3
  4. package/LICENSE.md +21 -0
  5. package/README.md +244 -14
  6. package/demo/slot/slot-chapter1.html +384 -357
  7. package/demo/slot/slot-chapter2.html +366 -366
  8. package/demo/slot/slot-chapter3.html +265 -265
  9. package/demo/summary/_content/1chapter.html +100 -97
  10. package/demo/summary/_content/2chapter.html +311 -311
  11. package/demo/summary/_content/3chapter.html +211 -211
  12. package/demo/summary/index.html +134 -123
  13. package/dist/index.es.js +991 -920
  14. package/dist/index.es.js.map +1 -1
  15. package/dist/style.css +14 -17
  16. package/index.html +18 -18
  17. package/package.json +1 -1
  18. package/src/App.ce.vue +148 -153
  19. package/src/assets/main.css +392 -392
  20. package/src/components/BookContent.vue +23 -23
  21. package/src/components/FooterSlot.vue +32 -32
  22. package/src/components/FootnotesAside.vue +123 -123
  23. package/src/components/HeaderSlot/HeaderSlot.vue +30 -30
  24. package/src/components/HeaderSlot/OptionsButton/OptionsButton.vue +67 -67
  25. package/src/components/HeaderSlot/OptionsButton/OptionsColor.vue +28 -28
  26. package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue +51 -49
  27. package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue +59 -55
  28. package/src/components/HeaderSlot/OptionsButton/OptionsFontFamily.vue +17 -17
  29. package/src/components/HeaderSlot/OptionsButton/OptionsFontSize.vue +17 -17
  30. package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue +70 -65
  31. package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue +8 -7
  32. package/src/components/ReaderWrapper.vue +37 -37
  33. package/src/components/ReferencePopup.vue +36 -36
  34. package/src/components/icons/Close.vue +6 -6
  35. package/src/components/icons/DoubleColumn.vue +15 -15
  36. package/src/components/icons/Expand.vue +7 -7
  37. package/src/components/icons/Eye.vue +9 -9
  38. package/src/components/icons/Footnote.vue +5 -5
  39. package/src/components/icons/Home.vue +6 -6
  40. package/src/components/icons/Moon.vue +5 -5
  41. package/src/components/icons/Notes.vue +5 -5
  42. package/src/components/icons/SingleColumn.vue +3 -3
  43. package/src/components/icons/Summary.vue +10 -10
  44. package/src/components/icons/Sun.vue +5 -5
  45. package/src/components/icons/ThreeDots.vue +8 -8
  46. package/src/composables/useBrowser.js +16 -16
  47. package/src/composables/useFootnotes.js +50 -50
  48. package/src/composables/usePagination.js +125 -125
  49. package/src/composables/useReaderSettings.js +174 -153
  50. package/src/composables/useReferences.js +67 -67
  51. package/src/composables/useStyles.js +60 -43
  52. package/src/composables/useTextContent.js +113 -113
  53. package/src/main.js +19 -19
  54. package/src/tailwind.css +5 -8
  55. package/tailwind.config.js +16 -16
  56. package/vite.config.js +36 -36
package/dist/style.css CHANGED
@@ -1,20 +1,20 @@
1
1
 
2
- .width-enter-active[data-v-4f3c3c73],
3
- .width-leave-active[data-v-4f3c3c73] {
2
+ .width-enter-active[data-v-5391e486],
3
+ .width-leave-active[data-v-5391e486] {
4
4
  transition: width .5s;
5
5
  }
6
- .width-enter-active>*[data-v-4f3c3c73] {
7
- transition-property: opacity;
8
- transition-duration: .2s;
6
+ .width-enter-active>*[data-v-5391e486] {
7
+ transition-property: opacity;
8
+ transition-duration: .2s;
9
9
  transition-delay: .3s;
10
10
  }
11
- .width-leave-active>*[data-v-4f3c3c73] {
11
+ .width-leave-active>*[data-v-5391e486] {
12
12
  transition: opacity .25s;
13
13
  }
14
- .width-enter[data-v-4f3c3c73],
15
- .width-leave-to[data-v-4f3c3c73] {
14
+ .width-enter[data-v-5391e486],
15
+ .width-leave-to[data-v-5391e486] {
16
16
  width: 0;
17
- }
17
+ }
18
18
  /*
19
19
  ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
20
20
  */
@@ -608,10 +608,6 @@ video {
608
608
  right: -0.5rem;
609
609
  }
610
610
 
611
- .-left-2 {
612
- left: -0.5rem;
613
- }
614
-
615
611
  .z-20 {
616
612
  z-index: 20;
617
613
  }
@@ -917,6 +913,11 @@ video {
917
913
  text-align: center;
918
914
  }
919
915
 
916
+ .text-sm {
917
+ font-size: 0.875rem;
918
+ line-height: 1.25rem;
919
+ }
920
+
920
921
  .text-xs {
921
922
  font-size: 0.75rem;
922
923
  line-height: 1rem;
@@ -1072,10 +1073,6 @@ video {
1072
1073
  right: 4rem;
1073
1074
  }
1074
1075
 
1075
- .md\:left-16 {
1076
- left: 4rem;
1077
- }
1078
-
1079
1076
  .md\:flex {
1080
1077
  display: flex;
1081
1078
  }
package/index.html CHANGED
@@ -1,18 +1,18 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <link rel="icon" href="/favicon.ico" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
- <title>Paginar</title>
9
- </head>
10
-
11
- <body>
12
- <div>
13
- <p><a href="/demo/summary/index.html">Sumário (arquivos externos)</a></p>
14
- <p><a href="/demo/slot/slot-chapter1.html">Slot (conteúdo direto na pagina)</a></p>
15
- </div>
16
- </body>
17
-
18
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" href="/favicon.ico" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>Paginar</title>
9
+ </head>
10
+
11
+ <body>
12
+ <div>
13
+ <p><a href="/demo/summary/index.html">Sumário (arquivos externos)</a></p>
14
+ <p><a href="/demo/slot/slot-chapter1.html">Slot (conteúdo direto na pagina)</a></p>
15
+ </div>
16
+ </body>
17
+
18
+ </html>
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "description": "A flipping page web component for reading long texts on the brower",
5
5
  "main": "dist/index.es.js",
6
6
  "module": "dist/index.es.js",
7
- "version": "0.2.8",
7
+ "version": "0.3.1",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/educkf/paginar.git"
package/src/App.ce.vue CHANGED
@@ -1,153 +1,148 @@
1
- <script setup>
2
- import { ref, onMounted, defineProps, watch } from 'vue'
3
- import { useWindowSize, watchDebounced } from '@vueuse/core'
4
-
5
- import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
6
- import BookContent from './components/BookContent.vue'
7
- import EngineWrapper from './components/EngineWrapper.vue'
8
- import ReaderWrapper from './components/ReaderWrapper.vue'
9
- import ReferencePopup from './components/ReferencePopup.vue'
10
- import FooterSlot from './components/FooterSlot.vue'
11
- import FootnotesAside from './components/FootnotesAside.vue'
12
-
13
- import usePagination from './composables/usePagination'
14
- import useEstimatePages from './composables/useEstimatePages'
15
- import useTextContent from './composables/useTextContent'
16
- import useReaderSettings from './composables/useReaderSettings'
17
- import useStyles from './composables/useStyles'
18
- import useBrowser from './composables/useBrowser'
19
-
20
- const props = defineProps({
21
- bookTitle: String,
22
- bookContent: String,
23
- readerSettings: String,
24
- readerBlocked: Boolean,
25
- rootClass: {
26
- type: String,
27
- default: ''
28
- },
29
- cssFile: String,
30
- cssString: String
31
- })
32
-
33
- const { initSettings, baseFont, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
34
- const { currentPage, totalPages, init } = usePagination
35
- const { content, listenToClicks } = useTextContent
36
- const { width, height } = useWindowSize()
37
-
38
- const readerComponent = ref(null)
39
- const contentArea = ref(null)
40
- const rootComponent = ref(null)
41
-
42
- onMounted(async () => {
43
- init(readerComponent, contentArea)
44
- initSettings(props.readerSettings)
45
-
46
- if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
47
- useReaderSettings.setBlocked(props.readerBlocked)
48
- }
49
-
50
- if (props.cssFile) {
51
- useStyles.stylesheetLoader(props.cssFile, rootComponent)
52
- }
53
-
54
- if (props.cssString) {
55
- useStyles.applyStylesheet(props.cssString, rootComponent)
56
- }
57
- })
58
-
59
- watch(
60
- props,
61
- () => {
62
- console.log(props)
63
- if (props.hasOwnProperty('readerBlocked')) {
64
- const readerBlocked = typeof props.readerBlocked === 'boolean'
65
- ? props.readerBlocked
66
- : props.readerBlocked === 'true'
67
- console.log(readerBlocked)
68
- useReaderSettings.setBlocked(readerBlocked)
69
- }
70
- }
71
- )
72
-
73
- watchDebounced(
74
- [width, height, content, columns, fontSize, textFont],
75
- () => {
76
- if (width.value < 1024 && columns.value === 'double')
77
- setColumns('single')
78
- else
79
- useEstimatePages.estimate(readerComponent, contentArea)
80
- },
81
- { debounce: 125, maxWait: 250 }
82
- )
83
-
84
- watchDebounced(content,
85
- () => listenToClicks(contentArea),
86
- { debounce: 125, maxWait: 250 }
87
- )
88
-
89
- </script>
90
-
91
- <template>
92
- <div class="rootWrapper" :class="useBrowser.isSafari ? 'safari' : ''">
93
- <main id="rootComponent"
94
- ref="rootComponent"
95
- :class="mode
96
- .concat(` ${props.rootClass}`)
97
- .concat(` currentPage-${currentPage}`)
98
- .concat(` totalPages-${totalPages}`)
99
- .concat(` columns-${columns}`)
100
- "
101
- :style="`font-family: ${baseFont}`"
102
- >
103
- <HeaderSlot>
104
- <template #header>
105
- <slot name="header">
106
- <p class="text-white text-center text-xs">
107
- {{ props.bookTitle }}
108
- </p>
109
- </slot>
110
- </template>
111
-
112
- <template #summaryTop>
113
- <slot name="summaryTop"></slot>
114
- </template>
115
-
116
- <template #summaryBottom>
117
- <slot name="summaryBottom"></slot>
118
- </template>
119
-
120
- <template #optionsTop>
121
- <slot name="optionsTop"></slot>
122
- </template>
123
-
124
- <template #optionsBottom>
125
- <slot name="optionsBottom"></slot>
126
- </template>
127
- </HeaderSlot>
128
-
129
- <EngineWrapper>
130
- <div id="reader-component" ref="readerComponent" >
131
- <ReaderWrapper>
132
- <section id="content-area" ref="contentArea"
133
- :style="`font-family: ${textFont}; font-size: ${fontSize}px`">
134
- <BookContent :bookContent="bookContent">
135
- <template #content>
136
- <slot name="content"></slot>
137
- </template>
138
- </BookContent>
139
- </section>
140
- </ReaderWrapper>
141
- </div>
142
- </EngineWrapper>
143
-
144
- <FooterSlot :currPage="currentPage" :totalPages="totalPages" />
145
-
146
- <ReferencePopup />
147
- </main>
148
-
149
- <FootnotesAside />
150
- </div>
151
- </template>
152
-
153
- <style lang="scss" src="./assets/main.css"></style>
1
+ <script setup>
2
+ import { ref, onMounted, defineProps, watch } from 'vue'
3
+ import { useWindowSize, watchDebounced } from '@vueuse/core'
4
+
5
+ import HeaderSlot from './components/HeaderSlot/HeaderSlot.vue'
6
+ import BookContent from './components/BookContent.vue'
7
+ import EngineWrapper from './components/EngineWrapper.vue'
8
+ import ReaderWrapper from './components/ReaderWrapper.vue'
9
+ import ReferencePopup from './components/ReferencePopup.vue'
10
+ import FooterSlot from './components/FooterSlot.vue'
11
+ import FootnotesAside from './components/FootnotesAside.vue'
12
+
13
+ import usePagination from './composables/usePagination'
14
+ import useEstimatePages from './composables/useEstimatePages'
15
+ import useTextContent from './composables/useTextContent'
16
+ import useReaderSettings from './composables/useReaderSettings'
17
+ import useStyles from './composables/useStyles'
18
+ import useBrowser from './composables/useBrowser'
19
+
20
+ const props = defineProps({
21
+ bookTitle: String,
22
+ bookContent: String,
23
+ readerSettings: String,
24
+ readerBlocked: Boolean,
25
+ rootClass: {
26
+ type: String,
27
+ default: ''
28
+ },
29
+ cssFile: String,
30
+ cssString: String
31
+ })
32
+
33
+ const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings
34
+ const { currentPage, totalPages } = usePagination
35
+ const { content, listenToClicks } = useTextContent
36
+ const { width, height } = useWindowSize()
37
+
38
+ const readerComponent = ref(null)
39
+ const contentArea = ref(null)
40
+ const rootComponent = ref(null)
41
+
42
+ onMounted(async () => {
43
+ usePagination.init(readerComponent, contentArea)
44
+ useReaderSettings.initSettings(props.readerSettings)
45
+ useStyles.initStyles(props, rootComponent)
46
+
47
+ if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
48
+ useReaderSettings.setBlocked(props.readerBlocked)
49
+ }
50
+
51
+ })
52
+
53
+ watch(
54
+ props,
55
+ () => {
56
+ if (props.hasOwnProperty('readerBlocked')) {
57
+ const readerBlocked = typeof props.readerBlocked === 'boolean'
58
+ ? props.readerBlocked
59
+ : props.readerBlocked === 'true'
60
+ useReaderSettings.setBlocked(readerBlocked)
61
+ }
62
+ }
63
+ )
64
+
65
+ watchDebounced(
66
+ [width, height, content, columns, fontSize, textFont],
67
+ () => {
68
+ if (width.value < 1024 && columns.value === 'double')
69
+ setColumns('single')
70
+ else
71
+ useEstimatePages.estimate(readerComponent, contentArea)
72
+ },
73
+ { debounce: 125, maxWait: 250 }
74
+ )
75
+
76
+ watchDebounced(content,
77
+ () => listenToClicks(contentArea),
78
+ { debounce: 125, maxWait: 250 }
79
+ )
80
+
81
+ </script>
82
+
83
+ <template>
84
+ <div class="rootWrapper" :class="useBrowser.isSafari ? 'safari' : ''">
85
+ <main id="rootComponent"
86
+ ref="rootComponent"
87
+ :class="mode
88
+ .concat(` ${props.rootClass}`)
89
+ .concat(` currentPage-${currentPage}`)
90
+ .concat(` totalPages-${totalPages}`)
91
+ .concat(` columns-${columns}`)
92
+ "
93
+ :style="`font-family: ${baseFont}`"
94
+ >
95
+ <HeaderSlot>
96
+ <template #header>
97
+ <slot name="header">
98
+ <p class="text-white text-center text-sm">
99
+ {{ props.bookTitle || bookTitle }}
100
+ </p>
101
+ <p class="text-white text-center text-xs">
102
+ {{ props.chapterTitle || chapterTitle }}
103
+ </p>
104
+ </slot>
105
+ </template>
106
+
107
+ <template #summaryTop>
108
+ <slot name="summaryTop"></slot>
109
+ </template>
110
+
111
+ <template #summaryBottom>
112
+ <slot name="summaryBottom"></slot>
113
+ </template>
114
+
115
+ <template #optionsTop>
116
+ <slot name="optionsTop"></slot>
117
+ </template>
118
+
119
+ <template #optionsBottom>
120
+ <slot name="optionsBottom"></slot>
121
+ </template>
122
+ </HeaderSlot>
123
+
124
+ <EngineWrapper>
125
+ <div id="reader-component" ref="readerComponent" >
126
+ <ReaderWrapper>
127
+ <section id="content-area" ref="contentArea"
128
+ :style="`font-family: ${textFont}; font-size: ${fontSize}px`">
129
+ <BookContent :bookContent="bookContent">
130
+ <template #content>
131
+ <slot name="content"></slot>
132
+ </template>
133
+ </BookContent>
134
+ </section>
135
+ </ReaderWrapper>
136
+ </div>
137
+ </EngineWrapper>
138
+
139
+ <FooterSlot :currPage="currentPage" :totalPages="totalPages" />
140
+
141
+ <ReferencePopup />
142
+ </main>
143
+
144
+ <FootnotesAside />
145
+ </div>
146
+ </template>
147
+
148
+ <style lang="scss" src="./assets/main.css"></style>