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.
- package/.editorconfig +13 -13
- package/.env +1 -1
- package/.vscode/extensions.json +3 -3
- package/LICENSE.md +21 -21
- package/README.md +244 -244
- package/demo/slot/slot-chapter1.html +384 -384
- package/demo/slot/slot-chapter2.html +366 -366
- package/demo/slot/slot-chapter3.html +265 -265
- package/demo/summary/_content/1chapter.html +100 -100
- package/demo/summary/_content/2chapter.html +311 -311
- package/demo/summary/_content/3chapter.html +211 -211
- package/demo/summary/index.html +134 -134
- package/dist/index.es.js +849 -840
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +9 -9
- package/index.html +18 -18
- package/package.json +1 -1
- package/src/App.ce.vue +148 -148
- package/src/assets/main.css +392 -392
- package/src/components/BookContent.vue +23 -23
- package/src/components/FooterSlot.vue +32 -32
- package/src/components/FootnotesAside.vue +123 -123
- package/src/components/HeaderSlot/HeaderSlot.vue +30 -30
- package/src/components/HeaderSlot/OptionsButton/OptionsButton.vue +67 -67
- package/src/components/HeaderSlot/OptionsButton/OptionsColor.vue +28 -28
- package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue +51 -51
- package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue +59 -59
- package/src/components/HeaderSlot/OptionsButton/OptionsFontFamily.vue +17 -17
- package/src/components/HeaderSlot/OptionsButton/OptionsFontSize.vue +17 -17
- package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue +70 -70
- package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue +6 -6
- package/src/components/ReaderWrapper.vue +37 -37
- package/src/components/ReferencePopup.vue +36 -36
- package/src/components/icons/Close.vue +6 -6
- package/src/components/icons/DoubleColumn.vue +15 -15
- package/src/components/icons/Expand.vue +7 -7
- package/src/components/icons/Eye.vue +9 -9
- package/src/components/icons/Footnote.vue +5 -5
- package/src/components/icons/Home.vue +6 -6
- package/src/components/icons/Moon.vue +5 -5
- package/src/components/icons/Notes.vue +5 -5
- package/src/components/icons/SingleColumn.vue +3 -3
- package/src/components/icons/Summary.vue +10 -10
- package/src/components/icons/Sun.vue +5 -5
- package/src/components/icons/ThreeDots.vue +8 -8
- package/src/composables/useBrowser.js +16 -16
- package/src/composables/useFootnotes.js +50 -50
- package/src/composables/usePagination.js +125 -125
- package/src/composables/useReaderSettings.js +174 -174
- package/src/composables/useReferences.js +67 -67
- package/src/composables/useStyles.js +60 -60
- package/src/composables/useTextContent.js +113 -113
- package/src/main.js +19 -19
- package/tailwind.config.js +16 -16
- 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
|
+
)
|
package/tailwind.config.js
CHANGED
|
@@ -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
|
+
})
|