//build +js,wasm package element import ( "fmt" "syscall/js" ) type Element struct { js.Value } var doc = js.Global().Get("document") func Document() Element { return Element{doc} } func NewElement(tag string) Element { doc := Document() e := doc.Call("createElement", tag) return Element{e} } func NewTextNode(text string) Element { doc := Document() textNode := doc.Call("createTextNode", text) return Element{textNode} } func (e Element) On(event string, fn func()) Element { e.Call("addEventListener", event, js.FuncOf(func(this js.Value, args []js.Value) interface{} { fn() return nil })) return e } func (e Element) Margin(margin string) Element { e.Get("style").Call("setProperty", "margin", margin) return e } func (e Element) Padding(padding string) Element { e.Get("style").Call("setProperty", "padding", padding) return e } func (e Element) Height(height string) Element { e.Get("style").Call("setProperty", "height", height) return e } func (e Element) MinHeight(height string) Element { e.Get("style").Call("setProperty", "min-height", height) return e } func (e Element) Color(color string) Element { e.Get("style").Call("setProperty", "color", color) return e } func (e Element) Width(width string) Element { e.Get("style").Call("setProperty", "width", width) return e } func (e Element) BackgroundColor(color string) Element { e.Get("style").Call("setProperty", "background-color", color) return e } func (e Element) Attr(name, value string) Element { e.Call("setAttribute", name, value) return e } func (e Element) Text(text string) Element { doc := Document() textNode := doc.Call("createTextNode", text) e.Call("appendChild", textNode) return e } func (e Element) Child(child Element) Element { e.Call("appendChild", child.Value) return e } func Mount(root Element) { doc := Document() body := doc.Get("body") body.Call("appendChild", root.Value) } func (e Element) Flex() Element { e.Get("style").Call("setProperty", "display", "flex") return e } func (e Element) FlexDirection(direction string) Element { e.Get("style").Call("setProperty", "flex-direction", direction) return e } func (e Element) JustifyContent(justify string) Element { e.Get("style").Call("setProperty", "justify-content", justify) return e } func (e Element) JustifyItems(justify string) Element { e.Get("style").Call("setProperty", "justify-items", justify) return e } func (e Element) AlignItems(align string) Element { e.Get("style").Call("setProperty", "align-items", align) return e } func (e Element) FlexGrow(grow int) Element { e.Get("style").Call("setProperty", "flex-grow", grow) return e } func (e Element) FlexWrap(wrap string) Element { e.Get("style").Call("setProperty", "flex-wrap", wrap) return e } func (e Element) Grid() Element { e.Get("style").Call("setProperty", "display", "grid") return e } func (e Element) GridAutoFlow(flow string) Element { e.Get("style").Call("setProperty", "grid-auto-flow", flow) return e } func (e Element) GridTemplateColumns(columns string) Element { e.Get("style").Call("setProperty", "grid-template-columns", columns) return e } func (e Element) GridTemplateRows(rows string) Element { e.Get("style").Call("setProperty", "grid-template-rows", rows) return e } func (e Element) MaxWidth(width string) Element { e.Get("style").Call("setProperty", "max-width", width) return e } // OnWithEvent adds an event listener that provides access to the event object func (e Element) OnWithEvent(event string, fn func(js.Value)) Element { e.Call("addEventListener", event, js.FuncOf(func(this js.Value, args []js.Value) interface{} { if len(args) > 0 { fn(args[0]) } return nil })) return e } // Positioning methods func (e Element) Position(pos string) Element { e.Get("style").Call("setProperty", "position", pos) return e } func (e Element) Left(value string) Element { e.Get("style").Call("setProperty", "left", value) return e } func (e Element) Top(value string) Element { e.Get("style").Call("setProperty", "top", value) return e } func (e Element) Right(value string) Element { e.Get("style").Call("setProperty", "right", value) return e } func (e Element) Bottom(value string) Element { e.Get("style").Call("setProperty", "bottom", value) return e } func (e Element) ZIndex(value int) Element { e.Get("style").Call("setProperty", "z-index", fmt.Sprintf("%d", value)) return e } // Transform methods func (e Element) Transform(value string) Element { e.Get("style").Call("setProperty", "transform", value) return e } func (e Element) TransformOrigin(value string) Element { e.Get("style").Call("setProperty", "transform-origin", value) return e } // Cursor and interaction func (e Element) Cursor(value string) Element { e.Get("style").Call("setProperty", "cursor", value) return e } func (e Element) UserSelect(value string) Element { e.Get("style").Call("setProperty", "user-select", value) return e } func (e Element) PointerEvents(value string) Element { e.Get("style").Call("setProperty", "pointer-events", value) return e } // Overflow func (e Element) Overflow(value string) Element { e.Get("style").Call("setProperty", "overflow", value) return e } // Box styling func (e Element) BoxShadow(value string) Element { e.Get("style").Call("setProperty", "box-shadow", value) return e } func (e Element) BorderRadius(value string) Element { e.Get("style").Call("setProperty", "border-radius", value) return e } func (e Element) Border(value string) Element { e.Get("style").Call("setProperty", "border", value) return e } // DOM manipulation func (e Element) RemoveChild(child Element) Element { e.Call("removeChild", child.Value) return e } func (e Element) ClearChildren() Element { e.Set("innerHTML", "") return e } // SVG support func NewElementNS(namespace, tag string) Element { doc := Document() e := doc.Call("createElementNS", namespace, tag) return Element{e} } // AttrNS sets an attribute with namespace (for SVG) func (e Element) AttrNS(namespace, name, value string) Element { if namespace == "" { e.Call("setAttribute", name, value) } else { e.Call("setAttributeNS", namespace, name, value) } return e }