https://github.com/zot/teenygui
https://github.com/zot/teenygui
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/zot/teenygui
- Owner: zot
- Created: 2020-06-25T15:17:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-25T15:38:24.000Z (about 6 years ago)
- Last Synced: 2025-04-15T02:45:53.020Z (about 1 year ago)
- Language: TypeScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# This is a near-trivial HTML5 presentation framework
See [example-app.ts](example-app.ts) for an example of how to use it
# GETTING STARTED
## 1. INITIALIZE THE FRAMEWORK
1. Import teenygui
1. Make sure you can retrieve each object by its ID (number or string)
1. Call initGui with your function that retrieves an object by ID
```Typescript
type ObId = string | number
type GetObFunc = (id: ObId) => any
function initGui(func: GetObFunc): void
```
## 2. TIE A DOM NODE TO AN OBJECT
1. Retrieve or create the DOM node (if you create it, make sure to put it into the page, somewhere)
2. 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
```HTML
Address:
Notes
```
3. Call bind on the DOM node to show the object and provide a function that can update it
```Typescript
type UpdateFunc = (id: string, field: string, value: string) => void
type HTMLOrSVG = HTMLElement | SVGElement
function bind(id: string, node: HTMLOrSVG, updater: UpdateFunc)
```
## 3. CALL REFRESH TO UPDATE AN OBJECT IF YOU CHANGE IT
Teenygui 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.
```Typescript
function refresh(id: ObId)
```