Commit 2d2b06e5 authored by Julie Blanc's avatar Julie Blanc

toc: replace async script (before) by handler beforeParsed

parent 076f511a
......@@ -13,29 +13,29 @@ Add the main script :
```
With paged.js, the table of content need to be generated before that paged.js fragmented the content into pages. You need to the hook `before` to call the script.
Add this code in the `head` of you html document:
With paged.js, the table of content need to be generated before that paged.js fragmented the content into pages. So, you need to register the handler `beforeParsed()` and call the table of content script inside.
Add this code in the `head` of you html document after the paged.js script:
```html
<script>
window.PagedConfig = {
before: function () {
createToc({
tocElement: '#my-toc-content',
titleElements: [ 'h1', 'h2', 'h3' ]
});
}
};
class handlers extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content){
createToc({
content: content,
tocElement: '#my-toc-content',
titleElements: [ '.mw-content-ltr h2', 'h3' ]
});
}
}
Paged.registerHandlers(handlers);
</script>
```
Additionnaly, add the `async` property to the paged.js script:
```html
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script> <!-- if you use paged.js with npm -->
<script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> <!-- if you use the online script of paged.js -->
```
The folder contain also a minimal stylesheet to add the corresponding page numbers with paged.js and add some style to the toc list:
```html
<link rel="stylesheet" type="text/css" href="css/table-of-content.css">
......@@ -46,20 +46,3 @@ The folder contain also a minimal stylesheet to add the corresponding page numbe
`titleElements`: array of the title element you want in the toc list. You can add as many as you want and the elements can be classes like `.title-1` or `.my-content h1`
## Use the script without paged.js
The script can be used without paged.js
```html
<script>
window.PagedConfig = {
before: function () {
createToc({
tocElement: '#my-toc-content',
titleElements: [ 'h1', 'h2', 'h3' ]
});
}
};
</script>
```
\ No newline at end of file
......@@ -18,35 +18,31 @@
<!-- <script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
<!-- paged.js script (with npm): -->
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<!-- createToc javascript: -->
<script async type="text/javascript" src="js/createToc.js"></script>
<script type="text/javascript" src="js/createToc.js"></script>
<!-- use createToc without paged.js: -->
<!--
<!-- register handler beforeParsed() and call createToc script -->
<script>
window.addEventListener('load', function() {
createToc({
tocElement: '#my-toc-content',
titleElements: [ '.mw-content-ltr h2', 'h3' ]
});
})
</script>
-->
class handlers extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
<!-- use createToc with paged.js: -->
<script>
window.PagedConfig = {
before: function () {
beforeParsed(content){
createToc({
content: content,
tocElement: '#my-toc-content',
titleElements: [ '.mw-content-ltr h2', 'h3' ]
});
}
};
}
Paged.registerHandlers(handlers);
</script>
</head>
......
function createToc(config){
const content = config.content;
const tocElement = config.tocElement;
const titleElements = config.titleElements;
let tocElementDiv = document.querySelector(tocElement);
let tocElementDiv = content.querySelector(tocElement);
let tocUl = document.createElement("ul");
tocUl.id = "list-toc-generated";
tocElementDiv.appendChild(tocUl);
......@@ -12,7 +13,8 @@ function createToc(config){
for(var i= 0; i < titleElements.length; i++){
let titleHierarchy = i + 1;
let titleElement = document.querySelectorAll(titleElements[i]);
let titleElement = content.querySelectorAll(titleElements[i]);
titleElement.forEach(function(element) {
......@@ -27,12 +29,13 @@ function createToc(config){
element.id = 'title-element-' + tocElementNbr;
}
let newIdElement = element.id;
});
}
// create toc list
let tocElements = document.getElementsByClassName("title-element");
let tocElements = content.querySelectorAll(".title-element");
for(var i= 0; i < tocElements.length; i++){
let tocElement = tocElements[i];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment