@madebywink/crumpet
v0.0.11
Published
Just as the melted pad of butter atop a warm crumpet makes a crumpet what it is, this toast component helps make your UX great again.
Downloads
3
Readme
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/[email protected]/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:
- Head Code
<script src="https://cdn.jsdelivr.net/npm/@madebywink/[email protected]/dist/index.min.js"></script>
- 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.
- 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>