paginar 0.3.4 → 0.3.6

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 (60) hide show
  1. package/README.md +288 -236
  2. package/dist/index.es.js +684 -244
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/style.css +63 -0
  5. package/package.json +6 -3
  6. package/.editorconfig +0 -13
  7. package/.env +0 -1
  8. package/.vscode/extensions.json +0 -3
  9. package/demo/slot/slot-chapter1.html +0 -384
  10. package/demo/slot/slot-chapter2.html +0 -366
  11. package/demo/slot/slot-chapter3.html +0 -265
  12. package/demo/summary/_content/1chapter.html +0 -100
  13. package/demo/summary/_content/2chapter.html +0 -311
  14. package/demo/summary/_content/3chapter.html +0 -211
  15. package/demo/summary/index.html +0 -134
  16. package/index.html +0 -18
  17. package/postcss.config.js +0 -7
  18. package/public/favicon.ico +0 -0
  19. package/src/App.ce.vue +0 -166
  20. package/src/assets/main.css +0 -392
  21. package/src/components/BookContent.vue +0 -23
  22. package/src/components/EngineWrapper.vue +0 -15
  23. package/src/components/FooterSlot.vue +0 -32
  24. package/src/components/FootnotesAside.vue +0 -123
  25. package/src/components/HeaderSlot/HeaderSlot.vue +0 -30
  26. package/src/components/HeaderSlot/OptionsButton/OptionsButton.vue +0 -67
  27. package/src/components/HeaderSlot/OptionsButton/OptionsColor.vue +0 -28
  28. package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue +0 -51
  29. package/src/components/HeaderSlot/OptionsButton/OptionsDropdown.vue +0 -59
  30. package/src/components/HeaderSlot/OptionsButton/OptionsFontFamily.vue +0 -17
  31. package/src/components/HeaderSlot/OptionsButton/OptionsFontSize.vue +0 -17
  32. package/src/components/HeaderSlot/SummaryButton/SummaryButton.vue +0 -74
  33. package/src/components/HeaderSlot/SummaryButton/SummaryDropdown.vue +0 -30
  34. package/src/components/NavigationButton.vue +0 -34
  35. package/src/components/ReaderWrapper.vue +0 -37
  36. package/src/components/ReferencePopup.vue +0 -36
  37. package/src/components/icons/Close.vue +0 -6
  38. package/src/components/icons/DoubleColumn.vue +0 -15
  39. package/src/components/icons/Expand.vue +0 -7
  40. package/src/components/icons/Eye.vue +0 -9
  41. package/src/components/icons/Footnote.vue +0 -5
  42. package/src/components/icons/Home.vue +0 -6
  43. package/src/components/icons/Moon.vue +0 -5
  44. package/src/components/icons/Notes.vue +0 -5
  45. package/src/components/icons/SingleColumn.vue +0 -3
  46. package/src/components/icons/Summary.vue +0 -10
  47. package/src/components/icons/Sun.vue +0 -5
  48. package/src/components/icons/ThreeDots.vue +0 -8
  49. package/src/composables/useBrowser.js +0 -16
  50. package/src/composables/useEstimatePages.js +0 -31
  51. package/src/composables/useFootnotes.js +0 -50
  52. package/src/composables/usePagination.js +0 -125
  53. package/src/composables/useReaderSettings.js +0 -174
  54. package/src/composables/useReferences.js +0 -67
  55. package/src/composables/useStyles.js +0 -60
  56. package/src/composables/useTextContent.js +0 -113
  57. package/src/main.js +0 -19
  58. package/src/tailwind.css +0 -1082
  59. package/tailwind.config.js +0 -16
  60. package/vite.config.js +0 -36
