diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..2afb2c0
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,10 @@
+all:build
+
+watch:
+ @echo "Notice: Stylus + Nib + Canvas Required: npm install -g stylus nib canvas"
+ @stylus -u nib -w theme-src/*.styl -o themes/
+
+build:
+ @echo "Notice: UglifyJS Required: npm install -g uglify-js"
+ @uglifyjs humane.js > humane.min.js
+ @echo "Built uglified JS - humane.min.js"
diff --git a/humane-themes/bigbox.css b/humane-themes/bigbox.css
deleted file mode 100644
index c87e679..0000000
--- a/humane-themes/bigbox.css
+++ /dev/null
@@ -1,92 +0,0 @@
-@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
-
-/* recommended base settings */
-html, body { height: 100%; }
-.humane {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=100);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
- position : fixed;
- _position : absolute; /* ie6 */
- -moz-transition : all .3s ease-out; /* .3s transition */
- -webkit-transition : all .3s ease-out;
- -o-transition : all .3s ease-out;
- -ms-transition : all .3s ease-out;
- transition : all .3s ease-out;
- z-index : -1;
-}
-.humane.humane-show { z-index: 100000; }
-/* ie hover state, recommended */
-.humane:hover {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=60);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=60)";
-}
-/* standards hover state, recommended */
-div.humane.humane-show:hover {
- opacity: 0.6;
- -webkit-transform : scale(0.8);
- -moz-transform : scale(0.8);
- -o-transform : scale(0.8);
- -ms-transform : scale(0.8);
- transform : scale(0.8);
-}
-
-/* custom settings */
-.humane {
- font-family : Ubuntu, Verdana, sans-serif;
- font-size : 35px;
- letter-spacing : -1px;
- top : 25%;
- left : 25%;
- opacity : 0;
- width : 50%;
- min-height : 40px;
- color : #fff;
- padding : 30px;
- text-align : center;
- background-color : rgb(0,0,0);
- background-color : rgba(0,0,0,0.8);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));
- background-image : -moz-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));
- background-image : -ms-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));
- background-image : -o-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));
- background-image : linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));;
- -moz-border-radius : 15px;
- -webkit-border-radius : 15px;
- -o-border-radius : 15px;
- border-radius : 5px;
- text-shadow : 0 -1px 1px #ddd;
- -moz-box-shadow : 0 15px 15px -15px #000;
- -webkit-box-shadow : 0 15px 15px -15px #000;
- box-shadow : 0 15px 15px -15px #000;
- -webkit-transform : scale(0.1);
- -moz-transform : scale(0.1);
- -o-transform : scale(0.1);
- -ms-transform : scale(0.1);
- transform : scale(0.1);
-}
-
-/* custom animation for css transition supported browsers */
-.humane.humane-show {
- opacity: 1;
- -webkit-transform : scale(1);
- -moz-transform : scale(1);
- -o-transform : scale(1);
- -ms-transform : scale(1);
- transform : scale(1);
-}
-
-/* other customizations */
-.humane p {
- margin : 1em;
- display : inline;
-}
-.humane ul {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-.humane .error {
- color : red;
- text-shadow : 0 -1px 1px #f11;
-}
diff --git a/humane-themes/bold-dark.css b/humane-themes/bold-dark.css
deleted file mode 100644
index 7ef35fc..0000000
--- a/humane-themes/bold-dark.css
+++ /dev/null
@@ -1,84 +0,0 @@
-@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
-
-/* recommended base settings */
-html, body { height: 100%; }
-.humane {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=100);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
- position : fixed;
- _position : absolute; /* ie6 */
- -moz-transition : all .2s ease-in; /* .2s transition */
- -webkit-transition : all .2s ease-in;
- -o-transition : all .2s ease-in;
- -ms-transition : all .2s ease-in;
- transition : all .2s ease-in;
- z-index : -1;
-}
-.humane.humane-show { z-index: 100000; }
-/* ie hover state, recommended */
-.humane:hover {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
-}
-/* standards hover state, recommended */
-div.humane.humane-show:hover { opacity: 0.2; }
-
-/* custom settings */
-.humane {
- font-family : Ubuntu, Verdana, sans-serif;
- font-size : 25px;
- letter-spacing : -1px;
- top : 25%;
- left : 25%;
- opacity : 0;
- width : 50%;
- color : #fff;
- padding : 10px;
- text-align : center;
- background-color : rgb(0,0,0);
- background-color : rgba(0,0,0,0.8);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.8)), to(rgba(50,50,50,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -moz-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -ms-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -o-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));;
- -moz-border-radius : 15px;
- -webkit-border-radius : 15px;
- -o-border-radius : 15px;
- border-radius : 15px;
- text-shadow : 0 -1px 1px #ddd;
- -moz-box-shadow : 0 4px 4px -4px #000;
- -webkit-box-shadow : 0 4px 4px -4px #000;
- box-shadow : 0 4px 4px -4px #000;
- -webkit-transform : scale(1.1);
- -moz-transform : scale(1.1);
- -o-transform : scale(1.1);
- -ms-transform : scale(1.1);
- transform : scale(1.1);
-}
-
-/* custom animation for css transition supported browsers */
-.humane.humane-show {
- opacity: 1;
- -webkit-transform : scale(1);
- -moz-transform : scale(1);
- -o-transform : scale(1);
- -ms-transform : scale(1);
- transform : scale(1);
-}
-
-/* other customizations */
-.humane p {
- margin : 1em;
- display : inline;
-}
-.humane ul {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-.humane .error {
- color : red;
- text-shadow : 0 -1px 1px #f11;
-}
diff --git a/humane-themes/bold-light.css b/humane-themes/bold-light.css
deleted file mode 100644
index 6ec9fce..0000000
--- a/humane-themes/bold-light.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
-
-/* recommended base settings */
-html, body { height: 100%; }
-.humane {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=100);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
- position : fixed;
- _position : absolute; /* ie6 */
- -moz-transition : all .2s ease-in; /* .2s transition */
- -webkit-transition : all .2s ease-in;
- -o-transition : all .2s ease-in;
- -ms-transition : all .2s ease-in;
- transition : all .2s ease-in;
- z-index : -1;
-}
-.humane.humane-show { z-index: 100000; }
-/* ie hover state, recommended */
-.humane:hover {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
-}
-/* standards hover state, recommended */
-div.humane.humane-show:hover { opacity: 0.2; }
-
-/* custom settings */
-.humane {
- font-family : Ubuntu, Verdana, sans-serif;
- font-size : 25px;
- letter-spacing : -1px;
- top : 25%;
- left : 25%;
- opacity : 0;
- width : 50%;
- color : #000;
- padding : 10px;
- text-align : center;
- background-color : rgb(255,255,255);
- background-color : rgba(255,255,255,0.8);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(150,150,150,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(255,255,255,0.8), rgba(150,150,150,0.8));
- background-image : -moz-linear-gradient( top, rgba(255,255,255,0.8), rgba(150,150,150,0.8));
- background-image : -ms-linear-gradient( top, rgba(255,255,255,0.8), rgba(150,150,150,0.8));
- background-image : -o-linear-gradient( top, rgba(255,255,255,0.8), rgba(150,150,150,0.8));
- background-image : linear-gradient( top, rgba(255,255,255,0.8), rgba(150,150,150,0.8));;
- -moz-border-radius : 15px;
- -webkit-border-radius : 15px;
- -o-border-radius : 15px;
- border-radius : 15px;
- text-shadow : 0 -1px 1px #ddd;
- -moz-box-shadow : 0 4px 4px -4px #000;
- -webkit-box-shadow : 0 4px 4px -4px #000;
- box-shadow : 0 4px 4px -4px #000;
- -webkit-transform : scale(1.1);
- -moz-transform : scale(1.1);
- -o-transform : scale(1.1);
- -ms-transform : scale(1.1);
- transform : scale(1.1);
-}
-
-/* custom animation for css transition supported browsers */
-.humane.humane-show {
- opacity: 1;
- -webkit-transform : scale(1);
- -moz-transform : scale(1);
- -o-transform : scale(1);
- -ms-transform : scale(1);
- transform : scale(1);
-}
-
-/* other customizations */
-.humane p {
- margin : 1em;
- display : inline;
-}
-.humane ul {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-.humane .error {
- color : red;
-}
diff --git a/humane-themes/gshellish.css b/humane-themes/gshellish.css
deleted file mode 100644
index bca6f5b..0000000
--- a/humane-themes/gshellish.css
+++ /dev/null
@@ -1,96 +0,0 @@
-@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
-
-/* recommended base settings */
-html, body { height: 100%; }
-.humane {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=100);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
- position : fixed;
- _position : absolute; /* ie6 */
- -moz-transition : all .2s ease-in; /* .2s transition */
- -webkit-transition : all .2s ease-in;
- -o-transition : all .2s ease-in;
- -ms-transition : all .2s ease-in;
- transition : all .2s ease-in;
- z-index : -1;
-}
-.humane.humane-show { z-index: 100000; }
-/* ie hover state, recommended */
-.humane:hover {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
-}
-/* standards hover state, recommended */
-div.humane.humane-show:hover { opacity: 0.2; }
-
-/* custom settings */
-.humane {
- font-family : Ubuntu, Verdana, sans-serif;
- font-size : 25px;
- letter-spacing : -1px;
- bottom : 0;
- left : 0;
- opacity : 0;
- width : 100%;
- color : #000;
- padding : 10px;
- text-align : center;
- background-color : rgb(50,50,50);
- background-color : rgba(50,50,50,0.0);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.0)), to(rgba(0,0,0,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(50,50,50,0.0), rgba(0,0,0,0.8));
- background-image : -moz-linear-gradient( top, rgba(50,50,50,0.0), rgba(0,0,0,0.8));
- background-image : -ms-linear-gradient( top, rgba(50,50,50,0.0), rgba(0,0,0,0.8));
- background-image : -o-linear-gradient( top, rgba(50,50,50,0.0), rgba(0,0,0,0.8));
- background-image : linear-gradient( top, rgba(50,50,50,0.0), rgba(0,0,0,0.8));;
- text-shadow : 0 -1px 1px #ddd;
- -moz-box-shadow : 0 4px 4px -4px #000;
- -webkit-box-shadow : 0 4px 4px -4px #000;
- box-shadow : 0 4px 4px -4px #000;
- -webkit-transform : translateY(100px);
- -moz-transform : translateY(100px);
- -o-transform : translateY(100px);
- -ms-transform : translateY(100px);
- transform : translateY(100px);
-}
-
-/* custom animation for css transition supported browsers */
-.humane.humane-show {
- opacity: 1;
- -webkit-transform : translateY(0px);
- -moz-transform : translateY(0px);
- -o-transform : translateY(0px);
- -ms-transform : translateY(0px);
- transform : translateY(0px);
-}
-
-/* other customizations */
-.humane p, .humane li {
- color : #fff;
- margin : 1em;
- display : inline;
- padding : 10px 20px;
- -moz-border-radius : 10px 10px 0 0;
- -webkit-border-radius : 10px 10px 0 0;
- border-radius : 10px 10px 0 0;
- background-color : rgb(50,50,50);
- background-color : rgba(50,50,50,0.8);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(0,0,0,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(50,50,50,0.8), rgba(0,0,0,0.8));
- background-image : -moz-linear-gradient( top, rgba(50,50,50,0.8), rgba(0,0,0,0.8));
- background-image : -ms-linear-gradient( top, rgba(50,50,50,0.8), rgba(0,0,0,0.8));
- background-image : -o-linear-gradient( top, rgba(50,50,50,0.8), rgba(0,0,0,0.8));
- background-image : linear-gradient( top, rgba(50,50,50,0.8), rgba(0,0,0,0.8));;
- -moz-box-shadow : 0 0 4px #000;
- -webkit-box-shadow : 0 0 4px #000;
- box-shadow : 0 0 4px #000;
-}
-.humane ul {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-.humane .error {
- color : red;
- text-shadow : 0 -1px 1px #f11;
-}
diff --git a/humane-themes/libnotify.css b/humane-themes/libnotify.css
deleted file mode 100644
index 3a87cf3..0000000
--- a/humane-themes/libnotify.css
+++ /dev/null
@@ -1,82 +0,0 @@
-@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
-
-/* recommended base settings */
-html, body { height: 100%; }
-.humane {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=100);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
- position : fixed;
- _position : absolute; /* ie6 */
- -moz-transition : all .2s ease-out; /* .2s transition */
- -webkit-transition : all .2s ease-out;
- -o-transition : all .2s ease-out;
- -ms-transition : all .2s ease-out;
- transition : all .2s ease-out;
- z-index : -1;
-}
-.humane.humane-show { z-index: 100000; }
-/* ie hover state, recommended */
-.humane:hover {
- filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
- -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
-}
-/* standards hover state, recommended */
-div.humane.humane-show:hover { opacity: 0.2; }
-
-/* custom settings */
-.humane {
- font-family : Ubuntu, sans-serif;
- font-size : 15px;
- letter-spacing : -1px;
- top : 10px;
- right : 10px;
- opacity : 0;
- width : 150px;
- color : #fff;
- padding : 10px;
- text-align : center;
- background-color : rgb(0,0,0);
- background-color : rgba(0,0,0,0.8);
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.8)), to(rgba(50,50,50,0.8)));
- background-image : -webkit-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -moz-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -ms-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : -o-linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
- background-image : linear-gradient( top, rgba(0,0,0,0.8), rgba(50,50,50,0.8));;
- -moz-border-radius : 5px;
- -webkit-border-radius : 5px;
- -o-border-radius : 5px;
- border-radius : 5px;
- -moz-box-shadow : 0 4px 4px -4px #000;
- -webkit-box-shadow : 0 4px 4px -4px #000;
- box-shadow : 0 4px 4px -4px #000;
- -moz-transform : translateY(-40px);
- -webkit-transform : translateY(-40px);
- -o-transform : translateY(-40px);
- -ms-transform : translateY(-40px);
- transform : translateY(-40px);
-}
-
-/* custom animation for css transition supported browsers */
-.humane.humane-show {
- opacity: 1;
- -webkit-transform : translateY(0);
- -moz-transform : translateY(0);
- -o-transform : translateY(0);
- -ms-transform : translateY(0);
- transform : translateY(0);
-}
-
-/* other customizations */
-.humane p {
- margin : 5px;
- display : inline;
-}
-.humane ul {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-.humane .error {
- color : red;
-}
diff --git a/humane.js b/humane.js
index 1d94771..71c73c7 100644
--- a/humane.js
+++ b/humane.js
@@ -8,158 +8,169 @@
* @example
* humane('hello world');
*/
-;(function(win,doc){
- var eventOn, eventOff;
- if (win.addEventListener) {
- eventOn = function(obj,type,fn){obj.addEventListener(type,fn,false)};
- eventOff = function(obj,type,fn){obj.removeEventListener(type,fn,false)};
- } else {
- eventOn = function(obj,type,fn){obj.attachEvent('on'+type,fn)};
- eventOff = function(obj,type,fn){obj.detachEvent('on'+type,fn)};
+;(function (win,doc) {
+ var on, off, isArray;
+ if ('addEventListener' in win) {
+ on = function (obj,type,fn) { obj.addEventListener(type,fn,false) };
+ off = function (obj,type,fn) { obj.removeEventListener(type,fn,false) };
+ }
+ else {
+ on = function (obj,type,fn) { obj.attachEvent('on'+type,fn) };
+ off = function (obj,type,fn) { obj.detachEvent('on'+type,fn) };
+ }
+ isArray = Array.isArray || function (obj) { return Object.prototype.toString.call(obj) === '[object Array]' };
+
+ var eventing = false;
+ var animationInProgress = false;
+ var humaneEl = null;
+ var timeout = null;
+ var useFilter = /msie [678]/i.test(navigator.userAgent); // sniff, sniff
+ var isSetup = false;
+ var queue = [];
+
+ on (win,'load',function () {
+ var transitionSupported = ( function (style) {
+ var prefixes = ['MozT','WebkitT','OT','msT','KhtmlT','t'];
+ for(var i = 0, prefix; prefix = prefixes[i]; i++) {
+ if (prefix+'ransition' in style) return true;
+ }
+ return false;
+ }(doc.body.style));
+ if (!transitionSupported) animate = jsAnimateOpacity; // use js animation when no transition support
+
+ setup(); run();
+ });
+
+ function setup() {
+ humaneEl = doc.createElement('div');
+ humaneEl.id = 'humane';
+ humaneEl.className = 'humane';
+ doc.body.appendChild(humaneEl);
+ if (useFilter) humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = 0; // reset value so hover states work
+ isSetup = true;
+ }
+
+ function remove() {
+ off (doc.body,'mousemove',remove);
+ off (doc.body,'click',remove);
+ off (doc.body,'keypress',remove);
+ off (doc.body,'touchstart',remove);
+ eventing = false;
+ if (animationInProgress) animate(0);
+ }
+
+ function run() {
+ if (animationInProgress && !win.humane.forceNew) return;
+ if (!queue.length) { remove(); return; }
+ animationInProgress = true;
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
}
-
- var eventing = false,
- animationInProgress = false,
- humaneEl = null,
- timeout = null,
- useFilter = /msie [678]/i.test(navigator.userAgent), // ua sniff for filter support
- isSetup = false,
- queue = [];
-
- eventOn(win,'load',function(){
- var transitionSupported = (function(style){
- var prefixes = ['MozT','WebkitT','OT','msT','KhtmlT','t'];
- for(var i = 0, prefix; prefix = prefixes[i]; i++){
- if(prefix+'ransition' in style) return true;
- }
- return false;
- }(doc.body.style));
-
- if(!transitionSupported) animate = jsAnimateOpacity; // override animate
- setup();
- run();
- });
-
- function setup() {
- humaneEl = doc.createElement('div');
- humaneEl.id = 'humane';
- humaneEl.className = 'humane';
- doc.body.appendChild(humaneEl);
- if(useFilter) humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = 0; // reset value so hover states work
- isSetup = true;
+ timeout = setTimeout(function(){ // allow notification to stay alive for timeout
+ if (!eventing) {
+ on (doc.body,'mousemove',remove);
+ on (doc.body,'click',remove);
+ on (doc.body,'keypress',remove);
+ on (doc.body,'touchstart',remove);
+ eventing = true;
+ if(!win.humane.waitForMove) remove();
+ }
+ }, win.humane.timeout);
+
+ var next = queue.shift();
+ var type = next[0];
+ var content = next[1];
+ if ( isArray(content) ) content = '';
+
+ humaneEl.innerHTML = content;
+ animate(type,1);
+ }
+
+ function animate (type,level) {
+ if(level === 1){
+ humaneEl.className = "humane humane-" + type + " humane-show";
}
-
- function remove() {
- eventOff(doc.body,'mousemove',remove);
- eventOff(doc.body,'click',remove);
- eventOff(doc.body,'keypress',remove);
- eventOff(doc.body,'touchstart',remove);
- eventing = false;
- if(animationInProgress) animate(0);
+ else {
+ humaneEl.className = humaneEl.className.replace(" humane-show","");
+ end();
}
-
- function run() {
- if(animationInProgress && !win.humane.forceNew) return;
- if(!queue.length){
- remove();
- return;
+ }
+
+ function end(){
+ setTimeout(function(){
+ animationInProgress = false;
+ run();
+ },500);
+ }
+
+ // if CSS Transitions not supported, fallback to JS Animation
+ var setOpacity = (function(){
+ if (useFilter) {
+ return function(opacity){
+ humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100;
+ }
+ }
+ else {
+ return function (opacity) { humaneEl.style.opacity = String(opacity); }
+ }
+ }());
+
+ function jsAnimateOpacity(type,level){
+ var interval;
+ var opacity;
+ if (level === 1) {
+ humaneEl.className = "humane humane-" + type + " humane-show";
+ opacity = 0;
+ if (win.humane.forceNew) {
+ opacity = useFilter
+ ? humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity/100|0
+ : humaneEl.style.opacity|0;
+ }
+ interval = setInterval(function(){
+ if (opacity < 1) {
+ opacity += 0.1;
+ if (opacity > 1) opacity = 1;
+ setOpacity(opacity);
}
-
- animationInProgress = true;
-
- if(timeout){
- clearTimeout(timeout);
- timeout = null;
+ else {
+ clearInterval(interval);
}
-
- timeout = setTimeout(function(){ // allow notification to stay alive for timeout
- if(!eventing){
- eventOn(doc.body,'mousemove',remove);
- eventOn(doc.body,'click',remove);
- eventOn(doc.body,'keypress',remove);
- eventOn(doc.body,'touchstart',remove);
- eventing = true;
- if(!win.humane.waitForMove) remove();
- }
- }, win.humane.timeout);
-
- humaneEl.innerHTML = queue.shift();
- animate(1);
+ }, 200 / 20);
}
-
- function animate(level){
- if(level === 1){
- humaneEl.className = "humane humane-show";
- } else {
- humaneEl.className = "humane";
- end();
+ else {
+ opacity = 1;
+ interval = setInterval(function(){
+ if(opacity > 0) {
+ opacity -= 0.1;
+ if (opacity<0) opacity = 0;
+ setOpacity(opacity);
}
+ else {
+ humaneEl.className = humaneEl.className.replace(" humane-show","");
+ clearInterval(interval);
+ end();
+ }
+ }, 200 / 20);
}
+ }
- function end(){
- setTimeout(function(){
- animationInProgress = false;
- run();
- },500);
+ function notifier (type) {
+ return function (message) {
+ queue.push( [type, message] );
+ if(isSetup) run();
}
+ }
- // if CSS Transitions not supported, fallback to JS Animation
- var setOpacity = (function(){
- if(useFilter){
- return function(opacity){
- humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100;
- }
- } else {
- return function(opacity){
- humaneEl.style.opacity = String(opacity);
- }
- }
- }());
- function jsAnimateOpacity(level,callback){
- var interval;
- var opacity;
-
- if (level === 1) {
- opacity = 0;
- if(win.humane.forceNew){
- opacity = useFilter ? humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity/100|0 : humaneEl.style.opacity|0;
- }
- humaneEl.style.zIndex = 100000;
- interval = setInterval(function(){
- if(opacity < 1) {
- opacity += 0.1;
- if (opacity>1) opacity = 1;
- setOpacity(opacity);
- }
- else {
- clearInterval(interval);
- }
- }, 200 / 20);
- } else {
- opacity = 1;
- interval = setInterval(function(){
- if(opacity > 0) {
- opacity -= 0.1;
- if (opacity<0) opacity = 0;
- setOpacity(opacity);
- }
- else {
- clearInterval(interval);
- humaneEl.style.zIndex = -1;
- end();
- }
- }, 200 / 20);
- }
- }
+ win.humane = notifier('log');
- function notify(message){
- queue.push(message);
- if(isSetup) run();
- }
+ win.humane.log = notifier('log');
+ win.humane.error = notifier('error');
+ win.humane.info = notifier('info');
+ win.humane.success = notifier('success');
- win.humane = notify;
- win.humane.timeout = 2500;
- win.humane.waitForMove = false;
- win.humane.forceNew = false;
+ win.humane.timeout = 2500;
+ win.humane.waitForMove = false;
+ win.humane.forceNew = false;
-}(window,document));
+}( window, document ));
diff --git a/humane.min.js b/humane.min.js
index d58cffd..ad61392 100644
--- a/humane.min.js
+++ b/humane.min.js
@@ -7,4 +7,4 @@
* Jose (@joseanpg)
* @example
* humane('hello world');
- */(function(a,b){function s(a){k.push(a),j&&n()}function r(b,c){var d,e;b===1?(e=0,a.humane.forceNew&&(e=i?g.filters.item("DXImageTransform.Microsoft.Alpha").Opacity/100|0:g.style.opacity|0),g.style.zIndex=1e5,d=setInterval(function(){e<1?(e+=.1,e>1&&(e=1),q(e)):clearInterval(d)},10)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),q(e)):(clearInterval(d),g.style.zIndex=-1,p())},10))}function p(){setTimeout(function(){f=!1,n()},500)}function o(a){a===1?g.className="humane humane-show":(g.className="humane",p())}function n(){if(!f||!!a.humane.forceNew){if(!k.length){m();return}f=!0,h&&(clearTimeout(h),h=null),h=setTimeout(function(){e||(c(b.body,"mousemove",m),c(b.body,"click",m),c(b.body,"keypress",m),c(b.body,"touchstart",m),e=!0,a.humane.waitForMove||m())},a.humane.timeout),g.innerHTML=k.shift(),o(1)}}function m(){d(b.body,"mousemove",m),d(b.body,"click",m),d(b.body,"keypress",m),d(b.body,"touchstart",m),e=!1,f&&o(0)}function l(){g=b.createElement("div"),g.id="humane",g.className="humane",b.body.appendChild(g),i&&(g.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=0),j=!0}var c,d;a.addEventListener?(c=function(a,b,c){a.addEventListener(b,c,!1)},d=function(a,b,c){a.removeEventListener(b,c,!1)}):(c=function(a,b,c){a.attachEvent("on"+b,c)},d=function(a,b,c){a.detachEvent("on"+b,c)});var e=!1,f=!1,g=null,h=null,i=/msie [678]/i.test(navigator.userAgent),j=!1,k=[];c(a,"load",function(){var a=function(a){var b=["MozT","WebkitT","OT","msT","KhtmlT","t"];for(var c=0,d;d=b[c];c++)if(d+"ransition"in a)return!0;return!1}(b.body.style);a||(o=r),l(),n()});var q=function(){return i?function(a){g.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){g.style.opacity=String(a)}}();a.humane=s,a.humane.timeout=2500,a.humane.waitForMove=!1,a.humane.forceNew=!1})(window,document)
\ No newline at end of file
+ */(function(a,b){function m(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h),j&&(h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=0),k=!0}function n(){d(b.body,"mousemove",n),d(b.body,"click",n),d(b.body,"keypress",n),d(b.body,"touchstart",n),f=!1,g&&p(0)}function o(){if(g&&!a.humane.forceNew)return;if(!l.length){n();return}g=!0,i&&(clearTimeout(i),i=null),i=setTimeout(function(){f||(c(b.body,"mousemove",n),c(b.body,"click",n),c(b.body,"keypress",n),c(b.body,"touchstart",n),f=!0,a.humane.waitForMove||n())},a.humane.timeout);var d=l.shift(),j=d[0],k=d[1];e(k)&&(k=""),h.innerHTML=k,p(j,1)}function p(a,b){b===1?h.className="humane humane-"+a+" humane-show":(h.className=h.className.replace(" humane-show",""),q())}function q(){setTimeout(function(){g=!1,o()},500)}function s(b,c){var d,e;c===1?(h.className="humane humane-"+b+" humane-show",e=0,a.humane.forceNew&&(e=j?h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity/100|0:h.style.opacity|0),d=setInterval(function(){e<1?(e+=.1,e>1&&(e=1),r(e)):clearInterval(d)},10)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),r(e)):(h.className=h.className.replace(" humane-show",""),clearInterval(d),q())},10))}function t(a){return function(b){l.push([a,b]),k&&o()}}var c,d,e;"addEventListener"in a?(c=function(a,b,c){a.addEventListener(b,c,!1)},d=function(a,b,c){a.removeEventListener(b,c,!1)}):(c=function(a,b,c){a.attachEvent("on"+b,c)},d=function(a,b,c){a.detachEvent("on"+b,c)}),e=Array.isArray||function(a){return Object.prototype.toString.call(a)==="[object Array]"};var f=!1,g=!1,h=null,i=null,j=/msie [678]/i.test(navigator.userAgent),k=!1,l=[];c(a,"load",function(){var a=function(a){var b=["MozT","WebkitT","OT","msT","KhtmlT","t"];for(var c=0,d;d=b[c];c++)if(d+"ransition"in a)return!0;return!1}(b.body.style);a||(p=s),m(),o()});var r=function(){return j?function(a){h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){h.style.opacity=String(a)}}();a.humane=t("log"),a.humane.log=t("log"),a.humane.error=t("error"),a.humane.info=t("info"),a.humane.success=t("success"),a.humane.timeout=2500,a.humane.waitForMove=!1,a.humane.forceNew=!1})(window,document);
\ No newline at end of file
diff --git a/index.html b/index.html
index a98a32d..d1faa30 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
Humane JS
+
-
+
@@ -43,25 +54,24 @@
Humane JS
A simple, modern, framework-independent, well-tested, unobtrusive, notification system.
Samples (click to view): Theme:
-