Как сделать так, чтобы содержимое моей задней страницы печаталось на последней странице буклета с помощью функции paged. js

Question

Учитывая буклет, напечатанный из сложенных листов, номер задней страницы всегда будет кратным 4. Если не будет кратного 4 страниц содержимого, задняя страница будет внутри буклета.

Мой проект использует Paged. js для разметки и нумерации страниц. (Это очень хорошо!) У него есть селектор , который обрабатывает первую страницу , но не для последней страницы.

Как вставить пустые страницы в конец документа, который вы sh содержание последней страницы на последней странице документа?

Answer 1

Буду рад, если кто-то более компетентный, чем я, сможет предложить улучшенную версию этого. Я подозреваю, что есть много, что breakToken et c. можно исправить. Тем не менее, это работает для меня:

Unpaginated html содержит div с классом .back-page. Стратегия здесь состоит в том, чтобы посмотреть, есть ли у номера страницы, на котором находится div задней страницы, номер страницы, кратный 4. Если нет, вставьте большой пустой div.

JS

window.PagedConfig = { auto: false };

document.addEventListener("DOMContentLoaded", function () {
  class MyHandler extends Paged.Handler {
    constructor(chunker, polisher, caller) {
      super(chunker, polisher, caller);
    }

    beforeParsed(content) {}
    afterParsed(parsed) {}
    beforePageLayout(page) {}

    afterPageLayout(pageFragment, page, breakToken) {
      bumpBackPageContentToRealBackPage(pageFragment);
    }

    afterRendered(pages) {}
  }
  Paged.registerHandlers(MyHandler);

  setTimeout(() => window.PagedPolyfill.preview(), 2000); // TODO: swap this for the promise version
});

function bumpBackPageContentToRealBackPage(pageFragment) {
  let backPage = pageFragment.querySelector(".back-page");
  if (backPage) {
    let pageNumberStr = backPage.closest(".pagedjs_page").dataset.pageNumber;
    let pageNumber = parseInt(pageNumberStr, 10);
    console.log("last page is on", pageNumber);
    if (pageNumber % 4 !== 0) {
      console.log("last page needs a nudge");
      let pageDiv = document.createElement("div");
      pageDiv.classList.add("end-vacat-page");
      backPage.parentElement.insertBefore(pageDiv, backPage);
    } else {
      console.log("All is well: last page will print on the back page");
    }
  }
}

CSS

.back-page {
  break-before: left;
}
.end-vacat-page {
  page-break-before: always;
  height: var(--pagedjs-pagebox-height);
}

Это запускает перекомпоновку, а затем, потому что задняя страница должна быть на левой странице из-за одного из правил многостраничного выгружаемого. js, она сталкивается снова, пока не появится на левой странице.