package/demo/summary/index.html DELETED
@@ -1,134 +0,0 @@
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>Sumário - Paginar</title>
9
- </head>
10
-
11
- <body>
12
- <style>
13
- #app {
14
- height: 100vh;
15
- }
16
-
17
- .page-break {
18
- break-before: column;
19
- }
20
-
21
- .page-break span {
22
- background-color: #eee;
23
- padding: 5px;
24
- font-family: monospace;
25
- display: block;
26
- }
27
- </style>
28
-
29
- <div id="app">
30
- <!-- <paginate-content
31
- id="pagination-el"
32
- book-title="A Tale of Two Cities"
33
- css-file="https://paginar-css.surge.sh/style.css"
34
- > -->
35
- <paginate-content
36
- id="pagination-el"
37
- book-title="A Tale of Two Cities"
38
- >
39
- <div slot="summaryTop">
40
- <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded mb-2">
41
- Catálogo
42
- </a>
43
- <div class="my-3 border-b border-gray-100"></div>
44
- </div>
45
-
46
- <div slot="summaryBottom">
47
- <div class="my-3 border-b border-gray-100"></div>
48
- <a href="/" title="Catálogo" class="w-full text-left block text-black py-2 px-3 hover:bg-gray-100 rounded">
49
- Referências
50
- </a>
51
- </div>
52
-
53
- <div slot="header">
54
- <img src="https://sabia.pub/images/logo-mobile-dark.svg" style="height: 40px">
55
- </div>
56
-
57
- <div slot="optionsTop">
58
- <a href="/" title="Catálogo" class="w-full block text-black text-center py-2 px-3 hover:bg-gray-100 rounded mb-2">
59
- Minha conta
60
- </a>
61
- <div class="my-3 border-b border-gray-100"></div>
62
- </div>
63
-
64
- <div slot="optionsBottom">
65
- <div class="my-3 border-b border-gray-100"></div>
66
- <a href="https://sabia.pub" target="_blank" title="Sobre a Editora" class="w-full block text-black text-center text-xs py-2 px-3 hover:bg-gray-100 rounded">
67
- <img src="https://sabia.pub/images/logo.svg" style="height: 48px; margin: 0 auto; display: block;">
68
- </a>
69
- </div>
70
- </paginate-content>
71
- </div>
72
-
73
- <script>
74
- const settings = {
75
- fontSize: 19, // number
76
- fontsOptions: [
77
- {
78
- label: 'Times New Roman',
79
- name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
80
- defaultTextFont: true
81
- },
82
- {
83
- label: 'Inter',
84
- name: '"Inter", sans-serif',
85
- link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
86
- defaultBaseFont: true
87
- },
88
- {
89
- label: 'Open Dyslexic',
90
- name: '"Open-Dyslexic", sans-serif',
91
- link: 'http://fonts.cdnfonts.com/css/open-dyslexic'
92
- },
93
- {
94
- label: 'Atkinson Hyperlegible',
95
- name: 'Atkinson Hyperlegible',
96
- link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
97
- }
98
- ]
99
- }
100
-
101
- const content = {
102
- summary: [
103
- { title: 'Chapter 1', file: './_content/1chapter.html' },
104
- { title: 'Chapter 2', file: './_content/2chapter.html' },
105
- { title: 'Chapter 3', file: './_content/3chapter.html' }
106
- ],
107
- references: [
108
- {
109
- "cit": "GAMA, 2019",
110
- "ref": "GAMA, Mara. <strong>As três rotas que trouxeram a centenária Bauhaus ao Brasil</strong>. Folha de São Paulo, São Paulo, 1 abr. 2019. Disponível em: https://www1.folha.uol.com.br/ilustrissima/2019/03/as-tres-rotas-que-trouxeram-a-centenaria-bauhaus-ao-brasil.shtml. Acesso em: 4 abr. 2019"
111
- },
112
- {
113
- "cit": "LEON, 2006",
114
- "ref": "LEON, Ethel. <strong>O Instituto de Arte Contemporânea do Museu de Arte Moderna (MAM) de São Paulo dos anos 1950</strong>. São Paulo, 2006."
115
- },
116
- {
117
- "cit": "LUGONES, 1978",
118
- "ref": "LUGONES, Maria. <strong>Colonialidad y género</strong>. Tábula Rasa, Bogotá, Colômbia, n. 9, p. 73-101, julho-dezembro de 1978."
119
- }
120
- ]
121
- }
122
-
123
- const paginationEl = document.getElementById('pagination-el')
124
- if (paginationEl) {
125
- paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
126
- paginationEl.setAttribute("book-content", JSON.stringify(content))
127
- }
128
- </script>
129
- <!-- <script type="module" src="./js/index.es.js"></script> -->
130
- <script type="module" src="/src/main.js"></script>
131
-
132
- </body>
133
-
134
- </html>
package/index.html DELETED
@@ -1,18 +0,0 @@
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/postcss.config.js DELETED
@@ -1,7 +0,0 @@
1
- module.exports = {
2
- plugins: {
3
- 'tailwindcss/nesting': {},
4
- tailwindcss: {},
5
- autoprefixer: {},
6
- },
7
- }
package/public/favicon.ico DELETED
Binary file
package/src/App.ce.vue DELETED
@@ -1,166 +0,0 @@
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>
149
-
150
- <style lang="scss">
151
- /* In your Vue component's <style> section */
152
- :host {
153
- user-select: text;
154
- }
155
-
156
- ::slotted(*) {
157
- user-select: text;
158
- }
159
-
160
- /* Ensure paragraphs can be selected across boundaries */
161
- ::slotted(p) {
162
- user-select: text;
163
- display: block;
164
- /* Avoid inline-block which can break selection */
165
- }
166
- </style>