HTMLgen!
A package to help you write WASM, or HTML inside of Golang!
Installation
Easily install with the following command:
go get github.com/Nigel2392/gohtml
Usage
var body = g.Div()
var form = body.Form()
form.Method("POST").Action("")
form.Label("Name")
form.Input("text") // Type
form.Input("text", "name") // Type, name and id
form.Input("submit", "submit", "Submit") // Type, name and display text
var _, rdy = form.WasmFormSubmit(func(data map[string]string) {
println(fmt.Sprintf("Form submitted: %v", data))
})
// Generate the HTML inside of wasm, append it to and existing html element.
body.WasmGenerate(elems.ID_MAIN_CONTENT)
// Once the html is appended, we can enable the eventlistener.
rdy.Finalize()
Simple program for fetching repositories from github:
var WAITER = make(chan struct{})
var Application = js.Global().Get("document").Call("getElementById", "app")
var URLS = elems.URLs{
{
Name: "Home",
URL: "/",
Icon: "fa fa-home",
CallBack: func(body *elems.Element, args []js.Value, url *url.URL) {
var loader = loader.NewLoader(elems.ID_MAIN_CONTENT)
var url_to_fetch = "https://api.github.com/users/Nigel2392/repos"
var reqEdit = func(rq *http.Request) { rq.Header.Set("Accept", "application/vnd.github.v3+json") }
loader.RunHTTP(url_to_fetch, "GET", reqEdit, func(resp *http.Response) error {
var repos = make([]struct {
Name string `json:"name"`
Private bool `json:"private"`
Description string `json:"description"`
HTMLURL string `json:"url"`
}, 0)
if err := json.NewDecoder(resp.Body).Decode(&repos); err != nil {
return err
}
var table = body.Table().Class("table table-striped table-hover")
var thead = table.Thead()
var tbody = table.Tbody()
var headRow = thead.Tr()
headRow.Th("Name")
headRow.Th("Description")
var links elems.Elements = make(elems.Elements, 0)
for _, repo := range repos {
current_row := tbody.Tr()
links = append(links, current_row.Td().A(repo.Name+" ", repo.HTMLURL).Href(repo.HTMLURL))
current_row.Td().P(repo.Description)
}
body.WasmGenerate(elems.ID_MAIN_CONTENT)
return nil
})
},
},
{
Name: "About",
URL: "/about",
Icon: "fa fa-info",
CallBack: func(body *elems.Element, args []js.Value, url *url.URL) {
form := body.Form()
form.Method("POST").Action("")
form.Label("Name").Class("form-label")
form.Input("text", "name", "Name").Class("form-control mb-2")
form.Input("submit", "submit", "Submit").Class("btn btn-primary mb-2")
var _, rdy = form.WasmFormSubmit(func(data map[string]string) {
println(fmt.Sprintf("Form submitted: %v", data))
})
body.WasmGenerate(elems.ID_MAIN_CONTENT)
rdy.Finalize()
},
},
}
func main() {
// Create a navbar
var header, app, urlElems = elems.SideNavBar(URLS)
// Listen for clicks on the navbar anchor tags
var rdy = urlElems.ActiveToggleListener(paginator(app, URLS))
// Generate the HTML inside of wasm, append it to and existing html element.
header.WasmGenerate("app")
// Once the html is appended, we can enable the eventlistener.
rdy.Finalize()
// Lock the main thread to prevent the program from exiting.
<-WAITER
}
func paginator(app *elems.Element, urls elems.URLs) func(this js.Value, args []js.Value, url *url.URL) interface{} {
return func(this js.Value, args []js.Value, url *url.URL) interface{} {
app.WasmClearInnerHTML()
var container = app.Div()
// Get a URL to use it's callback function.
if u, err := URLS.GetURL(url.Path); err != nil {
container.Style("text-align:center").H1("404 Page Not Found")
} else {
u.CallBack(container, append([]js.Value{this}, args...), url)
}
return nil
}
}