rfoel / bulma-toast Goto Github PK
View Code? Open in Web Editor NEWBulma's pure JavaScript extension to display toasts
Home Page: https://rfoel.github.io/bulma-toast/
License: MIT License
Bulma's pure JavaScript extension to display toasts
Home Page: https://rfoel.github.io/bulma-toast/
License: MIT License
Is there any way to add classes or styling options to the created toasts?
I’m not able to find any.
Thanks for the useful project!
It would have a much wider applications if it includes the following options:
Just upgraded to 1.0.0 from 0.1.0
The issue is that the default export in 1.0.0 is https://github.com/rfoel/bulma-toast/blob/master/src/js/index.js#L58 trying to access the document
when bulma-toast is imported.
but in 0.1.0, just an function is exported: https://github.com/rfoel/bulma-toast/blob/0.1.0/src/extension.js#L7
so it's not evaluated until invocation time, allowing it to work in SSR environments. :-\
(for now, I'm downgrading back to 0.1.0 :-\ )
Ran in to this issue: ember-fastboot/ember-cli-fastboot#74 (for reference)
Hi, excellent contribution. Perhaps you could add a fade in and fade out option? The vast majority of toasts I've seen around the web use the fade behavior.
I have an angular project with bulma-toast configured.
When I try to start the project with ng serve
in Internet Explorer 11, I have the following errors in the console:
SCRIPT1014: Invalid character
vendor.js (122891,459)
Does bulma-toast support IE?
Versions;
"bulma": "^0.7.2",
"bulma-toast": "^1.4.0"
Internet Explorer v11.523.17134.0
Implement freeze timeout when user is hovering the notification. Good for long and detailed messages that require attention.
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Suddenly this error came after installing the module in our new project.
I'm looking for toast notifications for bulma, and this is empty! :-P
I am not able to set appendTo within my code. I want to append the toast to the <section class="section">...</section>
area.
However, this toast is overlapping the footer section of the page, which I want to prevent. I want to position the toast on the bottom-right corner of the <section class="section">...</section>
area. It should not overlap with the footer area!
I tried to change the appendTo to things like document.body.section
or document.section
, but these are not working.
Am I doing something wrong or is there a bug?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://unpkg.com/bulma-toast"></script>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<h1 class="title">Lorem ipsum</h1>
<h2 class="subtitle">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</h2>
<script>
bulmaToast.toast({
message: 'Hello There' ,
type: 'is-primary',
duration: 100000,
pauseOnHover: true,
position: 'bottom-right',
dismissible: true,
appendTo: document.body.section
})
</script>
</section>
<footer class="footer has-background-black">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>
</body>
</html>
Steps to reproduce:
jsfiddle with example: https://jsfiddle.net/Aviv_Galmidi/6218y3t9/6/
E.g.
setTimeout(() => {
const elm = document.createElement('a')
elm.text = "Click This"
elm.href = "http://url.example.com"
toast({
message: elm,
type: "is-info",
dismissible: true,
duration: 20000
});
}, 2000);
It could be something like:
// UNTESTED
if (typeof this.message === 'string') {
this.element.insertAdjacentText("beforeend", this.message);
} else {
this.element.appendChild(this.message);
}
Add option to dismiss notification when clicked.
Passing an invalid argument is throwing a TypeError. Uncaught TypeError: Cannot read property 'appendChild' of undefined
Try to message some <a>link</a>
, there won't be a space between the words.
Normally -without "animate" option- toast is auto dismissed after 2 seconds, the default duration. But when I add "animate" option to my code, it is not working (I mean not animated) and it isn't automatically closed after the miliseconds that I gave in "duration" setting.
Old code is -which works normally-:
toast({
message: "Hello There",
type: "is-info",
dismissible: true,
position: "top-right"
});
New code is -which is not animated and not auto dismissed-:
toast({
message: "Hello There",
type: "is-info",
dismissible: true,
duration: 1000,
position: "top-right",
animate: { in: 'fadeIn', out: 'fadeOut' }
});
Please allow passing the position value. The the current value anchors the initial positions to 0.
I would be happy to open a pull request with this option if you are happy to accept contributions?
Let opacity as an option, please!
toast({
message: 'Your message here',
duration: 2000,
position: 'top-right',
closeOnClick: true,
opacity: 1
})
At the moment, when the toast is destroyed, it destroys the parent. That parent could have other toasts within it. It deletes those toast nodes aswell. You should check, if the parent has any nodes in it, if it hasn't, then delete it.
I'm just wondering why I'm getting this every after I refresh at the same page that I'm working on.
Or, when nuxt.js hot-reloads the page whenever I change some code.
This is my current <script> in my page:
<script>
import { toast } from 'bulma-toast'
export default {
methods: {
async onUpload() {
try {
// ... send to axios and save to browser
toast({
message: 'Success! Your file is now saved.',
position: 'top-center',
type: 'is-success',
dismissible: true,
pauseOnHover: true,
animate: { in: 'bounceInDown', out: 'bounceOutUp' }
})
console.log(response)
} catch (e) {
console.error(e)
// TODO: create a variable for this "toast.message."
toast({
message: 'Something went wrong...',
position: 'top-center',
type: 'is-danger',
dismissible: true,
pauseOnHover: true,
animate: { in: 'bounceInDown', out: 'bounceOutUp' }
})
} finally {
this.isLoading = false
}
}
</script>
With 2.2.0 bulma-toast introduced new functions called 'setDefaults' and 'resetDefaults'. While the functions are working properly, typescript cannot recognize the functions as they are missing from index.d.ts and are marking the usage of said functions as errors.
Upon request I am able to provide a simple repo which reproduces this issue.
Bug with the new version is throwing a exception. Probably forgot to bind this
.
Really enjoying bulma-toast and have it working with svelte, bulma, and animate.css quite well. Super nice and easy.
I do see 'SyntaxError: Unexpected token '<'' in the console pointing to 'anonymous function' at bulma-toast-min-js-1. Have you see this before?
Hello!
Can u add extraStyle option?
Append to end of existing styles on .notification div
That need for calculated styling on each notice
Thank you
As the title states, the demo site doesn't seem to be active anymore. Any chance it can be updated?
New version use new class structure. E.g. .animated
instead of .animate__animated
I used "bulma-toast" on a gatsby project where the build would fail with WebpackError: ReferenceError: document is not defined
. Maybe add some some if(window.document...) for the plugin. Had to remove it, but was working great! Good work.
Steps to reproduce:
jsfiddle with example: https://jsfiddle.net/Aviv_Galmidi/6218y3t9/6/
Hello,
is their a way to use this module in angular? I managed to set it up and the toasts appear, but they do not disappear after the time or when clicked.
Thanks in advance
"bulma-toast": "^1.5.4"
There is no error during normal using, only the Jest test will report the error.
import { toast } from 'bulma-toast'
export const error = (message: string, lasting?: boolean): void => {
toast({
message,
type: 'is-danger',
position: 'top-center',
dismissible: true,
duration: lasting? 4000*10: 4000,
pauseOnHover: true,
// animate: { in: 'fadeIn', out: 'fadeOut' },
})
}
Jest tset code very simple:
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders Source Code', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/Source Code/i);
expect(linkElement).toBeInTheDocument();
});
It's a bit annoying to have to pass in the same options into every .toast() call. Would it be possible to set the defaults with something such as:
bulmaToast.setDefaults({
...
})
main
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN
environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/
.
If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.
Please make sure to set the NPM_TOKEN
environment variable in your CI with the exact value of the npm token.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Is there a way to control animation speed, or where the animation ends? Animation opening is great but closing is a bit grainy and ends short on some, see here.
@alejandroxlopez It look like that if you don't have the animate.css package, then the "X" button on the toast itself does not work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.