{"id":18447073,"url":"https://github.com/zot/teenygui","last_synced_at":"2025-04-15T02:45:56.057Z","repository":{"id":66781244,"uuid":"274948952","full_name":"zot/teenygui","owner":"zot","description":null,"archived":false,"fork":false,"pushed_at":"2020-06-25T15:38:24.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T02:45:53.020Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/zot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-25T15:17:42.000Z","updated_at":"2020-06-25T15:38:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"76d2c78e-9089-4f7f-ba60-a8e6991fd35b","html_url":"https://github.com/zot/teenygui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zot%2Fteenygui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zot%2Fteenygui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zot%2Fteenygui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zot%2Fteenygui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zot","download_url":"https://codeload.github.com/zot/teenygui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997087,"owners_count":21195797,"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-06T07:11:52.970Z","updated_at":"2025-04-15T02:45:56.042Z","avatar_url":"https://github.com/zot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# This is a near-trivial HTML5 presentation framework\n\nSee [example-app.ts](example-app.ts) for an example of how to use it\n\n# GETTING STARTED\n## 1. INITIALIZE THE FRAMEWORK\n1. Import teenygui\n1. Make sure you can retrieve each object by its ID (number or string)\n1. Call initGui with your function that retrieves an object by ID\n```Typescript\ntype ObId = string | number\ntype GetObFunc = (id: ObId) =\u003e any\n\nfunction initGui(func: GetObFunc): void\n```\n\n## 2. TIE A DOM NODE TO AN OBJECT\n1. Retrieve or create the DOM node (if you create it, make sure to put it into the page, somewhere)\n2. You can use clone to copy an object in the DOM. It's easy to make a hidden \"templates\" div that contains elements you can copy\n```HTML\n\u003cdiv id='templates'\u003e\n    \u003cdiv id='peep' class='peep'\u003e\n        \u003cinput type='text' x-field='name'\u003e\u003c/span\u003e \u003cb\u003eAddress:\u003c/b\u003e \u003cinput type='text' x-field='address'\u003e\u003c/span\u003e \u003ci class=\"fas fa-window-close\" name='close'\u003e\u003c/i\u003e\n        \u003cbr\u003e\n        \u003cb\u003eNotes\u003c/b\u003e\n        \u003ctextarea x-field='notes'\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n3. Call bind on the DOM node to show the object and provide a function that can update it\n```Typescript\ntype UpdateFunc = (id: string, field: string, value: string) =\u003e void\ntype HTMLOrSVG = HTMLElement | SVGElement\n\nfunction bind(id: string, node: HTMLOrSVG, updater: UpdateFunc)\n```\n\n## 3. CALL REFRESH TO UPDATE AN OBJECT IF YOU CHANGE IT\nTeenygui will keep the GUI up-to-date with changes the user makes directly, like typing into text fields but if your program changes an object that Teenygui is (or might be) displaying, make sure to call refresh.\n```Typescript\nfunction refresh(id: ObId)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzot%2Fteenygui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzot%2Fteenygui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzot%2Fteenygui/lists"}