paginar 0.3.7 → 0.4.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 +291 -270
- package/dist/index.es.js +932 -2504
- package/dist/index.es.js.map +1 -1
- package/package.json +40 -40
package/README.md
CHANGED
|
@@ -1,179 +1,179 @@
|
|
|
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
|
-
## 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
|
-
|
|
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.4.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
|
+
## 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
102
|
// search
|
|
103
103
|
// habilita a busca no texto do capítulo atual (desativada por padrão).
|
|
104
104
|
search: true,
|
|
105
105
|
|
|
106
106
|
// 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
|
-
|
|
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
|
+
|
|
177
177
|
Ao alterar fonte, tamanho, colunas ou dimensões da janela, o leitor preserva o
|
|
178
178
|
percentual anterior e seleciona a página mais próxima no novo total. Quando a
|
|
179
179
|
posição fica exatamente entre duas páginas, a página seguinte é escolhida.
|
|
@@ -203,16 +203,37 @@ destaque suave, com cor mais forte e contorno na ocorrência atual, sem modifica
|
|
|
203
203
|
o HTML nem a distribuição das páginas. Limpar o campo remove os destaques.
|
|
204
204
|
Alterações no texto ou troca de capítulo atualizam os resultados da consulta.
|
|
205
205
|
|
|
206
|
-
|
|
206
|
+
Use **Ver trechos** para abrir um painel lateral com todas as ocorrências,
|
|
207
|
+
palavras antes/depois e o termo destacado. Clicar em um trecho navega à página.
|
|
208
|
+
Com o foco na lista, ↑/↓ percorrem os trechos; ao abrir, o foco fica no campo.
|
|
209
|
+
Para usar esse modo ao abrir a busca, configure `searchResults: 'panel'` junto
|
|
210
|
+
de `search: true`; o modo compacto continua disponível.
|
|
211
|
+
|
|
212
|
+
Para complementar a busca com outros capítulos, escute `paginar:search` e
|
|
213
|
+
injete a resposta com `reader.setSearchResults({ requestId, results })`.
|
|
214
|
+
`paginar:search-select` informa a seleção externa para sua aplicação abrir o
|
|
215
|
+
capítulo. Veja formatos, controle de respostas atrasadas e métodos no guia de
|
|
216
|
+
[integração da busca](docs/events-and-state.md#busca-painel-de-trechos-e-resultados-externos).
|
|
217
|
+
|
|
218
|
+
Exemplos: [busca compacta](demo/search/index.html),
|
|
219
|
+
[painel de trechos](demo/search/index.html?view=panel) e
|
|
220
|
+
[busca no livro com resultados externos](demo/search-book/index.html).
|
|
221
|
+
Para ajustar a aparência, consulte [cores, variáveis CSS e classes do painel](docs/search-customization.md).
|
|
207
222
|
|
|
208
223
|
## Eventos, estado e navegação por JavaScript
|
|
209
224
|
|
|
210
225
|
O componente emite eventos públicos ao mudar de página, usar o slider, abrir o
|
|
211
226
|
sumário ou as opções, trocar capítulo e alterar fonte, tamanho, colunas ou tema.
|
|
212
|
-
Também oferece `getState()`, `goToPage()`, `nextPage()` e `
|
|
227
|
+
Também oferece `getState()`, `goToPage()`, `nextPage()`, `previousPage()` e `refresh()` no
|
|
213
228
|
elemento. Todos os detalhes, nomes e formatos estão no guia de
|
|
214
229
|
[eventos e estado público](docs/events-and-state.md).
|
|
215
230
|
|
|
231
|
+
Depois de atualizar o slot e `book-content`, chame `refresh()` para recalcular
|
|
232
|
+
páginas e reler notas/referências. Campos e regiões com `data-paginar-ignore`
|
|
233
|
+
preservam suas interações de teclado/roda. No sumário, `disabled: true` ou a
|
|
234
|
+
ausência de destino mantém o título visível e o exclui da navegação sequencial.
|
|
235
|
+
Os detalhes e limites de compatibilidade estão no mesmo guia.
|
|
236
|
+
|
|
216
237
|
```js
|
|
217
238
|
const reader = document.querySelector('paginate-content')
|
|
218
239
|
|
|
@@ -224,104 +245,104 @@ reader.addEventListener('paginar:ready', () => {
|
|
|
224
245
|
console.log(reader.getState())
|
|
225
246
|
})
|
|
226
247
|
```
|
|
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
|
-
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
### Aplicando estilo no corpo do texto
|
|
251
|
+
|
|
252
|
+
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>`.
|
|
253
|
+
|
|
254
|
+
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:
|
|
255
|
+
|
|
256
|
+
```html
|
|
257
|
+
<style>
|
|
258
|
+
.page-break {
|
|
259
|
+
break-before: column;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
p {
|
|
263
|
+
text-indent: 4rem;
|
|
264
|
+
}
|
|
265
|
+
</style>
|
|
266
|
+
|
|
267
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
268
|
+
<div slot="content">
|
|
269
|
+
<p>Conteúdo de uma pagina.</p>
|
|
270
|
+
<div class="page-break"></div>
|
|
271
|
+
<p>Conteúdo da próxima página.</div>
|
|
272
|
+
</div>
|
|
273
|
+
</paginate-content>
|
|
274
|
+
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
### Aplicando estilos na interface do paginador
|
|
278
|
+
|
|
279
|
+
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.
|
|
280
|
+
|
|
281
|
+
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:
|
|
282
|
+
|
|
283
|
+
```html
|
|
284
|
+
<paginate-content id="pagination-el" book-title="Título do livro">
|
|
285
|
+
<div slot="content">
|
|
286
|
+
<p>Conteúdo de uma pagina.</p>
|
|
287
|
+
</div>
|
|
288
|
+
</paginate-content>
|
|
289
|
+
|
|
290
|
+
<script>
|
|
291
|
+
const settings = {
|
|
292
|
+
// outras opções
|
|
293
|
+
cssString: `
|
|
294
|
+
main#rootComponent {
|
|
295
|
+
transition: background-color 200ms linear;
|
|
296
|
+
}
|
|
297
|
+
`
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
301
|
+
if (paginationEl) {
|
|
302
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
303
|
+
}
|
|
304
|
+
</script>
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
-----
|
|
309
|
+
|
|
289
310
|
### Exemplos didáticos
|
|
290
|
-
|
|
311
|
+
|
|
291
312
|
Para customizações especiais, navegue pelos exemplos abaixo e inspecione o código como ele funciona.
|
|
292
313
|
|
|
293
314
|
[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
|
|
315
|
+
|
|
316
|
+
[Uso básico](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1.html)
|
|
317
|
+
|
|
318
|
+
[Mostrar logo no cabeçalho](https://educkf.github.io/paginar-exemplos/exemplo1/exemplo1-com-logo-no-cabecalho.html)
|
|
319
|
+
|
|
320
|
+
[Com sumário](https://educkf.github.io/paginar-exemplos/exemplo2/exemplo2-cap1.html)
|
|
321
|
+
|
|
322
|
+
[Fontes especiais p/ menu de opções](https://educkf.github.io/paginar-exemplos/exemplo3/exemplo3.html)
|
|
323
|
+
|
|
324
|
+
Notas de rodapé (em breve)
|
|
325
|
+
|
|
326
|
+
Referências bibliográficas (em breve)
|
|
327
|
+
|
|
328
|
+
Customizar cores (em breve)
|
|
329
|
+
|
|
330
|
+
Customizar apresentaçào de páginas (abertura, cores de fundo, quebra de pagina etc. Em breve)
|
|
331
|
+
|
|
332
|
+
-----
|
|
333
|
+
|
|
334
|
+
### Exemplo real em uso (com alguma complexidade)
|
|
335
|
+
|
|
336
|
+
[link](https://sabia.pub/book/okabayashi-uma-perspectiva-decolonial-para-o-design-no-brasil/read/haDxQvbtIIX4Hh5cOyee/content)
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
### Desenvolvimento
|
|
340
|
+
|
|
341
|
+
- [X] Custom Component (or Web Component) to be used in any environment
|
|
342
|
+
- [X] Paginate html/markdown content
|
|
343
|
+
- [X] Auto-generate Summary
|
|
344
|
+
- [X] Auto-recognize references and link accordingly
|
|
345
|
+
- [ ] Navigate to specific point in content
|
|
346
|
+
- [X] Customize options and summary menu
|
|
347
|
+
- [X] Customize header
|
|
348
|
+
- [X] CSS-theme structure
|