gohtml

GoHTML!

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

Example of form submissions:

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
	}
}