How to use MDC-Web methods (e.g. MDCIconButtonToggle)

Question

I'm having trouble getting the MDC-Web methods/ framework methods to work. Specifically I'm trying to get the MDCIconButtonToggle to work. I have an icon button that can change when clicked. I thought the way I set it up was correct, but it won't toggle when clicked.

import {MDCIconButtonToggle} from '@material/icon-button';
import {MDCIconButtonToggleFoundation} from '@material/icon-button';

const iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

function handleToggleButtonClick(){
  console.log("clicked");
  const toggleBtn = new MDCIconButtonToggleFoundation(expBtn);
  toggleBtn.handleClick();
}

var expBtn = document.getElementById("config-audio-button");
expBtn.addEventListener("click", handleToggleButtonClick);

When I run this, every time I click the button "clicked" is displayed in the console, as expected, but the icon doesn't change/ toggle. If I change MDCIconButtonToggleFoundation to MDCIconButtonToggle, I get an error message in console, but the button toggles.

The error message claims that either expBtn.addEventListener is not a function, or that handleClick is undefined.

I've looked through the main docs, and this, but haven't been able to figure out what I'm doing wrong.

score 2 · Answer 1 · answered Dec 22 '19 at 00:30

Well done on finding a work-around this.

But for someone else that might be stuck with the same problem, here's the clear cut on how you can properly listen to events directly on a component,a button as an example:

Assume we have a button below:

const someButton = new MDCIconButtonToggle(document.querySelector('.someButton'));

We want to alert("yes") when it's clicked. We would the register the event as follows:

someButton.listen('click', ()=> { alert("yes"); });

Note: The event name is a normal javascript event like "abort", "scroll", "change" etc.

score 1 · Accepted Answer · answered Sep 12 '19 at 13:23

So after even more searching around I found a listen() method in the MDC Dialog documentation. Just ctrl+f for listen and you will find a few examples.

For whatever reason this is the first and only place I've found a listen() method mentioned. If anyone knows where listen() is explicitly documented, I'd be happy to have a link to it to learn more about it.

Below is my solution. I first get an HTML collection of all the toggle-able elements. Then I iterate over them, and add the listen() event listener method to listen for a change event. Once the change event occurs, the buttons will execute handleClick()/ toggle on/off.

// Get "array" of toggle-able arrow dropdowns.
var expandableArrowButtons = document.getElementsByClassName("mdc-icon-button add-margin-bottom");

// Iterate over all 3 expandable arrow icon buttons, and listen for a change event. 
[].forEach.call(expandableArrowButtons, function(element){
  const toggleBtn = new MDCIconButtonToggle(element);

  toggleBtn.listen('MDCIconButtonToggle:change', function(){
    console.log("clicked");

    const tb = new MDCIconButtonToggleFoundation(toggleBtn);
    tb.handleClick();
  });
});

Material Design documentation is incomplete indeed. It is very hard for anyone to start right there on the go. Which sort of doesn't make sense, even an experienced programmer can only be productive if they understand the API for it. Which is had as it's poorly documented. — Mosia Thabo, Dec 22 '19 at 00:12

How to use MDC-Web methods (e.g. MDCIconButtonToggle)

2 Answers2