| <!doctype html> |
| <head> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> |
| <style> |
| body { |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| #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 setup(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`; |
| |
| 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>`; |
| |
| options.date = new Date(options.date).toLocaleDateString(); |
| for (const cssClass of ['date', 'title', 'url', 'pageNumber', 'totalPages']) { |
| for (const element of document.querySelectorAll(`.${cssClass}`)) |
| element.textContent = options[cssClass]; |
| } |
| } |
| |
| </script> |
| </head> |
| <body> |
| <div id="header"></div> |
| <div id="content"></div> |
| <div id="footer"></div> |
| </body> |
| </html> |
