Commit 1a493e67 authored by Guillaume's avatar Guillaume

resolves #214 fix page counter

parent 58b2c9ea
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>target-count: counter-increment-page</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
@bottom-left{
content: counter(page);
}
}
@page:first {
counter-increment: page -1;
@bottom-left {
content: none;
}
}
section {
break-before: page;
}
p {
line-height: 22px;
}
a {
text-decoration: none;
color: currentColor;
}
nav a[href]::after {
content: target-counter(attr(href), page);
float: right;
}
/* interface */
@media screen {
body {
background: whitesmoke;
}
.pagedjs_page {
background: white;
margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_pages {
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
</head>
<body>
<section>
<nav>
<h2>Table of contents</h2>
<ul>
<li><a href="#chap1">Lorem ipsum dolor sit amet</a></li>
</ul>
</nav>
</section>
<section>
<h1 id="chap1">Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
<p>
Nulla dignissim pellentesque ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.
</p>
<p>
Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel.
</p>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum.
</p>
<p>
Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla.
</p>
</section>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("counter-increment-negative-page", () => {
let page;
beforeAll(async () => {
page = await loadPage("target/target-counter/counter-increment-negative-page.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("first page should have a page increment of -1", async () => {
const counterIncrement = await page.$eval("[data-page-number='1']", (element) => window.getComputedStyle(element).counterIncrement);
expect(counterIncrement).toEqual("page -1");
});
if (!DEBUG) {
it("should create a pdf", async () => {
const pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(4);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>target-count: counter-increment-page</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
@bottom-left{
content: counter(page);
}
}
@page cover {
counter-increment: page 0;
@bottom-left {
content: none;
}
}
.cover {
page: cover;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
break-after: page;
align-items: flex-end;
}
section {
break-before: page;
}
p {
line-height: 22px;
}
a {
text-decoration: none;
color: currentColor;
}
nav a[href]::after {
content: target-counter(attr(href), page);
float: right;
}
/* interface */
@media screen {
body {
background: whitesmoke;
}
.pagedjs_page {
background: white;
margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_pages {
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
</head>
<body>
<div class="cover">
<h1>Cover page</h1>
</div>
<section>
<nav>
<h2>Table of contents</h2>
<ul>
<li><a href="#chap1">Lorem ipsum dolor sit amet</a></li>
</ul>
</nav>
</section>
<section>
<h1 id="chap1">Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
<p>
Nulla dignissim pellentesque ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.
</p>
<p>
Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel.
</p>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum.
</p>
<p>
Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla.
</p>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>target-count: counter-increment-page</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
counter-increment: page 2;
@bottom-left{
content: counter(page);
}
}
section {
break-before: page;
}
p {
line-height: 22px;
}
a {
text-decoration: none;
color: currentColor;
}
nav a[href]::after {
content: target-counter(attr(href), page);
float: right;
}
/* interface */
@media screen {
body {
background: whitesmoke;
}
.pagedjs_page {
background: white;
margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_pages {
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
</head>
<body>
<section>
<nav>
<h2>Table of contents</h2>
<ul>
<li><a href="#chap1">Lorem ipsum dolor sit amet</a></li>
</ul>
</nav>
</section>
<section>
<h1 id="chap1">Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
<p>
Nulla dignissim pellentesque ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.
</p>
<p>
Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel.
</p>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum.
</p>
<p>
Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla.
</p>
</section>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("counter-increment-positive-page", () => {
let page;
beforeAll(async () => {
page = await loadPage("target/target-counter/counter-increment-positive-page.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("all pages should have a page increment of 2", async () => {
const firstPageCounterIncrement = await page.$eval("[data-page-number='1']", (element) => window.getComputedStyle(element).counterIncrement);
const secondPageCounterIncrement = await page.$eval("[data-page-number='2']", (element) => window.getComputedStyle(element).counterIncrement);
const thirdPageCounterIncrement = await page.$eval("[data-page-number='3']", (element) => window.getComputedStyle(element).counterIncrement);
const fourthPageCounterIncrement = await page.$eval("[data-page-number='4']", (element) => window.getComputedStyle(element).counterIncrement);
expect(firstPageCounterIncrement).toEqual("page 2");
expect(secondPageCounterIncrement).toEqual("page 2");
expect(thirdPageCounterIncrement).toEqual("page 2");
expect(fourthPageCounterIncrement).toEqual("page 2");
});
if (!DEBUG) {
it("should create a pdf", async () => {
const pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(4);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>target-count: counter-increment-page</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
@bottom-left{
content: counter(page);
}
}
@page cover {
counter-increment: page 0;
@bottom-left {
content: none;
}
}
.cover {
page: cover;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
break-after: page;
align-items: flex-end;
}
section {
break-before: page;
}
p {
line-height: 22px;
}
a {
text-decoration: none;
color: currentColor;
}
nav a[href]::after {
content: target-counter(attr(href), page);
float: right;
}
/* interface */
@media screen {
body {
background: whitesmoke;
}
.pagedjs_page {
background: white;
margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_pages {
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
</head>
<body>
<div class="cover">
<h1>Cover page</h1>
</div>
<section>
<nav>
<h2>Table of contents</h2>
<ul>
<li><a href="#chap1">Lorem ipsum dolor sit amet</a></li>
</ul>
</nav>
</section>
<section>
<h1 id="chap1">Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
<p>
Nulla dignissim pellentesque ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel sapien at convallis. Maecenas sollicitudin quis justo non varius.
</p>
<p>
Maecenas arcu massa, egestas vel est nec, mollis venenatis tortor. Ut eu finibus libero. Phasellus pharetra ante a purus ornare, eget facilisis sem ultricies. Etiam tincidunt feugiat erat, eget hendrerit turpis ullamcorper quis. Fusce finibus porttitor nisi sed blandit. Nunc libero erat, vehicula ut tincidunt quis, maximus vitae eros. Donec tristique urna bibendum, mattis nisl vel, dignissim nisl. Duis tincidunt eros nec volutpat scelerisque. Phasellus id malesuada nulla. Duis aliquam mi non malesuada suscipit. Curabitur pretium nisl eu tortor tempus, et sollicitudin quam iaculis. Ut venenatis eros ligula, in ornare eros facilisis vel.
</p>
<p>
Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non. Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id felis at nulla mollis bibendum.
</p>
<p>
Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla.
</p>
</section>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("counter-increment-zero-page", () => {
let page;
beforeAll(async () => {
page = await loadPage("target/target-counter/counter-increment-zero-page.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("cover page (first) should have a page increment of 0", async () => {
const counterIncrement = await page.$eval("[data-page-number='1']", (element) => window.getComputedStyle(element).counterIncrement);
expect(counterIncrement).toEqual("page 0");
});
if (!DEBUG) {
it("should create a pdf", async () => {
const pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(5);
});
}
});
......@@ -3,13 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
targer-counter
</title>
<title>target-counter</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
......@@ -24,7 +21,6 @@
}
}
section {
break-before: page;
}
......@@ -55,15 +51,10 @@
#ref{
color: red;
}
</style>
<style>
/* interface */
@media screen {
body {
......@@ -90,9 +81,6 @@
}
}
</style>
</head>
<body>
......
import Handler from "../handler";
import { UUID, attr, querySelectorEscape } from "../../utils/utils";
import {attr, querySelectorEscape, UUID} from "../../utils/utils";
import csstree from "css-tree";
class TargetCounters extends Handler {
......@@ -58,7 +58,7 @@ class TargetCounters extends Handler {
variable: variable
};
});
// Replace with counter
funcNode.name = "counter";
funcNode.children = new csstree.List();
......@@ -80,7 +80,7 @@ class TargetCounters extends Handler {
let target = this.counterTargets[name];
let split = target.selector.split("::");
let query = split[0];
let queried = chunker.pagesArea.querySelectorAll(query + ":not([data-" + target.variable + "])");
queried.forEach((selected, index) => {
......@@ -102,16 +102,19 @@ class TargetCounters extends Handler {
if (target.counter === "page") {
let pages = chunker.pagesArea.querySelectorAll(".pagedjs_page");
let pg = 0;
for (var i = 0; i < pages.length; i++) {
for (let i = 0; i < pages.length; i++) {
let styles = window.getComputedStyle(pages[i]);
let reset = styles["counter-reset"].replace("page", "").trim();
let increment = styles["counter-increment"].replace("page", "").trim();
if (reset !== "none") {
pg = parseInt(reset);
}
pg += 1;
if (increment !== "none") {
pg += parseInt(increment);
}
if (pages[i].contains( element )){
if (pages[i].contains(element)) {
break;
}
}
......
......@@ -51,10 +51,9 @@ class Counters extends Handler {
}
handleIncrement(declaration, rule) {
let identifier = declaration.value.children.first();
let number = declaration.value.children.getSize() > 1
&& declaration.value.children.last().value;
let name = identifier && identifier.name;
const identifier = declaration.value.children.first();
const number = declaration.value.children.getSize() > 1 ? declaration.value.children.last().value : 1;
const name = identifier && identifier.name;
if (name === "page" || name.indexOf("target-counter-") === 0) {
return;
......@@ -71,7 +70,7 @@ class Counters extends Handler {
return counter.increments[selector] = {
selector: selector,
number: number || 1
number
};
}
......@@ -125,7 +124,7 @@ class Counters extends Handler {
// Find elements for increments
let incrementElements = parsed.querySelectorAll(increment.selector);
// Add counter data
for (var i = 0; i < incrementElements.length; i++) {
for (let i = 0; i < incrementElements.length; i++) {
incrementElements[i].setAttribute("data-counter-"+ counter.name +"-increment", increment.number);
incrementElements[i].setAttribute("data-counter-increment", counter.name);
}
......@@ -147,8 +146,8 @@ class Counters extends Handler {
}
addCounterValues(parsed, counter) {
let counterName = counter.name;
let elements = parsed.querySelectorAll("[data-counter-"+ counterName +"-reset], [data-counter-"+ counterName +"-increment]");
const counterName = counter.name;
const elements = parsed.querySelectorAll("[data-counter-"+ counterName +"-reset], [data-counter-"+ counterName +"-increment]");
let count = 0;
let element;
......@@ -156,7 +155,7 @@ class Counters extends Handler {
let resetValue, incrementValue, resetDelta;
let incrementArray;
for (var i = 0; i < elements.length; i++) {
for (let i = 0; i < elements.length; i++) {
element = elements[i];
resetDelta = 0;
incrementArray = [];
......@@ -194,16 +193,16 @@ class Counters extends Handler {
incrementCounterForElement(element, incrementArray) {
if (!element || !incrementArray || incrementArray.length === 0) return;
let ref = element.dataset.ref;
let prevIncrements = Array.from(this.styleSheet.cssRules).filter((rule) => {
const ref = element.dataset.ref;
const prevIncrements = Array.from(this.styleSheet.cssRules).filter((rule) => {
return rule.selectorText === `[data-ref="${element.dataset.ref}"]:not([data-split-from])`
&& rule.style[0] === "counter-increment";
});
let increments = [];
const increments = [];
for (let styleRule of prevIncrements) {