TurboFrameRCController - Beta controller for driving turbo frames usi…

…ng external links/buttons

dist/index.d.ts

@@ -23,5 +23,6 @@ export { ScrollToTopController } from "./scroll_to_top_controller";
 export { SelfDestructController } from "./self_destruct_controller";
 export { TeleportController } from "./teleport_controller";
 export { ToggleClassController } from "./toggle_class_controller";
+export { TurboFrameRCController } from "./turbo_frame_rc_controller";
 export { WordCountController } from "./word_count_controller";
 //# sourceMappingURL=index.d.ts.map

dist/turbo_frame_rc_controller.d.ts

@@ -0,0 +1,19 @@
+import { BaseController } from "./base_controller";
+export declare class TurboFrameRCController extends BaseController {
+    static values: {
+        frameId: StringConstructor;
+        src: StringConstructor;
+        loadingMessage: StringConstructor;
+    };
+    readonly frameIdValue: string;
+    readonly srcValue: string;
+    readonly hasSrcValue: boolean;
+    readonly loadingMessageValue: string;
+    readonly hasLoadingMessageValue: boolean;
+    toggle(event?: Event | null): void;
+    setSrc(event?: Event | null): void;
+    clear(event?: Event | null): void;
+    private getFrame;
+    private getSrc;
+}
+//# sourceMappingURL=turbo_frame_rc_controller.d.ts.map

dist/utilities/elements.d.ts

@@ -0,0 +1,2 @@
+export declare function isHTMLLinkElement(element: Element): element is HTMLLinkElement;
+//# sourceMappingURL=elements.d.ts.map

dist/utilities/turbo.d.ts

@@ -0,0 +1,2 @@
+export declare function isTurboFrame(element: HTMLElement): element is TurboFrame;
+//# sourceMappingURL=turbo.d.ts.map

docs/_sidebar.md

@@ -26,4 +26,5 @@
 ** [SelfDestructController](./controllers/self_destruct_controller.md "Stimulus Library - SelfDestructController")
 ** [TeleportController](./controllers/teleport_controller.md "Stimulus Library - TeleportController")
 ** [ToggleClassController](./controllers/toggle_class_controller.md "Stimulus Library - ToggleClassController")
+** [TurboFrameRCController](./controllers/turbo_frame_rc_controller.md "Stimulus Library - TurboFrameRCController")
 ** [WordCountController](./controllers/word_count_controller.md "Stimulus Library - WordCountController")

docs/controllers/turbo_frame_rc_controller.md

