paginar 0.3.5 → 0.3.7
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/README.md +307 -254
- package/dist/index.es.js +1382 -690
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +16 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,274 +1,327 @@
|
|
|
1
|
-
# Paginar
|
|
2
|
-
|
|
3
|
-
## Manutenção e contribuição
|
|
4
|
-
|
|
5
|
-
Para trabalhar no projeto, comece pelo [AGENTS.md](AGENTS.md). Consulte também o
|
|
6
|
-
[mapa da arquitetura](docs/architecture.md), o [guia de desenvolvimento e validação](docs/development.md)
|
|
7
|
-
e o [roteiro de publicação no npm](docs/releasing.md). Tarefas pequenas podem seguir
|
|
8
|
-
esse fluxo diretamente; o uso de Specify / Spec Kit é opcional.
|
|
9
|
-
|
|
10
|
-
Esses documentos estão no [repositório público](https://github.com/sabia-publisher/paginar).
|
|
11
|
-
|
|
12
|
-
Web Component para transformar conteúdos HTML em uma visualização paginada, melhorando a leitura no browser, navegação, customização etc.
|
|
13
|
-
|
|
14
|
-
-----
|
|
15
|
-
|
|
16
|
-
### Exemplo real em uso (com alguma complexidade)
|
|
17
|
-
|
|
18
|
-
[link](https://sabia.pub/book/okabayashi-uma-perspectiva-decolonial-para-o-design-no-brasil/read/haDxQvbtIIX4Hh5cOyee/content)
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
## Como usar
|
|
22
|
-
|
|
23
|
-
Via CDN, basta incluir ao final do html, antes do fechamento da tag body, o script:
|
|
24
|
-
|
|
25
|
-
```html
|
|
26
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/sabia-publisher/paginar/dist/index.es.js"></script>
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
Esse link acima sempre puxa a última versão disponível para o software, e também as melhorias que eventualmente fazemos.
|
|
30
|
-
|
|
31
|
-
Para apontar para uma versão estável, e assim evitar possíveis bugs ou desconfigurações vindas das melhorias, pode ser da seguinte maneira:
|
|
32
|
-
|
|
33
|
-
```html
|
|
34
|
-
<script type="module" src="https://unpkg.com/paginar@0.3.
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
No corpo do html, no local onde deseja que seja renderizado o leitor, utilizar o Web Component conforme abaixo, e inclua o conteúdo que deseja paginar dentro de um div com propriedade slot="content":
|
|
38
|
-
|
|
39
|
-
```html
|
|
40
|
-
<paginate-content id="pagination-el">
|
|
41
|
-
<div slot="content">
|
|
42
|
-
<p>Conteúdo HTML para paginar</p>
|
|
43
|
-
</div>
|
|
44
|
-
</paginate-content>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## Customização
|
|
48
|
-
|
|
49
|
-
### Parametros de customização disponíveis
|
|
50
|
-
|
|
51
|
-
O web component disponibiliza algumas interfaces de customização por via de um objeto a ser linkado ao web component, conforme o exemplo:
|
|
52
|
-
|
|
53
|
-
```html
|
|
54
|
-
<paginate-content id="pagination-el">
|
|
55
|
-
<div slot="content">
|
|
56
|
-
<p>Conteúdo de uma pagina.</p>
|
|
57
|
-
</div>
|
|
58
|
-
</paginate-content>
|
|
59
|
-
|
|
60
|
-
<script>
|
|
61
|
-
const settings = {
|
|
62
|
-
fontSize: 19, // number
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const paginationEl = document.getElementById('pagination-el')
|
|
66
|
-
if (paginationEl) {
|
|
67
|
-
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
Nesse exemplo, configuramos o tamanho padrão de `font-size` da interface e texto como `19px`. As demais configurações disponíveis até o momento são:
|
|
73
|
-
|
|
74
|
-
```js
|
|
75
|
-
const settings = {
|
|
76
|
-
// fontSize
|
|
77
|
-
// tamanho da fonte
|
|
78
|
-
// tipagem: número
|
|
79
|
-
fontSize: 19,
|
|
80
|
-
|
|
81
|
-
// textFont
|
|
82
|
-
// designa a fonte base a ser usada no corpo do texto
|
|
83
|
-
textFont: 'Times New Roman',
|
|
84
|
-
|
|
85
|
-
// baseFont
|
|
86
|
-
// designa a fonte padrão para a interface do paginador como um todo
|
|
87
|
-
baseFont: '"Inter", sans-serif',
|
|
88
|
-
|
|
89
|
-
// homeUrl
|
|
90
|
-
// URL a ser direcionado pelo botao de home ao lado do sumário.
|
|
91
|
-
// se nao for adicionada a opcao aqui, o botao de home nao aparecerá
|
|
92
|
-
homeUrl: 'https://sabia.pub',
|
|
93
|
-
|
|
94
|
-
// bookTitle
|
|
95
|
-
// titulo do livro, a ser mostrado no cabeçalho do paginador
|
|
96
|
-
bookTitle: 'A Tale of Two Cities',
|
|
97
|
-
|
|
98
|
-
// chapterTitle
|
|
99
|
-
// titulo do capítulo, a ser mostrado no cabeçalho do paginador
|
|
100
|
-
chapterTitle: 'Chapter One - The Period',
|
|
1
|
+
# Paginar
|
|
2
|
+
|
|
3
|
+
## Manutenção e contribuição
|
|
4
|
+
|
|
5
|
+
Para trabalhar no projeto, comece pelo [AGENTS.md](AGENTS.md). Consulte também o
|
|
6
|
+
[mapa da arquitetura](docs/architecture.md), o [guia de desenvolvimento e validação](docs/development.md)
|
|
7
|
+
e o [roteiro de publicação no npm](docs/releasing.md). Tarefas pequenas podem seguir
|
|
8
|
+
esse fluxo diretamente; o uso de Specify / Spec Kit é opcional.
|
|
9
|
+
|
|
10
|
+
Esses documentos estão no [repositório público](https://github.com/sabia-publisher/paginar).
|
|
11
|
+
|
|
12
|
+
Web Component para transformar conteúdos HTML em uma visualização paginada, melhorando a leitura no browser, navegação, customização etc.
|
|
13
|
+
|
|
14
|
+
-----
|
|
15
|
+
|
|
16
|
+
### Exemplo real em uso (com alguma complexidade)
|
|
17
|
+
|
|
18
|
+
[link](https://sabia.pub/book/okabayashi-uma-perspectiva-decolonial-para-o-design-no-brasil/read/haDxQvbtIIX4Hh5cOyee/content)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Como usar
|
|
22
|
+
|
|
23
|
+
Via CDN, basta incluir ao final do html, antes do fechamento da tag body, o script:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/sabia-publisher/paginar/dist/index.es.js"></script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Esse link acima sempre puxa a última versão disponível para o software, e também as melhorias que eventualmente fazemos.
|
|
30
|
+
|
|
31
|
+
Para apontar para uma versão estável, e assim evitar possíveis bugs ou desconfigurações vindas das melhorias, pode ser da seguinte maneira:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<script type="module" src="https://unpkg.com/paginar@0.3.7/dist/index.es.js"></script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
No corpo do html, no local onde deseja que seja renderizado o leitor, utilizar o Web Component conforme abaixo, e inclua o conteúdo que deseja paginar dentro de um div com propriedade slot="content":
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<paginate-content id="pagination-el">
|
|
41
|
+
<div slot="content">
|
|
42
|
+
<p>Conteúdo HTML para paginar</p>
|
|
43
|
+
</div>
|
|
44
|
+
</paginate-content>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Customização
|
|
48
|
+
|
|
49
|
+
### Parametros de customização disponíveis
|
|
50
|
+
|
|
51
|
+
O web component disponibiliza algumas interfaces de customização por via de um objeto a ser linkado ao web component, conforme o exemplo:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<paginate-content id="pagination-el">
|
|
55
|
+
<div slot="content">
|
|
56
|
+
<p>Conteúdo de uma pagina.</p>
|
|
57
|
+
</div>
|
|
58
|
+
</paginate-content>
|
|
59
|
+
|
|
60
|
+
<script>
|
|
61
|
+
const settings = {
|
|
62
|
+
fontSize: 19, // number
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
66
|
+
if (paginationEl) {
|
|
67
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Nesse exemplo, configuramos o tamanho padrão de `font-size` da interface e texto como `19px`. As demais configurações disponíveis até o momento são:
|
|
73
|
+
|
|
74
|
+
```js
|
|
75
|
+
const settings = {
|
|
76
|
+
// fontSize
|
|
77
|
+
// tamanho da fonte
|
|
78
|
+
// tipagem: número
|
|
79
|
+
fontSize: 19,
|
|
80
|
+
|
|
81
|
+
// textFont
|
|
82
|
+
// designa a fonte base a ser usada no corpo do texto
|
|
83
|
+
textFont: 'Times New Roman',
|
|
84
|
+
|
|
85
|
+
// baseFont
|
|
86
|
+
// designa a fonte padrão para a interface do paginador como um todo
|
|
87
|
+
baseFont: '"Inter", sans-serif',
|
|
88
|
+
|
|
89
|
+
// homeUrl
|
|
90
|
+
// URL a ser direcionado pelo botao de home ao lado do sumário.
|
|
91
|
+
// se nao for adicionada a opcao aqui, o botao de home nao aparecerá
|
|
92
|
+
homeUrl: 'https://sabia.pub',
|
|
93
|
+
|
|
94
|
+
// bookTitle
|
|
95
|
+
// titulo do livro, a ser mostrado no cabeçalho do paginador
|
|
96
|
+
bookTitle: 'A Tale of Two Cities',
|
|
97
|
+
|
|
98
|
+
// chapterTitle
|
|
99
|
+
// titulo do capítulo, a ser mostrado no cabeçalho do paginador
|
|
100
|
+
chapterTitle: 'Chapter One - The Period',
|
|
101
|
+
|
|
102
|
+
// search
|
|
103
|
+
// habilita a busca no texto do capítulo atual (desativada por padrão).
|
|
104
|
+
search: true,
|
|
101
105
|
|
|
102
106
|
// readingProgress
|
|
103
|
-
// disponibiliza no menu a retomada da leitura e salva a posição por percentual.
|
|
104
|
-
// use um id estável e exclusivo para evitar misturar o progresso entre obras.
|
|
105
|
-
// enabled define o estado inicial; a escolha posterior do leitor prevalece.
|
|
106
|
-
readingProgress: {
|
|
107
|
-
id: 'a-tale-of-two-cities',
|
|
108
|
-
enabled: true
|
|
109
|
-
},
|
|
110
|
-
|
|
111
|
-
// fontsOptions
|
|
112
|
-
// customização da lista de fontes disponíveis para o usuário customizar
|
|
113
|
-
// a tela de leitura. Deve ser uma lista de até 4 opções, com o nome
|
|
114
|
-
// da fonte, o label a ser apresentado para o leitur, se é default ou nao
|
|
115
|
-
// e um link de onde essa fonte deve ser importada, caso não seja uma
|
|
116
|
-
// fonte de sistema
|
|
117
|
-
fontsOptions: [
|
|
118
|
-
{
|
|
119
|
-
label: 'Times New Roman',
|
|
120
|
-
name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
|
|
121
|
-
defaultTextFont: true // fonte padrão do corpo do texto
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
label: 'Inter',
|
|
125
|
-
name: '"Inter", sans-serif',
|
|
126
|
-
link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
|
|
127
|
-
defaultBaseFont: true // fonte padrão da interface de paginação
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
label: 'Open Dyslexic',
|
|
131
|
-
name: '"Open-Dyslexic", sans-serif',
|
|
132
|
-
link: 'https://fonts.cdnfonts.com/css/open-dyslexic'
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
label: 'Atkinson Hyperlegible',
|
|
136
|
-
name: 'Atkinson Hyperlegible',
|
|
137
|
-
link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
|
138
|
-
}
|
|
139
|
-
],
|
|
140
|
-
|
|
141
|
-
// cssString
|
|
142
|
-
// possibilita que CSS seja enxertado no escopo do web component
|
|
143
|
-
// para a customização da interface em si (conceito explicado abaixo,
|
|
144
|
-
// no item de "Aplicando estilos na interface do paginador")
|
|
145
|
-
// no exemplo abaixo, mudamos a cor do cabeçalho para transparente
|
|
146
|
-
// e o padding do cabeçalho. Existem diversas classes e ids auxiliares na
|
|
147
|
-
// interface, que podem ser explorados pelo inspetor de elementos do
|
|
148
|
-
// navegador.
|
|
149
|
-
// no segundo estilo, escondemos o menu de "Notas de rodapé" do menu
|
|
150
|
-
// de opções
|
|
151
|
-
cssString: `
|
|
152
|
-
header#component-header {
|
|
153
|
-
background-color: transparent;
|
|
154
|
-
padding: 5px;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
#footnotes-button {
|
|
158
|
-
display: none;
|
|
159
|
-
}
|
|
160
|
-
`
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
`readingProgress` é opcional. Quando ausente ou `false`, o componente não salva
|
|
166
|
-
nem restaura posições e não mostra o controle **Retomar leitura**. Quando o objeto
|
|
167
|
-
é informado, `enabled` assume `true` se omitido. O progresso fica somente no
|
|
168
|
-
`localStorage` da origem atual, não é sincronizado entre dispositivos e é isolado
|
|
169
|
-
por obra e contexto de capítulo. Sem `id`, o componente usa o título e o caminho
|
|
170
|
-
da página como alternativa; para publicações duradouras, prefira sempre um `id`
|
|
171
|
-
explícito e estável.
|
|
172
|
-
|
|
107
|
+
// disponibiliza no menu a retomada da leitura e salva a posição por percentual.
|
|
108
|
+
// use um id estável e exclusivo para evitar misturar o progresso entre obras.
|
|
109
|
+
// enabled define o estado inicial; a escolha posterior do leitor prevalece.
|
|
110
|
+
readingProgress: {
|
|
111
|
+
id: 'a-tale-of-two-cities',
|
|
112
|
+
enabled: true
|
|
113
|
+
},
|
|
114
|
+
|
|
115
|
+
// fontsOptions
|
|
116
|
+
// customização da lista de fontes disponíveis para o usuário customizar
|
|
117
|
+
// a tela de leitura. Deve ser uma lista de até 4 opções, com o nome
|
|
118
|
+
// da fonte, o label a ser apresentado para o leitur, se é default ou nao
|
|
119
|
+
// e um link de onde essa fonte deve ser importada, caso não seja uma
|
|
120
|
+
// fonte de sistema
|
|
121
|
+
fontsOptions: [
|
|
122
|
+
{
|
|
123
|
+
label: 'Times New Roman',
|
|
124
|
+
name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
|
|
125
|
+
defaultTextFont: true // fonte padrão do corpo do texto
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
label: 'Inter',
|
|
129
|
+
name: '"Inter", sans-serif',
|
|
130
|
+
link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
|
|
131
|
+
defaultBaseFont: true // fonte padrão da interface de paginação
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
label: 'Open Dyslexic',
|
|
135
|
+
name: '"Open-Dyslexic", sans-serif',
|
|
136
|
+
link: 'https://fonts.cdnfonts.com/css/open-dyslexic'
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
label: 'Atkinson Hyperlegible',
|
|
140
|
+
name: 'Atkinson Hyperlegible',
|
|
141
|
+
link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
|
142
|
+
}
|
|
143
|
+
],
|
|
144
|
+
|
|
145
|
+
// cssString
|
|
146
|
+
// possibilita que CSS seja enxertado no escopo do web component
|
|
147
|
+
// para a customização da interface em si (conceito explicado abaixo,
|
|
148
|
+
// no item de "Aplicando estilos na interface do paginador")
|
|
149
|
+
// no exemplo abaixo, mudamos a cor do cabeçalho para transparente
|
|
150
|
+
// e o padding do cabeçalho. Existem diversas classes e ids auxiliares na
|
|
151
|
+
// interface, que podem ser explorados pelo inspetor de elementos do
|
|
152
|
+
// navegador.
|
|
153
|
+
// no segundo estilo, escondemos o menu de "Notas de rodapé" do menu
|
|
154
|
+
// de opções
|
|
155
|
+
cssString: `
|
|
156
|
+
header#component-header {
|
|
157
|
+
background-color: transparent;
|
|
158
|
+
padding: 5px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
#footnotes-button {
|
|
162
|
+
display: none;
|
|
163
|
+
}
|
|
164
|
+
`
|
|
165
|
+
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
`readingProgress` é opcional. Quando ausente ou `false`, o componente não salva
|
|
170
|
+
nem restaura posições e não mostra o controle **Retomar leitura**. Quando o objeto
|
|
171
|
+
é informado, `enabled` assume `true` se omitido. O progresso fica somente no
|
|
172
|
+
`localStorage` da origem atual, não é sincronizado entre dispositivos e é isolado
|
|
173
|
+
por obra e contexto de capítulo. Sem `id`, o componente usa o título e o caminho
|
|
174
|
+
da página como alternativa; para publicações duradouras, prefira sempre um `id`
|
|
175
|
+
explícito e estável.
|
|
176
|
+
|
|
173
177
|
Ao alterar fonte, tamanho, colunas ou dimensões da janela, o leitor preserva o
|
|
174
178
|
percentual anterior e seleciona a página mais próxima no novo total. Quando a
|
|
175
179
|
posição fica exatamente entre duas páginas, a página seguinte é escolhida.
|
|
176
180
|
|
|
181
|
+
### Busca no texto
|
|
177
182
|
|
|
178
|
-
|
|
183
|
+
Defina `search: true` no JSON de `reader-settings`, antes de montar o componente.
|
|
184
|
+
Quando omitida ou `false`, a lupa não aparece e Ctrl+F mantém a busca do navegador.
|
|
185
|
+
A configuração não é persistida nas preferências do leitor.
|
|
179
186
|
|
|
180
|
-
|
|
187
|
+
Com a busca ativa, a lupa à esquerda de **Opções**, Ctrl+F ou Cmd+F abre o campo
|
|
188
|
+
abaixo do cabeçalho. Clicar fora mantém o campo aberto; Esc, o botão de fechar ou
|
|
189
|
+
a lupa o fecha. O atalho preserva a busca nativa quando o foco está em um campo
|
|
190
|
+
editável externo ao leitor.
|
|
181
191
|
|
|
182
|
-
|
|
192
|
+
A busca funciona no conteúdo atual, tanto em `slot="content"` como em HTML
|
|
193
|
+
carregado por arquivo. Não carrega outros capítulos para pesquisá-los. Ignora
|
|
194
|
+
maiúsculas, acentos e cedilha, normaliza espaços e pontuação e encontra trechos
|
|
195
|
+
de palavras. Também aceita uma inserção, remoção, substituição ou inversão de
|
|
196
|
+
letras adjacentes por palavra consultada com cinco ou mais caracteres. Por
|
|
197
|
+
exemplo, `acao` encontra `ação` e `lietura` encontra `leitura`.
|
|
183
198
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
p {
|
|
191
|
-
text-indent: 4rem;
|
|
192
|
-
}
|
|
193
|
-
</style>
|
|
199
|
+
Após digitar, o leitor desliza até a primeira ocorrência e mostra a posição e o
|
|
200
|
+
total. Enter/Shift+Enter e as setas do dropdown percorrem os resultados em ordem,
|
|
201
|
+
retornando ao início/fim quando necessário. As ocorrências visíveis recebem um
|
|
202
|
+
destaque suave, com cor mais forte e contorno na ocorrência atual, sem modificar
|
|
203
|
+
o HTML nem a distribuição das páginas. Limpar o campo remove os destaques.
|
|
204
|
+
Alterações no texto ou troca de capítulo atualizam os resultados da consulta.
|
|
194
205
|
|
|
195
|
-
|
|
196
|
-
<div slot="content">
|
|
197
|
-
<p>Conteúdo de uma pagina.</p>
|
|
198
|
-
<div class="page-break"></div>
|
|
199
|
-
<p>Conteúdo da próxima página.</div>
|
|
200
|
-
</div>
|
|
201
|
-
</paginate-content>
|
|
202
|
-
|
|
203
|
-
```
|
|
206
|
+
Veja a [demo de busca](demo/search/index.html).
|
|
204
207
|
|
|
205
|
-
|
|
208
|
+
## Eventos, estado e navegação por JavaScript
|
|
206
209
|
|
|
207
|
-
|
|
210
|
+
O componente emite eventos públicos ao mudar de página, usar o slider, abrir o
|
|
211
|
+
sumário ou as opções, trocar capítulo e alterar fonte, tamanho, colunas ou tema.
|
|
212
|
+
Também oferece `getState()`, `goToPage()`, `nextPage()` e `previousPage()` no
|
|
213
|
+
elemento. Todos os detalhes, nomes e formatos estão no guia de
|
|
214
|
+
[eventos e estado público](docs/events-and-state.md).
|
|
208
215
|
|
|
209
|
-
|
|
216
|
+
```js
|
|
217
|
+
const reader = document.querySelector('paginate-content')
|
|
210
218
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<p>Conteúdo de uma pagina.</p>
|
|
215
|
-
</div>
|
|
216
|
-
</paginate-content>
|
|
219
|
+
reader.addEventListener('paginar:page-change', event => {
|
|
220
|
+
console.log(event.detail.source, event.detail.state)
|
|
221
|
+
})
|
|
217
222
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
cssString: `
|
|
222
|
-
main#rootComponent {
|
|
223
|
-
transition: background-color 200ms linear;
|
|
224
|
-
}
|
|
225
|
-
`
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
const paginationEl = document.getElementById('pagination-el')
|
|
229
|
-
if (paginationEl) {
|
|
230
|
-
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
231
|
-
}
|
|
232
|
-
</script>
|
|
223
|
+
reader.addEventListener('paginar:ready', () => {
|
|
224
|
+
console.log(reader.getState())
|
|
225
|
+
})
|
|
233
226
|
```
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
### Aplicando estilo no corpo do texto
|
|
230
|
+
|
|
231
|
+
O conteúdo que vai dentro do `<div slot="content"></div>` pode ser customizado por CSS, seja por importação de um link p/ arquivo CSS, ou seja por uma tag `<style>` fora do componente de `<page-content>`.
|
|
232
|
+
|
|
233
|
+
No exemplo abaixo, na classe `.page-break` criamos uma classe-auxiliar que força uma quebra de coluna/página. E também aplicamos uma classe geral em todos os parágrafos, para controlar a indentação:
|
|
234
|
+
|
|
235
|
+
```html
|
|
236
|
+
<style>
|
|
237
|
+
.page-break {
|
|
238
|
+
break-before: column;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
p {
|
|
242
|
+
text-indent: 4rem;
|
|
243
|
+
}
|
|
244
|
+
</style>
|
|
245
|
+
|
|
246
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
247
|
+
<div slot="content">
|
|
248
|
+
<p>Conteúdo de uma pagina.</p>
|
|
249
|
+
<div class="page-break"></div>
|
|
250
|
+
<p>Conteúdo da próxima página.</div>
|
|
251
|
+
</div>
|
|
252
|
+
</paginate-content>
|
|
253
|
+
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
### Aplicando estilos na interface do paginador
|
|
257
|
+
|
|
258
|
+
No entanto, a maneira acima demonstrada não possibilita alterar o estilo da interface em sí do paginador. Isso porque o escopo do CSS do paginador está dentro de um [**web component**](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), que possui escopo isolado do restante da página, aninhados no `shadow dom` daquele componente.
|
|
259
|
+
|
|
260
|
+
Para alterar o estilo da interface do web component, precisamos inserir o CSS almejado no escopo do web component. Para isso, disponibilizamos uma interface via parametros da configuração do componente, conforme exemplo a seguir:
|
|
261
|
+
|
|
262
|
+
```html
|
|
263
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
264
|
+
<div slot="content">
|
|
265
|
+
<p>Conteúdo de uma pagina.</p>
|
|
266
|
+
</div>
|
|
267
|
+
</paginate-content>
|
|
268
|
+
|
|
269
|
+
<script>
|
|
270
|
+
const settings = {
|
|
271
|
+
// outras opções
|
|
272
|
+
cssString: `
|
|
273
|
+
main#rootComponent {
|
|
274
|
+
transition: background-color 200ms linear;
|
|
275
|
+
}
|
|
276
|
+
`
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
280
|
+
if (paginationEl) {
|
|
281
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
282
|
+
}
|
|
283
|
+
</script>
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
-----
|
|
288
|
+
|
|
238
289
|
### Exemplos didáticos
|
|
239
|
-
|
|
290
|
+
|
|
240
291
|
Para customizações especiais, navegue pelos exemplos abaixo e inspecione o código como ele funciona.
|
|
241
292
|
|
|
242
|
-
[
|
|
243
|
-
|
|
244
|
-
[
|
|
245
|
-
|
|
246
|
-
[
|
|
247
|
-
|
|
248
|
-
[
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
Customizar
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
- [X]
|
|
270
|
-
- [X]
|
|
271
|
-
- [
|
|
272
|
-
- [X]
|
|
273
|
-
- [
|
|
274
|
-
- [X]
|
|
293
|
+
[Eventos e estado público (exemplo neste repositório)](https://sabia-publisher.github.io/paginar/demo/events/)
|
|
294
|
+
|
|
295
|
+
[Uso básico](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1.html)
|
|
296
|
+
|
|
297
|
+
[Mostrar logo no cabeçalho](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1-com-logo-no-cabecalho.html)
|
|
298
|
+
|
|
299
|
+
[Com sumário](https://educkf.github.io/paginar-exemplos/exemplo2/exemplo2-cap1.html)
|
|
300
|
+
|
|
301
|
+
[Fontes especiais p/ menu de opções](https://educkf.github.io/paginar-exemplos/exemplo3/exemplo3.html)
|
|
302
|
+
|
|
303
|
+
Notas de rodapé (em breve)
|
|
304
|
+
|
|
305
|
+
Referências bibliográficas (em breve)
|
|
306
|
+
|
|
307
|
+
Customizar cores (em breve)
|
|
308
|
+
|
|
309
|
+
Customizar apresentaçào de páginas (abertura, cores de fundo, quebra de pagina etc. Em breve)
|
|
310
|
+
|
|
311
|
+
-----
|
|
312
|
+
|
|
313
|
+
### Exemplo real em uso (com alguma complexidade)
|
|
314
|
+
|
|
315
|
+
[link](https://sabia.pub/book/okabayashi-uma-perspectiva-decolonial-para-o-design-no-brasil/read/haDxQvbtIIX4Hh5cOyee/content)
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
### Desenvolvimento
|
|
319
|
+
|
|
320
|
+
- [X] Custom Component (or Web Component) to be used in any environment
|
|
321
|
+
- [X] Paginate html/markdown content
|
|
322
|
+
- [X] Auto-generate Summary
|
|
323
|
+
- [X] Auto-recognize references and link accordingly
|
|
324
|
+
- [ ] Navigate to specific point in content
|
|
325
|
+
- [X] Customize options and summary menu
|
|
326
|
+
- [X] Customize header
|
|
327
|
+
- [X] CSS-theme structure
|