Socket
Socket
Sign inDemoInstall

notie

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

notie - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

dist/notie.css
dist/notie.js
dist/notie.min.js
gulpfile.js
notie.scss

4

bower.json
{
"name": "notie",
"description": "A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.",
"description": "notie - a clean and simple notification suite for javascript, with no dependencies",
"main": "notie.js",

@@ -16,3 +16,3 @@ "authors": [

],
"homepage": "https://github.com/jaredreich/notie.js",
"homepage": "https://github.com/jaredreich/notie",
"moduleType": [],

@@ -19,0 +19,0 @@ "ignore": [

1023

notie.js
/*
* notie.js - A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.
*
* Copyright (c) 2015 Jared Reich
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* https://jaredreich.com/projects/notie.js
*
* Version: 2.1.0
*
*/
var notie = function(){
notie - a clean and simple notification suite for javascript, with no dependencies
// SETTINGS
// *********************************************
// General
var shadow = true;
var font_size_small = '18px';
var font_size_big = '24px';
var font_change_screen_width = 600;
var animation_delay = 0.3;
var background_click_dismiss = true;
// notie.alert colors
var alert_color_success_background = '#57BF57';
var alert_color_warning_background = '#E3B771';
var alert_color_error_background = '#E1715B';
var alert_color_info_background = '#4D82D6';
var alert_color_text = '#FFF';
Copyright (c) 2015 Jared Reich
// notie.confirm colors
var confirm_and_input_color_background = '#4D82D6';
var confirm_and_input_color_yes_background = '#57BF57';
var confirm_and_input_color_no_background = '#E1715B';
var confirm_and_input_color_text = '#FFF';
var confirm_and_input_color_yes_text = '#FFF';
var confirm_and_input_color_no_text = '#FFF';
// ID's for use within your own .css file (OPTIONAL)
// (Be sure to use !important to override the javascript)
// Example: #notie-alert-inner { padding: 30px !important; }
var alert_outer_id = 'notie-alert-outer';
var alert_inner_id = 'notie-alert-inner';
var alert_text_id = 'notie-alert-text';
var confirm_outer_id = 'notie-confirm-outer';
var confirm_inner_id = 'notie-confirm-inner';
var confirm_background_id = 'notie-confirm-background';
var confirm_yes_id = 'notie-confirm-yes';
var confirm_no_id = 'notie-confirm-no';
var confirm_text_id = 'notie-confirm-text';
var confirm_yes_text_id = 'notie-confirm-yes-text';
var confirm_no_text_id = 'notie-confirm-no-text';
var input_outer_id = 'notie-input-outer';
var input_inner_id = 'notie-input-inner';
var input_background_id = 'notie-input-background';
var input_div_id = 'notie-input-div';
var input_field_id = 'notie-input-field';
var input_yes_id = 'notie-input-yes';
var input_no_id = 'notie-input-no';
var input_text_id = 'notie-input-text';
var input_yes_text_id = 'notie-input-yes-text';
var input_no_text_id = 'notie-input-no-text';
// *********************************************
// HELPERS
// *********************************************
// Function for resize listeners for font-size
var resizeListener = function resizeListener(ele) {
if (window.innerWidth <= font_change_screen_width) { ele.style.fontSize = font_size_small; }
else { ele.style.fontSize = font_size_big; }
};
// Debounce function (credit to Underscore.js)
var debounce_time = 500;
var debounce = function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// Event listener for enter and escape keys
window.addEventListener('keydown', function(event) {
var enter_clicked = (event.which == 13 || event.keyCode == 13);
var escape_clicked = (event.which == 27 || event.keyCode == 27);
if (alert_is_showing) {
if (enter_clicked || escape_clicked) {
clearTimeout(alert_timeout_1);
clearTimeout(alert_timeout_2);
alert_hide();
}
}
else if (confirm_is_showing) {
if (enter_clicked) {
confirm_yes.click();
}
else if (escape_clicked) {
confirm_no.click();
}
}
else if (input_is_showing) {
if (enter_clicked) {
input_yes.click();
}
else if (escape_clicked) {
input_no.click();
}
}
});
// addEventListener polyfill, fixes a style.height issue for IE8
if (typeof Element.prototype.addEventListener === 'undefined') {
Element.prototype.addEventListener = Window.prototype.addEventListener = function (e, callback) {
e = 'on' + e;
return this.attachEvent(e, callback);
};
}
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Project demo:
https://jaredreich.com/projects/notie
// Scroll disable and enable for notie.confirm and notie.input
var original_body_height, original_body_overflow;
function scroll_disable() {
original_body_height = document.body.style.height;
original_body_overflow = document.body.style.overflow;
document.body.style.height = '100%';
document.body.style.overflow = 'hidden';
}
function scroll_enable() {
document.body.style.height = original_body_height;
document.body.style.overflow = original_body_overflow;
}
// *********************************************
// NOTIE.ALERT
// *********************************************
Version: 3.0.0
// notie elements and styling
var alert_outer = document.createElement('div');
alert_outer.id = alert_outer_id;
alert_outer.style.position = 'fixed';
alert_outer.style.top = '0';
alert_outer.style.left = '0';
alert_outer.style.zIndex = '999999999';
alert_outer.style.height = 'auto';
alert_outer.style.width = '100%';
alert_outer.style.display = 'none';
alert_outer.style.textAlign = 'center';
alert_outer.style.cursor = 'default';
alert_outer.style.MozTransition = '';
alert_outer.style.WebkitTransition = '';
alert_outer.style.transition = '';
alert_outer.style.cursor = 'pointer';
// Hide alert on click
alert_outer.onclick = function() {
clearTimeout(alert_timeout_1);
clearTimeout(alert_timeout_2);
alert_hide();
*/
var notie = function(){
// Default options
var options = {
animationDelay: 300,
backgroundClickDismiss: true
}
function setOptions(customOptions) {
// Custom options
for (var key in customOptions) {
options[key] = customOptions[key];
}
}
// ALERT
// **************
// create alert container
var alertOuter = document.createElement('div');
alertOuter.id = 'notie-alert-outer';
// Hide alert on click
alertOuter.onclick = function() {
clearTimeout(alertTimeout1);
clearTimeout(alertTimeout2);
alertHide();
};
var alert_inner = document.createElement('div');
alert_inner.id = alert_inner_id;
alert_inner.style.padding = '20px';
alert_inner.style.display = 'table-cell';
alert_inner.style.verticalAlign = 'middle';
alert_outer.appendChild(alert_inner);
// Initialize notie text
var alert_text = document.createElement('span');
alert_text.id = alert_text_id;
alert_text.style.color = alert_color_text;
if (window.innerWidth <= font_change_screen_width) { alert_text.style.fontSize = font_size_small; }
else { alert_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, alert_text), debounce_time), true);
alert_inner.appendChild(alert_text);
// add alert to body
document.body.appendChild(alertOuter);
// create alert inner container
var alertInner = document.createElement('div');
alertInner.id = 'notie-alert-inner';
alertOuter.appendChild(alertInner);
// create alert content container
var alertContent = document.createElement('div');
alertContent.id = 'notie-alert-content';
alertInner.appendChild(alertContent);
// Initialize alert text
var alertText = document.createElement('span');
alertText.id = 'notie-alert-text';
alertContent.appendChild(alertText);
// alert helper variables
var alertIsShowing = false;
var alertTimeout1;
var alertTimeout2;
var wasClickedCounter = 0;
function alert(type, message, seconds) {
blur();
// Attach notie to the body element
document.body.appendChild(alert_outer);
wasClickedCounter++;
// Declare variables
var height = 0;
var alert_is_showing = false;
var alert_timeout_1;
var alert_timeout_2;
var was_clicked_counter = 0;
function alert(type, message, seconds) {
// Blur active element for use of enter key, focus input
document.activeElement.blur();
was_clicked_counter++;
setTimeout(function() {
was_clicked_counter--;
}, (animation_delay * 1000 + 10));
wasClickedCounter--;
}, (options.animationDelay + 10));
if (was_clicked_counter == 1) {
if (wasClickedCounter === 1) {
if (alert_is_showing) {
if (alertIsShowing) {
clearTimeout(alert_timeout_1);
clearTimeout(alert_timeout_2);
clearTimeout(alertTimeout1);
clearTimeout(alertTimeout2);
alert_hide(function() {
alert_show(type, message, seconds);
alertHide(function() {
alertShow(type, message, seconds);
});

@@ -235,3 +92,3 @@

else {
alert_show(type, message, seconds);
alertShow(type, message, seconds);
}

@@ -243,11 +100,11 @@

function alert_show(type, message, seconds) {
function alertShow(type, message, seconds) {
alert_is_showing = true;
alertIsShowing = true;
var duration = 0;
if (typeof seconds == 'undefined') {
var duration = 3000;
if (typeof seconds === 'undefined' || seconds === 0) {
var duration = 86400000;
}
else if (seconds < 1) {
else if (seconds > 0 && seconds < 1) {
duration = 1000;

@@ -258,16 +115,22 @@ }

}
// Remove all color classes first
removeClass(alertOuter, 'background-success');
removeClass(alertOuter, 'background-warning');
removeClass(alertOuter, 'background-error');
removeClass(alertOuter, 'background-info');
// Set notie type (background color)
switch(type) {
case 1:
alert_outer.style.backgroundColor = alert_color_success_background;
addClass(alertOuter, 'background-success');
break;
case 2:
alert_outer.style.backgroundColor = alert_color_warning_background;
addClass(alertOuter, 'background-warning');
break;
case 3:
alert_outer.style.backgroundColor = alert_color_error_background;
addClass(alertOuter, 'background-error');
break;
case 4:
alert_outer.style.backgroundColor = alert_color_info_background;
addClass(alertOuter, 'background-info');
break;

@@ -277,21 +140,17 @@ }

// Set notie text
alert_text.innerHTML = message;
alertText.innerHTML = message;
// Get notie's height
alert_outer.style.top = '-10000px';
alert_outer.style.display = 'table';
alert_outer.style.top = '-' + alert_outer.offsetHeight - 5 + 'px';
alertOuter.style.top = '-10000px';
alertOuter.style.display = 'table';
alertOuter.style.top = '-' + alertOuter.offsetHeight - 5 + 'px';
alert_timeout_1 = setTimeout(function() {
alertTimeout1 = setTimeout(function() {
addClass(alertOuter, 'transition');
if (shadow) { alert_outer.style.boxShadow = '0px 0px 10px 0px rgba(0,0,0,0.5)'; }
alert_outer.style.MozTransition = 'all ' + animation_delay + 's ease';
alert_outer.style.WebkitTransition = 'all ' + animation_delay + 's ease';
alert_outer.style.transition = 'all ' + animation_delay + 's ease';
alertOuter.style.top = 0;
alert_outer.style.top = 0;
alertTimeout2 = setTimeout(function() {
alert_timeout_2 = setTimeout(function() {
alert_hide(function() {
alertHide(function() {
// Nothing

@@ -303,147 +162,87 @@ });

}, 20);
}
function alert_hide(callback) {
function alertHide(callback) {
alert_outer.style.top = '-' + alert_outer.offsetHeight - 5 + 'px';
alertOuter.style.top = '-' + alertOuter.offsetHeight - 5 + 'px';
setTimeout(function() {
if (shadow) { alert_outer.style.boxShadow = ''; }
alert_outer.style.MozTransition = '';
alert_outer.style.WebkitTransition = '';
alert_outer.style.transition = '';
removeClass(alertOuter, 'transition');
alert_outer.style.top = '-10000px';
alertOuter.style.top = '-10000px';
alert_is_showing = false;
alertIsShowing = false;
if (callback) { callback(); }
}, (animation_delay * 1000 + 10));
}, (options.animationDelay + 10));
}
// confirm
// **************
var confirmOuter = document.createElement('div');
confirmOuter.id = 'notie-confirm-outer';
var confirmInner = document.createElement('div');
confirmInner.id = 'notie-confirm-inner';
confirmOuter.appendChild(confirmInner);
var confirmText = document.createElement('span');
confirmText.id = 'notie-confirm-text';
confirmInner.appendChild(confirmText);
var confirmYes = document.createElement('div');
confirmYes.id = 'notie-confirm-yes'
confirmOuter.appendChild(confirmYes);
var confirmNo = document.createElement('div');
confirmNo.id = 'notie-confirm-no';
confirmOuter.appendChild(confirmNo);
var confirmTextYes = document.createElement('span');
confirmTextYes.id = 'notie-confirm-text-yes';
confirmYes.appendChild(confirmTextYes);
// NOTIE.CONFIRM
// *********************************************
// confirm elements and styling
var confirm_outer = document.createElement('div');
confirm_outer.id = confirm_outer_id;
confirm_outer.style.position = 'fixed';
confirm_outer.style.top = '0';
confirm_outer.style.left = '0';
confirm_outer.style.zIndex = '999999998';
confirm_outer.style.height = 'auto';
confirm_outer.style.width = '100%';
confirm_outer.style.display = 'none';
confirm_outer.style.textAlign = 'center';
confirm_outer.style.MozTransition = '';
confirm_outer.style.WebkitTransition = '';
confirm_outer.style.transition = '';
var confirm_background = document.createElement('div');
confirm_background.id = confirm_background_id;
confirm_background.style.position = 'fixed';
confirm_background.style.top = '0';
confirm_background.style.left = '0';
confirm_background.style.zIndex = '999999997';
confirm_background.style.height = '100%';
confirm_background.style.width = '100%';
confirm_background.style.display = 'none';
confirm_background.style.backgroundColor = 'white';
confirm_background.style.MozTransition = 'all ' + animation_delay + 's ease';
confirm_background.style.WebkitTransition = 'all ' + animation_delay + 's ease';
confirm_background.style.transition = 'all ' + animation_delay + 's ease';
confirm_background.style.opacity = '0';
// Hide notie.confirm on background click
confirm_background.onclick = function() {
if (background_click_dismiss) {
confirm_hide();
var confirmTextNo = document.createElement('span');
confirmTextNo.id = 'notie-confirm-text-no';
confirmNo.appendChild(confirmTextNo);
var confirmBackground = document.createElement('div');
confirmBackground.id = 'notie-confirm-background';
addClass(confirmBackground, 'transition');
// Hide notie.confirm on no click and background click
confirmBackground.onclick = function() {
if (options.backgroundClickDismiss) {
confirmHide();
}
};
// Attach confirm elements to the body element
document.body.appendChild(confirmOuter);
document.body.appendChild(confirmBackground);
// confirm helper variables
var confirmIsShowing = false;
var confirm_inner = document.createElement('div');
confirm_inner.id = confirm_inner_id;
confirm_inner.style.boxSizing = 'border-box';
confirm_inner.style.width = '100%';
confirm_inner.style.padding = '20px';
confirm_inner.style.display = 'block';
confirm_inner.style.cursor = 'default';
confirm_inner.style.backgroundColor = confirm_and_input_color_background;
confirm_outer.appendChild(confirm_inner);
var confirm_yes = document.createElement('div');
confirm_yes.id = confirm_yes_id;
confirm_yes.style.cssFloat = 'left';
confirm_yes.style.height = '50px';
confirm_yes.style.lineHeight = '50px';
confirm_yes.style.width = '50%';
confirm_yes.style.cursor = 'pointer';
confirm_yes.style.backgroundColor = confirm_and_input_color_yes_background;
confirm_outer.appendChild(confirm_yes);
var confirm_no = document.createElement('div');
confirm_no.id = confirm_no_id;
confirm_no.style.cssFloat = 'right';
confirm_no.style.height = '50px';
confirm_no.style.lineHeight = '50px';
confirm_no.style.width = '50%';
confirm_no.style.cursor = 'pointer';
confirm_no.style.backgroundColor = confirm_and_input_color_no_background;
confirm_no.onclick = function() { confirm_hide(); }
confirm_outer.appendChild(confirm_no);
// Initialize confirm text
var confirm_text = document.createElement('span');
confirm_text.id = confirm_text_id;
confirm_text.style.color = confirm_and_input_color_text;
if (window.innerWidth <= font_change_screen_width) { confirm_text.style.fontSize = font_size_small; }
else { confirm_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, confirm_text), debounce_time), true);
confirm_inner.appendChild(confirm_text);
var confirm_yes_text = document.createElement('span');
confirm_yes_text.id = confirm_yes_text_id;
confirm_yes_text.style.color = confirm_and_input_color_yes_text;
if (window.innerWidth <= font_change_screen_width) { confirm_yes_text.style.fontSize = font_size_small; }
else { confirm_yes_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, confirm_yes_text), debounce_time), true);
confirm_yes.appendChild(confirm_yes_text);
var confirm_no_text = document.createElement('span');
confirm_no_text.id = confirm_no_text_id;
confirm_no_text.style.color = confirm_and_input_color_no_text;
if (window.innerWidth <= font_change_screen_width) { confirm_no_text.style.fontSize = font_size_small; }
else { confirm_no_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, confirm_no_text), debounce_time), true);
confirm_no.appendChild(confirm_no_text);
// Attach confirm elements to the body element
document.body.appendChild(confirm_outer);
document.body.appendChild(confirm_background);
// Declare variables
var confirm_height = 0;
var confirm_is_showing = false;
function confirm(title, yes_text, no_text, yes_callback) {
function confirm(title, yesText, noText, yesCallback, noCallback) {
blur();
// Blur active element for use of enter key
document.activeElement.blur();
if (alert_is_showing) {
if (alertIsShowing) {
// Hide notie.alert
clearTimeout(alert_timeout_1);
clearTimeout(alert_timeout_2);
alert_hide(function() {
confirm_show(title, yes_text, no_text, yes_callback);
clearTimeout(alertTimeout1);
clearTimeout(alertTimeout2);
alertHide(function() {
confirmShow(title, yesText, noText, yesCallback, noCallback);
});
}
else {
confirm_show(title, yes_text, no_text, yes_callback);
confirmShow(title, yesText, noText, yesCallback, noCallback);
}

@@ -453,40 +252,49 @@

}
function confirm_show(title, yes_text, no_text, yes_callback) {
function confirmShow(title, yesText, noText, yesCallback, noCallback) {
scroll_disable();
scrollDisable();
// Yes callback function
confirm_yes.onclick = function() {
confirm_hide();
setTimeout(function() {
yes_callback();
}, (animation_delay * 1000 + 10));
confirmYes.onclick = function() {
confirmHide();
if (yesCallback) {
setTimeout(function() {
yesCallback();
}, (options.animationDelay + 10));
}
}
// No callback function
confirmNo.onclick = function() {
confirmHide();
if (noCallback) {
setTimeout(function() {
noCallback();
}, (options.animationDelay + 10));
}
}
function confirm_show_inner() {
function confirmShowInner() {
// Set confirm text
confirm_text.innerHTML = title;
confirm_yes_text.innerHTML = yes_text;
confirm_no_text.innerHTML = no_text;
confirmText.innerHTML = title;
confirmTextYes.innerHTML = yesText;
confirmTextNo.innerHTML = noText;
// Get confirm's height
confirm_outer.style.top = '-10000px';
confirm_outer.style.display = 'table';
confirm_outer.style.top = '-' + confirm_outer.offsetHeight - 5 + 'px';
confirm_background.style.display = 'block';
confirmOuter.style.top = '-10000px';
confirmOuter.style.display = 'table';
confirmOuter.style.top = '-' + confirmOuter.offsetHeight - 5 + 'px';
confirmBackground.style.display = 'block';
setTimeout(function() {
addClass(confirmOuter, 'transition');
if (shadow) { confirm_outer.style.boxShadow = '0px 0px 10px 0px rgba(0,0,0,0.5)'; }
confirm_outer.style.MozTransition = 'all ' + animation_delay + 's ease';
confirm_outer.style.WebkitTransition = 'all ' + animation_delay + 's ease';
confirm_outer.style.transition = 'all ' + animation_delay + 's ease';
confirmOuter.style.top = 0;
confirmBackground.style.opacity = '0.75';
confirm_outer.style.top = 0;
confirm_background.style.opacity = '0.75';
setTimeout(function() {
confirm_is_showing = true;
}, (animation_delay * 1000 + 10));
confirmIsShowing = true;
}, (options.animationDelay + 10));

@@ -497,10 +305,10 @@ }, 20);

if (confirm_is_showing) {
confirm_hide();
if (confirmIsShowing) {
confirmHide();
setTimeout(function() {
confirm_show_inner();
}, (animation_delay * 1000 + 10));
confirmShowInner();
}, (options.animationDelay + 10));
}
else {
confirm_show_inner();
confirmShowInner();
}

@@ -510,225 +318,173 @@

function confirm_hide() {
function confirmHide() {
confirm_outer.style.top = '-' + confirm_outer.offsetHeight - 5 + 'px';
confirm_background.style.opacity = '0';
confirmOuter.style.top = '-' + confirmOuter.offsetHeight - 5 + 'px';
confirmBackground.style.opacity = '0';
setTimeout(function() {
removeClass(confirmOuter, 'transition');
confirmOuter.style.top = '-10000px';
confirmBackground.style.display = 'none';
if (shadow) { confirm_outer.style.boxShadow = ''; }
confirm_outer.style.MozTransition = '';
confirm_outer.style.WebkitTransition = '';
confirm_outer.style.transition = '';
confirm_background.style.display = 'none';
confirm_outer.style.top = '-10000px';
scrollEnable();
scroll_enable();
confirmIsShowing = false;
confirm_is_showing = false;
}, (options.animationDelay + 10));
}, (animation_delay * 1000 + 10));
}
// NOTIE.INPUT
// *********************************************
// INPUT
// **********
// input elements and styling
var input_outer = document.createElement('div');
input_outer.id = input_outer_id;
input_outer.style.position = 'fixed';
input_outer.style.top = '0';
input_outer.style.left = '0';
input_outer.style.zIndex = '999999998';
input_outer.style.height = 'auto';
input_outer.style.width = '100%';
input_outer.style.display = 'none';
input_outer.style.textAlign = 'center';
input_outer.style.MozTransition = '';
input_outer.style.WebkitTransition = '';
input_outer.style.transition = '';
var input_background = document.createElement('div');
input_background.id = input_background_id;
input_background.style.position = 'fixed';
input_background.style.top = '0';
input_background.style.left = '0';
input_background.style.zIndex = '999999997';
input_background.style.height = '100%';
input_background.style.width = '100%';
input_background.style.display = 'none';
input_background.style.backgroundColor = 'white';
input_background.style.MozTransition = 'all ' + animation_delay + 's ease';
input_background.style.WebkitTransition = 'all ' + animation_delay + 's ease';
input_background.style.transition = 'all ' + animation_delay + 's ease';
input_background.style.opacity = '0';
var inputOuter = document.createElement('div');
inputOuter.id = 'notie-input-outer';
var inputBackground = document.createElement('div');
inputBackground.id = 'notie-input-background';
addClass(inputBackground, 'transition');
var inputInner = document.createElement('div');
inputInner.id = 'notie-input-inner';
inputOuter.appendChild(inputInner);
var inputField = document.createElement('input');
inputField.id = 'notie-input-field';
inputField.setAttribute('autocomplete', 'off');
inputField.setAttribute('autocorrect', 'off');
inputField.setAttribute('autocapitalize', 'off');
inputField.setAttribute('spellcheck', 'false');
inputOuter.appendChild(inputField);
// Hide notie.input on background click
input_background.onclick = function() {
if (background_click_dismiss) {
input_hide();
}
};
var inputYes = document.createElement('div');
inputYes.id = 'notie-input-yes';
inputOuter.appendChild(inputYes);
var input_inner = document.createElement('div');
input_inner.id = input_inner_id;
input_inner.style.boxSizing = 'border-box';
input_inner.style.width = '100%';
input_inner.style.padding = '20px';
input_inner.style.display = 'block';
input_inner.style.cursor = 'default';
input_inner.style.backgroundColor = confirm_and_input_color_background;
input_outer.appendChild(input_inner);
var input_div = document.createElement('div');
input_div.id = input_div_id;
input_div.style.boxSizing = 'border-box';
input_div.style.height = '55px';
input_div.style.width = '100%';
input_div.style.display = 'block';
input_div.style.cursor = 'default';
input_div.style.backgroundColor = '#FFF';
input_outer.appendChild(input_div);
var input_field = document.createElement('input');
input_field.id = input_field_id;
input_field.setAttribute('autocomplete', 'off');
input_field.setAttribute('autocorrect', 'off');
input_field.setAttribute('autocapitalize', 'off');
input_field.setAttribute('spellcheck', 'false');
input_field.style.boxSizing = 'border-box';
input_field.style.height = '55px';
input_field.style.width = '100%';
input_field.style.textAlign = 'center';
input_field.style.textIndent = '10px';
input_field.style.paddingRight = '10px';
input_field.style.outline = '0';
input_field.style.border = '0';
input_field.style.fontFamily = 'inherit';
input_field.style.fontSize = font_size_big;
if (window.innerWidth <= font_change_screen_width) { input_field.style.fontSize = font_size_small; }
else { input_field.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, input_field), debounce_time), true);
input_div.appendChild(input_field);
var inputNo = document.createElement('div');
inputNo.id = 'notie-input-no';
inputOuter.appendChild(inputNo);
// Initialize input text
var inputText = document.createElement('span');
inputText.id = 'notie-input-text';
inputInner.appendChild(inputText);
var input_yes = document.createElement('div');
input_yes.id = input_yes_id;
input_yes.style.cssFloat = 'left';
input_yes.style.height = '50px';
input_yes.style.lineHeight = '50px';
input_yes.style.width = '50%';
input_yes.style.cursor = 'pointer';
input_yes.style.backgroundColor = confirm_and_input_color_yes_background;
input_outer.appendChild(input_yes);
var inputYesText = document.createElement('span');
inputYesText.id = 'notie-input-text-yes';
inputYes.appendChild(inputYesText);
var input_no = document.createElement('div');
input_no.id = input_no_id;
input_no.style.cssFloat = 'right';
input_no.style.height = '50px';
input_no.style.lineHeight = '50px';
input_no.style.width = '50%';
input_no.style.cursor = 'pointer';
input_no.style.backgroundColor = confirm_and_input_color_no_background;
input_no.onclick = function() { input_hide(); }
input_outer.appendChild(input_no);
var inputNoText = document.createElement('span');
inputNoText.id = 'notie-input-text-no';
inputNo.appendChild(inputNoText);
// Initialize input text
var input_text = document.createElement('span');
input_text.id = input_text_id;
input_text.style.color = confirm_and_input_color_text;
if (window.innerWidth <= font_change_screen_width) { input_text.style.fontSize = font_size_small; }
else { input_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, input_text), debounce_time), true);
input_inner.appendChild(input_text);
var input_yes_text = document.createElement('span');
input_yes_text.id = input_yes_text_id;
input_yes_text.style.color = confirm_and_input_color_yes_text;
if (window.innerWidth <= font_change_screen_width) { input_yes_text.style.fontSize = font_size_small; }
else { input_yes_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, input_yes_text), debounce_time), true);
input_yes.appendChild(input_yes_text);
var input_no_text = document.createElement('span');
input_no_text.id = input_no_text_id;
input_no_text.style.color = confirm_and_input_color_no_text;
if (window.innerWidth <= font_change_screen_width) { input_no_text.style.fontSize = font_size_small; }
else { input_no_text.style.fontSize = font_size_big; }
window.addEventListener('resize', debounce(resizeListener.bind(null, input_no_text), debounce_time), true);
input_no.appendChild(input_no_text);
// Attach input elements to the body element
document.body.appendChild(input_outer);
document.body.appendChild(input_background);
// Declare variables
var input_height = 0;
var input_is_showing = false;
function input(title, submit_text, cancel_text, type, placeholder, submit_callback, prefilled_value_optional) {
document.body.appendChild(inputOuter);
document.body.appendChild(inputBackground);
// Hide input on no click and background click
inputBackground.onclick = function() {
if (options.backgroundClickDismiss) {
inputHide();
}
};
// input helper variables
var inputIsShowing = false;
function input(options, title, submitText, cancelText, submitCallback, cancelCallback) {
blur();
if (typeof options.type !== 'undefined' && options.type) {
inputField.setAttribute('type', options.type);
}
else {
inputField.setAttribute('type', 'text');
}
if (typeof options.placeholder !== 'undefined' && options.placeholder) {
inputField.setAttribute('placeholder', options.placeholder);
}
else {
// Do not set placeholder
}
if (typeof options.prefilledValue !== 'undefined' && options.prefilledValue) {
inputField.value = options.prefilledValue;
}
else {
inputField.value = '';
}
// Blur active element for use of enter key, focus input
document.activeElement.blur();
setTimeout(function() { input_field.focus(); }, (animation_delay * 1000));
input_field.setAttribute('type', type);
input_field.setAttribute('placeholder', placeholder);
input_field.value = '';
if (typeof prefilled_value_optional !== 'undefined' && prefilled_value_optional.length > 0) { input_field.value = prefilled_value_optional }
if (alert_is_showing) {
// Hide notie.alert
clearTimeout(alert_timeout_1);
clearTimeout(alert_timeout_2);
alert_hide(function() {
input_show(title, submit_text, cancel_text, submit_callback);
if (alertIsShowing) {
// Hide alert
clearTimeout(alertTimeout1);
clearTimeout(alertTimeout2);
alertHide(function() {
inputShow(title, submitText, cancelText, submitCallback, cancelCallback);
});
}
else {
input_show(title, submit_text, cancel_text, submit_callback);
inputShow(title, submitText, cancelText, submitCallback, cancelCallback);
}
}
function input_show(title, submit_text, cancel_text, submit_callback) {
function inputShow(title, submitText, cancelText, submitCallback, cancelCallback) {
scroll_disable();
scrollDisable();
// Yes callback function
input_yes.onclick = function() {
input_hide();
setTimeout(function() {
submit_callback(input_field.value);
}, (animation_delay * 1000 + 10));
inputYes.onclick = function() {
inputHide();
if (submitCallback) {
setTimeout(function() {
submitCallback(inputField.value);
}, (options.animationDelay + 10));
}
}
// No callback function
inputNo.onclick = function() {
inputHide();
if (cancelCallback) {
setTimeout(function() {
cancelCallback(inputField.value);
}, (options.animationDelay + 10));
}
}
function input_show_inner() {
function inputShowInner() {
// Set input text
input_text.innerHTML = title;
input_yes_text.innerHTML = submit_text;
input_no_text.innerHTML = cancel_text;
inputText.innerHTML = title;
inputYesText.innerHTML = submitText;
inputNoText.innerHTML = cancelText;
// Get input's height
input_outer.style.top = '-10000px';
input_outer.style.display = 'table';
input_outer.style.top = '-' + input_outer.offsetHeight - 5 + 'px';
input_background.style.display = 'block';
inputOuter.style.top = '-10000px';
inputOuter.style.display = 'table';
inputOuter.style.top = '-' + inputOuter.offsetHeight - 5 + 'px';
inputBackground.style.display = 'block';
setTimeout(function() {
if (shadow) { input_outer.style.boxShadow = '0px 0px 10px 0px rgba(0,0,0,0.5)'; }
input_outer.style.MozTransition = 'all ' + animation_delay + 's ease';
input_outer.style.WebkitTransition = 'all ' + animation_delay + 's ease';
input_outer.style.transition = 'all ' + animation_delay + 's ease';
addClass(inputOuter, 'transition');
inputOuter.style.top = 0;
inputBackground.style.opacity = '0.75';
input_outer.style.top = 0;
input_background.style.opacity = '0.75';
setTimeout(function() {
input_is_showing = true;
}, (animation_delay * 1000 + 10));
inputIsShowing = true;
// put focus on input field
inputField.focus();
}, (options.animationDelay + 10));

@@ -739,10 +495,10 @@ }, 20);

if (input_is_showing) {
input_hide();
if (inputIsShowing) {
inputHide();
setTimeout(function() {
input_show_inner();
}, (animation_delay * 1000 + 10));
inputShowInner();
}, (options.animationDelay + 10));
}
else {
input_show_inner();
inputShowInner();
}

@@ -752,28 +508,94 @@

function input_hide() {
function inputHide() {
input_outer.style.top = '-' + input_outer.offsetHeight - 5 + 'px';
input_background.style.opacity = '0';
inputOuter.style.top = '-' + inputOuter.offsetHeight - 5 + 'px';
inputBackground.style.opacity = '0';
setTimeout(function() {
if (shadow) { input_outer.style.boxShadow = ''; }
input_outer.style.MozTransition = '';
input_outer.style.WebkitTransition = '';
input_outer.style.transition = '';
input_background.style.display = 'none';
removeClass(inputOuter, 'transition');
inputBackground.style.display = 'none';
input_outer.style.top = '-10000px';
inputOuter.style.top = '-10000px';
scroll_enable();
scrollEnable();
input_is_showing = false;
inputIsShowing = false;
}, (animation_delay * 1000 + 10));
}, (options.animationDelay + 10));
}
// Internal helper functions
// #################
function addClass(element, className) {
if (element.classList) {
element.classList.add(className);
}
else {
element.className += ' ' + className;
}
}
function removeClass(element, className) {
if (element.classList) {
element.classList.remove(className);
}
else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
function blur() {
document.activeElement.blur();
}
var originalBodyHeight, originalBodyOverflow;
function scrollDisable() {
originalBodyHeight = document.body.style.height;
originalBodyOverflow = document.body.style.overflow;
document.body.style.height = '100%';
document.body.style.overflow = 'hidden';
}
function scrollEnable() {
document.body.style.height = originalBodyHeight;
document.body.style.overflow = originalBodyOverflow;
}
// Event listener for keydown enter and escape keys
window.addEventListener('keydown', function(event) {
var enterClicked = (event.which == 13 || event.keyCode == 13);
var escapeClicked = (event.which == 27 || event.keyCode == 27);
if (alertIsShowing) {
if (enterClicked || escapeClicked) {
clearTimeout(alertTimeout1);
clearTimeout(alertTimeout2);
alertHide();
}
}
else if (confirmIsShowing) {
if (enterClicked) {
confirmYes.click();
}
else if (escapeClicked) {
confirmHide();
}
}
else if (inputIsShowing) {
if (enterClicked) {
inputYes.click();
}
else if (escapeClicked) {
inputHide();
}
}
});
return {
setOptions: setOptions,
alert: alert,

@@ -786,4 +608,5 @@ confirm: confirm,

if (typeof module !== 'undefined' && module) {
// Node.js
if (typeof module === 'object' && module.exports) {
module.exports = notie;
}

47

package.json
{
"name": "notie",
"description": "A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.",
"author": "Jared Reich (https://jaredreich.com)",
"version": "2.1.0",
"main": "notie.js",
"repository": {
"name": "notie",
"description": "notie - a clean and simple notification suite for javascript, with no dependencies",
"author": "Jared Reich",
"version": "3.0.0",
"main": "notie.js",
"repository": {
"type": "git",
"url": "git+https://github.com/jaredreich/notie.js.git"
},
"keywords": [
"tip"
],
"author": "Jared Reich",
"license": "MIT",
"bugs": {
"url": "https://github.com/jaredreich/notie.js/issues"
},
"homepage": "https://jaredreich.com/projects/notie.js"
}
"url": "git+https://github.com/jaredreich/notie.git"
},
"keywords": [
"javascript",
"alert",
"notification",
"growl",
"message"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/jaredreich/notie/issues"
},
"homepage": "https://jaredreich.com/projects/notie",
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.2.0",
"gulp-uglify": "^1.5.3"
}
}

107

README.md

@@ -1,7 +0,9 @@

# notie.js
# notie
notie.js is a clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.
Demo: https://jaredreich.com/projects/notie.js
[![Join the chat at https://gitter.im/jaredreich/notie](https://badges.gitter.im/jaredreich/notie.svg)](https://gitter.im/jaredreich/notie?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
#### With notie.js you can:
notie is a clean and simple notification suite for javascript, with no dependencies.
demo: https://jaredreich.com/projects/notie
#### With notie you can:
* Alert users

@@ -15,9 +17,8 @@ * Confirm user choices

* Pure javascript, no dependencies, only one file to include
* Works in all modern browsers (Chrome, Firefox, Safari, IE, Edge, Opera)
* Pure JavaScript, no dependencies
* Works in all modern browsers (Chrome, Firefox, Safari, IE 9+, Edge, Opera)
* Easily customizable
* Change the colors to match your style/brand
* Change colors to match your style/brand
* Modify styling with the sass file (notie.scss)
* Font size auto-adjusts based on screen size
* Turn bottom shadow off for flat design, on for material design
* Override or add styling in a separate .css file (optional)

@@ -28,4 +29,9 @@ ## Installation

```html
<head>
...
<link rel="stylesheet" type="text/css" href="/path/to/notie.css">
</head>
<body>
...
<!-- Bottom of body -->
<script src="/path/to/notie.js"></script>

@@ -37,3 +43,3 @@ </body>

```
npm install notie-js
npm install notie
```

@@ -50,5 +56,7 @@

```javascript
notie.alert(style_number, 'message', time_in_seconds);
notie.confirm('Title text', 'Yes button text', 'No button text', yes_callback)
notie.input('Title text', 'Submit button text', 'Cancel button text', 'type', 'placeholder', submit_callback, 'Optional pre-filled value');
notie.alert(alertType(Number), message(String, timeInSeconds);
notie.confirm(title(String), yesText(String), noText(String), yesCallback(Function), noCallbackOptional(Function));
notie.input(options(JSON), title(String), submitText(String), cancelText(String), submitCallback(Function), cancelCallbackOptional(Function));
```

@@ -67,3 +75,3 @@ For example:

notie.confirm('Are you <b>really</b> sure?', 'Yes', 'Cancel', function() {
notie.confirm('Are you really <b>really</b> sure?', 'Yes', 'Cancel', function() {
notie.confirm('Are you <b>really</b> <i>really</i> sure?', 'Yes', 'Cancel', function() {
notie.alert(1, 'Okay, jeez...', 2);

@@ -74,8 +82,17 @@ });

notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function(value_entered) {
notie.input({
type: 'email'
placeholder: 'name@example.com',
prefilledValue: 'jane@doe.com'
},'Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function(value_entered) {
notie.alert(1, 'You entered: ' + value_entered, 2);
});
notie.input('What city do you live in?', 'Submit', 'Cancel', 'text', 'Enter your city:', function(value_entered) {
notie.alert(1, 'You entered: ' + value_entered, 2);
}, 'New York');
notie.input({
type: 'password',
placeholder: 'Enter your password'
}, 'Please enter your password:', 'Submit', 'Cancel', function(valueEntered) {
notie.alert(1, 'You entered: ' + valueEntered, 2);
}, function(valueEntered) {
notie.alert(3, 'You cancelled with this value: ' + valueEntered, 2);
});

@@ -85,54 +102,10 @@ ```

## Options
At the top of notie.js you can change all the colors to match your style/brand, turn on or off the bottom shadow, and change the large and small font sizes that auto adjust based on screen width.
```javascript
// General
var shadow = true;
var font_size_small = '18px';
var font_size_big = '24px';
var font_change_screen_width = 600;
var animation_delay = 0.3;
var background_click_dismiss = true;
// notie.alert colors
var alert_color_success_background = '#57BF57';
var alert_color_warning_background = '#E3B771';
var alert_color_error_background = '#E1715B';
var alert_color_info_background = '#4D82D6';
var alert_color_text = '#FFF';
// notie.confirm colors
var confirm_and_input_color_background = '#4D82D6';
var confirm_and_input_color_yes_background = '#57BF57';
var confirm_and_input_color_no_background = '#E1715B';
var confirm_and_input_color_text = '#FFF';
var confirm_and_input_color_yes_text = '#FFF';
var confirm_and_input_color_no_text = '#FFF';
// ID's for use within your own .css file (OPTIONAL)
// (Be sure to use !important to override the javascript)
// Example: #notie-alert-inner { padding: 30px !important; }
var alert_outer_id = 'notie-alert-outer';
var alert_inner_id = 'notie-alert-inner';
var alert_text_id = 'notie-alert-text';
var confirm_outer_id = 'notie-confirm-outer';
var confirm_inner_id = 'notie-confirm-inner';
var confirm_backdrop_id = 'notie-confirm-backdrop';
var confirm_yes_id = 'notie-confirm-yes';
var confirm_no_id = 'notie-confirm-no';
var confirm_text_id = 'notie-confirm-text';
var confirm_yes_text_id = 'notie-confirm-yes-text';
var confirm_no_text_id = 'notie-confirm-no-text';
var input_outer_id = 'notie-input-outer';
var input_inner_id = 'notie-input-inner';
var input_backdrop_id = 'notie-input-backdrop';
var input_div_id = 'notie-input-div';
var input_field_id = 'notie-input-field';
var input_yes_id = 'notie-input-yes';
var input_no_id = 'notie-input-no';
var input_text_id = 'notie-input-text';
var input_yes_text_id = 'notie-input-yes-text';
var input_no_text_id = 'notie-input-no-text';
notie.setOptions({
animationDelay: 300, // Be sure to also change "transition: all 0.3s ease" variable in .scss file
backgroundClickDismiss: true
});
```
## License
MIT
MIT
test.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc