Add more Parameters to Snackbar

[SuperDOS]

Maybe I'm missing something but I use snackbar a lot to send message to the users. So I want to call the snackbar ui with parameters of different messages. Right now I can only change duration?

added custom code to replace the current function so I can call the snackbar more dynamic for example: snackbar('info', 'Saved Config', 900, true,'primary');

function snackbar(type, msg, milliseconds, top, additionalClass) {
    const snackbarElements = document.querySelectorAll(".snackbar");
    snackbarElements.forEach(function (element) {
        const iconElement = element.querySelector("i");
        const messageElement = element.querySelector("span");

        if (iconElement && messageElement) {
            iconElement.textContent = type;
            messageElement.textContent = msg;

            if (milliseconds === -1) return;

            element.classList.add("active");

            if (top) {
                element.classList.add("top");
            }

            if (additionalClass) {
                element.classList.add(additionalClass);
            }

            setTimeout(function () {
                element.classList.remove("active");

            }, milliseconds || 6000);
        }
    });
}

[leonardorafael]

@SuperDOS ,

The main idea of ui() function is to show/hide the elements (not for create it). You need to render your element first and call ui() to show/hide it. So you can customize a snackbar as you wish.

A javascript example:

function snackbar() {
  const element = document.createElement("div");
  element.innerHTML = `<div class="snackbar"><i>home</i><span>New message</span></div>`;
  document.body.appendChild(element);

  ui(".snackbar", 6000);
}

A html example:

<div class="snackbar">
  <i>home</i>
  <span>New message</span>
</div>

ui(".snackbar", 6000);

[SuperDOS]

Thanks, since we can call ui(".snackbar", timeout) would it make sense to add more options to for example pass message and icon? I'm used to materialize css before switching over to beer css (which I find much better in so many ways :) ) that has options for the toasts, https://materializeweb.com/toasts.html hence my question.

I changed my small function to use ui instead and i have a snackbar div created in my DOM from the start so I can call it to show the message I want.

function snackbar(type, msg, milliseconds, top, additionalClass) {
    $(".snackbar").each(function () {
        const iconElement = $(this).find("i");
        const messageElement = $(this).find("span");

        if (iconElement.length > 0 && messageElement.length > 0) {
            iconElement.text(type);
            messageElement.text(msg);

            if (milliseconds === -1) return;

            $(this).attr('class', 'snackbar');

            if (top) {
                $(this).addClass("top");
            }

            if (additionalClass) {
                $(this).addClass(additionalClass);
            }

            ui(".snackbar", milliseconds);
        }
    });
}