@madebywink/crumpet

Crumpet - What is it?

Just as a melted pad of butter atop a warm crumpet allows the simple crumpet to transcend the burden of mediocrity, this toast component helps make your UX great again.

In the states, we call crumpets "english muffins".

Setup:

Be sure to check for the latest version here: https://www.npmjs.com/package/@madebywink/crumpet

CDN: (i.e. Webflow embed)

<script src="https://cdn.jsdelivr.net/npm/@madebywink/crumpet@0.0.25/dist/index.min.js"></script>

window.notificationSystem = crumpet.Crumpet(options)

Crumpet:

Setup - Webflow Usage

In Project Settings in the Custom Code tab, add the following lines of code:

1. Head Code

<script src="https://cdn.jsdelivr.net/npm/@madebywink/crumpet@0.0.10/dist/index.min.js"></script>

2. Footer Code

<script>
window.onload = async function() {
  	window.notificationSystem = crumpet.Crumpet()
}
</script>

This attaches a notification container to the end of the Body element. By default, css causes notifications show in the lower right-hand corner of the screen.

3. Dispatching a message

<script>
    windpw.notificationSystem.dispatch('SUCCESS', 'Congratulations! This message was dispatched!', 2000 /*ms*/)
</script>

Setup - Custom options:

<script>
    window.onload = async function() {
        window.notificationSystem = crumpet.Crumpet(makeOptions())
    }

    function makeOptions() {
        return {
            defaultDuration: 2000, //ms
            notificationTemplates: {
                'ERROR': '.js-notification-template.error',
                'LOADING': '.js-notification-template',
                'SUCCESS': '.js-notification-template.success',
                'ATTENTION': 'js-notification-template'
            },
            notificationContainer: '.js-notification-dropzone',
            cssString: defaultStyles(),
            htmlString: defaultElements()
    }
    }

    function defaultElements() {
    return `
        <div class="notification-container js-notification-dropzone">
            <div class="notification js-notification-template crumpet-hidden"></div>
            <div class="notification error js-notification-template crumpet-hidden"></div>
            <div class="notification success js-notification-template crumpet-hidden"></div>
        </div>
    `
    }

    function defaultStyles() {
    return `
        .crumpet-hidden {
            display: none !important;
        }
        .notification {
            padding: 8px 16px;
            margin: 8px 0 0 0;
            background: #FFF;
            box-shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
            border-radius: 0.375rem;
            border: 1px solid rgba(0,0,0,0.0125);
            min-height: 36px;
        }
        .notification-container {
            position: fixed;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 8px;
            transition-property: margin,margin-top,margin-bottom,margin-left,margin-right;
            transition-duration: 500ms;
        }
    `
    }
</script>