@radioactive-labs/plutonium 0.1.0

package/src/js/controllers/color_mode_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+
+// Connects to data-controller="color-mode"
+export default class extends Controller {
+  // static targets = ["trigger", "menu"]
+
+  connect() {
+    console.log(`color-mode connected: ${this.element}`)
+    this.updateColorMode()
+  }
+
+  disconnect() {
+  }
+
+  updateColorMode() {
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  setLightColorMode() {
+    // Whenever the user explicitly chooses light mode
+    localStorage.theme = 'light'
+    this.updateColorMode()
+  }
+
+  setDarkColorMode() {
+    // Whenever the user explicitly chooses dark mode
+    localStorage.theme = 'dark'
+    this.updateColorMode()
+  }
+
+  setSystemColorMode() {
+    // Whenever the user explicitly chooses to respect the OS preference
+    localStorage.removeItem('theme')
+    this.updateColorMode()
+  }
+}

package/src/js/controllers/form_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash.debounce";
+
+// Connects to data-controller="form"
+export default class extends Controller {
+  connect() {
+    console.log(`form connected: ${this.element}`)
+  }
+
+  submit() {
+    this.element.requestSubmit()
+  }
+}

package/src/js/controllers/frame_navigator_controller.js

@@ -0,0 +1,99 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="frame-navigator"
+export default class extends Controller {
+  static targets = ["frame", "refreshButton", "backButton", "homeButton"];
+
+  connect() {
+    console.log(`frame-navigator connected: ${this.element}`)
+
+    this.srcHistory = []
+    this.originalFrameSrc = this.frameTarget.src
+
+    if (this.hasRefreshButtonTarget) {
+      this.refreshButtonTarget.style.display = ''
+      this.refreshButtonClicked = this.refreshButtonClicked.bind(this);
+      this.refreshButtonTarget.addEventListener("click", this.refreshButtonClicked);
+    }
+
+    if (this.hasBackButtonTarget) {
+      this.backButtonClicked = this.backButtonClicked.bind(this);
+      this.backButtonTarget.addEventListener("click", this.backButtonClicked);
+    }
+
+    if (this.hasHomeButtonTarget) {
+      this.homeButtonClicked = this.homeButtonClicked.bind(this);
+      this.homeButtonTarget.addEventListener("click", this.homeButtonClicked);
+    }
+
+    this.frameLoaded = this.frameLoaded.bind(this);
+    this.frameTarget.addEventListener("turbo:frame-load", this.frameLoaded);
+
+    this.frameLoading = this.frameLoading.bind(this);
+    this.frameTarget.addEventListener("turbo:click", this.frameLoading);
+    this.frameTarget.addEventListener("turbo:submit-start", this.frameLoading);
+  }
+
+  disconnect() {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.removeEventListener("click", this.refreshButtonClicked);
+    if (this.hasBackButtonTarget) this.backButtonTarget.removeEventListener("click", this.backButtonClicked);
+    if (this.hasHomeButtonTarget) this.homeButtonTarget.removeEventListener("click", this.homeButtonClicked);
+
+    this.frameTarget.removeEventListener("turbo:frame-load", this.frameLoaded);
+    this.frameTarget.removeEventListener("turbo:click", this.frameLoading);
+    this.frameTarget.removeEventListener("turbo:submit-start", this.frameLoading);
+  }
+
+  frameLoading(event) {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.add("motion-safe:animate-spin")
+    this.frameTarget.classList.add("motion-safe:animate-pulse")
+  }
+
+  frameLoaded(event) {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.remove("motion-safe:animate-spin")
+    this.frameTarget.classList.remove("motion-safe:animate-pulse")
+
+    let src = event.target.src
+    if (src == this.currentSrc) {
+      // this must be a refresh
+      // do nothing
+    }
+    else if (src == this.originalFrameSrc)
+      this.srcHistory = [src]
+    else
+      this.srcHistory.push(src)
+
+    this.updateNavigationButtonsDisplay()
+  }
+
+  refreshButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.frameTarget.reload()
+  }
+
+  backButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.srcHistory.pop()
+    this.frameTarget.src = this.currentSrc
+  }
+
+  homeButtonClicked(event) {
+    this.frameLoading(null)
+
+    this.frameTarget.src = this.originalFrameSrc
+  }
+
+  get currentSrc() { return this.srcHistory[this.srcHistory.length - 1] }
+
+  updateNavigationButtonsDisplay() {
+    if (this.hasHomeButtonTarget) {
+      this.homeButtonTarget.style.display = this.srcHistory.length > 1 ? '' : 'none'
+    }
+
+    if (this.hasBackButtonTarget) {
+      this.backButtonTarget.style.display = this.srcHistory.length > 2 ? '' : 'none'
+    }
+  }
+}

