{"id":29570272,"url":"https://github.com/blynx/form-sequence","last_synced_at":"2025-07-19T02:36:59.556Z","repository":{"id":40793557,"uuid":"240601757","full_name":"blynx/form-sequence","owner":"blynx","description":"A rocaesque custom element to fetch and interact with remote forms","archived":false,"fork":false,"pushed_at":"2023-01-06T02:32:52.000Z","size":914,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T02:34:30.185Z","etag":null,"topics":["forms","progressive-enhancement","roca"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/blynx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-14T21:29:30.000Z","updated_at":"2021-03-31T13:05:21.000Z","dependencies_parsed_at":"2023-02-05T03:17:01.507Z","dependency_job_id":null,"html_url":"https://github.com/blynx/form-sequence","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/blynx/form-sequence","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blynx%2Fform-sequence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blynx%2Fform-sequence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blynx%2Fform-sequence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blynx%2Fform-sequence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blynx","download_url":"https://codeload.github.com/blynx/form-sequence/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blynx%2Fform-sequence/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265877313,"owners_count":23842960,"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":["forms","progressive-enhancement","roca"],"created_at":"2025-07-19T02:36:58.577Z","updated_at":"2025-07-19T02:36:59.528Z","avatar_url":"https://github.com/blynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# form-sequence\n\nA rocaesque custom element to interactively transclude remote forms: Progressively enhance your multi-page-multi-step-forms.\n\n\u003c!-- TOC --\u003e\n\n- [form-sequence](#form-sequence)\n    - [Demo](#demo)\n    - [Usage](#usage)\n        - [Basics](#basics)\n        - [Attributes](#attributes)\n        - [Events](#events)\n        - [Configuration](#configuration)\n        - [Methods](#methods)\n        - [Styling Hints](#styling-hints)\n\n\u003c!-- /TOC --\u003e\n\n## Demo\n\nClone repo, then `npm install \u0026\u0026 npm run demo`. Browse to the url which gets displayed (usually http://localhost:3000)\n\n## Usage\n\n### Basics\n\n1. Set the capture attribute\n2. Set the form attribute\n3. Listen to the return event and decide what to do finally\n\n1, 2 - Wrap the starting point of your form with the form-sequence element: (Optionally) apply the id of the wrapped anchor to the `capture` attribute so the click gets intercepted. And (optionally) supply names or ids to the `form` attribute. If nothing is supplied to each, or the attributes are just left out, the first occuring anchor inside the `\u003cform-sequence\u003e` or the first form on succeeding pages is chosen.  \nInstead of changing to the next page, the page gets loaded in the background and the desired form gets transcluded here.\n\nExample:\n\n    \u003cform-sequence capture=\"goto-edit\" form=\"edit-something-form\" cancel=\"cancel-form\"\u003e\n      \u003ca id=\"goto-edit\" href=\"/something/edit\"\u003eEdit Something\u003c/a\u003e\n    \u003c/form-sequence\u003e\n\nThe remote form could look like this\n\n    \u003cform name=\"edit-something-form\" id=\"edit-something-form\" action=\"/something/edit\" method=\"post\"\u003e\n      \u003cinput type=\"text\" id=\"title\" value=\"the title of that thing\"\u003e\n      \u003ca id=\"cancel-form\" href=\"/something\"\u003ecancel\u003c/a\u003e\n      \u003cinput type=\"submit\" value=\"save\"\u003e\n    \u003c/form\u003e\n\n3 - You will most probably need to listen to the return event that gets fired after the last step. It will provide the response object as well as the response url object.\n\n    document.querySelector(\"form-sequence\").addEventListener(\"return\", e =\u003e {\n      // reload page to reflect eventual state change\n      window.location.href = e.detail.url.href\n    })\n\n### Attributes\n\n- `capture` (optionally)  \n  Provide the ids or names of the entry point element. Single entries or comma separated lists are valid. E.g. `my-link` or `my-link, alternate-link`.\n\n- `form` (optionally)  \n  The ids or names of the forms which are going to get transcluded. Single entries or comma separated lists are valid. E.g. `my-form` or `my-form, other-form, fallback-form`.\n\n- `cancel` (optionally)  \n  If the form has something like a cancel action to go back, you can put the ids/names of that element here to be able to \"undo\" the transclusion. A list is possible here, too.\n\n### Events\n\nYou can listen to some events which get fired during the process cycle: \n\n- `return`: Called when the process finishes.  \n  __The crucial one.__ You most likely need to listen to this event to handle the final step of your form process. It provides the response object as well as the response url object in the event details.\n\n- `done`: Called after each step.  \n  No details provided.\n\n- `success`: Called after each successful step.  \n  No details provided.\n  \n- `error`: Called when an error occurs.  \n  No details provided.\n\n### Configuration\n\n[...]\n\n### Methods\n\nSome methods of the element might be useful:\n\n- `close`: Close/reset this form-sequence element.\n\n- `closeAll`: Close/reset all form-sequence elements of that page.\n\n### Styling Hints\n\nAfter the form has been transcluded, the markup in the form-sequence element will look like this:\n\n    \u003cform-sequence capture=\"goto-edit\" form=\"edit-something-form\" cancel=\"cancel-form\"\u003e\n      \u003cdiv role=\"heading\"\u003eEit Something\u003c/div\u003e\n      \u003cdiv origin\u003e\n        \u003ca id=\"goto-edit\" href=\"/something/edit\"\u003eEdit Something\u003c/a\u003e\n      \u003c/div\u003e\n      \u003cdiv remote\u003e\n        ... your remote form\n      \u003c/div\u003e\n    \u003c/form-sequence\u003e\n\nHave a look into `demo/style.css`. There you will find style definitions, some of which you'll likely want to apply to your app:\n\n    // Hide the (retained) entry point element\n    form-sequence [origin] {\n      display: none;\n    }\n\n    // style the inserted heading element\n    form-sequence [role=\"heading\"] { ... }\n\n    // clearfix, to be sure\n    form-sequence::after {\n      display: block;\n      content: \"\";\n      clear: both;\n    }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblynx%2Fform-sequence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblynx%2Fform-sequence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblynx%2Fform-sequence/lists"}