menu

Documentation

Overview

menu implements a material menu component.

See: https://material.io/components/web/catalog/menus/

Example

package main

import (
	"fmt"
	"log"

	"agamigo.io/material/internal/mdctest"
	"agamigo.io/material/menu"
	"github.com/gopherjs/gopherjs/js"
)

func main() {
	// Create a new instance of a material menu component.
	c := menu.New()
	printName(c)
	printState(c)
	c.QuickOpen = true
	c.Open = true
	printState(c)

	// Set up a DOM HTMLElement suitable for a checkbox.
	js.Global.Get("document").Get("body").Set("innerHTML",
		mdctest.HTML(c.Component().Type.MDCClassName))
	rootElem := js.Global.Get("document").Get("body").Get("firstElementChild")

	// Start the component, which associates it with an HTMLElement.
	err := c.Start(rootElem)
	if err != nil {
		log.Fatalf("Unable to start component %s: %v\n",
			c.Component().Type, err)
	}

	c.Open = false
	printState(c)
	c.OpenFocus(2)
	c.QuickOpen = true
	c.SetAnchorCorner(menu.BOTTOM_END)
	ms := c.AnchorMargins()
	ms.Left = ms.Left + 50
	ms.Right = ms.Right + 100
	ms.Top = ms.Top + 150
	ms.Bottom = ms.Bottom + 200
	c.SetAnchorMargins(ms)
	printState(c)
	c.Open = false
	c.ItemsContainer().Call("removeChild", c.Items()[0])
	printState(c)

	err = c.Stop()
	if err != nil {
		log.Fatalf("Unable to stop component %s: %v\n",
			c.Component().Type, err)
	}

}

func printName(c *menu.M) {
	fmt.Printf("%s\n", c.Component().Type)
}

func printState(c *menu.M) {
	fmt.Println()
	fmt.Printf("Open: %v, QuickOpen, %v, Items: %v\n",
		c.Open, c.QuickOpen, len(c.Items()))
	fmt.Printf("AnchorCorner: %v, ItemsContainer: %v\n",
		c.AnchorCorner(), c.ItemsContainer())
	fmt.Println("AnchorMargins")
	fmt.Printf("[Go] Left: %v, Right: %v, Top: %v, Bottom: %v\n",
		c.AnchorMargins().Left,
		c.AnchorMargins().Right,
		c.AnchorMargins().Top,
		c.AnchorMargins().Bottom,
	)
	if c.Component().Get("foundation_") != js.Undefined {
		jsMargins := c.Component().Get("foundation_").Get("anchorMargin_")
		fmt.Printf("[JS] Left: %v, Right: %v, Top: %v, Bottom: %v\n",
			jsMargins.Get("left"),
			jsMargins.Get("right"),
			jsMargins.Get("top"),
			jsMargins.Get("bottom"),
		)
	}
}

func init() {
	// We emulate a DOM here since tests run in NodeJS.
	// Not needed when running in a browser.
	err := mdctest.InitMenu()
	if err != nil {
		log.Fatalf("Unable to setup test environment: %v", err)
	}
}

Output:

MDCMenu

Open: false, QuickOpen, false, Items: 0
AnchorCorner: 0, ItemsContainer: undefined
AnchorMargins
[Go] Left: 0, Right: 0, Top: 0, Bottom: 0

Open: true, QuickOpen, true, Items: 0
AnchorCorner: 0, ItemsContainer: undefined
AnchorMargins
[Go] Left: 0, Right: 0, Top: 0, Bottom: 0

Open: false, QuickOpen, true, Items: 12
AnchorCorner: 8, ItemsContainer: [object HTMLUListElement]
AnchorMargins
[Go] Left: 0, Right: 0, Top: 0, Bottom: 0
[JS] Left: 0, Right: 0, Top: 0, Bottom: 0

Open: true, QuickOpen, true, Items: 12
AnchorCorner: 13, ItemsContainer: [object HTMLUListElement]
AnchorMargins
[Go] Left: 50, Right: 100, Top: 150, Bottom: 200
[JS] Left: 50, Right: 100, Top: 150, Bottom: 200

Open: false, QuickOpen, true, Items: 11
AnchorCorner: 13, ItemsContainer: [object HTMLUListElement]
AnchorMargins
[Go] Left: 50, Right: 100, Top: 150, Bottom: 200
[JS] Left: 50, Right: 100, Top: 150, Bottom: 200

Index

• Constants
• type Corner
• type M
  • func New() *M
  • func (m *M) AnchorCorner() Corner
  • func (m *M) AnchorMargins() *Margins
  • func (c *M) Component() *base.Component
  • func (c *M) Items() []*js.Object
  • func (m *M) ItemsContainer() *js.Object
  • func (c *M) OpenFocus(index int)
  • func (m *M) SetAnchorCorner(c Corner)
  • func (m *M) SetAnchorMargins(ms *Margins)
  • func (c *M) Start(rootElem *js.Object) error
  • func (c *M) StateMap() base.StateMap
  • func (c *M) Stop() error
• type Margins

Examples

• Package

Constants

const (
	TOP_LEFT     Corner = 0
	TOP_RIGHT           = 4
	BOTTOM_LEFT         = 1
	BOTTOM_RIGHT        = 5
	TOP_START           = 8
	TOP_END             = 12
	BOTTOM_START        = 9
	BOTTOM_END          = 13
)

Types

type Corner

type Corner int

type M

type M struct {

	// Open is the visible state of the menu component.
	Open bool `js:"open"`

	// QuickOpen controls whether the menu should open and close without
	// animation. False uses animation, true does not.
	QuickOpen bool `js:"quickOpen"`
	// contains filtered or unexported fields
}

M is a material menu component.

func New

func New() *M

New returns a new component.

func (*M) AnchorCorner

func (m *M) AnchorCorner() Corner

AnchorCorner returns the Corner the menu is/will be attached to.

func (*M) AnchorMargins

func (m *M) AnchorMargins() *Margins

AnchorMargins returns the distance from the anchor point that the menu is/will be.

func (*M) Component

func (c *M) Component() *base.Component

Component returns the component's underlying base.Component.

func (*M) Items

func (c *M) Items() []*js.Object

Items returns the HTMLLIElements that represent the menu's items.

func (*M) ItemsContainer

func (m *M) ItemsContainer() *js.Object

ItemsContainer is the HTMLUListElement that contains the menu's items

func (*M) OpenFocus

func (c *M) OpenFocus(index int)

OpenFocus opens the menu with an item at index given initial focus.

func (*M) SetAnchorCorner

func (m *M) SetAnchorCorner(c Corner)

AnchorCorner sets the Corner the menu is/will be attached to.

func (*M) SetAnchorMargins

func (m *M) SetAnchorMargins(ms *Margins)

AnchorMargins sets the distance from the anchor point that the menu is/will be.

func (*M) Start

func (c *M) Start(rootElem *js.Object) error

Start initializes the component with an existing HTMLElement, rootElem. Start should only be used on a newly created component, or after calling Stop.

func (*M) StateMap

func (c *M) StateMap() base.StateMap

StateMap implements the base.StateMapper interface.

func (*M) Stop

func (c *M) Stop() error

Stop removes the component's association with its HTMLElement and cleans up event listeners, etc.

type Margins

type Margins struct {
	Left   int
	Right  int
	Top    int
	Bottom int
}

Margins holds margin values used to configure menu anchor margins via {Set}AnchorMargins() methods.