package/src/js/controllers/has_many_panel_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="has-many-panel"
+export default class extends Controller {
+  connect() {
+    console.log(`has-many-panel connected: ${this.element}`)
+  }
+}

package/src/js/controllers/interactive_action_form_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash.debounce";
+
+// Connects to data-controller="interactive-action-form"
+export default class extends Controller {
+  connect() {
+    console.log(`interactive-action-form connected: ${this.element}`)
+  }
+
+  submit() {
+    this.element.requestSubmit()
+  }
+}

package/src/js/controllers/nav_grid_menu_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-grid-menu"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-grid-menu connected: ${this.element}`)
+  }
+}

package/src/js/controllers/nav_grid_menu_item_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-grid-menu-item"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-grid-menu-item connected: ${this.element}`)
+  }
+}

package/src/js/controllers/nav_user_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-user"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-user connected: ${this.element}`)
+  }
+}

package/src/js/controllers/nav_user_link_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-user-link"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-user-link connected: ${this.element}`)
+  }
+}

package/src/js/controllers/nav_user_section_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nav-user-section"
+export default class extends Controller {
+  connect() {
+    console.log(`nav-user-section connected: ${this.element}`)
+  }
+}

package/src/js/controllers/nested_resource_form_fields_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nested-resource-form-fields"
+// Copied from https://github.com/stimulus-components/stimulus-rails-nested-form/blob/master/src/index.ts
+export default class extends Controller {
+  static targets = ["target", "template", "addButton"]
+
+  static values = {
+    wrapperSelector: {
+      type: String,
+      default: ".nested-resource-form-fields",
+    },
+    limit: Number,
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  add(e) {
+    e.preventDefault()
+
+    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
+    this.targetTarget.insertAdjacentHTML("beforebegin", content)
+
+    const event = new CustomEvent("nested-resource-form-fields:add", { bubbles: true })
+    this.element.dispatchEvent(event)
+
+    this.updateState()
+  }
+
+  remove(e) {
+    e.preventDefault()
+
+    const wrapper = e.target.closest(this.wrapperSelectorValue)
+
+    if (wrapper.dataset.newRecord === "true") {
+      wrapper.remove()
+    } else {
+      wrapper.style.display = "none"
+
+      const input = wrapper.querySelector("input[name*='_destroy']")
+      input.value = "1"
+    }
+
+    const event = new CustomEvent("nested-resource-form-fields:remove", { bubbles: true })
+    this.element.dispatchEvent(event)
+
+    this.updateState()
+  }
+
+  updateState() {
+    if (!this.hasAddButtonTarget || this.limitValue == 0) return
+
+    if (this.childCount >= this.limitValue)
+      this.addButtonTarget.style.display = "none"
+    else
+      this.addButtonTarget.style.display = "initial"
+  }
+
+  get childCount() {
+    return this.element.querySelectorAll(this.wrapperSelectorValue).length
+  }
+}

package/src/js/controllers/register_controllers.js

@@ -0,0 +1,45 @@
+// Import controllers here
+import ResourceLayoutController from "./resource_layout_controller.js"
+import NavGridMenuItemController from "./nav_grid_menu_item_controller.js"
+import NavGridMenuController from "./nav_grid_menu_controller.js"
+import NavUserSectionController from "./nav_user_section_controller.js"
+import NavUserLinkController from "./nav_user_link_controller.js"
+import NavUserController from "./nav_user_controller.js"
+import ResourceHeaderController from "./resource_header_controller.js"
+import SidebarMenuItemController from "./sidebar_menu_item_controller.js"
+import SidebarMenuController from "./sidebar_menu_controller.js"
+import HasManyPanelController from "./has_many_panel_controller.js"
+import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
+import ToolbarController from "./toolbar_controller.js"
+import TableSearchInputController from "./table_search_input_controller.js"
+import TableToolbarController from "./table_toolbar_controller.js"
+import TableController from "./table_controller.js"
+import FormController from "./form_controller.js"
+import ResourceDropDownController from "./resource_drop_down_controller.js"
+import ResourceDismissController from "./resource_dismiss_controller.js"
+import FrameNavigatorController from "./frame_navigator_controller.js"
+import ColorModeController from "./color_mode_controller.js"
+
+export default function (application) {
+  // Register controllers here
+  application.register("resource-layout", ResourceLayoutController)
+  application.register("nav-grid-menu-item", NavGridMenuItemController)
+  application.register("nav-grid-menu", NavGridMenuController)
+  application.register("nav-user-section", NavUserSectionController)
+  application.register("nav-user-link", NavUserLinkController)
+  application.register("nav-user", NavUserController)
+  application.register("resource-header", ResourceHeaderController)
+  application.register("sidebar-menu-item", SidebarMenuItemController)
+  application.register("sidebar-menu", SidebarMenuController)
+  application.register("has-many-panel", HasManyPanelController)
+  application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
+  application.register("toolbar", ToolbarController)
+  application.register("table-search-input", TableSearchInputController)
+  application.register("table-toolbar", TableToolbarController)
+  application.register("table", TableController)
+  application.register("form", FormController)
+  application.register("resource-drop-down", ResourceDropDownController)
+  application.register("resource-dismiss", ResourceDismissController)
+  application.register("frame-navigator", FrameNavigatorController)
+  application.register("color-mode", ColorModeController)
+}

package/src/js/controllers/resource_dismiss_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+import { Dismiss } from 'flowbite';
+
+
+// Connects to data-controller="resource-dismiss"
+export default class extends Controller {
+  static targets = ["trigger", "target"]
+
+  static values = {
+    after: Number,
+  }
+
+  connect() {
+    console.log(`resource-dismiss connected: ${this.element}`)
+
+    // https://flowbite.com/docs/components/alerts/#javascript-behaviour
+    this.dismiss = new Dismiss(this.targetTarget, this.triggerTarget);
+
+    console.log(this.hasAfterValue)
+    console.log(this.afterValue)
+    if (this.hasAfterValue && this.afterValue > 0) {
+      this.autoDismissTimeout = setTimeout(() => {
+        this.hide()
+        this.autoDismissTimeout = null
+      }, this.afterValue);
+    }
+  }
+
+  disconnect() {
+    if (this.autoDismissTimeout) clearTimeout(this.autoDismissTimeout)
+
+    this.dismiss = null
+    this.autoDismissTimeout = null
+  }
+
+  hide() {
+    this.dismiss.hide()
+  }
+}

package/src/js/controllers/resource_drop_down_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+import { Dropdown } from 'flowbite';
+
+
+// Connects to data-controller="resource-drop-down"
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  connect() {
+    console.log(`resource-drop-down connected: ${this.element}`)
+
+    // https://flowbite.com/docs/components/dropdowns/#javascript-behaviour
+    this.dropdown = new Dropdown(this.menuTarget, this.triggerTarget);
+  }
+
+  disconnect() {
+    this.dropdown = null
+  }
+
+  toggle() {
+    this.dropdown.toggle()
+  }
+
+  show() {
+    this.dropdown.show()
+  }
+
+  hide() {
+    this.dropdown.show()
+  }
+}

