123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <!doctype html>
- <html>
- <head>
- <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
- <style>
- body {
- display: flex;
- flex-direction: column;
- margin: 0;
- }
- #header,
- #footer {
- display: flex;
- flex: none;
- }
- #header {
- align-items: flex-start;
- padding-top: 0.4cm;
- }
- #footer {
- align-items: flex-end;
- padding-bottom: 0.4cm;
- }
- #content {
- flex: auto;
- }
- .left {
- flex: none;
- padding-left: 0.7cm;
- padding-right: 0.1cm;
- }
- .center {
- flex: auto;
- padding-left: 0.7cm;
- padding-right: 0.7cm;
- text-align: center;
- }
- .right {
- flex: none;
- /* historically does not account for RTL */
- padding-left: 0.1cm;
- padding-right: 0.7cm;
- }
- .grow {
- flex: auto;
- }
- .text {
- font-size: 8px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- </style>
- <script>
- function getComputedStyleAsFloat(style, value) {
- return parseFloat(style.getPropertyValue(value).slice(0, -2));
- }
- function elementIntersects(element, topPos, bottomPos, leftPos, rightPos) {
- const rect = element.getBoundingClientRect();
- const style = window.getComputedStyle(element);
- // Only consider the size of |element|, so remove the padding from |rect|.
- // The padding is used for positioning.
- rect.top += getComputedStyleAsFloat(style, 'padding-top');
- rect.bottom -= getComputedStyleAsFloat(style, 'padding-bottom');
- rect.left += getComputedStyleAsFloat(style, 'padding-left');
- rect.right -= getComputedStyleAsFloat(style, 'padding-right');
- return leftPos < rect.right && rightPos > rect.left && topPos < rect.bottom &&
- bottomPos > rect.top;
- }
- function setupHeaderFooterTemplate(options) {
- const body = document.querySelector('body');
- const header = document.querySelector('#header');
- const footer = document.querySelector('#footer');
- body.style.width = `${options.width}px`;
- body.style.height = `${options.height}px`;
- header.style.height = `${options.topMargin}px`;
- footer.style.height = `${options.bottomMargin}px`;
- const topMargin = options.topMargin;
- const bottomMargin = options.height - options.bottomMargin;
- const leftMargin = options.leftMargin;
- const rightMargin = options.width - options.rightMargin;
- header.innerHTML = options['headerTemplate'] || `
- <div class='date text left'></div>
- <div class='title text center'></div>`;
- footer.innerHTML = options['footerTemplate'] || `
- <div class='url text left grow'></div>
- <div class='text right'>
- <span class='pageNumber'></span>/<span class='totalPages'></span>
- </div>`;
- const date = new Date(options.date);
- const formatter =
- new Intl.DateTimeFormat(
- navigator.languages[0],
- { dateStyle: 'short', timeStyle: 'short' });
- options.date = formatter.format(date);
- for (const cssClass of ['date', 'title', 'url', 'pageNumber', 'totalPages']) {
- for (const element of document.querySelectorAll(`.${cssClass}`)) {
- element.textContent = options[cssClass];
- }
- }
- for (const element of document.querySelectorAll(`.text`)) {
- if (options.isRtl &&
- !element.classList.contains('url') &&
- !element.classList.contains('title')) {
- element.dir = 'rtl';
- }
- if (elementIntersects(element, topMargin, bottomMargin, leftMargin,
- rightMargin)) {
- element.style.visibility = 'hidden';
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="header"></div>
- <div id="content"></div>
- <div id="footer"></div>
- </body>
- </html>
|