@@ -0,0 +1,70 @@
+# TurboFrameRCController
+
+## Purpose
+
+Remotely set the `src` of TurboFrames, and remotely clear their content.
+
+Possible use cases:
+
+1. Modal form.
+1. Sidebar links to drive a main-content frame.
+
+<!-- tabs:start -->
+
+## ** Actions **
+
+#### [Actions](https://stimulus.hotwire.dev/reference/actions)
+
+| Action | Purpose |
+| --- | --- |
+| `teleport` | - |
+| `clear` | - |
+| `toggle` | - |
+
+## ** Targets **
+
+#### [Targets](https://stimulus.hotwire.dev/reference/targets)
+
+[no-targets](../_partials/no-targets.md ':include')
+
+## ** Classes **
+
+#### [Classes](https://stimulus.hotwire.dev/reference/classes)
+
+[no-classes](../_partials/no-classes.md ':include')
+
+## ** Values **
+
+#### [Values](https://stimulus.hotwire.dev/reference/values)
+
+| Value | Type | Purpose | Default |
+| --- | --- | --- | --- |
+| `frameId` | String | The ID of the frame to drive | - |
+| `src` | String | The URL set the remote frame's `src` to | - |
+| `loadingMessage` (Optional) | String | The message to display while content is loading | - |
+
+## ** Events **
+
+#### Events
+
+[no-events](../_partials/no-events.md ':include')
+
+## ** Side Effects **
+
+None
+
+<!-- tabs:end -->
+
+# How to Use
+
+<!-- tabs:start -->
+
+## ** HTML **
+Example WIP
+[comment]: <> ([example]&#40;../examples/turbo_frame_rc_controller.erb ':include :type=code'&#41;)
+
+## ** HAML **
+Example WIP
+[comment]: <> ([example]&#40;../examples/turbo_frame_rc_controller.haml ':include :type=code'&#41;)
+<!-- tabs:end -->
+

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stimulus-library",
   "description": "A library of useful controllers for Stimulus",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "author": "@Sub-Xaero",
   "repository": {

src/index.ts

@@ -23,4 +23,5 @@ export {ScrollToTopController} from "./scroll_to_top_controller";
 export {SelfDestructController} from "./self_destruct_controller";
 export {TeleportController} from "./teleport_controller";
 export {ToggleClassController} from "./toggle_class_controller";
+export {TurboFrameRCController} from "./turbo_frame_rc_controller";
 export {WordCountController} from "./word_count_controller";

src/turbo_frame_rc_controller.ts

@@ -0,0 +1,76 @@
+import {BaseController} from "./base_controller";
+import {isHTMLLinkElement} from "./utilities/elements";
+import {isTurboFrame} from "./utilities/turbo";
+
+export class TurboFrameRCController extends BaseController {
+
+  static values = {
+    frameId: String,
+    src: String,
+    loadingMessage: String,
+  };
+
+  declare readonly frameIdValue: string;
+  declare readonly srcValue: string;
+  declare readonly hasSrcValue: boolean;
+  declare readonly loadingMessageValue: string;
+  declare readonly hasLoadingMessageValue: boolean;
+
+  toggle(event?: Event | null) {
+    if (event) {
+      event.preventDefault();
+    }
+    let frame = this.getFrame();
+    let frameSrc = frame.src;
+    if (frameSrc == null || frameSrc !== this.getSrc()) {
+      this.setSrc();
+    } else {
+      this.clear();
+    }
+  }
+
+  setSrc(event?: Event | null) {
+    if (event) {
+      event.preventDefault();
+    }
+    let frame = this.getFrame();
+    if (this.hasLoadingMessageValue) {
+      frame.innerHTML = this.loadingMessageValue;
+    }
+
+    frame.src = this.getSrc();
+  }
+
+  clear(event?: Event | null) {
+    if (event) {
+      event.preventDefault();
+    }
+    let frame = this.getFrame();
+    frame.src = "";
+    frame.innerHTML = "";
+  }
+
+  private getFrame(): TurboFrame {
+    let frame = document.getElementById(`${this.frameIdValue}`);
+    if (frame == null) {
+      throw new Error(`Could not find frame with ID '${this.frameIdValue}'`);
+    }
+    if (!isTurboFrame(frame)) {
+      throw new Error(`Element targeted by ID '${this.frameIdValue}'`);
+    } else {
+      return frame;
+    }
+  }
+
+  private getSrc(): string {
+    let element = this.element as HTMLElement;
+    if (this.hasSrcValue) {
+      return this.srcValue;
+    } else if (isHTMLLinkElement(element)) {
+      return element.href;
+    } else {
+      throw new Error("No link given to drive frame to");
+    }
+  }
+
+}

src/utilities/elements.ts

@@ -0,0 +1,3 @@
+export function isHTMLLinkElement(element: Element): element is HTMLLinkElement {
+  return element.nodeName == "A";
+}

src/utilities/turbo.ts

@@ -0,0 +1,3 @@
+export function isTurboFrame(element: HTMLElement): element is TurboFrame {
+  return element.nodeName == "TURBO-FRAME";
+}

src/utilities/types.d.ts

@@ -0,0 +1,4 @@
+interface TurboFrame extends HTMLElement {
+  nodeName: "TURBO-FRAME"
+  src: string
+}