package/src/js/controllers/resource_header_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="resource-header"
+export default class extends Controller {
+  connect() {
+    console.log(`resource-header connected: ${this.element}`)
+  }
+}

package/src/js/controllers/resource_layout_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="resource-layout"
+export default class extends Controller {
+  connect() {
+    console.log(`resource-layout connected: ${this.element}`)
+  }
+}

package/src/js/controllers/sidebar_menu_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="sidebar-menu"
+export default class extends Controller {
+  connect() {
+    console.log(`sidebar-menu connected: ${this.element}`)
+  }
+}

package/src/js/controllers/sidebar_menu_item_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="sidebar-menu-item"
+export default class extends Controller {
+  connect() {
+    console.log(`sidebar-menu-item connected: ${this.element}`)
+  }
+}

package/src/js/controllers/table_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table"
+export default class extends Controller {
+  connect() {
+    console.log(`table connected: ${this.element}`)
+  }
+}

package/src/js/controllers/table_search_input_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-search-input"
+export default class extends Controller {
+  connect() {
+    console.log(`table-search-input connected: ${this.element}`)
+  }
+}

package/src/js/controllers/table_toolbar_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-toolbar"
+export default class extends Controller {
+  connect() {
+    console.log(`table-toolbar connected: ${this.element}`)
+  }
+}

