From 0dbc458d38c03d0369dfd3a043e87ee485c76cbc Mon Sep 17 00:00:00 2001 From: Marc Harter Date: Tue, 27 Sep 2011 11:21:16 -0500 Subject: [PATCH 1/2] tweak to bigbox theme --- humane-themes/bigbox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/humane-themes/bigbox.css b/humane-themes/bigbox.css index c87e679..581630a 100644 --- a/humane-themes/bigbox.css +++ b/humane-themes/bigbox.css @@ -34,6 +34,7 @@ div.humane.humane-show:hover { .humane { font-family : Ubuntu, Verdana, sans-serif; font-size : 35px; + line-height : 40px; letter-spacing : -1px; top : 25%; left : 25%; From 08510cc136ba113913bb8f967e6b4f826ff07aa7 Mon Sep 17 00:00:00 2001 From: Marc Harter Date: Mon, 28 Nov 2011 00:15:26 -0600 Subject: [PATCH 2/2] Added stylus support, updated themes --- Makefile | 10 ++ humane-themes/bigbox.css | 92 ----------- humane-themes/bold-dark.css | 84 ---------- humane-themes/bold-light.css | 83 ---------- humane-themes/gshellish.css | 96 ------------ humane-themes/libnotify.css | 82 ---------- humane.js | 293 ++++++++++++++++++----------------- humane.min.js | 2 +- index.html | 40 +++-- readme.md | 2 +- theme-src/bigbox.styl | 54 +++++++ theme-src/boldlight.styl | 53 +++++++ theme-src/libnotify.styl | 50 ++++++ themes/bigbox.css | 110 +++++++++++++ themes/boldlight.css | 109 +++++++++++++ themes/libnotify.css | 102 ++++++++++++ 16 files changed, 667 insertions(+), 595 deletions(-) create mode 100644 Makefile delete mode 100644 humane-themes/bigbox.css delete mode 100644 humane-themes/bold-dark.css delete mode 100644 humane-themes/bold-light.css delete mode 100644 humane-themes/gshellish.css delete mode 100644 humane-themes/libnotify.css create mode 100644 theme-src/bigbox.styl create mode 100644 theme-src/boldlight.styl create mode 100644 theme-src/libnotify.styl create mode 100644 themes/bigbox.css create mode 100644 themes/boldlight.css create mode 100644 themes/libnotify.css 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: - + - - + - - 
humane("Welcome Back");
+ + 
humane("Welcome Back");
+humane.log("Welcome Back");
 - - 
humane("Record <b>392</b> has been updated");
+ + 
humane.info("Record <b>392</b> has been updated");
 - - 
humane("<p class='error'>Invalid Username and/or Password</p>");
+ + 
humane.error("Invalid Username and/or Password");
 - - 
humane("<ul><li>List</li><li>of</li><li>Items</li></ul>");
+ + 
humane.success(["List","of","Items"]);

Options

@@ -97,7 +107,7 @@

Options

Browser Support

Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.