@svonk/util

Easy-to-use Toasts, Popups, and more common utilities for my projects

Installation

---

Install to your project with:

npm i @svonk/util@latest

Usage

---

In your main javascript file, import with:

import {parts} from "@svonk/util"

see below for more info on how to use these parts!

Toasts

---

new Toast("message", "type", #duration#, "iconPath", "action")

"message"

• the toast message text to be displayed

"type"

• a string, either:
  • "boxed"
  • "default"
  • "transparent"
• indicates which style to use (see ./util.css for more info)

#duration#

• a number, in ms, of how long to display the toast for

"iconPath" (optional)

• path to the icon to be shown on the toast (should be square, about 40x40)

"action" (optional)

• path to redirect to (set with window.location.href) after the duration passes
• if this is set, the page will also be dimmed slightly while the toast is showing to make it stand out more

Toast Variants

---

all variants have an optional last argument action (type string) that when specified will redirect to that url using window.location.href when the toast animates out

new ErrorToast("preface", "error", #duration#)

A normal toast, except with the icon set to ./assets/error-icon by default, and the option to reuse a preface for multiple errors

"preface"

• A string, which will be concatonated with a colon and the message

"error"

• A string with the error message. I suggest using the cleanError function to get a readable message from error codes

#duration#

• see parent

new WarningToast("message", #duration#)

A normal toast, except with the icon set to ./assets/warning-icon by default

"message", #duration#

• see parent

new SuccessToast("message", #duration#)

A normal toast, except with the icon set to ./assets/success-icon by default

"message", #duration#

• see parent

new placeholderToast()

takes no arguments, used to show that a feature is incomplete, or will be added in its place later, uses ./assets/unimplemented-icon

Popups

---

new Popup("message", "type", #duration#, "iconPath", [action])

creates an Andriod 13-style popup with styled action buttons based on an imput array. Can be removed with removePopup(), or will automatically animate out after the set duration

"message"

• the popup message text to be displayed
• either
  • an array ["title", "message"]
  • a string "message"

"type"

• a string, currently unused, but you could define your own styles for this

#duration#

• a number, in ms, of how long to display the popup for

"iconPath" (optional)

• path to the icon to be shown on the popup

[action] (optional)

• an array of action buttons to be shown, each of which should have:
  • an array within it of: ["onclick", "text", "class"]
  • "onclick"
    • text, to be eval()ed when clicked
  • "text"
    • text to be shown on the button
  • "class"
    • class added to the button, to allow it to be styled, or setup listeners for when it's clicked
    • .primary-action, .secondary-action, and .delete-color are pre-defined

Popup Utilities

removePopup()

takes no arguments. Will remove any displaying popups, animating them out first.

Other Functions

---

cleanError({error})

takes in an error object (from firebase) and attempts to clean it up into something readable from error.code, if it's not able to, it returns "Error ${error.message}"

{error}

• a keyed object with error.message and error.code properties, both of which are strings

$()

proxy import for jquery, since it's imported for use in ./util.js anyways