Compare commits
1 Commits
Author | SHA1 | Date |
---|---|---|
Alexander Zhirov | 00faa70ff0 |
12
noticer.js
12
noticer.js
|
@ -1,10 +1,8 @@
|
|||
/*! noticer - v0.1.0 - 2023-05-31
|
||||
/*! noticer - v0.1.1 - 2023-06-02
|
||||
* https://git.zhirov.kz/alexander/noticer
|
||||
* Copyright Alexander Zhirov; Licensed GPL-2.0 */
|
||||
|
||||
class Noticer {
|
||||
timer;
|
||||
|
||||
constructor() {
|
||||
this.div = $('<div id="noticer"></div>');
|
||||
this.div.css({
|
||||
|
@ -85,17 +83,17 @@ class Noticer {
|
|||
|
||||
newNotice.fadeIn(500).mouseenter(() => {
|
||||
clearTimeout(opacityTimeout);
|
||||
this.timer.pause();
|
||||
timer.pause();
|
||||
}).mouseleave(() => {
|
||||
this.timer.resume();
|
||||
timer.resume();
|
||||
}).click(() => {
|
||||
this.timer.dead();
|
||||
timer.dead();
|
||||
newNotice.fadeOut(0, function(){
|
||||
this.remove();
|
||||
});
|
||||
});
|
||||
|
||||
this.timer = new Timer(() => {
|
||||
let timer = new Timer(() => {
|
||||
newNotice.fadeOut(500, function(){
|
||||
this.remove();
|
||||
});
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*! noticer - v0.1.0 - 2023-05-31
|
||||
/*! noticer - v0.1.1 - 2023-06-02
|
||||
* https://git.zhirov.kz/alexander/noticer
|
||||
* Copyright Alexander Zhirov; Licensed GPL-2.0 */
|
||||
class Noticer{timer;constructor(){this.div=$('<div id="noticer"></div>'),this.div.css({position:"absolute",top:"10px",right:"20px","z-index":"1000"}),$("body").append(this.div)}success(e,t=6e3){this.print(e,t,"#52b818","#bffdc0")}warning(e,t=6e3){this.print(e,t,"#b8ae18","#f8fdbf")}error(e,t=6e3){this.print(e,t,"#b96161","#fddede")}print=function(e,t,n,s){t<6e3&&(t=6e3);let i=function(e,t){let n,s,o=t;this.pause=function(){clearTimeout(n),o-=new Date-s},this.resume=function(){s=new Date,clearTimeout(n),n=setTimeout(e,o)},this.dead=function(){clearTimeout(n)},this.resume()},o=$(`<div class="notice">${e}</div>`);o.css({border:`1px solid ${n}`,"background-color":`${s}`,color:"#333",padding:"10px 30px","text-align":"center",display:"none",margin:"10px 0 0 0",width:"350px",opacity:"1",cursor:"pointer"}),o.hover(function(){$(this).css({opacity:"1"})},function(){$(this).css({opacity:"0.3"})}),this.div.append(o);let a=setTimeout(function(){o.fadeTo(1e3,.3)},2500);o.fadeIn(500).mouseenter(()=>{clearTimeout(a),this.timer.pause()}).mouseleave(()=>{this.timer.resume()}).click(()=>{this.timer.dead(),o.fadeOut(0,function(){this.remove()})}),this.timer=new i(()=>{o.fadeOut(500,function(){this.remove()})},t)}}
|
||||
class Noticer{constructor(){this.div=$('<div id="noticer"></div>'),this.div.css({position:"absolute",top:"10px",right:"20px","z-index":"1000"}),$("body").append(this.div)}success(e,t=6e3){this.print(e,t,"#52b818","#bffdc0")}warning(e,t=6e3){this.print(e,t,"#b8ae18","#f8fdbf")}error(e,t=6e3){this.print(e,t,"#b96161","#fddede")}print=function(e,t,n,s){t<6e3&&(t=6e3);let a=function(e,t){let n,s,o=t;this.pause=function(){clearTimeout(n),o-=new Date-s},this.resume=function(){s=new Date,clearTimeout(n),n=setTimeout(e,o)},this.dead=function(){clearTimeout(n)},this.resume()},o=$(`<div class="notice">${e}</div>`);o.css({border:`1px solid ${n}`,"background-color":`${s}`,color:"#333",padding:"10px 30px","text-align":"center",display:"none",margin:"10px 0 0 0",width:"350px",opacity:"1",cursor:"pointer"}),o.hover(function(){$(this).css({opacity:"1"})},function(){$(this).css({opacity:"0.3"})}),this.div.append(o);let r=setTimeout(function(){o.fadeTo(1e3,.3)},2500);o.fadeIn(500).mouseenter(()=>{clearTimeout(r),i.pause()}).mouseleave(()=>{i.resume()}).click(()=>{i.dead(),o.fadeOut(0,function(){this.remove()})});let i=new a(()=>{o.fadeOut(500,function(){this.remove()})},t)}}
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="../noticer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="test">test</button>
|
||||
<script>
|
||||
noticer = new Noticer;
|
||||
$('#test').click(() => {
|
||||
noticer.success("This is success notice");
|
||||
noticer.warning("This is warning notice");
|
||||
noticer.error("This is error notice");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue