paginar 0.3.0 → 0.3.2

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 (55) hide show
  1. package/.editorconfig +13 -13
  2. package/.env +1 -1
  3. package/.vscode/extensions.json +3 -3
  4. package/LICENSE.md +21 -21
  5. package/README.md +244 -244
  6. package/demo/slot/slot-chapter1.html +384 -384
  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 -100
  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 -134
  13. package/dist/index.es.js +849 -840
  14. package/dist/index.es.js.map +1 -1
  15. package/dist/style.css +9 -9
  16. package/index.html +18 -18
  17. package/package.json +1 -1
  18. package/src/App.ce.vue +148 -148
  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 -51
  27. package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue +59 -59
  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 -70
  31. package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue +6 -6
  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 -174
  50. package/src/composables/useReferences.js +67 -67
  51. package/src/composables/useStyles.js +60 -60
  52. package/src/composables/useTextContent.js +113 -113
  53. package/src/main.js +19 -19
  54. package/tailwind.config.js +16 -16
  55. package/vite.config.js +36 -36
@@ -1,113 +1,113 @@
1
- import { computed, reactive } from 'vue'
2
- import { useEventListener } from '@vueuse/core'
3
-
4
- import useReferences from './useReferences'
5
- import useFootnotes from './useFootnotes'
6
-
7
- const state = reactive({
8
- summary: null,
9
- content: null
10
- })
11
-
12
- const content = computed(() => state.content)
13
- const summary = computed(() => state.summary)
14
- const context = computed(() => {
15
- const current = state.summary.findIndex(
16
- chapter => window.location.href.includes(chapter.link)
17
- )
18
- return {
19
- chapter: state.summary[current],
20
- surround: {
21
- before: current - 1 >= 0
22
- ? state.summary[current - 1]
23
- : null,
24
- after: current + 1 <= state.summary.length
25
- ? state.summary[current + 1]
26
- : null,
27
- }
28
- }
29
- })
30
-
31
- async function initContent(contentString, contentWrapper) {
32
- const { setReferences, applyReferences } = useReferences
33
- const { setFootnotes } = useFootnotes
34
-
35
- const content = contentString
36
- ? JSON.parse(contentString)
37
- : null
38
-
39
- if (content?.summary)
40
- state.summary = content.summary
41
-
42
- if (content?.references)
43
- setReferences(content.references)
44
-
45
- if (content?.footnotes)
46
- setFootnotes(content.footnotes)
47
-
48
- // if content comes from file, apply references to file
49
- if (content?.summary?.[0]?.file) {
50
- const text = await getContent(content.summary?.[0]?.file)
51
- const newContent = content.applyReferences
52
- ? applyReferences(text)
53
- : text
54
- state.content = newContent
55
-
56
- // else if content comes from slot, apply references to slot
57
- } else {
58
- const content = document.querySelectorAll('[slot="content"]')
59
-
60
- if (content && content?.[0]?.innerHTML && content.applyReferences) {
61
- const newContent = applyReferences(content?.[0]?.innerHTML)
62
- if (newContent) {
63
- content[0].innerHTML = newContent
64
- }
65
- }
66
- }
67
-
68
- // after applying references above, now we start to listen to its clicks
69
- listenToClicks(contentWrapper)
70
- }
71
-
72
- async function getContent(location) {
73
- try {
74
- const dataRef = await fetch(location)
75
- const text = await dataRef.text()
76
- return text
77
- } catch (err) {
78
- console.log({ err })
79
- state.content = 'Ops, não foi possível carregar o arquivo solicitado.'
80
- }
81
- }
82
-
83
- function applyContent(text) {
84
- const { applyReferences } = useReferences
85
- const newContent = applyReferences(text)
86
- state.content = newContent
87
- }
88
-
89
- function listenToClicks(contentWrapper) {
90
- setTimeout(() => {
91
- useEventListener(contentWrapper, 'click', getClickedReferenceData)
92
- }, 100)
93
- }
94
-
95
- function getClickedReferenceData(event) {
96
- if (event.target.closest('.reference')) {
97
- useReferences.applyReference(event)
98
- }
99
-
100
- if (event.target.closest('.footnote')) {
101
- useFootnotes.applyFootnote(event)
102
- }
103
- }
104
-
105
- export default {
106
- content,
107
- summary,
108
- initContent,
109
- getContent,
110
- applyContent,
111
- listenToClicks,
112
- context
113
- }
1
+ import { computed, reactive } from 'vue'
2
+ import { useEventListener } from '@vueuse/core'
3
+
4
+ import useReferences from './useReferences'
5
+ import useFootnotes from './useFootnotes'
6
+
7
+ const state = reactive({
8
+ summary: null,
9
+ content: null
10
+ })
11
+
12
+ const content = computed(() => state.content)
13
+ const summary = computed(() => state.summary)
14
+ const context = computed(() => {
15
+ const current = state.summary.findIndex(
16
+ chapter => window.location.href.includes(chapter.link)
17
+ )
18
+ return {
19
+ chapter: state.summary[current],
20
+ surround: {
21
+ before: current - 1 >= 0
22
+ ? state.summary[current - 1]
23
+ : null,
24
+ after: current + 1 <= state.summary.length
25
+ ? state.summary[current + 1]
26
+ : null,
27
+ }
28
+ }
29
+ })
30
+
31
+ async function initContent(contentString, contentWrapper) {
32
+ const { setReferences, applyReferences } = useReferences
33
+ const { setFootnotes } = useFootnotes
34
+
35
+ const content = contentString
36
+ ? JSON.parse(contentString)
37
+ : null
38
+
39
+ if (content?.summary)
40
+ state.summary = content.summary
41
+
42
+ if (content?.references)
43
+ setReferences(content.references)
44
+
45
+ if (content?.footnotes)
46
+ setFootnotes(content.footnotes)
47
+
48
+ // if content comes from file, apply references to file
49
+ if (content?.summary?.[0]?.file) {
50
+ const text = await getContent(content.summary?.[0]?.file)
51
+ const newContent = content.applyReferences
52
+ ? applyReferences(text)
53
+ : text
54
+ state.content = newContent
55
+
56
+ // else if content comes from slot, apply references to slot
57
+ } else {
58
+ const content = document.querySelectorAll('[slot="content"]')
59
+
60
+ if (content && content?.[0]?.innerHTML && content.applyReferences) {
61
+ const newContent = applyReferences(content?.[0]?.innerHTML)
62
+ if (newContent) {
63
+ content[0].innerHTML = newContent
64
+ }
65
+ }
66
+ }
67
+
68
+ // after applying references above, now we start to listen to its clicks
69
+ listenToClicks(contentWrapper)
70
+ }
71
+
72
+ async function getContent(location) {
73
+ try {
74
+ const dataRef = await fetch(location)
75
+ const text = await dataRef.text()
76
+ return text
77
+ } catch (err) {
78
+ console.log({ err })
79
+ state.content = 'Ops, não foi possível carregar o arquivo solicitado.'
80
+ }
81
+ }
82
+
83
+ function applyContent(text) {
84
+ const { applyReferences } = useReferences
85
+ const newContent = applyReferences(text)
86
+ state.content = newContent
87
+ }
88
+
89
+ function listenToClicks(contentWrapper) {
90
+ setTimeout(() => {
91
+ useEventListener(contentWrapper, 'click', getClickedReferenceData)
92
+ }, 100)
93
+ }
94
+
95
+ function getClickedReferenceData(event) {
96
+ if (event.target.closest('.reference')) {
97
+ useReferences.applyReference(event)
98
+ }
99
+
100
+ if (event.target.closest('.footnote')) {
101
+ useFootnotes.applyFootnote(event)
102
+ }
103
+ }
104
+
105
+ export default {
106
+ content,
107
+ summary,
108
+ initContent,
109
+ getContent,
110
+ applyContent,
111
+ listenToClicks,
112
+ context
113
+ }
package/src/main.js CHANGED
@@ -1,19 +1,19 @@
1
- // https://maximomussini.com/posts/vue-custom-elements
2
- import { defineCustomElement } from 'vue'
3
-
4
- import App from './App.ce.vue'
5
-
6
- import tailwindStyles from './tailwind.css'
7
-
8
- const styles = [
9
- ...[tailwindStyles],
10
- ...App.styles
11
- ]
12
-
13
- customElements.define(
14
- 'paginate-content',
15
- defineCustomElement({
16
- ...App,
17
- styles
18
- })
19
- )
1
+ // https://maximomussini.com/posts/vue-custom-elements
2
+ import { defineCustomElement } from 'vue'
3
+
4
+ import App from './App.ce.vue'
5
+
6
+ import tailwindStyles from './tailwind.css'
7
+
8
+ const styles = [
9
+ ...[tailwindStyles],
10
+ ...App.styles
11
+ ]
12
+
13
+ customElements.define(
14
+ 'paginate-content',
15
+ defineCustomElement({
16
+ ...App,
17
+ styles
18
+ })
19
+ )
@@ -1,16 +1,16 @@
1
- /** @type {import('tailwindcss').Config} */
2
- module.exports = {
3
- content: [
4
- // Example content paths...
5
- './public/**/*.html',
6
- './src/**/*.{js,jsx,ts,tsx,vue}',
7
- ],
8
- theme: {
9
- extend: {
10
- transitionProperty: {
11
- 'spacing': 'margin'
12
- }
13
- },
14
- },
15
- plugins: [],
16
- }
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ content: [
4
+ // Example content paths...
5
+ './public/**/*.html',
6
+ './src/**/*.{js,jsx,ts,tsx,vue}',
7
+ ],
8
+ theme: {
9
+ extend: {
10
+ transitionProperty: {
11
+ 'spacing': 'margin'
12
+ }
13
+ },
14
+ },
15
+ plugins: [],
16
+ }
package/vite.config.js CHANGED
@@ -1,36 +1,36 @@
1
- import { fileURLToPath, URL } from 'node:url'
2
-
3
- import { defineConfig } from 'vite'
4
- import vue from '@vitejs/plugin-vue'
5
-
6
- // https://vitejs.dev/config/
7
- export default defineConfig({
8
- plugins: [vue()],
9
- resolve: {
10
- alias: {
11
- '@': fileURLToPath(new URL('./src', import.meta.url))
12
- }
13
- },
14
-
15
- define: {
16
- 'process.env': {}
17
- },
18
-
19
- server: {
20
- host: true
21
- },
22
-
23
- build: {
24
- lib: {
25
- entry: 'src/main.js',
26
- formats: ['es'],
27
- name: 'PaginateContent',
28
- fileName: format => `index.${format}.js`
29
- },
30
- sourcemap: true,
31
- // Reduce bloat from legacy polyfills.
32
- target: 'esnext',
33
- // Leave minification up to applications.
34
- minify: false,
35
- }
36
- })
1
+ import { fileURLToPath, URL } from 'node:url'
2
+
3
+ import { defineConfig } from 'vite'
4
+ import vue from '@vitejs/plugin-vue'
5
+
6
+ // https://vitejs.dev/config/
7
+ export default defineConfig({
8
+ plugins: [vue()],
9
+ resolve: {
10
+ alias: {
11
+ '@': fileURLToPath(new URL('./src', import.meta.url))
12
+ }
13
+ },
14
+
15
+ define: {
16
+ 'process.env': {}
17
+ },
18
+
19
+ server: {
20
+ host: true
21
+ },
22
+
23
+ build: {
24
+ lib: {
25
+ entry: 'src/main.js',
26
+ formats: ['es'],
27
+ name: 'PaginateContent',
28
+ fileName: format => `index.${format}.js`
29
+ },
30
+ sourcemap: true,
31
+ // Reduce bloat from legacy polyfills.
32
+ target: 'esnext',
33
+ // Leave minification up to applications.
34
+ minify: false,
35
+ }
36
+ })