feat: PrintController and PrintButtonController to enable buttons and…

… actions to trigger the browser print dialogue

docs/docs/controllers/print_button_controller.mdx

@@ -0,0 +1,48 @@
+---
+id: PrintButtonController
+title: PrintButtonController
+---
+
+import NoActions from "../_partials/no-actions.md";
+import NoTargets from "../_partials/no-targets.md";
+import NoValues from "../_partials/no-values.md";
+import NoClasses from "../_partials/no-classes.md";
+import NoEvents from "../_partials/no-events.md";
+
+## Purpose
+
+Controller that adds print functionality to a link/button, to open a print dialogue when clicked.
+
+| Action | Purpose |
+| --- | --- |
+| `print` | Trigger the Browser's print dialogue |
+
+
+## [Targets](https://stimulus.hotwire.dev/reference/targets)
+<NoTargets/>
+
+## [Classes](https://stimulus.hotwire.dev/reference/classes)
+
+| Class | Purpose | Default |
+| --- | --- | --- |
+| `unsupported ` | Applied to the controller element when `window | `unsupported` |
+
+## [Values](https://stimulus.hotwire.dev/reference/values)
+<NoValues/>
+
+## Events
+<NoEvents/>
+
+## Side Effects
+
+Adds event listeners for `click` on the controller root element.
+
+
+## How to Use
+
+<iframe
+  src="https://codesandbox.io/embed/printbuttoncontroller-9y5c7?fontsize=14&hidenavigation=1&theme=dark"
+  style={{width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden"}}
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+

docs/docs/controllers/print_controller.mdx

@@ -0,0 +1,46 @@
+---
+id: PrintController
+title: PrintController
+---
+
+import NoTargets from "../_partials/no-targets.md";
+import NoValues from "../_partials/no-values.md";
+import NoClasses from "../_partials/no-classes.md";
+import NoEvents from "../_partials/no-events.md";
+
+## Purpose
+
+Utility controller to trigger the page print dialogue when wired up to an event in the DOM.
+
+
+## [Actions](https://stimulus.hotwire.dev/reference/actions)
+
+| Action | Purpose |
+| --- | --- |
+| `print` | Trigger the Browser's print dialogue |
+
+## [Targets](https://stimulus.hotwire.dev/reference/targets)
+<NoTargets/>
+
+## [Classes](https://stimulus.hotwire.dev/reference/classes)
+<NoClasses/>
+
+## [Values](https://stimulus.hotwire.dev/reference/values)
+<NoValues/>
+
+## Events
+<NoEvents/>
+
+## Side Effects
+
+None
+
+
+## How to Use
+
+<iframe
+  src="https://codesandbox.io/embed/printcontroller-tpp9c?fontsize=14&hidenavigation=1&theme=dark"
+  style={{width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden"}}
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+

docs/sidebars.js

@@ -55,6 +55,7 @@ module.exports = {
           "controllers/ElementSaveController",
           "controllers/EmptyDomController",
           "controllers/PrefetchController",
+          "controllers/PrintButtonController",
           "controllers/ResponsiveIframeController",
           "controllers/SelfDestructController",
           "controllers/StickyController",
@@ -101,9 +102,10 @@ module.exports = {
       },
       {
         "Utility Controllers": [
-          "controllers/IntervalController",
           "controllers/IntersectionController",
+          "controllers/IntervalController",
           "controllers/PresenceController",
+          "controllers/PrintController",
           "controllers/TimeoutController",
           "controllers/UserFocusController",
         ],

src/controllers/print_button_controller.ts

@@ -0,0 +1,50 @@
+import {PrintController} from "./utility/print_controller";
+
+export class PrintButtonController extends PrintController {
+
+  static classes = [
+    'unsupported',
+  ];
+  declare readonly unsupportedClass: string;
+  declare readonly hasUnsupportedClass: boolean;
+
+  get _unsupportedClasses(): string[] {
+    return this.unsupportedClass.split(' ');
+  }
+
+  get _defaultUnsupportedClasses(): string[] {
+    return ["unsupported"];
+  }
+
+  initialize() {
+    this.print = this.print.bind(this);
+  }
+
+  connect() {
+    if (!("print" in window)) {
+      this._addUnsupportedClasses(this.el);
+    }
+    this.el.addEventListener('click', this.print);
+  }
+
+  disconnect() {
+    this.el.removeEventListener('click', this.print);
+  }
+
+  private _addUnsupportedClasses(el: HTMLElement = this.el) {
+    if (this.hasUnsupportedClass) {
+      el.classList.add(...this._unsupportedClasses);
+    } else {
+      el.classList.add(...this._defaultUnsupportedClasses);
+    }
+  }
+
+  private _removeUnsupportedClasses(el: HTMLElement = this.el) {
+    if (this.hasUnsupportedClass) {
+      el.classList.remove(...this._unsupportedClasses);
+    } else {
+      el.classList.remove(...this._defaultUnsupportedClasses);
+    }
+  }
+
+}

src/controllers/utility/print_controller.ts

@@ -0,0 +1,10 @@
+import {BaseController} from '../../utilities/base_controller';
+
+export class PrintController extends BaseController {
+
+  print(event?: Event) {
+    event?.preventDefault();
+    window.print();
+  }
+
+}

src/index.ts

@@ -45,6 +45,8 @@ export {PasswordPeekController} from "./controllers/forms/password_peek_controll
 export {PollBlockController} from "./controllers/ajax/poll_block_controller";
 export {PrefetchController} from "./controllers/prefetch_controller";
 export {PresenceController} from "./controllers/utility/presence_controller";
+export {PrintButtonController} from './controllers/print_button_controller';
+export {PrintController} from './controllers/utility/print_controller';
 export {RemoteFormController} from "./controllers/forms/remote_form_controller";
 export {RemoveController} from "./controllers/dismissable_controller";
 export {ResponsiveIframeBodyController, ResponsiveIframeWrapperController} from "./controllers/responsive_iframe_controller";