toolkit/components/printing/content/printPreviewPagination.js

   1 // This file is loaded into the browser window scope.
   2 /* eslint-env mozilla/browser-window */
   3
   4 // -*- tab-width: 2; indent-tabs-mode: nil; js-indent-level: 2 -*-
   5
   6 /* This Source Code Form is subject to the terms of the Mozilla Public
   7  * License, v. 2.0. If a copy of the MPL was not distributed with this
   8  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   9
  10 customElements.define(
  11   "printpreview-pagination",
  12   class PrintPreviewPagination extends HTMLElement {
  13     static get markup() {
  14       return `
  15       <html:link rel="stylesheet" href="chrome://global/content/printPagination.css" />
  16       <html:div class="container">
  17         <html:button id="navigateHome" class="toolbarButton startItem" data-l10n-id="printpreview-homearrow-button"></html:button>
  18         <html:button id="navigatePrevious" class="toolbarButton" data-l10n-id="printpreview-previousarrow-button"></html:button>
  19         <html:div class="toolbarCenter"><html:span id="sheetIndicator" data-l10n-id="printpreview-sheet-of-sheets" data-l10n-args='{ "sheetNum": 1, "sheetCount": 1 }'></html:span></html:div>
  20         <html:button id="navigateNext" class="toolbarButton" data-l10n-id="printpreview-nextarrow-button"></html:button>
  21         <html:button id="navigateEnd" class="toolbarButton endItem" data-l10n-id="printpreview-endarrow-button"></html:button>
  22       </html:div>
  23       `;
  24     }
  25
  26     static get defaultProperties() {
  27       return {
  28         currentPage: 1,
  29         sheetCount: 1,
  30       };
  31     }
  32
  33     get previewBrowser() {
  34       return this._previewBrowser;
  35     }
  36
  37     set previewBrowser(aBrowser) {
  38       this._previewBrowser = aBrowser;
  39     }
  40
  41     observePreviewBrowser(browser) {
  42       if (browser == this.previewBrowser || !this.isConnected) {
  43         return;
  44       }
  45       this.previewBrowser = browser;
  46       this.mutationObserver.disconnect();
  47       this.mutationObserver.observe(browser, {
  48         attributes: ["current-page", "sheet-count"],
  49       });
  50       this.updateFromBrowser();
  51     }
  52
  53     connectedCallback() {
  54       MozXULElement.insertFTLIfNeeded("toolkit/printing/printPreview.ftl");
  55
  56       const shadowRoot = this.attachShadow({ mode: "open" });
  57       document.l10n.connectRoot(shadowRoot);
  58
  59       let fragment = MozXULElement.parseXULToFragment(this.constructor.markup);
  60       this.shadowRoot.append(fragment);
  61
  62       this.elements = {
  63         sheetIndicator: shadowRoot.querySelector("#sheetIndicator"),
  64         homeButton: shadowRoot.querySelector("#navigateHome"),
  65         previousButton: shadowRoot.querySelector("#navigatePrevious"),
  66         nextButton: shadowRoot.querySelector("#navigateNext"),
  67         endButton: shadowRoot.querySelector("#navigateEnd"),
  68       };
  69
  70       this.shadowRoot.addEventListener("click", this);
  71
  72       this.mutationObserver = new MutationObserver(() =>
  73         this.updateFromBrowser()
  74       );
  75
  76       // Initial render with some default values
  77       // We'll be updated with real values when available
  78       this.update(this.constructor.defaultProperties);
  79     }
  80
  81     disconnectedCallback() {
  82       document.l10n.disconnectRoot(this.shadowRoot);
  83       this.shadowRoot.textContent = "";
  84       this.mutationObserver?.disconnect();
  85       delete this.mutationObserver;
  86       this.currentPreviewBrowserObserver?.disconnect();
  87       delete this.currentPreviewBrowserObserver;
  88     }
  89
  90     handleEvent(event) {
  91       if (event.type == "click" && event.button != 0) {
  92         return;
  93       }
  94       event.stopPropagation();
  95
  96       switch (event.target) {
  97         case this.elements.homeButton:
  98           this.navigate(0, 0, "home");
  99           break;
 100         case this.elements.previousButton:
 101           this.navigate(-1, 0, 0);
 102           break;
 103         case this.elements.nextButton:
 104           this.navigate(1, 0, 0);
 105           break;
 106         case this.elements.endButton:
 107           this.navigate(0, 0, "end");
 108           break;
 109       }
 110     }
 111
 112     navigate(aDirection, aPageNum, aHomeOrEnd) {
 113       const nsIWebBrowserPrint = Ci.nsIWebBrowserPrint;
 114       let targetNum;
 115       let navType;
 116       // we use only one of aHomeOrEnd, aDirection, or aPageNum
 117       if (aHomeOrEnd) {
 118         // We're going to either the very first page ("home"), or the
 119         // very last page ("end").
 120         if (aHomeOrEnd == "home") {
 121           targetNum = 1;
 122           navType = nsIWebBrowserPrint.PRINTPREVIEW_HOME;
 123         } else {
 124           targetNum = this.sheetCount;
 125           navType = nsIWebBrowserPrint.PRINTPREVIEW_END;
 126         }
 127       } else if (aPageNum) {
 128         // We're going to a specific page (aPageNum)
 129         targetNum = Math.min(Math.max(1, aPageNum), this.sheetCount);
 130         navType = nsIWebBrowserPrint.PRINTPREVIEW_GOTO_PAGENUM;
 131       } else {
 132         // aDirection is either +1 or -1, and allows us to increment
 133         // or decrement our currently viewed page.
 134         targetNum = Math.min(
 135           Math.max(1, this.currentSheet + aDirection),
 136           this.sheetCount
 137         );
 138         navType = nsIWebBrowserPrint.PRINTPREVIEW_GOTO_PAGENUM;
 139       }
 140
 141       // Preemptively update our own state, rather than waiting for the message from the child process
 142       // This allows subsequent clicks of next/back to advance 1 page per click if possible
 143       // and keeps the UI feeling more responsive
 144       this.update({ currentPage: targetNum });
 145
 146       this.previewBrowser.sendMessageToActor(
 147         "Printing:Preview:Navigate",
 148         {
 149           navType,
 150           pageNum: targetNum,
 151         },
 152         "Printing"
 153       );
 154     }
 155
 156     update(data = {}) {
 157       if (data.sheetCount) {
 158         this.sheetCount = data.sheetCount;
 159       }
 160       if (data.currentPage) {
 161         this.currentSheet = data.currentPage;
 162       }
 163       document.l10n.setAttributes(
 164         this.elements.sheetIndicator,
 165         this.elements.sheetIndicator.dataset.l10nId,
 166         {
 167           sheetNum: this.currentSheet,
 168           sheetCount: this.sheetCount,
 169         }
 170       );
 171     }
 172
 173     updateFromBrowser() {
 174       let sheetCount = parseInt(
 175         this.previewBrowser.getAttribute("sheet-count"),
 176         10
 177       );
 178       let currentPage = parseInt(
 179         this.previewBrowser.getAttribute("current-page"),
 180         10
 181       );
 182       this.update({ sheetCount, currentPage });
 183     }
 184   }
 185 );