package/src/js/controllers/toolbar_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="toolbar"
+export default class extends Controller {
+  connect() {
+    console.log(`toolbar connected: ${this.element}`)
+  }
+}

package/src/js/core.js

@@ -0,0 +1,4 @@
+import registerControllers from "./controllers/register_controllers.js"
+
+
+export { registerControllers }

package/src/js/turbo/index.js

@@ -0,0 +1,5 @@
+import * as Turbo from "@hotwired/turbo"
+
+import "./turbo_debug"
+// import "./turbo_actions"
+// import "./turbo_frame_monkey_patch"

package/src/js/turbo/turbo_actions.js

@@ -0,0 +1,8 @@
+// Add a redirect stream action
+Turbo.StreamActions.redirect = function () {
+  // See: https://github.com/hotwired/turbo/issues/554
+  Turbo.clearCache();
+
+  const url = this.getAttribute("url")
+  Turbo.visit(url)
+}

package/src/js/turbo/turbo_debug.js

@@ -0,0 +1,30 @@
+eventNames = [
+  'turbo:click',
+  'turbo:before-visit',
+  'turbo:visit',
+  'turbo:submit-start',
+  'turbo:before-fetch-request',
+  'turbo:before-fetch-response',
+  'turbo:submit-end',
+  'turbo:before-cache',
+  'turbo:before-render',
+  'turbo:before-stream-render',
+  'turbo:render',
+  'turbo:load',
+  'turbo:before-frame-render',
+  'turbo:frame-render',
+  'turbo:frame-load',
+  'turbo:frame-missing',
+  'turbo:fetch-request-error',
+  'turbo:reload', // https://github.com/hotwired/turbo/pull/556
+  'turbo:morph',
+  'turbo:before-morph-element',
+  'turbo:morph-attribute',
+  'turbo:morph',
+]
+
+eventNames.forEach(eventName => {
+  document.addEventListener(eventName, (event) => {
+    console.log(event.type, event);
+  });
+});

package/src/js/turbo/turbo_frame_monkey_patch.js

@@ -0,0 +1,23 @@
+// Monkeypatch to fix turbo issue of wrong turbo-frame
+// See: https://github.com/hotwired/turbo/pull/579
+document.addEventListener("turbo:before-fetch-request", (event) => {
+  const targetTurboFrame = event.target.getAttribute("data-turbo-frame");
+  const fetchTurboFrame = event.detail.fetchOptions.headers["Turbo-Frame"];
+  if (
+    targetTurboFrame &&
+    targetTurboFrame != fetchTurboFrame &&
+    document.querySelector(`turbo-frame#${targetTurboFrame}`)
+  ) {
+    event.detail.fetchOptions.headers["Turbo-Frame"] = targetTurboFrame;
+  }
+});
+
+// // Reload the entire page if we are missing a frame
+// // See: https://stackoverflow.com/a/75704489/644571
+// document.addEventListener("turbo:frame-missing", (event) => {
+//   if (event.target.id != 'modal') return
+
+//   const { detail: { response, visit } } = event;
+//   event.preventDefault();
+//   visit(response);
+// });