Automatically Show
5 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /test/issue49.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /test/issue38.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Marc Harter <@wavded> (wavded.com)", 3 | "name": "humane-js", 4 | "description": "A simple, modern, browser notification system", 5 | "version": "3.2.2", 6 | "homepage": "http://wavded.github.com/humane-js/", 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/wavded/humane-js.git" 10 | }, 11 | "main": "humane.js", 12 | "scripts": { 13 | "watch": "stylus -u nib -w theme-src/*.styl -o themes/", 14 | "minify": "uglifyjs --comments --preamble=\";\" humane.js > humane.min.js", 15 | "serve": "python -m SimpleHTTPServer" 16 | }, 17 | "engines": {}, 18 | "dependencies": {}, 19 | "devDependencies": { 20 | "canvas": "1.0.2", 21 | "nib": "^1.0.3", 22 | "stylus": "^0.47.3", 23 | "uglify-js": "^2.4.15" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /theme-src/original.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-original 8 | position : fixed 9 | transition : all .2s ease-out 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-original 15 | font-family : Ubuntu, Verdana, sans-serif 16 | line-height : 40px 17 | font-size : 25px 18 | top : 25% 19 | left : 25% 20 | opacity : 0 21 | width : 50% 22 | min-height : 40px 23 | padding : 10px 24 | text-align : center 25 | background-color : #000 26 | color : #fff 27 | border-radius : 15px 28 | p, ul 29 | margin: 0 30 | padding: 0 31 | ul 32 | list-style: none 33 | &.humane-original-info 34 | background-color : #030 35 | &.humane-original-success 36 | background-color : #030 37 | &.humane-original-error 38 | background-color : #300 39 | 40 | .humane.humane-animate 41 | .humane-original.humane-original-animate 42 | opacity : 0.8 43 | &:hover 44 | opacity : 0.6 45 | 46 | .humane.humane-js-animate 47 | .humane-original.humane-original-js-animate 48 | opacity : 0.8 49 | &:hover 50 | opacity : 0.6 51 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=60)") 52 | -------------------------------------------------------------------------------- /themes/original.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | min-height: 100%; 4 | } 5 | .humane, 6 | .humane-original { 7 | position: fixed; 8 | -moz-transition: all 0.2s ease-out; 9 | -webkit-transition: all 0.2s ease-out; 10 | -ms-transition: all 0.2s ease-out; 11 | -o-transition: all 0.2s ease-out; 12 | transition: all 0.2s ease-out; 13 | z-index: 100000; 14 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 15 | } 16 | .humane, 17 | .humane-original { 18 | font-family: Ubuntu, Verdana, sans-serif; 19 | line-height: 40px; 20 | font-size: 25px; 21 | top: 25%; 22 | left: 25%; 23 | opacity: 0; 24 | width: 50%; 25 | min-height: 40px; 26 | padding: 10px; 27 | text-align: center; 28 | background-color: #000; 29 | color: #fff; 30 | -webkit-border-radius: 15px; 31 | border-radius: 15px; 32 | } 33 | .humane p, 34 | .humane-original p, 35 | .humane ul, 36 | .humane-original ul { 37 | margin: 0; 38 | padding: 0; 39 | } 40 | .humane ul, 41 | .humane-original ul { 42 | list-style: none; 43 | } 44 | .humane.humane-original-info, 45 | .humane-original.humane-original-info { 46 | background-color: #030; 47 | } 48 | .humane.humane-original-success, 49 | .humane-original.humane-original-success { 50 | background-color: #030; 51 | } 52 | .humane.humane-original-error, 53 | .humane-original.humane-original-error { 54 | background-color: #300; 55 | } 56 | .humane.humane-animate, 57 | .humane-original.humane-original-animate { 58 | opacity: 0.8; 59 | } 60 | .humane.humane-animate:hover, 61 | .humane-original.humane-original-animate:hover { 62 | opacity: 0.6; 63 | } 64 | .humane.humane-js-animate, 65 | .humane-original.humane-original-js-animate { 66 | opacity: 0.8; 67 | } 68 | .humane.humane-js-animate:hover, 69 | .humane-original.humane-original-js-animate:hover { 70 | opacity: 0.6; 71 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 72 | } 73 | -------------------------------------------------------------------------------- /theme-src/libnotify.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-libnotify 8 | position : fixed 9 | transition : all .3s ease-out 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-libnotify 15 | font-family : Ubuntu, Arial, sans-serif 16 | text-align : center 17 | font-size : 15px 18 | top : 10px 19 | right : 10px 20 | opacity : 0 21 | width : 150px 22 | color : #fff 23 | padding : 10px 24 | background-image : linear-gradient-image(80px, rgba(0,0,0,0.9), rgba(50,50,50,0.9)) 25 | background : linear-gradient(top, rgba(0,0,0,0.9), rgba(50,50,50,0.9)) no-repeat 26 | *background-color : #000 27 | border-radius : 5px 28 | box-shadow : 0 4px 4px -4px #000 29 | transform : translateY(-40px) 30 | p, ul 31 | margin: 0 32 | padding: 0 33 | ul 34 | list-style: none 35 | &.humane-libnotify-info 36 | background-image : linear-gradient-image(80px, rgba(0,0,50,0.9), rgba(0,0,100,0.9)) 37 | background : linear-gradient(top, rgba(0,0,50,0.9), rgba(0,0,100,0.9)) no-repeat 38 | *background-color : #030 39 | &.humane-libnotify-success 40 | background-image : linear-gradient-image(80px, rgba(0,50,0,0.9), rgba(0,100,0,0.9)) 41 | background : linear-gradient(top, rgba(0,50,0,0.9), rgba(0,100,0,0.9)) no-repeat 42 | *background-color : #030 43 | &.humane-libnotify-error 44 | background-image : linear-gradient-image(200px, rgba(50,0,0,0.9), rgba(100,0,0,0.9)) 45 | background : linear-gradient(top, rgba(50,0,0,0.9), rgba(100,0,0,0.9)) no-repeat 46 | *background-color : #300 47 | 48 | .humane.humane-animate 49 | .humane-libnotify.humane-libnotify-animate 50 | opacity : 1 51 | transform : translateY(0) 52 | &:hover 53 | opacity : 0.2 54 | 55 | .humane.humane-animate 56 | .humane-libnotify.humane-libnotify-js-animate 57 | opacity : 1 58 | transform : translateY(0) 59 | &:hover 60 | opacity : 0.2 61 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=20)") 62 | -------------------------------------------------------------------------------- /theme-src/bigbox.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-bigbox 8 | position : fixed 9 | transition : all .3s ease-out 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-bigbox 15 | font-family : Ubuntu, Verdana, sans-serif 16 | line-height : 40px 17 | font-size : 35px 18 | top : 25% 19 | left : 25% 20 | opacity : 0 21 | width : 50% 22 | min-height : 40px 23 | padding : 30px 24 | text-align : center 25 | background-image : linear-gradient-image(200px, rgba(0,0,0,1), rgba(100,100,100,0.8)) 26 | background : linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.9)) no-repeat 27 | *background-color : #000 28 | color : #fff 29 | border-radius : 15px 30 | text-shadow : 0 -1px 1px #ddd 31 | box-shadow : 0 15px 15px -15px #000 32 | transform : scale(0.1) 33 | p, ul 34 | margin: 0 35 | padding: 0 36 | ul 37 | list-style: none 38 | &.humane-bigbox-info 39 | background-image : linear-gradient-image(200px, rgba(0,0,100,1), rgba(0,0,100,0.8)) 40 | background : linear-gradient(top, rgba(0,0,100,1), rgba(0,0,100,0.9)) no-repeat 41 | *background-color : #030 42 | &.humane-bigbox-success 43 | background-image : linear-gradient-image(200px, rgba(0,100,0,1), rgba(0,100,0,0.8)) 44 | background : linear-gradient(top, rgba(0,100,0,1), rgba(0,100,0,0.9)) no-repeat 45 | *background-color : #030 46 | &.humane-bigbox-error 47 | background-image : linear-gradient-image(200px, rgba(100,0,0,1), rgba(100,0,0,0.8)) 48 | background : linear-gradient(top, rgba(100,0,0,1), rgba(100,0,0,0.9)) no-repeat 49 | *background-color : #300 50 | 51 | .humane.humane-animate 52 | .humane-bigbox.humane-bigbox-animate 53 | opacity: 1 54 | transform: scale(1) 55 | &:hover 56 | opacity: 0.6 57 | transform: scale(0.8) 58 | 59 | .humane.humane-js-animate 60 | .humane-bigbox.humane-bigbox-js-animate 61 | opacity: 1 62 | transform: scale(1) 63 | &:hover 64 | opacity: 0.6 65 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=60)") 66 | -------------------------------------------------------------------------------- /theme-src/notify.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-notify 8 | position : fixed 9 | transition : all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275) 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-notify 15 | font-family : Ubuntu, Arial, sans-serif 16 | text-align : center 17 | font-size : 15px 18 | bottom : 10px 19 | right : 10px 20 | opacity : 0 21 | width : 150px 22 | color : #fff 23 | padding : 5px 10px 24 | background-image : linear-gradient-image(80px, rgba(72, 72, 72, 1), rgba(122, 122, 122, 1)) 25 | background : linear-gradient(top,rgba(72, 72, 72, 1), rgba(122, 122, 122, 1)) no-repeat 26 | *background-color : #484848 27 | box-shadow : 0 4px 4px -4px #000 28 | transform : translateX(100%) 29 | p, ul 30 | margin: 0 31 | padding: 0 32 | ul 33 | list-style: none 34 | &.humane-notify-info 35 | background-image : linear-gradient-image(80px, rgba(72, 72, 72, 1), rgba(122, 122, 122, 1)) 36 | background : linear-gradient(top, rgba(72, 72, 72, 1), rgba(122, 122, 122, 1)) no-repeat 37 | *background-color : #484848 38 | &.humane-notify-success 39 | background-image : linear-gradient-image(80px, rgba(24, 188, 156, 1), rgba(18, 140, 116, 1)) 40 | background : linear-gradient(top, rgba(24, 188, 156, 1), rgba(18, 140, 116, 1)) no-repeat 41 | *background-color : #188c9c 42 | &.humane-notify-error 43 | background-image : linear-gradient-image(200px, rgba(231, 76, 60, 1), rgba(171, 59, 46, 1)) 44 | background : linear-gradient(top, rgba(231, 76, 60, 1), rgba(171, 59, 46, 1)) no-repeat 45 | *background-color : #874c3c 46 | 47 | .humane.humane-animate 48 | .humane-notify.humane-notify-animate 49 | opacity : 1 50 | transform : translateX(0) 51 | &:hover 52 | opacity : 0.3 53 | 54 | .humane.humane-animate 55 | .humane-notify.humane-notify-js-animate 56 | opacity : 1 57 | transform : translateX(0) 58 | &:hover 59 | opacity : 0.3 60 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=30)") 61 | -------------------------------------------------------------------------------- /theme-src/boldlight.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-boldlight 8 | position : fixed 9 | transition : all .3s ease-out 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-boldlight 15 | font-family : Ubuntu, Verdana, sans-serif 16 | font-size : 25px 17 | letter-spacing : -1px 18 | top : 25% 19 | left : 25% 20 | opacity : 0 21 | width : 50% 22 | color : #000 23 | padding : 10px 24 | text-align : center 25 | background-image : linear-gradient-image(150px, rgba(255,255,255,0.8), rgba(150,150,150,0.8)) 26 | background : linear-gradient(top, rgba(255,255,255,0.8), rgba(150,150,150,0.8)) no-repeat 27 | *background-color: #fff 28 | border-radius : 15px 29 | text-shadow : 0 -1px 1px rgba(#ddd,0.4) 30 | box-shadow : 0 4px 4px -4px #eee 31 | transform : scale(1.1) 32 | p, ul 33 | margin: 0 34 | padding: 0 35 | ul 36 | list-style: none 37 | &.humane-boldlight-info 38 | background-image : linear-gradient-image(200px, rgba(100,100,255,1), rgba(100,100,255,0.8)) 39 | background : linear-gradient(top, rgba(100,100,255,1), rgba(100,100,255,0.8)) no-repeat 40 | *background-color : rgb(100,100,255) 41 | &.humane-boldlight-success 42 | background-image : linear-gradient-image(200px, rgba(100,255,100,0.8), rgba(100,255,100,0.8)) 43 | background : linear-gradient(top, rgba(100,255,100,1), rgba(100,255,100,0.8)) no-repeat 44 | *background-color : rgb(100,255,100) 45 | &.humane-boldlight-error 46 | background-image : linear-gradient-image(200px, rgba(255,100,100,0.8), rgba(255,100,100,0.8)) 47 | background : linear-gradient(top, rgba(255,100,100,1), rgba(255,100,100,0.8)) no-repeat 48 | *background-color : rgb(255,100,100) 49 | 50 | .humane.humane-animate 51 | .humane-boldlight.humane-boldlight-animate 52 | opacity : 1 53 | transform : scale(1) 54 | &:hover 55 | opacity : 0.4 56 | transform : scale(1.8) 57 | 58 | .humane.humane-animate 59 | .humane-boldlight.humane-boldlight-js-animate 60 | opacity : 1 61 | transform : scale(1) 62 | &:hover 63 | opacity : 0.4 64 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=40)") 65 | -------------------------------------------------------------------------------- /theme-src/jackedup.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | vendor-prefixes = moz webkit ms o official 3 | support-for-ie = false 4 | 5 | html, body { min-height: 100% } 6 | .humane 7 | .humane-jackedup 8 | position : fixed 9 | transition : all .6s ease-in-out 10 | z-index : 100000 11 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)") 12 | 13 | .humane 14 | .humane-jackedup 15 | font-family : Helvetica Neue, Helvetica, sans-serif 16 | font-size : 18px 17 | letter-spacing : -1px 18 | top : 20px 19 | left : 30% 20 | opacity : 0 21 | width : 40% 22 | color : #333 23 | padding : 10px 24 | text-align : center 25 | background-image : linear-gradient-image(150px, rgba(0,0,0,.1), rgba(0,0,0,.2)) 26 | background : linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.2)) no-repeat 27 | background-color : #fff 28 | border-radius : 3px 29 | text-shadow : 0 1px 1px rgba(rgba(255,255,255,.8)) 30 | box-shadow : 0 1px 2px rgba(0,0,0,.5) 31 | transform : translateY(-100px) 32 | p, ul 33 | margin: 0 34 | padding: 0 35 | ul 36 | list-style: none 37 | &.humane-jackedup-info 38 | background-image : linear-gradient-image(200px, rgba(100,100,255,1), rgba(100,100,255,0.8)) 39 | background : linear-gradient(top, rgba(0,0,0,.7), rgba(0,0,0,.85)) no-repeat 40 | background-color : #fff 41 | color : #fff 42 | text-shadow : 0 -1px 1px rgba(0,0,0,.35) 43 | &.humane-jackedup-success 44 | background-image : linear-gradient-image(200px, rgba(100,255,100,1), rgba(100,255,100,0.8)) 45 | background : linear-gradient(top, rgba(98,196,98,1), rgba(87,169,87,1)) no-repeat 46 | background-color : rgb(100,255,100) 47 | color : #fff 48 | text-shadow : 0 -1px 1px rgba(0,0,0,.35) 49 | &.humane-jackedup-error 50 | background-image : linear-gradient-image(200px, rgba(238,95,91,1), rgba(196,60,53,1)) 51 | background : linear-gradient(top, rgba(238,95,91,1), rgba(196,60,53,1)) no-repeat 52 | background-color : rgb(238,95,91) 53 | color : #fff 54 | text-shadow : 0 -1px 1px rgba(rgba(0,0,0,.35)) 55 | 56 | .humane-animate 57 | .humane-jackedup.humane-jackedup-animate 58 | opacity : 1 59 | transform : translateY(0) 60 | &:hover 61 | opacity : .7 62 | 63 | .humane-js-animate 64 | .humane-jackedup.humane-jackedup-js-animate 65 | opacity : 1 66 | transform : translateY(0) 67 | &:hover 68 | opacity : 0.7 69 | filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=70)") 70 | -------------------------------------------------------------------------------- /themes/flatty.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | min-height: 100%; 4 | } 5 | .humane, 6 | .humane-flatty { 7 | position: fixed; 8 | -moz-transition: all 0.4s ease-in-out; 9 | -webkit-transition: all 0.4s ease-in-out; 10 | -ms-transition: all 0.4s ease-in-out; 11 | -o-transition: all 0.4s ease-in-out; 12 | transition: all 0.4s ease-in-out; 13 | z-index: 100000; 14 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 15 | } 16 | .humane, 17 | .humane-flatty { 18 | font-family: Helvetica Neue, Helvetica, sans-serif; 19 | font-size: 16px; 20 | top: 0; 21 | left: 30%; 22 | opacity: 0; 23 | width: 40%; 24 | color: #444; 25 | padding: 10px; 26 | text-align: center; 27 | background-color: #fff; 28 | -webkit-border-bottom-right-radius: 3px; 29 | -webkit-border-bottom-left-radius: 3px; 30 | -moz-border-bottom-right-radius: 3px; 31 | -moz-border-bottom-left-radius: 3px; 32 | border-bottom-right-radius: 3px; 33 | border-bottom-left-radius: 3px; 34 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); 35 | box-shadow: 0 1px 2px rgba(0,0,0,0.5); 36 | -moz-transform: translateY(-100px); 37 | -webkit-transform: translateY(-100px); 38 | -ms-transform: translateY(-100px); 39 | -o-transform: translateY(-100px); 40 | transform: translateY(-100px); 41 | } 42 | .humane p, 43 | .humane-flatty p, 44 | .humane ul, 45 | .humane-flatty ul { 46 | margin: 0; 47 | padding: 0; 48 | } 49 | .humane ul, 50 | .humane-flatty ul { 51 | list-style: none; 52 | } 53 | .humane.humane-flatty-info, 54 | .humane-flatty.humane-flatty-info { 55 | background-color: #3498db; 56 | color: #FFF; 57 | } 58 | .humane.humane-flatty-success, 59 | .humane-flatty.humane-flatty-success { 60 | background-color: #18bc9c; 61 | color: #FFF; 62 | } 63 | .humane.humane-flatty-error, 64 | .humane-flatty.humane-flatty-error { 65 | background-color: #e74c3c; 66 | color: #FFF; 67 | } 68 | .humane-animate, 69 | .humane-flatty.humane-flatty-animate { 70 | opacity: 1; 71 | -moz-transform: translateY(0); 72 | -webkit-transform: translateY(0); 73 | -ms-transform: translateY(0); 74 | -o-transform: translateY(0); 75 | transform: translateY(0); 76 | } 77 | .humane-animate:hover, 78 | .humane-flatty.humane-flatty-animate:hover { 79 | opacity: 0.7; 80 | } 81 | .humane-js-animate, 82 | .humane-flatty.humane-flatty-js-animate { 83 | opacity: 1; 84 | -moz-transform: translateY(0); 85 | -webkit-transform: translateY(0); 86 | -ms-transform: translateY(0); 87 | -o-transform: translateY(0); 88 | transform: translateY(0); 89 | } 90 | .humane-js-animate:hover, 91 | .humane-flatty.humane-flatty-js-animate:hover { 92 | opacity: 0.7; 93 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 94 | } 95 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # humane.js 2 | This project was heavily inspired by [humanmsg](http://code.google.com/p/humanmsg/) project for jQuery. I really 3 | liked the project but I wanted to remove the jQuery dependency, add support for CSS transitions, and have more 4 | control over the timing. I consider the project complete and don't plan on adding any new features except for any bug fixes. 5 | 6 | ## About 7 | humane.js tries to be as unobtrusive as possible to the user experience while providing helpful information that is 8 | clear and grabs the users attention. It is framework independent. Customizable. 9 | 10 | ## Setup 11 | Setup is simple: 12 | 13 | - Download tar/zip 14 | - Select a [theme](https://github.com/wavded/humane-js/wiki/Themes) from `themes` dir. 15 | - Include the theme CSS in your page 16 | - Include `humane.min.js` in your page 17 | 18 | ## Demo/Usage 19 | 20 | You can see a [demo and usage here](http://wavded.github.com/humane-js/) 21 | 22 | ## Custom Themes 23 | 24 | Got a neat theme/animation, love to see it. View `theme-src/bigbox.styl` for an template to get started (uses [Stylus](http://learnboost.github.com/stylus/) w/ Nib and Canvas). 25 | 26 | To get setup with Stylus use [npm](http://npmjs.org): 27 | 28 | ```sh 29 | npm install --development 30 | ``` 31 | 32 | With Stylus installed you can watch for changes and compile into CSS by running: 33 | 34 | ```sh 35 | npm run watch 36 | ``` 37 | 38 | ## Desktop and Mobile Browser Support 39 | 40 | humane.js has been tested for the following browsers. 41 | 42 | - Internet Explorer 7+ 43 | - Firefox 3+ 44 | - Chrome 9+ 45 | - Safari 3+ 46 | - Opera 10+ 47 | - iOS 4+ 48 | - Android 2+ 49 | 50 | ## AMD and Node.js Support 51 | 52 | humane.js works for AMD systems like [require.js](http://requirejs.org/) and within Node.js CommonJS module system like [browserify](https://github.com/substack/node-browserify). 53 | 54 | ## Contributers 55 | 56 | Many thanks to the JS/Browser wizards that helped make this better, community rocks! 57 | 58 | - @bga_ (Alexander) 59 | - @joseanpg (Jose) 60 | - @OiNutter (Will McKenzie) 61 | - @ianmassey (Ian Massey) 62 | 63 | ## License 64 | 65 | (The MIT License) 66 | 67 | Copyright (c) 2018 Marc Harter <wavded@gmail.com> 68 | 69 | Permission is hereby granted, free of charge, to any person obtaining 70 | a copy of this software and associated documentation files (the 71 | 'Software'), to deal in the Software without restriction, including 72 | without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to 73 | permit persons to whom the Software is furnished to do so, subject to 74 | the following conditions: 75 | 76 | The above copyright notice and this permission notice shall be 77 | included in all copies or substantial portions of the Software. 78 | 79 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 80 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 81 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 82 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 83 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 84 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 85 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 86 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | 2 | 3.2.2 / 2014-12-09 3 | ================== 4 | 5 | * mod; User timeoutAfterMove of currentMsg [EloHg] 6 | 7 | 3.2.1 / 2014-11-02 8 | ================== 9 | 10 | * mod; readme 11 | * mod; switch to package.json scripts 12 | * add; semi's to protect js bundling issues 13 | 14 | 3.2.0 / 2014-03-22 15 | ================== 16 | 17 | * add; new theme called Flatty [msurguy] 18 | * add; requirejs test 19 | * fix; broken theme link 20 | * fix; version tag in bower configuration 21 | 22 | 3.1.0 / 2013-05-25 23 | ================== 24 | 25 | * removed; forceNew opt, not used 26 | * fixed; try catch for ie8 filter issue when gradient filter used 27 | * fixed; prevent accessing property of null/undefined objects 28 | * fixed; appendChild of null error GH #36 29 | * added; component.json 30 | * added new param: timeoutAfterMove : bool. Adds additional timeout after user action before closing 31 | 32 | 3.0.6 / 2013-01-04 33 | ================== 34 | 35 | * updated; modified styles for themes 36 | * fixed; timeout of 0 not working GH #35 37 | * fixed; font typo in jackedup.css 38 | * added; note about amd and commonjs to readme 39 | * added; ability to set container element when creating new humane instance 40 | 41 | 3.0.5 / 2012-09-03 42 | ================== 43 | 44 | * fixed; loading humane lib after dom ready GH #30 45 | 46 | 3.0.4 / 2012-07-21 47 | ================== 48 | 49 | * updated; build process 50 | * updated; attribution, sample 51 | * added; support Asynchronous Module Definition [tahu] 52 | * added; make spawn actions chainable 53 | 54 | 3.0.3 / 2012-07-06 55 | ================== 56 | 57 | * fixed; queued notification overwrites previous [JensRoland] 58 | * fixed; height declaration in themes [FileTrek] 59 | 60 | 3.0.1 / 2012-06-04 61 | ================== 62 | 63 | * updated; humane location in index 64 | * fixed; notification not showing up in ie8 onload GH #23 65 | 66 | 3.0.0 / 2012-05-07 67 | ================== 68 | 69 | * updated; documentation 70 | * removed; info, success, error (use spawn instead) 71 | * fixed; js error when no cb on remove 72 | * fixed; flicker bug in ie9 73 | * fixed; demo page not working in ie7,8 74 | * added; unique instance support 75 | * added; spawn support 76 | * added; options per notification 77 | * added; custom class support 78 | 79 | 2.8.1 / 2012-04-24 80 | ================== 81 | 82 | * added; callback to remove function GH #22 83 | 84 | 2.8.0 / 2012-02-21 85 | ================== 86 | 87 | * added; custom notifier support GH #19 88 | 89 | 2.7.2 / 2012-02-10 90 | ================== 91 | 92 | * fixed; IE 7/8 display issue 93 | * updated; docs page 94 | 95 | 2.7.1 / 2012-01-26 96 | ================== 97 | 98 | * fixed; display:none humane when not in use Fixes #18 99 | * added; exposed remove() 100 | 101 | 2.7.0 / 2012-01-12 102 | ================== 103 | 104 | * updated; improved support for iOS 4+, Android 2+ 105 | 106 | 2.6.0 / 2012-01-02 107 | ================== 108 | 109 | * added; event support 110 | * fixed; bug w/ transEnd firing multiple times 111 | 112 | 2.5.0 / 2011-12-23 113 | ================== 114 | 115 | * removed; forceNew (breaking change), hacky solution that didn't work very well 116 | * updated; code cleanup and refactor 117 | * updated; using transitionend for end events instead of timeout 118 | * added; waitForMove by type 119 | 120 | 2.2.8 / 2011-12-22 121 | ================== 122 | 123 | * added; timeout and clickToClose by type 124 | 125 | 2.2.7 / 2011-12-10 126 | ================== 127 | 128 | * added; ability to set the timeout to 0 (no timeout) 129 | 130 | 2.2.6 / 2011-12-08 131 | ================== 132 | 133 | * added; 'original' theme 134 | 135 | 2.2.5 / 2011-12-02 136 | ================== 137 | 138 | * added; click to close option 139 | 140 | 2.2.0 / 2011-12-02 141 | ================== 142 | 143 | * added; callback support @OiNutter 144 | * fixed; jackedup to support IE<9 145 | 146 | 2.1.1 / 2011-11-28 147 | ================== 148 | 149 | * fixed; restore original class after completion 150 | * added; jackedup theme 151 | * fixed; some IE fixes 152 | 153 | 2.1.0 / 2011-11-28 154 | ================== 155 | 156 | * added; stylus support, updated themes 157 | * added; bigbox theme 158 | * added; message types (log, info, error, success) 159 | 160 | 2.0.0 / 2011-07-12 161 | ================== 162 | 163 | * mobile support for iOS / Android 164 | * ie z-index fix 165 | * switched to z-index instead of visibility 166 | -------------------------------------------------------------------------------- /themes/notify.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | min-height: 100%; 4 | } 5 | .humane, 6 | .humane-notify { 7 | position: fixed; 8 | -moz-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275); 9 | -webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275); 10 | -ms-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275); 11 | -o-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275); 12 | transition: all 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275); 13 | z-index: 100000; 14 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 15 | } 16 | .humane, 17 | .humane-notify { 18 | font-family: Ubuntu, Arial, sans-serif; 19 | text-align: center; 20 | font-size: 15px; 21 | bottom: 10px; 22 | right: 10px; 23 | opacity: 0; 24 | width: 150px; 25 | color: #fff; 26 | padding: 5px 10px; 27 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(72, 72, 72, 1)), color-stop(1, rgba(122, 122, 122, 1))) no-repeat; 28 | background: -moz-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 29 | background: -webkit-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 30 | background: -ms-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 31 | background: -o-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 32 | background: linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 33 | *background-color: #484848; 34 | -webkit-box-shadow: 0 4px 4px -4px #000; 35 | box-shadow: 0 4px 4px -4px #000; 36 | -moz-transform: translateX(100%); 37 | -webkit-transform: translateX(100%); 38 | -ms-transform: translateX(100%); 39 | -o-transform: translateX(100%); 40 | transform: translateX(100%); 41 | } 42 | .humane p, 43 | .humane-notify p, 44 | .humane ul, 45 | .humane-notify ul { 46 | margin: 0; 47 | padding: 0; 48 | } 49 | .humane ul, 50 | .humane-notify ul { 51 | list-style: none; 52 | } 53 | .humane.humane-notify-info, 54 | .humane-notify.humane-notify-info { 55 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(72, 72, 72, 1)), color-stop(1, rgba(122, 122, 122, 1))) no-repeat; 56 | background: -moz-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 57 | background: -webkit-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 58 | background: -ms-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 59 | background: -o-linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 60 | background: linear-gradient(top, rgba(72, 72, 72, 1) 0%, rgba(122, 122, 122, 1) 100%) no-repeat; 61 | *background-color: #484848; 62 | } 63 | .humane.humane-notify-success, 64 | .humane-notify.humane-notify-success { 65 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(24, 188, 156, 1)), color-stop(1, rgba(18, 140, 116, 1))) no-repeat; 66 | background: -moz-linear-gradient(top, rgba(24, 188, 156, 1) 0%, rgba(18, 140, 116, 1) 100%) no-repeat; 67 | background: -webkit-linear-gradient(top, rgba(24, 188, 156, 1) 0%, rgba(18, 140, 116, 1) 100%) no-repeat; 68 | background: -ms-linear-gradient(top, rgba(24, 188, 156, 1) 0%, rgba(18, 140, 116, 1) 100%) no-repeat; 69 | background: -o-linear-gradient(top, rgba(24, 188, 156, 1) 0%, rgba(18, 140, 116, 1) 100%) no-repeat; 70 | background: linear-gradient(top, rgba(24, 188, 156, 1) 0%, rgba(18, 140, 116, 1) 100%) no-repeat; 71 | *background-color: #188c9c; 72 | } 73 | .humane.humane-notify-error, 74 | .humane-notify.humane-notify-error { 75 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(231, 76, 60, 1)), color-stop(1, rgba(171, 59, 46, 1))) no-repeat; 76 | background: -moz-linear-gradient(top, rgba(231, 76, 60, 1) 0%, rgba(171, 59, 46, 1) 100%) no-repeat; 77 | background: -webkit-linear-gradient(top, rgba(231, 76, 60, 1) 0%, rgba(171, 59, 46, 1) 100%) no-repeat; 78 | background: -ms-linear-gradient(top, rgba(231, 76, 60, 1) 0%, rgba(171, 59, 46, 1) 100%) no-repeat; 79 | background: -o-linear-gradient(top, rgba(231, 76, 60, 1) 0%, rgba(171, 59, 46, 1) 100%) no-repeat; 80 | background: linear-gradient(top, rgba(231, 76, 60, 1) 0%, rgba(171, 59, 46, 1) 100%) no-repeat; 81 | *background-color: #874c3c; 82 | } 83 | .humane.humane-animate, 84 | .humane-notify.humane-notify-animate { 85 | opacity: 1; 86 | -moz-transform: translateX(0); 87 | -webkit-transform: translateX(0); 88 | -ms-transform: translateX(0); 89 | -o-transform: translateX(0); 90 | transform: translateX(0); 91 | } 92 | .humane.humane-animate:hover, 93 | .humane-notify.humane-notify-animate:hover { 94 | opacity: 0.3; 95 | } 96 | .humane.humane-animate, 97 | .humane-notify.humane-notify-js-animate { 98 | opacity: 1; 99 | -moz-transform: translateX(0); 100 | -webkit-transform: translateX(0); 101 | -ms-transform: translateX(0); 102 | -o-transform: translateX(0); 103 | transform: translateX(0); 104 | } 105 | .humane.humane-animate:hover, 106 | .humane-notify.humane-notify-js-animate:hover { 107 | opacity: 0.3; 108 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); 109 | } 110 | -------------------------------------------------------------------------------- /humane.min.js: -------------------------------------------------------------------------------- 1 | ; 2 | /** 3 | * humane.js 4 | * Humanized Messages for Notifications 5 | * @author Marc Harter (@wavded) 6 | * @example 7 | * humane.log('hello world'); 8 | * @license MIT 9 | * See more usage examples at: http://wavded.github.com/humane-js/ 10 | */ 11 | !function(name,context,definition){if(typeof module!=="undefined")module.exports=definition(name,context);else if(typeof define==="function"&&typeof define.amd==="object")define(definition);else context[name]=definition(name,context)}("humane",this,function(name,context){var win=window;var doc=document;var ENV={on:function(el,type,cb){"addEventListener"in win?el.addEventListener(type,cb,false):el.attachEvent("on"+type,cb)},off:function(el,type,cb){"removeEventListener"in win?el.removeEventListener(type,cb,false):el.detachEvent("on"+type,cb)},bind:function(fn,ctx){return function(){fn.apply(ctx,arguments)}},isArray:Array.isArray||function(obj){return Object.prototype.toString.call(obj)==="[object Array]"},config:function(preferred,fallback){return preferred!=null?preferred:fallback},transSupport:false,useFilter:/msie [678]/i.test(navigator.userAgent),_checkTransition:function(){var el=doc.createElement("div");var vendors={webkit:"webkit",Moz:"",O:"o",ms:"MS"};for(var vendor in vendors)if(vendor+"Transition"in el.style){this.vendorPrefix=vendors[vendor];this.transSupport=true}}};ENV._checkTransition();var Humane=function(o){o||(o={});this.queue=[];this.baseCls=o.baseCls||"humane";this.addnCls=o.addnCls||"";this.timeout="timeout"in o?o.timeout:2500;this.waitForMove=o.waitForMove||false;this.clickToClose=o.clickToClose||false;this.timeoutAfterMove=o.timeoutAfterMove||false;this.container=o.container;try{this._setupEl()}catch(e){ENV.on(win,"load",ENV.bind(this._setupEl,this))}};Humane.prototype={constructor:Humane,_setupEl:function(){var el=doc.createElement("div");el.style.display="none";if(!this.container){if(doc.body)this.container=doc.body;else throw"document.body is null"}this.container.appendChild(el);this.el=el;this.removeEvent=ENV.bind(function(){var timeoutAfterMove=ENV.config(this.currentMsg.timeoutAfterMove,this.timeoutAfterMove);if(!timeoutAfterMove){this.remove()}else{setTimeout(ENV.bind(this.remove,this),timeoutAfterMove)}},this);this.transEvent=ENV.bind(this._afterAnimation,this);this._run()},_afterTimeout:function(){if(!ENV.config(this.currentMsg.waitForMove,this.waitForMove))this.remove();else if(!this.removeEventsSet){ENV.on(doc.body,"mousemove",this.removeEvent);ENV.on(doc.body,"click",this.removeEvent);ENV.on(doc.body,"keypress",this.removeEvent);ENV.on(doc.body,"touchstart",this.removeEvent);this.removeEventsSet=true}},_run:function(){if(this._animating||!this.queue.length||!this.el)return;this._animating=true;if(this.currentTimer){clearTimeout(this.currentTimer);this.currentTimer=null}var msg=this.queue.shift();var clickToClose=ENV.config(msg.clickToClose,this.clickToClose);if(clickToClose){ENV.on(this.el,"click",this.removeEvent);ENV.on(this.el,"touchstart",this.removeEvent)}var timeout=ENV.config(msg.timeout,this.timeout);if(timeout>0)this.currentTimer=setTimeout(ENV.bind(this._afterTimeout,this),timeout);if(ENV.isArray(msg.html))msg.html="
76 |
77 |
79 | A simple, modern, framework-independent, well-tested, unobtrusive, notification system.
80 |
Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.
81 |
Click a code sample below to see it in action:
94 | 95 |humane.log("Welcome Back")
96 | humane.log("Record 392 has been updated")
97 | humane.log(["List","of","Items"])98 |
humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })
99 | humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })
100 |
101 | Options can be specified in a variety of ways. Either by the entire instance as shown below, or per notification, as shown above:
103 |humane.timeout = 5000 // default: 2500104 |
105 |107 |Sets the delay before a message fades out (set to 0 for no timeout).
106 |
humane.waitForMove = true // default: false108 |
109 |111 |Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)
110 |
humane.clickToClose = true // default: false112 |
113 |115 |Click or touch the notification to close
114 |
humane.timeoutAfterMove = 2000 // default: 0116 |
117 |119 |Delay before notification disappears (useful in conjunction with waitForMove)
118 |
humane.addnCls = 'humane-info' // default: ''120 |
121 |123 |Specify an additional class to apply when notifying (nice when you only want to change just a little bit of the style)
122 |
Create a completely new instance of humane using humane.create().
125 |
126 | var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })
127 | notify.log('Custom Notifier')
128 |
129 | There are a options that can also be applied when creating an instance:
130 |humane.baseCls = 'humane' // default: 'humane'131 |
132 |134 | 135 |Specify an base class
133 |
Create a custom notifier using humane.spawn().
137 |
138 | humane.info = humane.spawn({ addnCls: 'humane-libnotify-info', timeout: 1000 })
139 | humane.info('Info Themed Notifier')
140 |
141 | humane.error = humane.spawn({ addnCls: 'humane-libnotify-error', timeout: 1000 })
142 | humane.error('Error Themed Notifier')
143 |
144 | humane.remove(function(){ alert('removed') })
146 | 147 |149 | 150 |Force remove current notification, takes an optional callback fired when finished (note each instance has its own remove)
148 |
With all this power, you are bound to go CRAZY! Click the sample below to go crazy:
152 |
153 | var bigbox = humane.create({baseCls: 'humane-bigbox', timeout: 1000})
154 | bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
155 | bigbox.log('Oh!').error('No!')
156 |
157 | var libnotify = humane.create({baseCls: 'humane-libnotify', addnCls: 'humane-libnotify-info'})
158 | libnotify.log('Notified')
159 |
160 | var jacked = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-success'})
161 | jacked.log("What's up here!")
162 |
163 | Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.
165 |Humane is easily themable using Stylus. There are currently a few themes, but I hope this grows. Send me a pull request and update the wiki with your favorite look and feel.
177 | 178 | 179 |Visit github page to download and get more details.
181 | 182 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /humane.js: -------------------------------------------------------------------------------- 1 | /** 2 | * humane.js 3 | * Humanized Messages for Notifications 4 | * @author Marc Harter (@wavded) 5 | * @example 6 | * humane.log('hello world'); 7 | * @license MIT 8 | * See more usage examples at: http://wavded.github.com/humane-js/ 9 | */ 10 | 11 | ;!function (name, context, definition) { 12 | if (typeof module !== 'undefined') module.exports = definition(name, context) 13 | else if (typeof define === 'function' && typeof define.amd === 'object') define(definition) 14 | else context[name] = definition(name, context) 15 | }('humane', this, function (name, context) { 16 | var win = window 17 | var doc = document 18 | 19 | var ENV = { 20 | on: function (el, type, cb) { 21 | 'addEventListener' in win ? el.addEventListener(type,cb,false) : el.attachEvent('on'+type,cb) 22 | }, 23 | off: function (el, type, cb) { 24 | 'removeEventListener' in win ? el.removeEventListener(type,cb,false) : el.detachEvent('on'+type,cb) 25 | }, 26 | bind: function (fn, ctx) { 27 | return function () { fn.apply(ctx,arguments) } 28 | }, 29 | isArray: Array.isArray || function (obj) { return Object.prototype.toString.call(obj) === '[object Array]' }, 30 | config: function (preferred, fallback) { 31 | return preferred != null ? preferred : fallback 32 | }, 33 | transSupport: false, 34 | useFilter: /msie [678]/i.test(navigator.userAgent), // sniff, sniff 35 | _checkTransition: function () { 36 | var el = doc.createElement('div') 37 | var vendors = { webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' } 38 | 39 | for (var vendor in vendors) 40 | if (vendor + 'Transition' in el.style) { 41 | this.vendorPrefix = vendors[vendor] 42 | this.transSupport = true 43 | } 44 | } 45 | } 46 | ENV._checkTransition() 47 | 48 | var Humane = function (o) { 49 | o || (o = {}) 50 | this.queue = [] 51 | this.baseCls = o.baseCls || 'humane' 52 | this.addnCls = o.addnCls || '' 53 | this.timeout = 'timeout' in o ? o.timeout : 2500 54 | this.waitForMove = o.waitForMove || false 55 | this.clickToClose = o.clickToClose || false 56 | this.timeoutAfterMove = o.timeoutAfterMove || false 57 | this.container = o.container 58 | 59 | try { this._setupEl() } // attempt to setup elements 60 | catch (e) { 61 | ENV.on(win,'load',ENV.bind(this._setupEl, this)) // dom wasn't ready, wait till ready 62 | } 63 | } 64 | 65 | Humane.prototype = { 66 | constructor: Humane, 67 | _setupEl: function () { 68 | var el = doc.createElement('div') 69 | el.style.display = 'none' 70 | if (!this.container){ 71 | if(doc.body) this.container = doc.body; 72 | else throw 'document.body is null' 73 | } 74 | this.container.appendChild(el) 75 | this.el = el 76 | this.removeEvent = ENV.bind(function(){ 77 | var timeoutAfterMove = ENV.config(this.currentMsg.timeoutAfterMove,this.timeoutAfterMove) 78 | if (!timeoutAfterMove){ 79 | this.remove() 80 | } else { 81 | setTimeout(ENV.bind(this.remove,this),timeoutAfterMove) 82 | } 83 | },this) 84 | 85 | this.transEvent = ENV.bind(this._afterAnimation,this) 86 | this._run() 87 | }, 88 | _afterTimeout: function () { 89 | if (!ENV.config(this.currentMsg.waitForMove,this.waitForMove)) this.remove() 90 | 91 | else if (!this.removeEventsSet) { 92 | ENV.on(doc.body,'mousemove',this.removeEvent) 93 | ENV.on(doc.body,'click',this.removeEvent) 94 | ENV.on(doc.body,'keypress',this.removeEvent) 95 | ENV.on(doc.body,'touchstart',this.removeEvent) 96 | this.removeEventsSet = true 97 | } 98 | }, 99 | _run: function () { 100 | if (this._animating || !this.queue.length || !this.el) return 101 | 102 | this._animating = true 103 | if (this.currentTimer) { 104 | clearTimeout(this.currentTimer) 105 | this.currentTimer = null 106 | } 107 | 108 | var msg = this.queue.shift() 109 | var clickToClose = ENV.config(msg.clickToClose,this.clickToClose) 110 | 111 | if (clickToClose) { 112 | ENV.on(this.el,'click',this.removeEvent) 113 | ENV.on(this.el,'touchstart',this.removeEvent) 114 | } 115 | 116 | var timeout = ENV.config(msg.timeout,this.timeout) 117 | 118 | if (timeout > 0) 119 | this.currentTimer = setTimeout(ENV.bind(this._afterTimeout,this), timeout) 120 | 121 | if (ENV.isArray(msg.html)) msg.html = '