{"id":20461031,"url":"https://github.com/ericgj/multi-view","last_synced_at":"2025-07-13T05:37:44.037Z","repository":{"id":9250080,"uuid":"11072746","full_name":"ericgj/multi-view","owner":"ericgj","description":"Multiple-state views controller. Lets you define multiple reactive views and easily transition between them.","archived":false,"fork":false,"pushed_at":"2013-07-02T19:10:24.000Z","size":124,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T11:34:13.314Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericgj.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-30T15:40:01.000Z","updated_at":"2013-11-09T06:09:45.000Z","dependencies_parsed_at":"2022-09-01T12:31:41.385Z","dependency_job_id":null,"html_url":"https://github.com/ericgj/multi-view","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ericgj/multi-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericgj%2Fmulti-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericgj%2Fmulti-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericgj%2Fmulti-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericgj%2Fmulti-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericgj","download_url":"https://codeload.github.com/ericgj/multi-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericgj%2Fmulti-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265096157,"owners_count":23710769,"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-15T12:22:55.476Z","updated_at":"2025-07-13T05:37:43.870Z","avatar_url":"https://github.com/ericgj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# multi-view\n\n  Multiple-state views controller.  Lets you define multiple reactive\n  views and easily transition between them.\n\n## Installation\n\n    $ component install ericgj/multi-view\n\n## Motivation\n\n  You have multiple views of a given model, which can't easily be captured\n  by a single template and styling, and you want to swap them out in the\n  same place on the page. Also, you want to be able to transition between\n  them based on user events within any of the views.\n\n  This library encapsulates that kind of behavior and provides an alternative\n  to managing 'view mode' externally between two or more template/views.\n\n  I put scare-quotes around _view mode_ because of course no one wants _modal\n  interfaces_ if we can help it. My hope is that the baggage associated\n  with the term 'modal'  will eventually fade away with the amazing UI\n  possibilities we have now, where modes and mode transitions do not have\n  to be invisible to the user nor force the user into a synchronous response.\n  \n## API\n\n### MultiView( rootEl:String|Element )\n\n  Constructor; specify root element which templates are appended under.\n\n### MultiView#mode( name:String, view:Function )\n\n  Define mode with given name and view class\n\n### MultiView#render( model:Object, mode:String )\n\n  Transition to given mode, building view with given model and swapping in\n  the built element into the DOM.\n\n### MultiView#transitioned( className:String )\n\n  Element class name which is added after elements are swapped in; used\n  for CSS transitions.\n\n## Events\n\nTwo events are emitted after mode transitions:\n\n### 'change', lastMode, mode\n\n### mode, lastMode\n\n\n## Notes\n\n### Assumptions about Views\n\n  Your view constructors should take a single argument: the model.\n  The views themselves are responsible for setting and \"reactifying\" a \n  template, etc. Any other state that your view needs should be set \n  externally, not in the constructor.\n  \n### How to transition between views from within your views\n\n  Your handler should emit the name of the mode you want to transition to.\n  For instance with a template like:\n  \n  ```html\n    \u003cbutton on-click=\"special\"\u003eGo to special mode\u003c/button\u003e\n  ```\n\n  in your view:\n\n  ```javascript\n    MyView.prototype = new Emitter;\n    MyView.prototype.special = function(){\n      this.emit('special');\n    }\n  ```\n\n  MultiView handles the rest of the mechanics of the transition.\n\n  If you don't need to transition within your views, your views do not \n  have to inherit Emitter methods.\n  \n\n## License\n\n  MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericgj%2Fmulti-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericgj%2Fmulti-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericgj%2Fmulti-view/lists"}