ripple

Documentation

Overview

ripple implements a material ripple component.

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

Example

package main

import (
	"fmt"
	"log"

	"syscall/js"

	"github.com/vecty-material/material/components/internal/mdctest"
	"github.com/vecty-material/material/components/ripple"
)

func main() {
	// Create a new instance of a material ripple component.
	c := ripple.New()
	printName(c)
	printState(c)
	c.Unbounded = true
	c.Disabled = true
	printState(c)

	// Set up a DOM HTMLElement suitable for a ripple.
	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)
	}

	printState(c)
	c.Unbounded = false
	err = c.Activate()
	if err != nil {
		fmt.Printf("Unable to active ripple: %v", err)
	}
	err = c.Deactivate()
	if err != nil {
		fmt.Printf("Unable to deactive ripple: %v", err)
	}
	err = c.Layout()
	if err != nil {
		fmt.Printf("Unable to recompute ripple layout: %v", err)
	}
	c.Disabled = false
	printState(c)

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

}

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

func printState(c *ripple.R) {
	fmt.Println()
	fmt.Printf("Unbounded: %v, Disabled: %v\n",
		c.Component().Get("unbounded"), c.Component().Get("disabled"))
}

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

Output:

MDCRipple

Unbounded: false, Disabled: false

Unbounded: true, Disabled: true

Unbounded: true, Disabled: true

Unbounded: false, Disabled: false

Unbounded: false, Disabled: false

Index

• type R
  • func New() *R
  • func (r *R) Activate() error
  • func (c *R) Component() *base.Component
  • func (r *R) Deactivate() error
  • func (r *R) Layout() error
  • func (c *R) Start(rootElem js.Value) error
  • func (c *R) StateMap() base.StateMap
  • func (c *R) Stop() error

Examples

• Package

Types

type R

type R struct {
	Unbounded bool `js:"unbounded"`
	Disabled  bool `js:"disabled"`
	// contains filtered or unexported fields
}

R is a material ripple component.

func New

func New() *R

New returns a new component.

func (*R) Activate

func (r *R) Activate() error

Activate triggers an activation of the ripple (the first stage, which happens when the ripple surface is engaged via interaction, such as a mousedown or a pointerdown event). It expands from the center.

func (*R) Component

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

Component returns the component's underlying base.Component.

func (*R) Deactivate

func (r *R) Deactivate() error

Deactivate triggers a deactivation of the ripple (the second stage, which happens when the ripple surface is engaged via interaction, such as a mouseup or a pointerup event). It expands from the center.

func (*R) Layout

func (r *R) Layout() error

Layout recomputes all dimensions and positions for the ripple element. Useful if a ripple surface’s position or dimension is changed programmatically.

func (*R) Start

func (c *R) Start(rootElem js.Value) 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 (*R) StateMap

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

func (*R) Stop

func (c *R) Stop() error

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