pacnpal/greptweet
1
0
Fork 0
mirror of https://github.com/thewesker/greptweet.git synced 2025-12-21 20:41:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

trying a trendy JS notification

Browse Source
This commit is contained in:
Kai Hendry
2011-11-30 16:53:00 +08:00
parent 34b693c5c5
commit af30034df4
4 changed files with 142 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
ajax-loader.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

10
humane.min.js vendored Normal file
View File

@@ -0,0 +1,10 @@
/**
* HumaneJS
* Humanized Messages for Notifications
* @author Marc Harter (@wavded)
* @contributers
* Alexander (@bga_)
* Jose (@joseanpg)
* @example
* humane('hello world');
*/(function(a,b){function m(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h),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="<ul><li>"+k.join("<li>")+"</ul>"),h.innerHTML=k,p(j,1)}function p(a,b){b===1?h.className="humane humane-"+a+" humane-animate":(h.className=h.className.replace(" humane-animate",""),q())}function q(){setTimeout(function(){g=!1,h.className="humane",o()},500)}function s(b,c){var d,e;c===1?(e=0,h.className="humane humane-js-animate humane-"+b,h.filters&&(h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=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)},5)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),r(e)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(d),q())},5))}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);

12
index.shtml
View File

@@ -3,13 +3,17 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>GrepTweet</title> <title>GrepTweet</title>
<script src="humane.min.js" async></script>
<link id='theme' rel='stylesheet' href='themes/bigbox.css'/>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script> <script>
function submitPressed() { function submitPressed() {
b = document.getElementById("b"); if (document.forms.f.checkValidity()) {
b.disabled = true; b = document.getElementById("b");
b.innerHTML = '<img src="ajax-loader.gif">'; b.disabled = true;
document.forms.f.submit(); humane.log("Please wait...");
document.forms.f.submit();
}
} }
</script> </script>
</head> </head>

124
themes/bigbox.css Normal file
View File

@@ -0,0 +1,124 @@
html,
body {
height: 100%;
}
.humane {
position: fixed;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: -1;
}
.humane.humane-animate,
.humane.humane-js-animate {
z-index: 100000;
}
.humane {
font-family: Ubuntu, Verdana, sans-serif;
line-height: 40px;
font-size: 35px;
top: 25%;
left: 25%;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
width: 50%;
min-height: 40px;
padding: 30px;
text-align: center;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQokb2RQQ6EMAwDx/7/n80BtIEC3RYhLlXrVLGTAYiBWBIGtkPSP01SfreTVoV5re9Rcee1scwDk9NurbR62sZJcpzy9O+2X5KsXabyPaQFYNuvkqkRviDTp9Vs8opC0TpkHvJtVjeReW/5kEyX1gKeLEKE9peeWAAAAABJRU5ErkJggg==');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, rgba(0,0,0,0.90))) no-repeat;
background: -moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat;
background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat;
background: -ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat;
background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat;
background: linear-gradient(top, #000 0%, rgba(0,0,0,0.90) 100%) no-repeat;
*background-color: #000;
color: #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 -1px 1px #ddd;
-moz-box-shadow: 0 15px 15px -15px #000;
-webkit-box-shadow: 0 15px 15px -15px #000;
-ms-box-shadow: 0 15px 15px -15px #000;
-o-box-shadow: 0 15px 15px -15px #000;
box-shadow: 0 15px 15px -15px #000;
-moz-transform: scale(0.1);
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transform: scale(0.1);
}
.humane p,
.humane ul {
margin: 0;
padding: 0;
}
.humane ul {
list-style: none;
}
.humane.humane-info {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAQElEQVQokWNgYEj5z8TAwPCfiYGBgQGVIEKMTG2DTYwRVez/IHIaNcUGyBnYgpORel6gpvFEJhBqpxIaG8/AAADsKDq/HhYQ2AAAAABJRU5ErkJggg==');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000064), color-stop(1, rgba(0,0,100,0.90))) no-repeat;
background: -moz-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat;
background: -webkit-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat;
background: -ms-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat;
background: -o-linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat;
background: linear-gradient(top, #000064 0%, rgba(0,0,100,0.90) 100%) no-repeat;
*background-color: #030;
}
.humane.humane-success {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNgSGH4z8TAACEYUAkixMjUNsjEGFHF/g8ip1FVbGCcgS04GannBaoaT1wCwWkvmXbQ2HgGBgYA8Yw6v+m4Kh8AAAAASUVORK5CYII=');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), color-stop(1, rgba(0,100,0,0.90))) no-repeat;
background: -moz-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat;
background: -webkit-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat;
background: -ms-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat;
background: -o-linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat;
background: linear-gradient(top, #006400 0%, rgba(0,100,0,0.90) 100%) no-repeat;
*background-color: #030;
}
.humane.humane-error {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNIYWD4z8QAJRhQCSLEyNQ2uMQYUcX+DyKnUVdsQJyBLTgZqecF6hpPVALBaS+ZdtDYeAYGBgYA9vA6v4OR3MkAAAAASUVORK5CYII=');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #640000), color-stop(1, rgba(100,0,0,0.90))) no-repeat;
background: -moz-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat;
background: -webkit-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat;
background: -ms-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat;
background: -o-linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat;
background: linear-gradient(top, #640000 0%, rgba(100,0,0,0.90) 100%) no-repeat;
*background-color: #300;
}
.humane.humane-animate {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.humane.humane-animate:hover {
opacity: 0.6;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.humane.humane-js-animate {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.humane.humane-js-animate:hover {
opacity: 0.6;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}