Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
prophetjs
Advanced tools
Readme
A very lean dependency free javascript library to display toast messages on web pages. This project adheres to Semantic Versioning. Sometimes I do screw up though. Prophet currently supports:
Choose any of the ways to get prophet:
git clone https://github.com/binarybaba/prophetjs.git
bower install prophetjs --save
You'll see the files in the dist folder:
dist
├── css
│ ├── prophet.css
│ └── prophet.min.css
└── js
├── prophet.js
├── prophet.js.map
└── prophet-min.js
Include the css and js files in your webpage:
<link rel="stylesheet" href="dist/css/prophet.min.css">
<script src="dist/js/prophet-min.js"></script>
Prophet exposes a Message API. All customizations and configurations are done through this API.
To show a message, you will have to instantiate an instance of Message
.
The toast message stays for a default duration of 4000 milliseconds or until the user clicks on it. After which, the toast message is removed from the DOM.
var toast = new Message('Harambe for president!').show();
You can also provide a callback to every toast message. The callback will be triggered after the toast message is removed or when the user clicks on it. The callback sends the autogenerated ID of the toast message (which can be overridden).
var toast = new Message("Awesome! We'll contact you soon!", function(id){
console.log('Message ID:', id);
// some more code...
});
toast.show();
}
You can also optionally include a set of options as a second argument (followed by the callback if any ) on every toast message. If the values are not implemented, the default values take up. (Prophet was written in TypeScript which enforces type checking for development. Hence, it implements an interface IMessageOptions. More on that here...) The following are the keys that options takes
id
The id is autogenerated per toast message.
type
Prophet has 3 presets types: success
, error
and default
. You can also set more presets. Click here to see how.
"default"
duration
The time each toast message stays on the web page before disappearing. Takes value in miliseconds.
4000
class
You can further customize the look of every toast message by providing extra CSS classes to override. Takes a single string of class names seperated by spaces.
""
var ppap = new Message("Awesome! Pen Pineapple Apple Pen.", {
id:i++, //i defined somewhere up above
duration: 8000,
type: 'success',
class : 'blue-background white-text thin-border'
}).show();
You can also add more types by providing the background-color
, color
and type
for more uses. Please note, all the keys are mandatory.
Message.config.types({
type: "tip",
backgroundColor:"#fafafa",
color:"#313131"
})
Now you can use the type while invoking a new Message:
var ppap = new Message("Awesome! Pen Pineapple Apple Pen.", { type: 'tip'}, function(id){
console.log(id);
})
ppap.show();
Thanks for taking out time for actually reading this block. You're awesome! Prophetjs is written in TypeScript. I started writing this library as my venture into getting to know TypeScript better so if you're thinking of contributing, please do install TypeScript as your dev dependencies. I'll be further updating this section to include guides on how to get your way around the compiler and how you can install it per your IDE/editor (and maybe put this whole section in a new file)
Open source under the MIT License. All rights reserved.
FAQs
A very lean dependency free javascript library to display toast messages on web pages.
The npm package prophetjs receives a total of 4 weekly downloads. As such, prophetjs popularity was classified as not popular.
We found that prophetjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.