clavijojuan/l.cascadebuttons

A leaflet plugin to create cascade buttons like controls

L.cascadeButtons

A leaflet plugin to create cascade buttons.

DEMO

---

Requirements

• Leaflet
• Some Font Icons

Install

NPM

npm i leaflet-cascade-buttons

Usage Example

Easy way to implements buttons with cascade subgroup buttons where each one can have it functionality.

new L.cascadeButtons([
    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
    {icon: 'fas fa-home', items:[
        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
    ]},
    {icon: 'fas fa-home', items: [
        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
    ]},
], {position:'topright', direction:'horizontal'}).addTo(map);

L.cascadeButtons receives two arguments:

• The first is an array that contains every parent button and it children's.
• The second is an object with control options

Parent properties

Property	Type	Default	Description
icon	String	null	Icon class of Font Icon
ignoreActiveState	Boolean	false	Flag boolean to ignore clicked button style
command	Function	null or (expand or collapse if button has childs)	Function to execute when button is clicked
items	Child properties[]	null	Array of child properties

Child properties

Property	Type	Default	Description
icon	String	null	Icon class of Font Icon
command	Function	null or (expand or collapse if button has childs)	Function to execute when button is clicked

Options

Option	Type	Default	Description
position	String	'bottomright'	Position of the control. Options: leaflet control positions
direction	String	'horizontal'	Stacked direction. Options: 'Vertical' and 'Horizontal'
className	String	''	className to customize control

Font Icons

Can be used with any font icon / custom library like:

• font awesome
• boostrap icons
• primeIcons
• custom

l.cascadebuttons's Issues

On vertical and horizontal problems

The direction option cannot sort the top-level button horizontally when the button does not have a submenu

Use `type="button"` to prevent unintended form submissions

Problem:

If a Leaflet map is used inside a <form> with this plugin, the <button>s will submit that form.

Solution:

This can be prevented if type="button" is added to the button elements by default.

Keyboard tab order issue

I noticed a keyboard issue:

1. Go to https://vibrant-perlman-43d7a4.netlify.app/
2. tab 5 times and press enter
3. tab 1 time

Expected:

The first button in the expanded list should be focused

Result:

The button in the next div is focused instead

added existing custom leaflet button into cascade display

currently i have 2 leaflet button with their own functions, how to implement them into cascade display?

Add event object to item command function

Hello,

I would like to suggest a small modification to the Leaflet Cascade Buttons plugin that allows passing the event object to the item command functions. This change can be useful when accessing event properties (such as the event target) within the command functions.

Currently, the command functions for items are called directly without passing any arguments:

childButton.addEventListener('click', () => item.command());

I propose changing this line to the following:

childButton.addEventListener('click', (e) => item.command(e));

With this change, you can define command functions that accept the event object as a parameter, like this:

{
  icon: 'fas fa-home',
  command: (e) => {
    console.log('Button clicked:', e.target);
  }
}

This allows for more flexibility when handling item click events.

Thank you for considering this suggestion. I believe this small change can be helpful for developers who want to access event properties within their command functions.

Best regards,

Justin

Screen reader issue

Problem:

People that use screen readers and can't see the UI wont know that there are new content available after pressing enter to expand the cascade buttons.

Solution:

Use aria-expanded="false" on the buttons when the button list is collapsed, and aria-expanded="true" when the button list is expanded.

---

More info: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Just an FYI - Didn't see it mentioned!

The icon is just the class for those wondering... so just put a space from the icon and the custom class you want.