{"id":21921817,"url":"https://github.com/existentialmutt/cable_modal","last_synced_at":"2025-06-15T15:36:37.645Z","repository":{"id":56843160,"uuid":"398719841","full_name":"existentialmutt/cable_modal","owner":"existentialmutt","description":"Modal form workflows, powered by CableReady and 🧡","archived":false,"fork":false,"pushed_at":"2021-09-26T02:34:34.000Z","size":558,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-08T11:57:10.582Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/existentialmutt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-22T05:14:19.000Z","updated_at":"2021-09-26T02:34:28.000Z","dependencies_parsed_at":"2022-08-29T10:51:05.632Z","dependency_job_id":null,"html_url":"https://github.com/existentialmutt/cable_modal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/existentialmutt/cable_modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/existentialmutt%2Fcable_modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/existentialmutt%2Fcable_modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/existentialmutt%2Fcable_modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/existentialmutt%2Fcable_modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/existentialmutt","download_url":"https://codeload.github.com/existentialmutt/cable_modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/existentialmutt%2Fcable_modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259998421,"owners_count":22943812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T20:27:13.329Z","updated_at":"2025-06-15T15:36:37.618Z","avatar_url":"https://github.com/existentialmutt.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CableModal\nThis plugin facilitates creating server-rendered modal workflows in Rails using [CableReady](https://cableready.stimulusreflex.com) custom operations.  A plugin system is provided to allow you to use your modal provider of choice.  A plugin for Bootstrap 5 is provided and used in these examples.\n\nThe plugin provides a `\u003ccable-modal\u003e` web component and a set of custom CableReady operations for controlling it.  Once the `\u003ccable-modal\u003e` element is on the page, you can control it with the following operations:\n\n- `openModal()`\n- `closeModal()`\n- `updateModal({html: \"HTML string for modal content\"})`\n\n![Demo screencast](/demo.gif)\n\n## Installation\nFirst install the gem\n\n```bash\n$ bundle add cable_modal\n```\n\nNext install the cable_modal NPM package (+ cable_ready if you don't have it already)\n\n```bash\n$ yarn add cable_modal cable_ready\n```\n\nFinally, run the generator\n```bash\n$ bin/rails g cable_modal:install\n```\n\nThe generator does three things:\n\n1. installs a `\u003ccable-modal\u003e` web component into your `application.html.erb` layout\n3. installs a `cable_modal.html.erb` template into `app/views/layouts`.  Use this layout to assist with rendering modal content.\n2. adds intialization code to `application.js`\n\n## Usage with Mrujs / CableCar\n\nThis gem adds 3 custom operations you can use anywhere you use CableReady:\n- openModal\n- closeModal\n- updateModal\n\nA great way to to use these to control the custom modal is with [mrujs](https://mrujs.com) and the [cable_car feature](https://cableready.stimulusreflex.com/v/v5/cable-car) added in CableReady 5.  Here's an example.\n\nFirst you'll want to set up mrujs with the CableCar plugin.  Follow the [instructions in the mrujs docs](https://mrujs.com/how-tos/integrate-cablecar).\n\nNow you can add `data-remote` to any links or forms you want to use to control the modal.\n\n```html\n  \u003ca href=\"/confirmations/new\" data-remote\u003eOpen Confirmation in Modal\u003c/a\u003e\n\n  \u003c!-- OR --\u003e\n\n  \u003cform action=\"/confirmations\" data-remote\u003e\n    \u003cbutton\u003eSubmit form and process result in modal\u003c/button\u003e\n  \u003c/form\u003e\n```\n\nThen in your controllers, process the request and use `render operations:` to send CableReady operations back to the client.\n\n```ruby\n  # confirmations_controller.rb\n\n  def new\n    @confirmation = Confirmation.new\n    render operations: cable_car\n      .update_modal(\n        html: self.class.render(\n          template: \"confirmations/new\",\n          assigns: {confirmation: @confirmation},\n          layout: \"cable_modal\",\n        ))\n      .open_modal\n  end\n\n  def create\n    @confirmation = Confirmation.new(confirmation_params)\n    if @confirmation.save\n      render operations: cable_car.close_modal\n    else\n      render operations: cable_car.update_modal(\n        html: self.class.render(\n          template: \"confirmations/new\",\n          assigns: {confirmation: @confirmation},\n          layout: \"cable_modal\",\n        ))\n    end\n  end\n```\n\nThere's a full reference implementation in [/test/dummy](/test/dummy) of this repo.\n\n## Customization\n\nIf you don't want to use Bootstrap's modals, you can write your own plugin and then pass it to `CableModal.use(plugin)` in your javascript initializion.\n\nPlugins are plain javascript objects with the following properties:\n\n```javascript\n  {\n    connect() {}, // runs when the \u003ccable-modal\u003e component is added\n    disconnect() {}, // runs when the \u003ccable-modal\u003e component is removed\n    openModal: (operation) -\u003e {}, // open the modal\n    closeModal: (operation) -\u003e {}, // close the modal\n    updateModal: (operation) -\u003e {}, // update the modal's content\n    defaultContent: string // default innerHTML of the \u003ccable-modal\u003e component\n  }\n```\n\nNote that all functions will run bound to the `\u003ccable-modal\u003e` DOM node.  You can access the original plugin object inside these bound functions by calling `this.plugin`.\n\n## Contributing\nIssues and pull requests are welcome.\n\n## License\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexistentialmutt%2Fcable_modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexistentialmutt%2Fcable_modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexistentialmutt%2Fcable_modal/lists"}