hyper-modals v1.0.4

HyperModals

HyperModals is a small library focused on making typical tasks like creating modals and UI notifications easy and fast. It aims on providing an intuitive and stripped-down developer experience that allows for focusing on the task of creating a good app. You can start with the default configuration and later tweak the values to match your needs and the style of your application.

Information

This library is still in development. Modals are now out in alpha.

Important

• Modals are in very early development! The API, looks and behaviour may change!
• I might remove "light" theme option of notifications and rename them to "alerts".

Developing

1. Fork & Clone the repository
2. Install dev dependencies npm i
3. Run live reload example server npm run dev
4. Build for production npm run build
5. Submit a pull-request

More info on how to contribute can be found in the CONTRIBUTING.md file.

Installation via NPM

npm i hyper-modals

Importing the Library

This is a UI library, please don't try this in node ;)

From CDN:
<script src="https://cdn.jsdelivr.net/npm/hyper-modals/dist/hyper-modals.min.js"></script>
Or go to jsDelivr to view more options.

Or as a ES Module:
import HyperModals from "hyper-modals"

The config:

The config has several options wich are mainly opional (if not, there is a info in the detailed documentation and there will be an error message if necesarry in your JS console).
Details on what options are available can be found in the detailed documentation of each modal type below.

Creating a Modal

Simple example:

<template id="template">
    <h2>This is my modal!</h2>
    <button data-hm-callback="test">Callback</button>
    <button data-hm-resolve>Just resolve</button>
    <button data-hm-reject>Just reject</button>
</template>

new HyperModals.Modal("#template", {
    callbacks: {
        test: function (resolve, reject, event) {
            console.log("Received test callback, resolving now");
            resolve("hello1");
            // resolve("hello1", "hello2")
            // => Would later print out ["hello1", "hello2"] inside the then function
            // => You can of course also resolve with the event as a parameter
        },
    },
})
    .then((arguments) => {
        // alert("Promise resolved");
        console.log(arguments); // => "hello1"
    })
    .catch((error) => {
        alert("Promise rejected");
        console.warn(error);
        // If you change resolve("hello1") to reject("hello1") in the test callback, than error would be "hello1"
    });

Or with async/await:

try {
    let result = await new HyperModals.Modal("#template", {
        callbacks: {
            test: function (resolve, reject, event) {
                console.log("Received test callback, resolving now");
                resolve("hello1");
                // resolve("hello1", "hello2")
                // => Would later print out ["hello1", "hello2"]
                // => You can of course also resolve with the event as a parameter
            },
        },
    });

    console.log(result); // => "hello1"
} catch (error) {
    alert("Promise rejected");
    console.warn(error);
    // If you change resolve("hello1") to reject("hello1") in the test callback, then error would be "hello1"
}

Parameters

Config

Understanding callbacks

There are three types of callbacks that you can define using the datalist attribute. Essentially, the datalist lets you define custom html attributes, that start with "data-". We use these to fire our callbacks.
Types of callbacks that are available:

• data-hm-callback="anyCallbackNameYouImagine"
• data-hm-resolve
• data-hm-reject

(Examples can be found in the "simple example" section above).

data-hm-callback

This one fires a callback from your callbacks object inside the config. So if you have data-hm-callback="anyCallbackNameYouImagine", it will try to fire the anyCallbackNameYouImagine function which is hopefully definded in your config. In the example above, the callback is named "test".

data-hm-resolve

This just resolves the promise (the one you can catch with .then(function() {})) with no parameter.

data-hm-reject

Just rejects the promise (the one you can catch with .catch(function() {})) with no parameter.

Creating a Notification

Simple example:

let test = new HyperModals.Notification("Hello, how are you?", { theme: "dark" });

A more complex example can be found in example/index.html, we recommend running it with npm run dev.

Parameters

Config

Custom CSS

Coming soon.