feat(core): support beforeprint and afterprint hooks

Extends the PrintHook service to also register beforeprint and afterprint event handlers to synchronously update styles and prevent layout switching races.

Related #603

Author: epelc

src/lib/core/media-marshaller/print-hook.ts

@@ -83,18 +83,63 @@ export class PrintHook {
     return mergeAlias(event, bp);
   }
 
+
+  // registeredBeforeAfterPrintHooks tracks if we registered the `beforeprint`
+  //  and `afterprint` event listeners.
+  private registeredBeforeAfterPrintHooks: boolean = false;
+
+  // isPrintingBeforeAfterEvent is used to track if we are printing from within
+  // a `beforeprint` event handler. This prevents the typicall `stopPrinting`
+  // form `interceptEvents` so that printing is not stopped while the dialog
+  // is still open. This is an extension of the `isPrinting` property on
+  // browsers which support `beforeprint` and `afterprint` events.
+  private isPrintingBeforeAfterEvent: boolean = false;
+
+  private registerBeforeAfterPrintHooks(target: HookTarget) {
+    // Register a `beforeprint` event hook so we can trigger print styles
+    //  synchronously and apply proper layout styles.
+    if (this.registeredBeforeAfterPrintHooks) {
+      return;
+    }
+
+    this.registeredBeforeAfterPrintHooks = true;
+
+    // Could we have teardown logic to remove if there are no print listeners being used?
+    window.addEventListener('beforeprint', () => {
+      // If we aren't already printing, start printing and update the styles as
+      // if there was a regular print `MediaChange`(from matchMedia).
+      if (!this.isPrinting) {
+        this.isPrintingBeforeAfterEvent = true;
+        this.startPrinting(target, this.getEventBreakpoints(new MediaChange(true, PRINT)));
+        target.updateStyles();
+      }
+    });
+
+    window.addEventListener('afterprint', () => {
+      // If we aren't already printing, start printing and update the styles as
+      // if there was a regular print `MediaChange`(from matchMedia).
+      this.isPrintingBeforeAfterEvent = false;
+      if (this.isPrinting) {
+        this.stopPrinting(target);
+        target.updateStyles();
+      }
+    });
+  }
+
   /**
    * Prepare RxJs filter operator with partial application
    * @return pipeable filter predicate
    */
   interceptEvents(target: HookTarget) {
+    this.registerBeforeAfterPrintHooks(target);
+
     return (event: MediaChange) => {
       if (this.isPrintEvent(event)) {
         if (event.matches && !this.isPrinting) {
           this.startPrinting(target, this.getEventBreakpoints(event));
           target.updateStyles();
 
-        } else if (!event.matches && this.isPrinting) {
+        } else if (!event.matches && this.isPrinting && !this.isPrintingBeforeAfterEvent) {
           this.stopPrinting(target);
           target.updateStyles();
         }
@@ -131,7 +176,8 @@ export class PrintHook {
   /**
    * To restore pre-Print Activations, we must capture the proper
    * list of breakpoint activations BEFORE print starts. OnBeforePrint()
-   * is not supported; so 'print' mediaQuery activations must be used.
+   * is supported; so 'print' mediaQuery activations are used as a fallback
+   * in browsers without `beforeprint` support.
    *
    * >  But activated breakpoints are deactivated BEFORE 'print' activation.
    *
@@ -146,14 +192,17 @@ export class PrintHook {
    *    - restore as activatedTargets and clear when stop printing
    */
   collectActivations(event: MediaChange) {
-    if (!this.isPrinting) {
+    if (!this.isPrinting || this.isPrintingBeforeAfterEvent) {
       if (!event.matches) {
         const bp = this.breakpoints.findByQuery(event.mediaQuery);
         if (bp) {   // Deactivating a breakpoint
           this.deactivations.push(bp);
           this.deactivations.sort(sortDescendingPriority);
         }
-      } else {
+      } else if (!this.isPrintingBeforeAfterEvent) {
+        // Only clear deactivations if we aren't printing from a `beforeprint` event.
+        // Otherwise this will clear before `stopPrinting()` is called to restore
+        // the pre-Print Activations.
         this.deactivations = [];
       }
     }