prepare-pocket-operator-manual-for-printing.js

(function () {
  const originalPrimaryColor = document.querySelector('.xl.light').style.color; //'rgb(178, 178, 178)';
  const secondaryColor = [...document.querySelectorAll('path')]
    .map(c => c.computedStyleMap().get('stroke').toString())
    .find(f => f != 'none' && f != originalPrimaryColor); //'rgb(126, 95, 50)';
  const originalFadedColor = document.querySelector('.lc.s').style.color; //'rgb(229, 229, 229)';
  const backgroundColor = document.body.style.backgroundColor; // "rgb(125, 90, 37)"

  const newPrimaryColor = 'rgb(0, 0, 0)';
  const newSecondaryColor = 'rgb(192, 192, 192)';
  const newBackgroundColor = 'rgb(255, 255, 255)';

  const replacements = [
    [originalPrimaryColor, newPrimaryColor],
    [secondaryColor, newSecondaryColor],
    [originalFadedColor, newPrimaryColor],
  ].map(([original, replacement]) => [
    original,
    new RegExp(original.replace(/\(/g, '\\(').replace(/\)/g, '\\)'), 'g'),
    replacement,
  ]);

  document.body.style.backgroundColor = newBackgroundColor;

  replacements.forEach(([original, _, replaced]) =>
    document
      .querySelectorAll(`[style="color: ${original};"]`)
      .forEach(e => (e.style.color = replaced))
  );

  const rulez = Array.from({length: document.styleSheets.length}, (_, i) =>
    Array.from({length: document.styleSheets[i].cssRules.length}, (_, j) => {
      const rule = document.styleSheets[i].cssRules[j];
      if (
        rule.type === CSSRule.STYLE_RULE &&
        replacements.some(([_o, re, _r]) => rule.cssText.match(re))
      ) {
        const newRule = replacements.reduce(
          (rule, [_, re, replacement]) => rule.replace(re, replacement),
          rule.cssText
        );
        document.styleSheets[i].insertRule(newRule, j);
        document.styleSheets[i].removeRule(j + 1);
        return newRule;
      }
    }).filter(r => r != null)
  ).flat();

  [...document.querySelectorAll('path')].forEach(c => {
    replacements.forEach(([original, _, replacement], rule) => {
      ['stroke', 'fill'].forEach(attr => {
        const value = c.computedStyleMap().get(attr).toString();
        if (value === original) {
          c.style[attr] = replacement;
        }
      });
    });
  });

  {
    [...document.querySelectorAll('.page > .box')].forEach(e => {
      e.style.breakInside = 'avoid-page';
    });

    let title = document.querySelector('.page > .box > .txt > span > .l.light');
    while (title != null) {
      let eee = title.parentElement.parentElement.parentElement;
      const clearfix = eee.parentElement.insertBefore(
        document.createElement('div'),
        eee
      );
      clearfix.style.clear = 'both';
      const container = eee.parentElement.insertBefore(
        document.createElement('div'),
        eee
      );
      container.style.breakInside = 'avoid-page';
      // container.style.position = 'relative';
      let next = eee.nextElementSibling;
      do {
        eee.parentElement.removeChild(eee);
        container.appendChild(eee);
        eee.style.breakBefore = 'avoid-page';
        eee.style.breakInside = 'avoid-page';
        eee.style.breakAfter = 'avoid-page';
        eee.style.float = 'none';
        eee.style.display = 'flex';
        [...eee.children].forEach(child => {
          child.style.float = 'none';
        });
        eee = next;
        next = next?.nextElementSibling;
      } while (
        eee != null &&
        eee.querySelector('.txt > span > .l.light')?.parentElement
          ?.parentElement?.parentElement !== eee
      );
      title = document.querySelector('.page > .box > .txt > span > .l.light');
    }
  }

  [...document.querySelectorAll('.page > .box')].forEach(e => {
    e.style.breakInside = 'avoid-page';
  });

  const footer = document.querySelector('.te-layer');
  if (footer != null) {
    footer.parentElement.removeChild(footer);
  }
})();