paginar 0.3.7 → 0.5.0
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 +317 -270
- package/dist/index.es.js +9 -12799
- package/dist/index.es.js.map +1 -1
- package/dist/index.vue-external.es.js +9 -0
- package/dist/index.vue-external.es.js.map +1 -0
- package/dist/style.css +1 -1178
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,179 +1,205 @@
|
|
|
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.
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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.5.0/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
|
+
### Carregamento mais rápido
|
|
48
|
+
|
|
49
|
+
O leitor só começa a buscar o primeiro arquivo do `book-content` e as fontes de
|
|
50
|
+
`fontsOptions` depois que o script é executado. A página hospedeira pode antecipar
|
|
51
|
+
esses downloads no `<head>`; o `crossorigin` é necessário para que o `fetch` do
|
|
52
|
+
leitor reaproveite o arquivo pré-carregado:
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<link rel="preload" href="/capitulos/capitulo-1.html" as="fetch" crossorigin>
|
|
56
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
57
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Imagens no conteúdo devem declarar `width` e `height` (ou `aspect-ratio` no CSS)
|
|
61
|
+
para reservar espaço antes de carregar. O leitor repagina sozinho quando fontes
|
|
62
|
+
ou imagens mudam o tamanho do texto, mas reservar o espaço evita que o total de
|
|
63
|
+
páginas mude durante a leitura. Capítulos muito longos custam mais para paginar;
|
|
64
|
+
dividi-los em arquivos menores reduz o tempo até a primeira página.
|
|
65
|
+
|
|
66
|
+
Aplicações que já usam Vue 3.5 ou superior com um bundler podem importar
|
|
67
|
+
`paginar/dist/index.vue-external.es.js`. Esse arquivo registra o mesmo
|
|
68
|
+
`<paginate-content>`, mas importa `vue` da aplicação em vez de embutir o runtime,
|
|
69
|
+
reduzindo o download para cerca da metade. Use-o apenas quando `vue` estiver
|
|
70
|
+
disponível como módulo (bundler ou import map); o arquivo padrão continua sendo
|
|
71
|
+
`dist/index.es.js`.
|
|
72
|
+
|
|
73
|
+
## Customização
|
|
74
|
+
|
|
75
|
+
### Parametros de customização disponíveis
|
|
76
|
+
|
|
77
|
+
O web component disponibiliza algumas interfaces de customização por via de um objeto a ser linkado ao web component, conforme o exemplo:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<paginate-content id="pagination-el">
|
|
81
|
+
<div slot="content">
|
|
82
|
+
<p>Conteúdo de uma pagina.</p>
|
|
83
|
+
</div>
|
|
84
|
+
</paginate-content>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
const settings = {
|
|
88
|
+
fontSize: 19, // number
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
92
|
+
if (paginationEl) {
|
|
93
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
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:
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
const settings = {
|
|
102
|
+
// fontSize
|
|
103
|
+
// tamanho da fonte
|
|
104
|
+
// tipagem: número
|
|
105
|
+
fontSize: 19,
|
|
106
|
+
|
|
107
|
+
// textFont
|
|
108
|
+
// designa a fonte base a ser usada no corpo do texto
|
|
109
|
+
textFont: 'Times New Roman',
|
|
110
|
+
|
|
111
|
+
// baseFont
|
|
112
|
+
// designa a fonte padrão para a interface do paginador como um todo
|
|
113
|
+
baseFont: '"Inter", sans-serif',
|
|
114
|
+
|
|
115
|
+
// homeUrl
|
|
116
|
+
// URL a ser direcionado pelo botao de home ao lado do sumário.
|
|
117
|
+
// se nao for adicionada a opcao aqui, o botao de home nao aparecerá
|
|
118
|
+
homeUrl: 'https://sabia.pub',
|
|
119
|
+
|
|
120
|
+
// bookTitle
|
|
121
|
+
// titulo do livro, a ser mostrado no cabeçalho do paginador
|
|
122
|
+
bookTitle: 'A Tale of Two Cities',
|
|
123
|
+
|
|
124
|
+
// chapterTitle
|
|
125
|
+
// titulo do capítulo, a ser mostrado no cabeçalho do paginador
|
|
126
|
+
chapterTitle: 'Chapter One - The Period',
|
|
127
|
+
|
|
102
128
|
// search
|
|
103
129
|
// habilita a busca no texto do capítulo atual (desativada por padrão).
|
|
104
130
|
search: true,
|
|
105
131
|
|
|
106
132
|
// readingProgress
|
|
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
|
-
|
|
133
|
+
// disponibiliza no menu a retomada da leitura e salva a posição por percentual.
|
|
134
|
+
// use um id estável e exclusivo para evitar misturar o progresso entre obras.
|
|
135
|
+
// enabled define o estado inicial; a escolha posterior do leitor prevalece.
|
|
136
|
+
readingProgress: {
|
|
137
|
+
id: 'a-tale-of-two-cities',
|
|
138
|
+
enabled: true
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
// fontsOptions
|
|
142
|
+
// customização da lista de fontes disponíveis para o usuário customizar
|
|
143
|
+
// a tela de leitura. Deve ser uma lista de até 4 opções, com o nome
|
|
144
|
+
// da fonte, o label a ser apresentado para o leitur, se é default ou nao
|
|
145
|
+
// e um link de onde essa fonte deve ser importada, caso não seja uma
|
|
146
|
+
// fonte de sistema
|
|
147
|
+
fontsOptions: [
|
|
148
|
+
{
|
|
149
|
+
label: 'Times New Roman',
|
|
150
|
+
name: 'TimesNewRoman, Times New Roman, Times, Baskerville, Georgia,serif',
|
|
151
|
+
defaultTextFont: true // fonte padrão do corpo do texto
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
label: 'Inter',
|
|
155
|
+
name: '"Inter", sans-serif',
|
|
156
|
+
link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap',
|
|
157
|
+
defaultBaseFont: true // fonte padrão da interface de paginação
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
label: 'Open Dyslexic',
|
|
161
|
+
name: '"Open-Dyslexic", sans-serif',
|
|
162
|
+
link: 'https://fonts.cdnfonts.com/css/open-dyslexic'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
label: 'Atkinson Hyperlegible',
|
|
166
|
+
name: 'Atkinson Hyperlegible',
|
|
167
|
+
link: 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
|
168
|
+
}
|
|
169
|
+
],
|
|
170
|
+
|
|
171
|
+
// cssString
|
|
172
|
+
// possibilita que CSS seja enxertado no escopo do web component
|
|
173
|
+
// para a customização da interface em si (conceito explicado abaixo,
|
|
174
|
+
// no item de "Aplicando estilos na interface do paginador")
|
|
175
|
+
// no exemplo abaixo, mudamos a cor do cabeçalho para transparente
|
|
176
|
+
// e o padding do cabeçalho. Existem diversas classes e ids auxiliares na
|
|
177
|
+
// interface, que podem ser explorados pelo inspetor de elementos do
|
|
178
|
+
// navegador.
|
|
179
|
+
// no segundo estilo, escondemos o menu de "Notas de rodapé" do menu
|
|
180
|
+
// de opções
|
|
181
|
+
cssString: `
|
|
182
|
+
header#component-header {
|
|
183
|
+
background-color: transparent;
|
|
184
|
+
padding: 5px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
#footnotes-button {
|
|
188
|
+
display: none;
|
|
189
|
+
}
|
|
190
|
+
`
|
|
191
|
+
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
`readingProgress` é opcional. Quando ausente ou `false`, o componente não salva
|
|
196
|
+
nem restaura posições e não mostra o controle **Retomar leitura**. Quando o objeto
|
|
197
|
+
é informado, `enabled` assume `true` se omitido. O progresso fica somente no
|
|
198
|
+
`localStorage` da origem atual, não é sincronizado entre dispositivos e é isolado
|
|
199
|
+
por obra e contexto de capítulo. Sem `id`, o componente usa o título e o caminho
|
|
200
|
+
da página como alternativa; para publicações duradouras, prefira sempre um `id`
|
|
201
|
+
explícito e estável.
|
|
202
|
+
|
|
177
203
|
Ao alterar fonte, tamanho, colunas ou dimensões da janela, o leitor preserva o
|
|
178
204
|
percentual anterior e seleciona a página mais próxima no novo total. Quando a
|
|
179
205
|
posição fica exatamente entre duas páginas, a página seguinte é escolhida.
|
|
@@ -203,16 +229,37 @@ destaque suave, com cor mais forte e contorno na ocorrência atual, sem modifica
|
|
|
203
229
|
o HTML nem a distribuição das páginas. Limpar o campo remove os destaques.
|
|
204
230
|
Alterações no texto ou troca de capítulo atualizam os resultados da consulta.
|
|
205
231
|
|
|
206
|
-
|
|
232
|
+
Use **Ver trechos** para abrir um painel lateral com todas as ocorrências,
|
|
233
|
+
palavras antes/depois e o termo destacado. Clicar em um trecho navega à página.
|
|
234
|
+
Com o foco na lista, ↑/↓ percorrem os trechos; ao abrir, o foco fica no campo.
|
|
235
|
+
Para usar esse modo ao abrir a busca, configure `searchResults: 'panel'` junto
|
|
236
|
+
de `search: true`; o modo compacto continua disponível.
|
|
237
|
+
|
|
238
|
+
Para complementar a busca com outros capítulos, escute `paginar:search` e
|
|
239
|
+
injete a resposta com `reader.setSearchResults({ requestId, results })`.
|
|
240
|
+
`paginar:search-select` informa a seleção externa para sua aplicação abrir o
|
|
241
|
+
capítulo. Veja formatos, controle de respostas atrasadas e métodos no guia de
|
|
242
|
+
[integração da busca](docs/events-and-state.md#busca-painel-de-trechos-e-resultados-externos).
|
|
243
|
+
|
|
244
|
+
Exemplos: [busca compacta](demo/search/index.html),
|
|
245
|
+
[painel de trechos](demo/search/index.html?view=panel) e
|
|
246
|
+
[busca no livro com resultados externos](demo/search-book/index.html).
|
|
247
|
+
Para ajustar a aparência, consulte [cores, variáveis CSS e classes do painel](docs/search-customization.md).
|
|
207
248
|
|
|
208
249
|
## Eventos, estado e navegação por JavaScript
|
|
209
250
|
|
|
210
251
|
O componente emite eventos públicos ao mudar de página, usar o slider, abrir o
|
|
211
252
|
sumário ou as opções, trocar capítulo e alterar fonte, tamanho, colunas ou tema.
|
|
212
|
-
Também oferece `getState()`, `goToPage()`, `nextPage()` e `
|
|
253
|
+
Também oferece `getState()`, `goToPage()`, `nextPage()`, `previousPage()` e `refresh()` no
|
|
213
254
|
elemento. Todos os detalhes, nomes e formatos estão no guia de
|
|
214
255
|
[eventos e estado público](docs/events-and-state.md).
|
|
215
256
|
|
|
257
|
+
Depois de atualizar o slot e `book-content`, chame `refresh()` para recalcular
|
|
258
|
+
páginas e reler notas/referências. Campos e regiões com `data-paginar-ignore`
|
|
259
|
+
preservam suas interações de teclado/roda. No sumário, `disabled: true` ou a
|
|
260
|
+
ausência de destino mantém o título visível e o exclui da navegação sequencial.
|
|
261
|
+
Os detalhes e limites de compatibilidade estão no mesmo guia.
|
|
262
|
+
|
|
216
263
|
```js
|
|
217
264
|
const reader = document.querySelector('paginate-content')
|
|
218
265
|
|
|
@@ -224,104 +271,104 @@ reader.addEventListener('paginar:ready', () => {
|
|
|
224
271
|
console.log(reader.getState())
|
|
225
272
|
})
|
|
226
273
|
```
|
|
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
|
-
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
### Aplicando estilo no corpo do texto
|
|
277
|
+
|
|
278
|
+
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>`.
|
|
279
|
+
|
|
280
|
+
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:
|
|
281
|
+
|
|
282
|
+
```html
|
|
283
|
+
<style>
|
|
284
|
+
.page-break {
|
|
285
|
+
break-before: column;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
p {
|
|
289
|
+
text-indent: 4rem;
|
|
290
|
+
}
|
|
291
|
+
</style>
|
|
292
|
+
|
|
293
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
294
|
+
<div slot="content">
|
|
295
|
+
<p>Conteúdo de uma pagina.</p>
|
|
296
|
+
<div class="page-break"></div>
|
|
297
|
+
<p>Conteúdo da próxima página.</div>
|
|
298
|
+
</div>
|
|
299
|
+
</paginate-content>
|
|
300
|
+
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Aplicando estilos na interface do paginador
|
|
304
|
+
|
|
305
|
+
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.
|
|
306
|
+
|
|
307
|
+
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:
|
|
308
|
+
|
|
309
|
+
```html
|
|
310
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
311
|
+
<div slot="content">
|
|
312
|
+
<p>Conteúdo de uma pagina.</p>
|
|
313
|
+
</div>
|
|
314
|
+
</paginate-content>
|
|
315
|
+
|
|
316
|
+
<script>
|
|
317
|
+
const settings = {
|
|
318
|
+
// outras opções
|
|
319
|
+
cssString: `
|
|
320
|
+
main#rootComponent {
|
|
321
|
+
transition: background-color 200ms linear;
|
|
322
|
+
}
|
|
323
|
+
`
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
327
|
+
if (paginationEl) {
|
|
328
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
329
|
+
}
|
|
330
|
+
</script>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
-----
|
|
335
|
+
|
|
289
336
|
### Exemplos didáticos
|
|
290
|
-
|
|
337
|
+
|
|
291
338
|
Para customizações especiais, navegue pelos exemplos abaixo e inspecione o código como ele funciona.
|
|
292
339
|
|
|
293
340
|
[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
|
|
341
|
+
|
|
342
|
+
[Uso básico](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1.html)
|
|
343
|
+
|
|
344
|
+
[Mostrar logo no cabeçalho](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1-com-logo-no-cabecalho.html)
|
|
345
|
+
|
|
346
|
+
[Com sumário](https://educkf.github.io/paginar-exemplos/exemplo2/exemplo2-cap1.html)
|
|
347
|
+
|
|
348
|
+
[Fontes especiais p/ menu de opções](https://educkf.github.io/paginar-exemplos/exemplo3/exemplo3.html)
|
|
349
|
+
|
|
350
|
+
Notas de rodapé (em breve)
|
|
351
|
+
|
|
352
|
+
Referências bibliográficas (em breve)
|
|
353
|
+
|
|
354
|
+
Customizar cores (em breve)
|
|
355
|
+
|
|
356
|
+
Customizar apresentaçào de páginas (abertura, cores de fundo, quebra de pagina etc. Em breve)
|
|
357
|
+
|
|
358
|
+
-----
|
|
359
|
+
|
|
360
|
+
### Exemplo real em uso (com alguma complexidade)
|
|
361
|
+
|
|
362
|
+
[link](https://sabia.pub/book/okabayashi-uma-perspectiva-decolonial-para-o-design-no-brasil/read/haDxQvbtIIX4Hh5cOyee/content)
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
### Desenvolvimento
|
|
366
|
+
|
|
367
|
+
- [X] Custom Component (or Web Component) to be used in any environment
|
|
368
|
+
- [X] Paginate html/markdown content
|
|
369
|
+
- [X] Auto-generate Summary
|
|
370
|
+
- [X] Auto-recognize references and link accordingly
|
|
371
|
+
- [ ] Navigate to specific point in content
|
|
372
|
+
- [X] Customize options and summary menu
|
|
373
|
+
- [X] Customize header
|
|
374
|
+
- [X] CSS-theme structure
|