Could you make the methods return a promise, so that devs who want to use Promise#then method could use that over callbacks, so the callbacks would be optional. It'll allow much more flexibility and get rid of spaghetti code

I'm trying to run notie in my PHP Code but it does not working for me.

<?php

/* ******************************************************** */
/* Please visit the help file to set correctly this file :) */
/* ******************************************************** */

// Set to "mailchimp" or "file"
$STORE_MODE = "mailchimp";

// MailChimp API Key findable in your Mailchimp's dashboard
$API_KEY =  "";

// MailChimp List ID  findable in your Mailchimp's dashboard
$LIST_ID =  "";

// After $_SERVER["DOCUMENT_ROOT"]." , write the path to your .txt to save the emails of the subscribers
$STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."/subscription-list.txt";

/* ************************************ */
// Don't forget to check the path below
/* ************************************ */

require('MailChimp.php');

/* ***************************************************** */
// For the part below, no interventions are required
/* ***************************************************** */
if($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["email"])) {
	$email = $_POST["email"];
	header('HTTP/1.1 200 OK');
	header('Status: 200 OK');
	header("Content-Type: text/html");

	// Checking if the email writing is good
	if(filter_var($email, FILTER_VALIDATE_EMAIL)) {

		// The part for the storage in a .txt
		if ($STORE_MODE == "file") {

			// SUCCESS SENDING
			if(@file_put_contents($STORE_FILE, strtolower($email)."\r\n", FILE_APPEND)) {

			// ERROR SENDING
			} else {
			}

		// The part for the storage in Mailchimp
		} elseif ($STORE_MODE == "mailchimp") {

			$MailChimp = new \Drewm\MailChimp($API_KEY);

			$result = $MailChimp->call('lists/subscribe', array(
		                'id'                => $LIST_ID,
		                'email'             => array('email'=>$email),
		                'double_optin'      => true,
		                'update_existing'   => true,
		                'replace_interests' => false,
		                'send_welcome'      => false,
		            ));

			// SUCCESS SENDING
			if($result["email"] == $email) {

			// ERROR SENDING
			} else {

			}
		// ERROR
		} else {

		}
	// ERROR DURING THE VALIDATION
	} else {

	}
} else {
	header('HTTP/1.1 403 Forbidden');
	header('Status: 403 Forbidden');
}

echo '<link defer href="https://unpkg.com/notie/dist/notie.min.css" rel="stylesheet">';
echo '<script defer src="../../vendors/jquery/jquery-3.1.1.min.js"></script>';
echo '<script defer src="https://unpkg.com/notie"></script>';
echo '<script defer>
window.notie.alert({ type: "success", text: "Success!", time: 1.5 })
</script>
';

?>

Hi! First of all: great Script - I love it!

But why don't you provide tags of your plugin? Using bower it would helpful to have version numbers. If I install your script now I get the master branch. It's best practice to have version numbers of your repo, done with the help of git tags. Or am I getting something wrong?

Thank you.

I find it easier to remember enums than numbers.

README.md

notie.alert(notie.types.SUCCESS, 'Success!', 1.5);
notie.alert(notie.types.WARNING, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
notie.alert(notie.types.ERROR, 'Error.', 2.5);
notie.alert(notie.types.INFO, 'Information.' 2);

notie.js

var types = {
    SUCCESS: 1,
    WARNING: 2,
    ERROR: 3,
    INFO: 4
}
.....
return {
   alert: alert,
   confirm: confirm,
   input: input,
   types: types
};

Since updating to 3.0 via npm, there's now a random input box on my screen and the notifications are now unstyled. Any tips?

I suggest using the tag and release feature of Github so the changes between major releases are clearly laid out.

Thanks!

When a notie confirm is displayed on mobile an the text for yes / no is too long, the text is being shown in several rows, but the boxes do not expand. By that issue the user is not able to (clearly) read the whole text when on mobile. Screenshot attached.

Hello,

We use notie in our project. I have version 2.1.0 on my local server, but version 3.0.0 is now on production server, for it does a bower install upon deployment.

In bower.json:

...
  "dependencies": {
    "jquery": "= 2.1.4",
    "modernizr": "~2.8.2",
    "notie": "*"
  },
...

We would like to force to version ~2.1.0 to be sure to not see untested features on production server. But "notie": "~2.1.0" doesn't work as it seems there is no versioning available for Notie.js (bower info notie returns "No versions available", as there is no releases on Notie repository).

First, thanks for this great package. I was looking for something like this and only came across alert/modal scripts that threw in slide in notifications on the side. It's nice to have something dedicated to notifications.

There was a previous issue asking about positioning the notifications to the window's bottom: https://github.com/jaredreich/notie/issues/78

Your last message (Dec 28, 2016) said you'd incorporate this into v4. Since version 4 was released a couple days ago and you have an example notifications (select) that does slide up from the bottom window, I'm wondering if the other alerts can do the same?

Is there an option that I'm missing (documented or undocumented) that'll allow this? This would be great to have so that sticky messages can be presented at the footer without obscuring the nav menu.

Thanks.

Can't focus input element when notie opened over bootstrap modal, seems like bootstrap modal has position:fixed same as notie, thats why z-index does not work there;

So i should hide bootstrap modal when i open notie input, thats why i suggest you to add some new callback like notie.input(...params, ...,onOpen, onClose) it also should be useful in other times

Hi,

I would like to know if there's a way to avoid the following scenario, when I use notie.confirm, I give the user a choice between Yes and Delete, Yes => will resume and load whatever is inside localStorage & Delete => will delete whatever is inside localStorage.... but if you miss click outside of the confirm box it will always default to delete. Is there any ways to change this behavior without going through a series of notie.alert just to make that the user did not click outside the confirm box by mistake?

Basically a way to force the user to click YES OR DELETE but unable to dismiss the confirm box so this won't trigger the default behavior or going for the cancel function.

Thank you

This is a nice library but it really suffers when customising. For example, rather than a background colour, I'd like to add bottom border (different colour for each type of alert). This isn't possible without modifying the code. This will make updates painful.

I'd recommending removing all the settings variables and creating a default CSS file. The code would just need to change classes of the dom elements based on the status. i.e. To show an alert the CSS would have a class (maybe) classed "notie-show" which would have the CSS animation and this class would be added to the notification container. Also, each alert style should have it's own class. etc...

resizeListener could also be replaced with media queries.

This gives far more flexibility and easier upgrades

    I see that this was opened in 2018, has there been any updates?

Originally posted by @sgau77 in https://github.com/jaredreich/notie/issues/147#issuecomment-1292299834

Really need this addition, am having to update accessibility on a site that makes extensive use of notie

It includes PR #151, needed to be able to develop notie without problems.

This PR adds full support for accessibility according to WCAG 21 and W3C AA.

This is a must have nowadays and will enhance the library a lot if you accept the Pull Request.

HTH.

I've modernized the tooling used to build the tool since it was really outdated. That meant to upgrade to the latest versions of Gulp, Babel, Webpack and everything else, change some obsolete dev dependencies, change some gulp-plugins with tons of vulnerabilities, and rewriting the gulpfile.js file tasks, etc... Now it adds the .map file too.

Apart the build process adds the Notie version as a banner comment in the .js files inside dist (both minified and non-minified).

I've removed ESLint since it was really outdated, with vulnerabilities and nowadays VS Code and other IDEs do that for you.

I've updated the files in dist too to the newly generated ones. I've added the generation of map file for the script for debugging purposes.

This is the basis for being able to do new development in this great library. I plan to do a new pull request soon with full WCAG 2.1 accessibility support.

Hope you can merge the PR ad thanks for your great work!