Open aleabodo opened 6 years ago
@aleabodo i dont knw wht happen't to the site, but you should use achive.org ;) https://web.archive.org/web/20180402165002/https://alertifyjs.org/
One month and the website is still down. At least the repo owners could set it up on a Github Pages for free...
But since the last commit was 2 years ago, I wonder if this project is still maintained.
Alertify.js is a small library which provides light-weight, high performance browser dialogs. Since it uses only 1 HTTP request and a payload of less than 3kB, it's a great option for adding basic style to alert, dialog, prompt and log messages even on low bandwidth connections.
We're working to get the latest version on all major public CDN's but until then, you'll need to either use a GitHub raw service, download it, or install via NPM or Bower.
Obviously, if you're installing via Bower or NPM, you'll need to include the files in the "dist" directory in your HTML for everything to work. But you knew that already.
It's also worth noting that the CSS is bundled by default, so there's no need to include any stylesheets to use the default theme. It's dyamically inserted before any other elements (like) stylesheets so it's super easy to override with your own styles.
<-- standard version -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>
<-- angular module -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/ngAlertify.js"></script>
bower install --save alertifyjs
npm install --save alertify.js
If you don't want to inject CSS for some reason, just insert your own styles (any style or link element with an id of alertifyCSS) before the javascript file:
<link rel="stylesheet" href="/path/to/custom/styles.css" id="alertifyCSS">
An AngularJS module is also included. It's in the "ngAlertify.js" file, so use that instead if you're building an AngularJS app.
If you want to check out a live demo of log messages with ngAlertify, click here.
// Make sure to include the ngAlertify.js file.
angular
.module("myApp", \["ngAlertify"\])
.controller("myController", function($scope, alertify) {
alertify.success("Welcome to alertify!");
});
Alertify is designed from the ground-up for great performance and a small footprint. That means it's not as feature-rich as some other options. That's on purpose. We don't plan on adding a lot more features so it stays a great option for every kind of website and user.
Currently, the entire library, with JavaScript and CSS is ~2.29 kB (gzipped), and getting smaller all the time. That's quite impressive considering it's only a single HTTP request, and no external dependencies at all being required.
The Angular module is only 2.32kB, so that's light, too!
Dialogs display a text and require user to acknowledge the message.
Try It
alertify.alert("Message");
Try It
// confirm dialog
alertify.confirm("Message", function () {
// user clicked "ok"
}, function() {
// user clicked "cancel"
});
Try It
alertify
.defaultValue("Default Value")
.prompt("This is a prompt dialog",
function (val, ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
// The value entered is availble in the val variable.
alertify.success("You've clicked OK and typed: " + val);
}, function(ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
alertify.error("You've clicked Cancel");
}
});
You're not limited to the "Ok" and "Cancel" button labels. You can easily set your own labels.
Try It
alertify
.okBtn("Accept")
.cancelBtn("Deny")
.confirm("Confirm dialog with custom button labels", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
Try It
alertify.confirm("Confirm?", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("Successful AJAX after OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("Successful AJAX after Cancel");
});
If your browser supports promises, you can use them instead of callbacks
Try It
if ("function" !== typeof Promise) {
alertify.alert("Your browser doesn't support promises");
return;
}
alertify.confirm("Confirm?").then(function (resolvedValue) {
// "resolvedValue" is an object with the following keys:
// buttonClicked
// inputValue (only for prompts)
// event
// The click event is in
// resolvedValue, so you can use
// it here.
resolvedValue.event.preventDefault();
alertify.alert("You clicked the " + resolvedValue.buttonClicked + " button!");
});
Try It
alertify.delay(1000); // This is just to make the demo go faster.
alertify.log("Default botoom left position");
setTimeout(function() {
alertify.logPosition("top left");
alertify.log("top left");
}, 1500);
setTimeout(function() {
alertify.logPosition("top right");
alertify.log("top right");
}, 3000);
setTimeout(function() {
alertify.logPosition("bottom right");
alertify.log("bottom right");
}, 4500);
setTimeout(function() {
alertify.reset(); // Puts the message back to default position.
alertify.log("Back to default");
}, 6000);
You can set where parent element where Alertify is appended into the DOM.
// By default, Alertify is appended to document.body. // You can easily change that, though, like this: var elem = document.getElementById("my-element"); alertify.parent(elem);
Try It
alertify.log("Standard log message");
HTML works just fine in log messages. Have at it!
Try It
var msg = "<img src='https://placehold.it/256x128'>" +
"<h3>This is HTML</h3>" +
"<p>It's great, right?</p>";
alertify.log(msg);
Keep in mind that the when setting a callback, clicking the log message doesn't automatically close the log message, which is different than previous functionality. This means that the callback could be called multiple times if the user clicks multiple times. If you're callback is an action that must be completed only once, you'll need to keep track of that separately.
Try It
alertify.log("Standard log message with callback", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.log("You clicked the notification");
});
Try It
alertify.success("Success log message");
Try It
alertify.success("Standard log message with callback", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("You clicked the notification");
});
Try It
alertify.error("Error log message");
Try It
alertify.error("Standard log message with callback", function(ev) {
// The click event is in the
// event variable, so you can use
// it here. ev.preventDefault();
alertify.error("You clicked the notification");
});
Try It
alertify
.closeLogOnClick(true)
.log("Click me to close!");
Clicking on a log message to close is disabled by default, but if you've enabled it and need to reset it to disabled, you can do so very easily.
The decision to disable it by default was to allow any type of html to be included in the log messages, including links.
Try It
alertify
.closeLogOnClick(true)
.log("Click me to close!")
.closeLogOnClick(false)
.log("You can't click to close this!");
Try It
alertify.delay(10000).log("Hiding in 10 seconds");
Persistent log messages will stay until clicked (if closeLogOnClick(true) is set) or until forcibly removed when the number of messages exceeds the maxLogItems setting.
Try It
alertify.delay(0).log("Will stay until clicked");
You can easily set the maximum number of log/success/error messages that will be displayed at a single time. The default is two.
Try It
alertify
.maxLogItems(1)
.log("This is the first message");
// The timeout is just for visual effect.
setTimeout(function() {
alertify.log("The second message will force the first to close.");
}, 1000);
You can change the template for all logs.
Try It
alertify
.setLogTemplate(function (input) { return 'log message: ' + input; })
.log("This is the message");
When you change values like the button labels, delays, default prompt values or placeholders, etc., you can easily reset the defaults.
Try It
// Notice the okay button is not the custom value, it was reset.
alertify
.okBtn("Go For It!")
.reset()
.alert("Custom values were reset!");
I've been needing to see live examples that the site had before it went down so I grabbed the website folder from the repo, updated the links and threw it on my server. Hope it helps!
Rawgit reaches actual end of life in October, so also, an alternative CDN solution would really be an important move to make for the website / documentation.
Rawgit's suggestion of jsdelivr seems like the most appropriate choice for now.
https://cdn.jsdelivr.net/gh/alertifyjs/alertify.js@v1.0.10/dist/js/alertify.js
That's why I believe GH Pages is there for that and project websites should be hosted nowhere else...
@dshastry your mirror has gone too?
@jesobreira You should probably switch away from this project as it is unmaintained... a website is not needed at this point
I have a huge legacy codebase that uses this lib... To be honest, it's a better option for me if I keep giving this library the maintenance and attention it deserves, but I'd like to check how the old maintainers would see it first...
I could get the website at Web Archive and host it in GH Pages but as the footer states, it's a copyrighted work...
@jesobreira : http://davidshastry.com/dev/alertify/
Sorry moved webhosts to URL changed.
https://alertifyjs.org is gone. Yesterday the package disappeared in npmjs.com (Today back again). Is this package still supported and are we going to have the documentation back?