print_header_footer_template_page.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  5. <style>
  6. body {
  7. display: flex;
  8. flex-direction: column;
  9. margin: 0;
  10. }
  11. #header,
  12. #footer {
  13. display: flex;
  14. flex: none;
  15. }
  16. #header {
  17. align-items: flex-start;
  18. padding-top: 0.4cm;
  19. }
  20. #footer {
  21. align-items: flex-end;
  22. padding-bottom: 0.4cm;
  23. }
  24. #content {
  25. flex: auto;
  26. }
  27. .left {
  28. flex: none;
  29. padding-left: 0.7cm;
  30. padding-right: 0.1cm;
  31. }
  32. .center {
  33. flex: auto;
  34. padding-left: 0.7cm;
  35. padding-right: 0.7cm;
  36. text-align: center;
  37. }
  38. .right {
  39. flex: none;
  40. /* historically does not account for RTL */
  41. padding-left: 0.1cm;
  42. padding-right: 0.7cm;
  43. }
  44. .grow {
  45. flex: auto;
  46. }
  47. .text {
  48. font-size: 8px;
  49. overflow: hidden;
  50. text-overflow: ellipsis;
  51. white-space: nowrap;
  52. }
  53. </style>
  54. <script>
  55. function getComputedStyleAsFloat(style, value) {
  56. return parseFloat(style.getPropertyValue(value).slice(0, -2));
  57. }
  58. function elementIntersects(element, topPos, bottomPos, leftPos, rightPos) {
  59. const rect = element.getBoundingClientRect();
  60. const style = window.getComputedStyle(element);
  61. // Only consider the size of |element|, so remove the padding from |rect|.
  62. // The padding is used for positioning.
  63. rect.top += getComputedStyleAsFloat(style, 'padding-top');
  64. rect.bottom -= getComputedStyleAsFloat(style, 'padding-bottom');
  65. rect.left += getComputedStyleAsFloat(style, 'padding-left');
  66. rect.right -= getComputedStyleAsFloat(style, 'padding-right');
  67. return leftPos < rect.right && rightPos > rect.left && topPos < rect.bottom &&
  68. bottomPos > rect.top;
  69. }
  70. function setupHeaderFooterTemplate(options) {
  71. const body = document.querySelector('body');
  72. const header = document.querySelector('#header');
  73. const footer = document.querySelector('#footer');
  74. body.style.width = `${options.width}px`;
  75. body.style.height = `${options.height}px`;
  76. header.style.height = `${options.topMargin}px`;
  77. footer.style.height = `${options.bottomMargin}px`;
  78. const topMargin = options.topMargin;
  79. const bottomMargin = options.height - options.bottomMargin;
  80. const leftMargin = options.leftMargin;
  81. const rightMargin = options.width - options.rightMargin;
  82. header.innerHTML = options['headerTemplate'] || `
  83. <div class='date text left'></div>
  84. <div class='title text center'></div>`;
  85. footer.innerHTML = options['footerTemplate'] || `
  86. <div class='url text left grow'></div>
  87. <div class='text right'>
  88. <span class='pageNumber'></span>/<span class='totalPages'></span>
  89. </div>`;
  90. const date = new Date(options.date);
  91. const formatter =
  92. new Intl.DateTimeFormat(
  93. navigator.languages[0],
  94. { dateStyle: 'short', timeStyle: 'short' });
  95. options.date = formatter.format(date);
  96. for (const cssClass of ['date', 'title', 'url', 'pageNumber', 'totalPages']) {
  97. for (const element of document.querySelectorAll(`.${cssClass}`)) {
  98. element.textContent = options[cssClass];
  99. }
  100. }
  101. for (const element of document.querySelectorAll(`.text`)) {
  102. if (options.isRtl &&
  103. !element.classList.contains('url') &&
  104. !element.classList.contains('title')) {
  105. element.dir = 'rtl';
  106. }
  107. if (elementIntersects(element, topMargin, bottomMargin, leftMargin,
  108. rightMargin)) {
  109. element.style.visibility = 'hidden';
  110. }
  111. }
  112. }
  113. </script>
  114. </head>
  115. <body>
  116. <div id="header"></div>
  117. <div id="content"></div>
  118. <div id="footer"></div>
  119. </body>
  120. </html>