jaredreich / notie Goto Github PK
View Code? Open in Web Editor NEWπ a clean and simple notification, input, and selection suite for javascript, with no dependencies
License: MIT License
π a clean and simple notification, input, and selection suite for javascript, with no dependencies
License: MIT License
Attributes that should be available:
I tend to have top-bar administrative menus which get covered by notie alerts and sometimes it would be useful to allow the user to close the alert.
The notifications(without style) are appearing on the bottom of the page with a text box. Is there a way to provide the mount element ?
Great plugin, clean and simple Just loving it.
I think a a great feature could be to have the ability for showing alerts that are not time-dependant so can be manually dismissed.
Just like a confirmation but with only one button so user aknowledges has read the alert (but no decission is required)
It's like an hybrid between alert and confirmation.
Any support for this guy - AngularJS ?
Would be good to provide a minfied version of notie.js within the repo. All of my other bower vendor dependencies provide a minified version so I can concat all of them together in one file. If I want to use notie.js I have to do a minification task only for notie.js.
Thanks
In an instant has 2 notices , the last don't show !
This library is nice and small. but it could be even smaller if it gives the option to only use plain alerts (no confirm/prompt functionality or vice versa). There are several ways to achieve this. Happy to help if you see the value.
Please consider adding a .npmignore
file that ignores things like tests and other dot-files so when notie is published that stuff is left out. I would simply use the same ignore list as bower.json has.
Thanks!
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 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
};
@jaredreich Pls see this example:
http://lichunqiang.github.io/tests/notie.html
it happens on the server response quickly
without having to copy and paste your excellent lib
Please consider using camelCase for naming variables, etc. All major JavaScript style guides advise this.
Thank you so much.
Currently the alerts don't get picked up by screen readers like VoiceOver. Adding in ARIA will enable this to be a tool used by anyone with assistive technology, not just visual users.
Each dialog with a button in it should have a role="alertdialog"
,if it is just informational it should get role="dialog"
. Each dialog needs aria-labelledby="ID OF TITLE"
and aria-describedby="ID OF CONTENT"
For role="dialog"
the focus must move to the title of the dialog allowing it to be read, then returned to the trigger once dismissed.
For role="alertdialog"
, there must be one focusable element in the dialog (button or link perhaps) and focus goes to the title of the dialog. Upon dismissal if the action on the elements inside the dialog do not direct the user to a new page, they should return the user to the trigger element.
Reference:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role
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!
That would be cool for cases when you want to deliver information but not make it disappear based on time but the user presses ok when he is done reading.
Just realised the PR I made for denouncing rezize breaks ie8 because of .bind. Needs a polyfill
It would be good, to check if the document is loaded & ready. If I include notie.js in my HTML header it ends up with the error "Uncaught TypeError: Cannot read property 'appendChild' of null" caused by
// Attach notie to the body element
document.body.appendChild(alert_outer);
My recommendation would be to do something like jQuery does to check if the body is ready:
http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3
Ok maybe I would have to do this with a pull request, but I'm not a git pro :-)
Thanks
Actually confirm function have callback only for success I think could be handy to have callback for fail :-)
The position of the addEventListener polyfill may be causing issues as it is below an addEventListener call which means the aforementioned call would not have the polyfill applied.
The polyfill needs to be above all calls of addEventListener
First of all, nice clean library, thanks.
Some feedback:
Showing an alert while a previous one is still visible does nothing. Scenario: I show an alert to notify the user that the changes are being saved, however if the transaction fails i would like to show an error alert but this doesn't work and there is no way I can see of manually closing an active alert.
So you can use stuff like:
if(notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel')) {
// whatever
}
Easier and cleaner than a callback and it emulates the default JS confirm. Will try to fork later and push a merge request for review.
It would be nice to have some constants defined inside notie
itself for choosing the alert's background. For instance, we could have notie.SUCCESS = 1
to be used as notie.alert(notie.SUCCESS, 'text');
. I know many people will argue that we could just put the number, but I always find myself forgetting which number is each.
Hi, i want to add this into my func.js wich is beeing loaded in the head section.
I need the func js in the head section beause of functions while html is running.
But then i get following error:
Uncaught TypeError: Cannot read property 'appendChild' of null
First off, thanks for making this lib and maintaining it.
I was looking at the releases and noticed there were no 3.3-3.7 versions. Is there something I'm missing here?
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.
when the user is typing and notie.alert are called simultaneously then the input box gets out of focus during typing.
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
Hey @jaredreich ,
Anychance you could put this on bower / npm for people to use?
I think it will increase the usage of notie.js
Thanks
I used with ajax submit:
in beforeSubmit called notie.alert(4, 'Starting...', 1)
in * success* called notie.alert(1, 'success')
the success callback called, but the alert was not display...
Hi. Please add confirm/input notification with three buttons.
For example:
http://i.imgur.com/Jealbdj.png
Will be good to add support for modern projects where people use Browserify, ES6 modules etc.
Example
var notie = require('notie');
notie.confirm();
// or ES6
import notie from '/notie';
notie.confirm();
In my opinion from perfomance reasons and code quality reasons notie should be rewrited to "class" and all methods should be prototype.
var notie = new Notie({//config});
Notie.confirm();
// Implementation example
function Notie (config) {
this.config = config;
}
Notie.prototype.confirm = function (msg) {
alert(msg);
};
π
On https://jaredreich.com/projects/notie.js/, pressing the Input button opens an overlay, but the input element in the dialog is not automatically focused. This unnecessarily forces the user to click/tap on said input element to start using it.
Btw, I think this functionality should be provided by the library, automatically. Also, please see if you can integrate keyboard accessibility; after activating the Confirm/Input buttons, the dialog should be focused and the focus order should be trapped inside said dialog (so that the user doesnβt accidentally focus other page elements that are behind the overlay).
People seem to want unit tests etc.
Would be nice if you could dismiss them by clicking on them.
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).
In the demo "Conform" appears as an overlay and it has Yes and Cancel (or we can use "No" which sounds more mandatory in some cases) option. The "Conform notie" should not get disappear when tap or click somewhere else other than "Cancel" option.
https://jaredreich.com/projects/notie.js/
In cases if a conformation is mandatory and the user tap somewhere else the "notie" will disappear and the user may not able to conform it again :)
Hi @jaredreich and many compliments for notie,
I would only suggest to consider parametrization of the Cancel option label in the select function. This is especially useful with language other than english.
Currently I'm manually modifying the label with this raw code:
setTimeout(() => { document.getElementById("notie-select-cancel").innerHTML = 'Annuler' });
Thanks.
Best regards,
Luca
I can't close alert by code.
I think this will be fun.
const n = notie.alert(2, '...');
setTimeout(() => {
n.hide();
}, 3000);
How do we dismiss an alert programmatically?
Is this possible? Do I miss something on the documentation?
Options should include:
Pseudo-code:
var regexString = '0-9a-zA-Z'
if (spacesAllowed) regexString += ' '
var regex = new RegExp('[^' + regexString + ']', 'g')
oninput = function () {
inputField.value.replace(regex, '')
}
Should work for copy-paste as well.
Hi, is it possible to open the notifications and confirmations on the bottom of the window?
Thanks
Currently, the script will add event handlers on the window's resize event. It is a lot of event handlers, and even worse is that they persist regardless of whether or not the user has actually implemented the notification type.
My proposal is to only add the respective listener when the notification is showing, and remove the listener once the notification is hidden.
if you think this is a reasonable change, I'll be more than happy to raise a PR. Thanks!
Hello,
To allow users to easily customize the design of Notie.js, I suggest to remove every styles from JS and use a CSS instead - SCSS would be even better. Then use JS to add/remove CSS classes (not styles) from HTML.
An external CSS is easier to customize and override than DOM style attributes; it does not require "!important" in front of each CSS property value, you can change CSS without editing JS, ...
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.