Using a Svelte click event to toggle a boolean value in an array from a div

Question

Using a Svelte click event to toggle a boolean value in an array from a div

How can I modify the toggle functionality to work on any click event, not just on a button, in order to trigger a state change regardless of the element clicked?

ToolBar.ts

export default class ToolBar  {
    options:Array<ToolBarOptions>;
    constructor() {
        this.options = [
            new ToolBarOptions(ToolButton.sideMenu,SideMenuIcon,false,true, []),
            new ToolBarOptions(ToolButton.mainMenu,MainMenuIcon,false,true, [ new ToolBarOptions(ToolButton.export,exportIcon,true,true,[])]),
            new ToolBarOptions(ToolButton.entities,EntityIcon,false,true,[]),
            new ToolBarOptions(ToolButton.setting,settingsIcon,false,true,[]),
        ];
    }
}

class ToolBarOptions  {
    disabled:boolean;
    name:ToolButton;
    icon:string;
    show:boolean;
    options:Array<ToolBarOptions>;
    constructor(name: ToolButton,icon:string,disabled:boolean,show:boolean, options:Array<ToolBarOptions>) {
        this.name = name;
        this.disabled = disabled;
        this.icon = icon;
        this.show=show;
        this.options=options;
    }
}

export const enum ToolButton{
    mainMenu="mainMenu",
    export="export",

    entities="entities",
    sideMenu="sideMenu",
    setting="setting",
}

App.svelte

let toolbarOptions = new ToolBar();


function handleClickOutSide() {
console.log(toolbarOptions.options)
toolbarOptions.options.forEach((o) => {
o.show=!o.show;
});

console.log(toolbarOptions.options)
    <div  on:click={handleClickOutSide } class="toolbar">
  <ul class="">
    {#each toolbarOptions.options as  {name,  icon,options, show }, i}
    <li>
      
      <button on:click={()=>show=!show} name={name} class="flex items-center justify-center relative {toolbarOptions.options.length-1 === i ? "h-10":""}">
        {#if toolbarOptions.options.length-1 ===i}
        <div>100%</div>
        {/if}

        <icon>  {@html icon}</icon>
        <span>
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </span>

        {#if  options.length >0 }

        <div class="absolute top-10 w-32 bg-black h-10 cursor-pointer  {show ? "hidden":""}">
          <ul class="w-full flex">
            {#each options as  {name,  icon,show }}
            <li class="min-w-full flex items-center h-10 px-2">
                <span class="">  {@html icon}  </span>
                <span class="left-4 w-1/2"> {name}</span>
            </li>
            {/each}
          </ul>
        </div>
        {/if}

      </button>
    
    </li>
    {/each}
  </ul>
</div>

javascript typescript svelte

Answer 1

Answer №1

When dealing with items in a list, there are various options to consider for responsiveness:

Access item by index
Map through all items
Use a dummy assignment

Here are examples for each of these approaches:

let items = [
    { name: 'Item 1', checked: false },
    { name: 'Item 2', checked: false },
    { name: 'Item 3', checked: false },
];

const toggleViaIndex = () =>
    items.forEach((e, i) => items[i].checked = !items[i].checked);

const toggleViaMap = () =>
    items = items.map(item => ({ ...item, checked: !item.checked }));

const toggleViaDummyAssignment = () => {
    items.forEach(item => item.checked = !item.checked);
    items = items;
}

REPL

I personally don't prefer the use of dummy assignments as it may seem unnecessary. However, adding comments can help clarify the purpose of such statements.

Using classes should be avoided unless absolutely necessary, as they can interfere with certain functions or prototypes when working with methods like mapping where spread functionality is important.

Additionally, make sure to provide keyboard equivalents for non-button elements to ensure accessibility, such as an escape key press for click events.

Instead of toggling the visibility on click events, it's recommended to simply set show to false.

Regarding ToolBarOptions, you can greatly shorten the code using TypeScript:

class ToolBarOptions {
    constructor(
        public name: ToolButton,
        public icon: string,
        public disabled: boolean,
        public show: boolean,
        public options: Array<ToolBarOptions>,
    ) { }
}

Answer 2

When dealing with items in a list, there are various options to consider for responsiveness:

Access item by index
Map through all items
Use a dummy assignment

Here are examples for each of these approaches:

let items = [
    { name: 'Item 1', checked: false },
    { name: 'Item 2', checked: false },
    { name: 'Item 3', checked: false },
];

const toggleViaIndex = () =>
    items.forEach((e, i) => items[i].checked = !items[i].checked);

const toggleViaMap = () =>
    items = items.map(item => ({ ...item, checked: !item.checked }));

const toggleViaDummyAssignment = () => {
    items.forEach(item => item.checked = !item.checked);
    items = items;
}

REPL

I personally don't prefer the use of dummy assignments as it may seem unnecessary. However, adding comments can help clarify the purpose of such statements.

Using classes should be avoided unless absolutely necessary, as they can interfere with certain functions or prototypes when working with methods like mapping where spread functionality is important.

Additionally, make sure to provide keyboard equivalents for non-button elements to ensure accessibility, such as an escape key press for click events.

Instead of toggling the visibility on click events, it's recommended to simply set show to false.

Regarding ToolBarOptions, you can greatly shorten the code using TypeScript:

class ToolBarOptions {
    constructor(
        public name: ToolButton,
        public icon: string,
        public disabled: boolean,
        public show: boolean,
        public options: Array<ToolBarOptions>,
    ) { }
}

Using a Svelte click event to toggle a boolean value in an array from a div

Answer №1

Similar questions

Vue.js not populating select option tags

Extract the Top X elements from a multidimensional array

Steps for updating the property "project_id" within a nested JSON array to "project_name"

Utilizing WebView for Initiating AJAX Calls

Is it possible that when a user is redirected to a different URL, Chrome terminates any pending Ajax requests?

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

``Next.js allows you to nest components within a component to create routing functionalities

jQuery wordpress Error: $ function is undefined and not recognized

How to send arguments to a callback function in Next.JS

Avoid changing the format when sending a JSON string to Node

Searching for a cake in CakePHP with autocomplete functionality

The Art of JavaScript Module Patterns in Image Sliders

Retrieving a Promise's value for an HTML Element

Is it possible to utilize jQuery's .wrap or .wrapInner to encase a variety of elements within them?

One method for routing pages in React Router is to have a shared component that is displayed on multiple pages, as well as a

When preparing for production, SvelteKit's Static adapter appends `.html` to href links

Using a loop to execute Javascript Promise.all()

Error Encountered (TypeError): Unable to access attributes of undefined (attempting to read 'appendChild')

What are the steps to generate two unique instances from a single class?

Performing a simulated click on a dynamically inserted element using pure JavaScript