@ulu/frontend/lib/js/ui/print.js

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

/**
 * @module ui/print
 */

import { ComponentInitializer } from "../core/component.js";
import { getElement } from "@ulu/utils/browser/dom.js";
import { printElement } from "@ulu/utils/browser/print.js";

const initializer = new ComponentInitializer({
  type: "print",
  baseAttribute: "data-ulu-print"
});

/**
 * Default options
 */
const defaults = {
  /**
   * Print element/selector
   */
  element: null,
};

/**
 * Initialize everything in document
 * - This will only initialize elements once, it is safe to call on page changes
 */
export function init() {
  initializer.init({
    withData: true,
    coreEvents: ["pageModified"],
    setup({ element, data, initialize }) {
      setupTrigger(element, data);
      initialize();
    }
  });
}

/**
 * Setup a single trigger (can be used manually without attr if needed)
 */
function setupTrigger(trigger, userOptions) {
  const config = Object.assign({}, defaults, userOptions);
  trigger.addEventListener("click", () => {
    // Option to print a specific element
    if (config.element) {
      const element = getElement(config.element);
      if (element) {
        printElement(element);
      } else {
        console.error("Unable to find element to print", trigger, config);
      }
    // Default behavior print window
    } else {
      window.print();
    }
  });
}