diff --git a/dist/css/toastme.css b/dist/css/toastme.css index a83d9e0..42f616a 100644 --- a/dist/css/toastme.css +++ b/dist/css/toastme.css @@ -1,5 +1,5 @@ /*! - * toastmejs v1.0.0 + * toastmejs v1.0.2 * Web notifications and dialogs with pure javascript * (c) 2019 alexsegen * MIT License @@ -442,10 +442,19 @@ } /* line 1, src/sass/_notifications.scss */ +.toastme-list { + position: fixed; + max-width: 250px; + padding: 0; + margin: 0; +} + +/* line 8, src/sass/_notifications.scss */ .toastme { font-size: 13px; font-family: Helvetica, "san-serif"; color: #737373; + margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -457,7 +466,6 @@ padding: 10px 15px 10px 45px; border-radius: 2px; background-color: #f5f5f5; - position: fixed; opacity: 0.7; cursor: pointer; z-index: 100; @@ -471,106 +479,106 @@ animation: flip-in-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } -/* line 24, src/sass/_notifications.scss */ +/* line 32, src/sass/_notifications.scss */ .toastme:hover, .toastme:focus { opacity: 1; } -/* line 29, src/sass/_notifications.scss */ +/* line 37, src/sass/_notifications.scss */ .toastme a { color: #737373; text-decoration: underline; } -/* line 34, src/sass/_notifications.scss */ +/* line 42, src/sass/_notifications.scss */ .toastme.success { color: #fff; background-color: #8bc34a; } -/* line 37, src/sass/_notifications.scss */ +/* line 45, src/sass/_notifications.scss */ .toastme.success a { color: #fff; text-decoration: underline; } -/* line 41, src/sass/_notifications.scss */ +/* line 49, src/sass/_notifications.scss */ .toastme.success .toastme-ico { color: #8bc34a; } -/* line 43, src/sass/_notifications.scss */ +/* line 51, src/sass/_notifications.scss */ .toastme.success .toastme-ico:before { content: ""; } -/* line 49, src/sass/_notifications.scss */ +/* line 57, src/sass/_notifications.scss */ .toastme.error { color: #fff; background-color: #f44336; } -/* line 52, src/sass/_notifications.scss */ +/* line 60, src/sass/_notifications.scss */ .toastme.error a { color: #fff; text-decoration: underline; } -/* line 56, src/sass/_notifications.scss */ +/* line 64, src/sass/_notifications.scss */ .toastme.error .toastme-ico { color: #f44336; } -/* line 58, src/sass/_notifications.scss */ +/* line 66, src/sass/_notifications.scss */ .toastme.error .toastme-ico:before { content: ""; } -/* line 64, src/sass/_notifications.scss */ +/* line 72, src/sass/_notifications.scss */ .toastme.warning { color: #fff; background-color: #ff9800; } -/* line 67, src/sass/_notifications.scss */ +/* line 75, src/sass/_notifications.scss */ .toastme.warning a { color: #fff; text-decoration: underline; } -/* line 71, src/sass/_notifications.scss */ +/* line 79, src/sass/_notifications.scss */ .toastme.warning .toastme-ico { color: #ff9800; } -/* line 73, src/sass/_notifications.scss */ +/* line 81, src/sass/_notifications.scss */ .toastme.warning .toastme-ico:before { content: ""; } -/* line 79, src/sass/_notifications.scss */ +/* line 87, src/sass/_notifications.scss */ .toastme.info { color: #fff; background-color: #2196f3; } -/* line 82, src/sass/_notifications.scss */ +/* line 90, src/sass/_notifications.scss */ .toastme.info a { color: #fff; text-decoration: underline; } -/* line 86, src/sass/_notifications.scss */ +/* line 94, src/sass/_notifications.scss */ .toastme.info .toastme-ico { color: #2196f3; } -/* line 88, src/sass/_notifications.scss */ +/* line 96, src/sass/_notifications.scss */ .toastme.info .toastme-ico:before { content: ""; } -/* line 94, src/sass/_notifications.scss */ +/* line 102, src/sass/_notifications.scss */ .toastme .toastme-close { color: #333; opacity: 0.7; @@ -598,18 +606,18 @@ transition: all 0.2s ease-in-out; } -/* line 108, src/sass/_notifications.scss */ +/* line 116, src/sass/_notifications.scss */ .toastme .toastme-close:after { content: ""; color: #ddd; } -/* line 112, src/sass/_notifications.scss */ +/* line 120, src/sass/_notifications.scss */ .toastme .toastme-close:hover, .toastme .toastme-close:focus { opacity: 1; } -/* line 118, src/sass/_notifications.scss */ +/* line 126, src/sass/_notifications.scss */ .toastme .toastme-ico { font-size: 1.5rem; color: #333; @@ -642,12 +650,12 @@ background: #fff; } -/* line 133, src/sass/_notifications.scss */ +/* line 141, src/sass/_notifications.scss */ .toastme .toastme-ico:before { content: ""; } -/* line 137, src/sass/_notifications.scss */ +/* line 145, src/sass/_notifications.scss */ .toastme .toastme-content { white-space: nowrap; min-width: 150px; diff --git a/dist/css/toastme.min.css b/dist/css/toastme.min.css index e8170aa..89172e8 100644 --- a/dist/css/toastme.min.css +++ b/dist/css/toastme.min.css @@ -1,2 +1,2 @@ -/*! toastmejs v1.0.0 | (c) 2019 alexsegen | MIT License | git+https://github.com/alexsegen/toastmejs.git */ -@charset "UTF-8";@font-face{font-family:toastme;src:url(../icons/toastme.eot?p0xg3v);src:url(../icons/toastme.eot?p0xg3v#iefix) format("embedded-opentype"),url(../icons/toastme.ttf?p0xg3v) format("truetype"),url(../icons/toastme.woff?p0xg3v) format("woff"),url(../icons/toastme.svg?p0xg3v#toastme) format("svg");font-weight:400;font-style:normal}.toastme-dialog .btn-toastme{font-family:Open Sans,Helvetica,sans-serif;font-size:14px;white-space:nowrap;cursor:pointer;padding:6px 15px;margin:3px;border-radius:3px;border:1px solid}.toastme-dialog .btn-toastme:hover{opacity:.9}.toastme-dialog .btn-toastme:disabled{background-color:transparent;cursor:not-allowed;opacity:.7}.toastme-dialog .btn-toastme:active{opacity:1}.toastme-dialog .btn-toastme:focus{outline:0}.toastme-dialog .btn-toastme.--toastme-confirm{color:#fff;background:#3f51b5;border:1px solid #3f51b5}.toastme-dialog .btn-toastme.--toastme-cancel{color:#4c4c4c;background:#f9f9f9;border:1px solid #ddd}.flip-in-hor-bottom{animation:a .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes a{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}.slide-in-fwd-center{animation:b .4s cubic-bezier(.25,.46,.45,.94) both}@keyframes b{0%{transform:translateZ(-1400px);opacity:0}to{transform:translateZ(0);opacity:1}}.shake-horizontal{animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}@keyframes c{0%,to{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}}.bounce-top{animation:d .9s both}@keyframes d{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}to{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}.jello-horizontal{animation:e .9s both}@keyframes e{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.wobble-hor-bottom{animation:f .8s both}@keyframes f{0%,to{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(-6deg)}30%{transform:translateX(15px) rotate(6deg)}45%{transform:translateX(-15px) rotate(-3.6deg)}60%{transform:translateX(9px) rotate(2.4deg)}75%{transform:translateX(-6px) rotate(-1.2deg)}}.toastme{font-size:13px;font-family:Helvetica,"san-serif";color:#737373;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:250px;text-align:left;padding:10px 15px 10px 45px;border-radius:2px;background-color:#f5f5f5;position:fixed;opacity:.7;cursor:pointer;z-index:1;transform:translateY(20px);transition:all .2s ease-in-out;box-shadow:0 3px 6px rgba(0,0,0,.2);animation:a .5s cubic-bezier(.25,.46,.45,.94) both}.toastme:focus,.toastme:hover{opacity:1}.toastme a{color:#737373;text-decoration:underline}.toastme.success{color:#fff;background-color:#8bc34a}.toastme.success a{color:#fff;text-decoration:underline}.toastme.success .toastme-ico{color:#8bc34a}.toastme.success .toastme-ico:before{content:""}.toastme.error{color:#fff;background-color:#f44336}.toastme.error a{color:#fff;text-decoration:underline}.toastme.error .toastme-ico{color:#f44336}.toastme.error .toastme-ico:before{content:""}.toastme.warning{color:#fff;background-color:#ff9800}.toastme.warning a{color:#fff;text-decoration:underline}.toastme.warning .toastme-ico{color:#ff9800}.toastme.warning .toastme-ico:before{content:""}.toastme.info{color:#fff;background-color:#2196f3}.toastme.info a{color:#fff;text-decoration:underline}.toastme.info .toastme-ico{color:#2196f3}.toastme.info .toastme-ico:before{content:""}.toastme .toastme-close{color:#333;opacity:.7;float:right;right:-2px;top:2px;font-size:8px;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;background:transparent;border:none;box-shadow:none;cursor:pointer;transition:all .2s ease-in-out}.toastme .toastme-close:after{content:"";color:#ddd}.toastme .toastme-close:focus,.toastme .toastme-close:hover{opacity:1}.toastme .toastme-ico{font-size:1.5rem;color:#333;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;float:left;width:30px;height:30px;border-radius:2px;position:absolute;left:5px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;background:#fff}.toastme .toastme-ico:before{content:""}.toastme .toastme-content{white-space:nowrap;min-width:150px}.toastme.ligh.success{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.success .toastme-ico{color:#8bc34a}.toastme.ligh.success .toastme-ico:before{content:"\ea10"}.toastme.ligh.error{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.error .toastme-ico{color:#f44336}.toastme.ligh.error .toastme-ico:before{content:"\ea0d"}.toastme.ligh.warning{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.warning .toastme-ico{color:#ff9800}.toastme.ligh.warning .toastme-ico:before{content:"\ea07"}.toastme.ligh.info{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.info .toastme-ico{color:#2196f3}.toastme.ligh.info .toastme-ico:before{content:"\ea0c"}.toastme-dialog-bg{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:2}.toastme-dialog-ico{width:50px;height:50px;display:inline-block;margin-bottom:10px;font-size:3rem;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;animation:a .5s cubic-bezier(.25,.46,.45,.94) .5s both}.toastme-dialog-ico.success{color:#8bc34a}.toastme-dialog-ico.success:before{content:""}.toastme-dialog-ico.danger{color:#f44336;animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}.toastme-dialog-ico.danger:before{content:""}.toastme-dialog-ico.info{color:#03a9f4;animation:d .9s both}.toastme-dialog-ico.info:before{content:""}.toastme-dialog-ico.warning{color:#ffc107;animation:f .8s .5s both}.toastme-dialog-ico.warning:before{content:""}.toastme-dialog-ico.question{color:#3f51b5;animation:e .9s .5s both}.toastme-dialog-ico.question:before{content:""}.toastme-dialog{padding:10px;font-size:14px;font-family:Arial,Helvetica,sans-serif;text-align:center;display:inline-block;color:#737373;background:#f9f9f9;border-radius:3px;border:1px solid #ddd;width:280px;position:absolute;top:calc(50% - 200px);left:calc(50% - 190px);z-index:3;transition:all .2s ease-in-out;box-shadow:0 6px 6px 0 rgba(0,0,0,.05);animation:g .2s ease-in-out 0s forwards}.toastme-dialog.toastme-dialog-closing{animation:h .1s ease-in-out 0s forwards}.toastme-dialog .toastme-dialog-title{font-size:15px;color:#333;font-weight:600;font-family:Arial,Helvetica,sans-serif;margin:0 0 10px;line-height:16px}.toastme-dialog .toastme-dialog-text{font-size:14px;color:#333;font-family:Helvetica,sans-serif;margin:0 0 10px;line-height:14px}@keyframes g{0%{transform:rotate(0) translateY(-30px);opacity:0}to{transform:rotate(0) translateY(0);opacity:1}}@keyframes h{0%{transform:rotate(0) translateY(0);opacity:1}to{transform:rotate(0) translateY(-30px);opacity:0}} \ No newline at end of file +/*! toastmejs v1.0.2 | (c) 2019 alexsegen | MIT License | git+https://github.com/alexsegen/toastmejs.git */ +@charset "UTF-8";@font-face{font-family:toastme;src:url(../icons/toastme.eot?p0xg3v);src:url(../icons/toastme.eot?p0xg3v#iefix) format("embedded-opentype"),url(../icons/toastme.ttf?p0xg3v) format("truetype"),url(../icons/toastme.woff?p0xg3v) format("woff"),url(../icons/toastme.svg?p0xg3v#toastme) format("svg");font-weight:400;font-style:normal}.toastme-dialog .btn-toastme{font-family:Open Sans,Helvetica,sans-serif;font-size:14px;white-space:nowrap;cursor:pointer;padding:6px 15px;margin:3px;border-radius:3px;border:1px solid}.toastme-dialog .btn-toastme:hover{opacity:.9}.toastme-dialog .btn-toastme:disabled{background-color:transparent;cursor:not-allowed;opacity:.7}.toastme-dialog .btn-toastme:active{opacity:1}.toastme-dialog .btn-toastme:focus{outline:0}.toastme-dialog .btn-toastme.--toastme-confirm{color:#fff;background:#3f51b5;border:1px solid #3f51b5}.toastme-dialog .btn-toastme.--toastme-cancel{color:#4c4c4c;background:#f9f9f9;border:1px solid #ddd}.flip-in-hor-bottom{animation:a .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes a{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}.slide-in-fwd-center{animation:b .4s cubic-bezier(.25,.46,.45,.94) both}@keyframes b{0%{transform:translateZ(-1400px);opacity:0}to{transform:translateZ(0);opacity:1}}.shake-horizontal{animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}@keyframes c{0%,to{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}}.bounce-top{animation:d .9s both}@keyframes d{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}to{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}.jello-horizontal{animation:e .9s both}@keyframes e{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.wobble-hor-bottom{animation:f .8s both}@keyframes f{0%,to{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(-6deg)}30%{transform:translateX(15px) rotate(6deg)}45%{transform:translateX(-15px) rotate(-3.6deg)}60%{transform:translateX(9px) rotate(2.4deg)}75%{transform:translateX(-6px) rotate(-1.2deg)}}.toastme-list{position:fixed;max-width:250px;padding:0;margin:0}.toastme{font-size:13px;font-family:Helvetica,"san-serif";color:#737373;margin-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:250px;text-align:left;padding:10px 15px 10px 45px;border-radius:2px;background-color:#f5f5f5;opacity:.7;cursor:pointer;z-index:1;transform:translateY(20px);transition:all .2s ease-in-out;box-shadow:0 3px 6px rgba(0,0,0,.2);animation:a .5s cubic-bezier(.25,.46,.45,.94) both}.toastme:focus,.toastme:hover{opacity:1}.toastme a{color:#737373;text-decoration:underline}.toastme.success{color:#fff;background-color:#8bc34a}.toastme.success a{color:#fff;text-decoration:underline}.toastme.success .toastme-ico{color:#8bc34a}.toastme.success .toastme-ico:before{content:""}.toastme.error{color:#fff;background-color:#f44336}.toastme.error a{color:#fff;text-decoration:underline}.toastme.error .toastme-ico{color:#f44336}.toastme.error .toastme-ico:before{content:""}.toastme.warning{color:#fff;background-color:#ff9800}.toastme.warning a{color:#fff;text-decoration:underline}.toastme.warning .toastme-ico{color:#ff9800}.toastme.warning .toastme-ico:before{content:""}.toastme.info{color:#fff;background-color:#2196f3}.toastme.info a{color:#fff;text-decoration:underline}.toastme.info .toastme-ico{color:#2196f3}.toastme.info .toastme-ico:before{content:""}.toastme .toastme-close{color:#333;opacity:.7;float:right;right:-2px;top:2px;font-size:8px;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;background:transparent;border:none;box-shadow:none;cursor:pointer;transition:all .2s ease-in-out}.toastme .toastme-close:after{content:"";color:#ddd}.toastme .toastme-close:focus,.toastme .toastme-close:hover{opacity:1}.toastme .toastme-ico{font-size:1.5rem;color:#333;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;float:left;width:30px;height:30px;border-radius:2px;position:absolute;left:5px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;background:#fff}.toastme .toastme-ico:before{content:""}.toastme .toastme-content{white-space:nowrap;min-width:150px}.toastme.ligh.success{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.success .toastme-ico{color:#8bc34a}.toastme.ligh.success .toastme-ico:before{content:"\ea10"}.toastme.ligh.error{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.error .toastme-ico{color:#f44336}.toastme.ligh.error .toastme-ico:before{content:"\ea0d"}.toastme.ligh.warning{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.warning .toastme-ico{color:#ff9800}.toastme.ligh.warning .toastme-ico:before{content:"\ea07"}.toastme.ligh.info{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.info .toastme-ico{color:#2196f3}.toastme.ligh.info .toastme-ico:before{content:"\ea0c"}.toastme-dialog-bg{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:2}.toastme-dialog-ico{width:50px;height:50px;display:inline-block;margin-bottom:10px;font-size:3rem;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;animation:a .5s cubic-bezier(.25,.46,.45,.94) .5s both}.toastme-dialog-ico.success{color:#8bc34a}.toastme-dialog-ico.success:before{content:""}.toastme-dialog-ico.danger{color:#f44336;animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}.toastme-dialog-ico.danger:before{content:""}.toastme-dialog-ico.info{color:#03a9f4;animation:d .9s both}.toastme-dialog-ico.info:before{content:""}.toastme-dialog-ico.warning{color:#ffc107;animation:f .8s .5s both}.toastme-dialog-ico.warning:before{content:""}.toastme-dialog-ico.question{color:#3f51b5;animation:e .9s .5s both}.toastme-dialog-ico.question:before{content:""}.toastme-dialog{padding:10px;font-size:14px;font-family:Arial,Helvetica,sans-serif;text-align:center;display:inline-block;color:#737373;background:#f9f9f9;border-radius:3px;border:1px solid #ddd;width:280px;position:absolute;top:calc(50% - 200px);left:calc(50% - 190px);z-index:3;transition:all .2s ease-in-out;box-shadow:0 6px 6px 0 rgba(0,0,0,.05);animation:g .2s ease-in-out 0s forwards}.toastme-dialog.toastme-dialog-closing{animation:h .1s ease-in-out 0s forwards}.toastme-dialog .toastme-dialog-title{font-size:15px;color:#333;font-weight:600;font-family:Arial,Helvetica,sans-serif;margin:0 0 10px;line-height:16px}.toastme-dialog .toastme-dialog-text{font-size:14px;color:#333;font-family:Helvetica,sans-serif;margin:0 0 10px;line-height:14px}@keyframes g{0%{transform:rotate(0) translateY(-30px);opacity:0}to{transform:rotate(0) translateY(0);opacity:1}}@keyframes h{0%{transform:rotate(0) translateY(0);opacity:1}to{transform:rotate(0) translateY(-30px);opacity:0}} \ No newline at end of file diff --git a/dist/js/toastme.js b/dist/js/toastme.js index d46349a..90c0e7c 100644 --- a/dist/js/toastme.js +++ b/dist/js/toastme.js @@ -1,5 +1,5 @@ /*! - * toastmejs v1.0.0 + * toastmejs v1.0.2 * Web notifications and dialogs with pure javascript * (c) 2019 alexsegen * MIT License @@ -22,10 +22,11 @@ this.timeout = config.timeout || 5000; this.distanceX = config.distanceX || 15; this.distanceY = config.distanceY || 15; - this.positionY = config.positionY || "bottom"; + this.positionY = config.positionY || "bottom"; //bottom, top this.positionX = config.positionX || "right"; //right, left, center this.zIndex = config.zIndex || 100; this.ligh = config.ligh || false; + this.instanceId = "-" + Math.floor((Math.random() * 1000000) + 1); this.initToast = function () { document.addEventListener("click", (function (e) { @@ -35,13 +36,30 @@ })); }; - this.getMessage = function (type, str) { + this.createToastList = function (instanceId) { + var toastmeList = document.createElement("ul"); + toastmeList.classList.add("toastme-list"); + toastmeList.setAttribute("id", "toastmeList" + instanceId); + this.positionX == 'center' ? (toastmeList.style.right = '50%', toastmeList.style.marginRight = '-125px') : (toastmeList.style[this.positionX] = this.distanceX + "px"); + toastmeList.style[this.positionY] = this.distanceY + "px"; + toastmeList.style.zIndex = this.zIndex; + if (!document.getElementById('toastmeList' + instanceId)) { + document.body.appendChild(toastmeList); + } + return toastmeList + } + + this.destroyList = function (instanceId) { + if (document.getElementById('toastmeList' + instanceId) && document.getElementById('toastmeList' + instanceId).querySelectorAll('li').length == 0) { + document.getElementById('toastmeList' + instanceId).remove(); + } + } - this.closeAllToasts(); + this.buildToast = function (type, str, instanceId) { this.initToast(); - var toastme = document.createElement("div"); + var toastme = document.createElement("li"); toastme.classList.add("toastme", type, this.ligh ? 'ligh' : false); this.positionX == 'center' ? (toastme.style.right = '50%', toastme.style.marginRight = '-125px') : (toastme.style[this.positionX] = this.distanceX + "px"); toastme.style[this.positionY] = this.distanceY + "px"; @@ -50,31 +68,36 @@
${str}
`; + setTimeout(() => { toastme.remove(); + this.destroyList(instanceId); }, this.timeout); + return toastme; } + this.showToast = function (type, str) { + this.createToastList(this.instanceId); + document.getElementById('toastmeList' + this.instanceId).appendChild(this.buildToast(type, str, this.instanceId)); + } this.default = function (str) { - document.body.appendChild(this.getMessage("default", str)); + this.showToast('default', str); } - this.success = function (str) { - document.body.appendChild(this.getMessage("success", str)); + this.showToast('success', str); } this.error = function (str) { - document.body.appendChild(this.getMessage("error", str)); + this.showToast('error', str); } this.warning = function (str) { - document.body.appendChild(this.getMessage("warning", str)); + this.showToast('warning', str); } this.info = function (str) { - document.body.appendChild(this.getMessage("info", str)); + this.showToast('info', str); } - - //Toastme Dialog + //Toastme Dialogs this.initDialog = function () { document.addEventListener("click", (function (e) { @@ -174,7 +197,7 @@ } this.closeAllToasts = function () { - let array = document.querySelectorAll(".toastme"); + let array = document.querySelectorAll(".toastme-list"); array.forEach((function (item) { item.parentNode.removeChild(item); })); diff --git a/dist/js/toastme.min.js b/dist/js/toastme.min.js index 5674a49..781ebb1 100644 --- a/dist/js/toastme.min.js +++ b/dist/js/toastme.min.js @@ -1,2 +1,2 @@ -/*! toastmejs v1.0.0 | (c) 2019 alexsegen | MIT License | git+https://github.com/alexsegen/toastmejs.git */ -!(function(){function t(t={timeout:null,distanceX:null,distanceY:null,positionY:null,positionX:null,zIndex:null,ligh:!1}){this.timeout=t.timeout||5e3,this.distanceX=t.distanceX||15,this.distanceY=t.distanceY||15,this.positionY=t.positionY||"bottom",this.positionX=t.positionX||"right",this.zIndex=t.zIndex||100,this.ligh=t.ligh||!1,this.initToast=function(){document.addEventListener("click",(function(t){t.target.classList.contains("toastme-close")&&t.target.parentNode.remove()}))},this.getMessage=function(t,e){this.closeAllToasts(),this.initToast();var i=document.createElement("div");return i.classList.add("toastme",t,!!this.ligh&&"ligh"),"center"==this.positionX?(i.style.right="50%",i.style.marginRight="-125px"):i.style[this.positionX]=this.distanceX+"px",i.style[this.positionY]=this.distanceY+"px",i.style.zIndex=this.zIndex,i.innerHTML=`\n \n \n
${e}
`,setTimeout(()=>{i.remove()},this.timeout),i},this.default=function(t){document.body.appendChild(this.getMessage("default",t))},this.success=function(t){document.body.appendChild(this.getMessage("success",t))},this.error=function(t){document.body.appendChild(this.getMessage("error",t))},this.warning=function(t){document.body.appendChild(this.getMessage("warning",t))},this.info=function(t){document.body.appendChild(this.getMessage("info",t))},this.initDialog=function(){document.addEventListener("click",(function(t){if(t.target.classList.contains("--toastme-dialog-action")){document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.childNodes[1].classList.add("toastme-dialog-closing")})),setTimeout(()=>{document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.style.display="none",t.parentNode.removeChild(t)}))},500)}}))},this.buildDialog=function(t,e,i,o,s,n){var a=t?`

${t}

`:"",l=e?`

${e}

`:"",c=this.selectType(n)?this.selectType(n):"",d=s?``:"",u=document.createElement("div");return u.setAttribute("id","toastme-dialog-bg"),u.classList.add("toastme-dialog-bg","--toastme-dialog-action"),u.innerHTML=`\n
\n
\n ${c} ${a} ${l}\n
\n \n ${d}\n
\n
\n
`,u},this.selectType=function(t){switch(t){case"danger":return'
';case"success":return'
';case"info":return'
';case"warning":return'
';case"question":return'
';default:return!1}},this.yesNoDialog=function(t={title:null,text:null,textConfirm:"Confirmar",textCancel:"Cancel",showCancel:!0,type:null}){return this.closeAllDialogs(),this.initDialog(),document.body.appendChild(this.buildDialog(t.title,t.text,t.textConfirm,t.textCancel,t.showCancel,t.type)),new Promise(function(t,e){document.getElementById("toastmeConfirm").addEventListener("click",(function(){t(!0)}));var i=document.getElementById("toastmeCancel");i&&i.addEventListener("click",(function(){t(!1)}))})},this.closeAllToasts=function(){document.querySelectorAll(".toastme").forEach((function(t){t.parentNode.removeChild(t)}))},this.closeAllDialogs=function(){document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.style.display="none",t.parentNode.removeChild(t)}))}}var e=new t;"undefined"!=typeof module&&void 0!==module.exports?module.exports={Toastme:t,toastme:e}:(window.toastme=e,window.Toastme=t)})(); \ No newline at end of file +/*! toastmejs v1.0.2 | (c) 2019 alexsegen | MIT License | git+https://github.com/alexsegen/toastmejs.git */ +!(function(){function t(t={timeout:null,distanceX:null,distanceY:null,positionY:null,positionX:null,zIndex:null,ligh:!1}){this.timeout=t.timeout||5e3,this.distanceX=t.distanceX||15,this.distanceY=t.distanceY||15,this.positionY=t.positionY||"bottom",this.positionX=t.positionX||"right",this.zIndex=t.zIndex||100,this.ligh=t.ligh||!1,this.instanceId="-"+Math.floor(1e6*Math.random()+1),this.initToast=function(){document.addEventListener("click",(function(t){t.target.classList.contains("toastme-close")&&t.target.parentNode.remove()}))},this.createToastList=function(t){var e=document.createElement("ul");return e.classList.add("toastme-list"),e.setAttribute("id","toastmeList"+t),"center"==this.positionX?(e.style.right="50%",e.style.marginRight="-125px"):e.style[this.positionX]=this.distanceX+"px",e.style[this.positionY]=this.distanceY+"px",e.style.zIndex=this.zIndex,document.getElementById("toastmeList"+t)||document.body.appendChild(e),e},this.destroyList=function(t){document.getElementById("toastmeList"+t)&&0==document.getElementById("toastmeList"+t).querySelectorAll("li").length&&document.getElementById("toastmeList"+t).remove()},this.buildToast=function(t,e,i){this.initToast();var s=document.createElement("li");return s.classList.add("toastme",t,!!this.ligh&&"ligh"),"center"==this.positionX?(s.style.right="50%",s.style.marginRight="-125px"):s.style[this.positionX]=this.distanceX+"px",s.style[this.positionY]=this.distanceY+"px",s.style.zIndex=this.zIndex,s.innerHTML=`\n \n \n
${e}
`,setTimeout(()=>{s.remove(),this.destroyList(i)},this.timeout),s},this.showToast=function(t,e){this.createToastList(this.instanceId),document.getElementById("toastmeList"+this.instanceId).appendChild(this.buildToast(t,e,this.instanceId))},this.default=function(t){this.showToast("default",t)},this.success=function(t){this.showToast("success",t)},this.error=function(t){this.showToast("error",t)},this.warning=function(t){this.showToast("warning",t)},this.info=function(t){this.showToast("info",t)},this.initDialog=function(){document.addEventListener("click",(function(t){if(t.target.classList.contains("--toastme-dialog-action")){document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.childNodes[1].classList.add("toastme-dialog-closing")})),setTimeout(()=>{document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.style.display="none",t.parentNode.removeChild(t)}))},500)}}))},this.buildDialog=function(t,e,i,s,o,n){var a=t?`

${t}

`:"",l=e?`

${e}

`:"",c=this.selectType(n)?this.selectType(n):"",d=o?``:"",u=document.createElement("div");return u.setAttribute("id","toastme-dialog-bg"),u.classList.add("toastme-dialog-bg","--toastme-dialog-action"),u.innerHTML=`\n
\n
\n ${c} ${a} ${l}\n
\n \n ${d}\n
\n
\n
`,u},this.selectType=function(t){switch(t){case"danger":return'
';case"success":return'
';case"info":return'
';case"warning":return'
';case"question":return'
';default:return!1}},this.yesNoDialog=function(t={title:null,text:null,textConfirm:"Confirmar",textCancel:"Cancel",showCancel:!0,type:null}){return this.closeAllDialogs(),this.initDialog(),document.body.appendChild(this.buildDialog(t.title,t.text,t.textConfirm,t.textCancel,t.showCancel,t.type)),new Promise(function(t,e){document.getElementById("toastmeConfirm").addEventListener("click",(function(){t(!0)}));var i=document.getElementById("toastmeCancel");i&&i.addEventListener("click",(function(){t(!1)}))})},this.closeAllToasts=function(){document.querySelectorAll(".toastme-list").forEach((function(t){t.parentNode.removeChild(t)}))},this.closeAllDialogs=function(){document.querySelectorAll(".toastme-dialog-bg").forEach((function(t){t.style.display="none",t.parentNode.removeChild(t)}))}}var e=new t;"undefined"!=typeof module&&void 0!==module.exports?module.exports={Toastme:t,toastme:e}:(window.toastme=e,window.Toastme=t)})(); \ No newline at end of file diff --git a/index.html b/index.html index fa264e2..a4e88ef 100644 --- a/index.html +++ b/index.html @@ -131,7 +131,6 @@

Customize your dialogs

- @@ -160,7 +159,7 @@

Customize your dialogs

//CUSTOMIZATION const config = { - timeout: 3000, + timeout: 2000, positionY: "top", // top or bottom positionX: "right", // right left, center distanceY: 20, // Integer value diff --git a/src/js/toastme.js b/src/js/toastme.js index bdb4f04..ab48fe7 100644 --- a/src/js/toastme.js +++ b/src/js/toastme.js @@ -14,10 +14,11 @@ this.timeout = config.timeout || 5000; this.distanceX = config.distanceX || 15; this.distanceY = config.distanceY || 15; - this.positionY = config.positionY || "bottom"; + this.positionY = config.positionY || "bottom"; //bottom, top this.positionX = config.positionX || "right"; //right, left, center this.zIndex = config.zIndex || 100; this.ligh = config.ligh || false; + this.instanceId = "-" + Math.floor((Math.random() * 1000000) + 1); this.initToast = function () { document.addEventListener("click", function (e) { @@ -27,13 +28,30 @@ }); }; - this.getMessage = function (type, str) { + this.createToastList = function (instanceId) { + var toastmeList = document.createElement("ul"); + toastmeList.classList.add("toastme-list"); + toastmeList.setAttribute("id", "toastmeList" + instanceId); + this.positionX == 'center' ? (toastmeList.style.right = '50%', toastmeList.style.marginRight = '-125px') : (toastmeList.style[this.positionX] = this.distanceX + "px"); + toastmeList.style[this.positionY] = this.distanceY + "px"; + toastmeList.style.zIndex = this.zIndex; + if (!document.getElementById('toastmeList' + instanceId)) { + document.body.appendChild(toastmeList); + } + return toastmeList + } + + this.destroyList = function (instanceId) { + if (document.getElementById('toastmeList' + instanceId) && document.getElementById('toastmeList' + instanceId).querySelectorAll('li').length == 0) { + document.getElementById('toastmeList' + instanceId).remove(); + } + } - this.closeAllToasts(); + this.buildToast = function (type, str, instanceId) { this.initToast(); - var toastme = document.createElement("div"); + var toastme = document.createElement("li"); toastme.classList.add("toastme", type, this.ligh ? 'ligh' : false); this.positionX == 'center' ? (toastme.style.right = '50%', toastme.style.marginRight = '-125px') : (toastme.style[this.positionX] = this.distanceX + "px"); toastme.style[this.positionY] = this.distanceY + "px"; @@ -42,31 +60,36 @@
${str}
`; + setTimeout(() => { toastme.remove(); + this.destroyList(instanceId); }, this.timeout); + return toastme; } + this.showToast = function (type, str) { + this.createToastList(this.instanceId); + document.getElementById('toastmeList' + this.instanceId).appendChild(this.buildToast(type, str, this.instanceId)); + } this.default = function (str) { - document.body.appendChild(this.getMessage("default", str)); + this.showToast('default', str); } - this.success = function (str) { - document.body.appendChild(this.getMessage("success", str)); + this.showToast('success', str); } this.error = function (str) { - document.body.appendChild(this.getMessage("error", str)); + this.showToast('error', str); } this.warning = function (str) { - document.body.appendChild(this.getMessage("warning", str)); + this.showToast('warning', str); } this.info = function (str) { - document.body.appendChild(this.getMessage("info", str)); + this.showToast('info', str); } - - //Toastme Dialog + //Toastme Dialogs this.initDialog = function () { document.addEventListener("click", function (e) { @@ -166,7 +189,7 @@ } this.closeAllToasts = function () { - let array = document.querySelectorAll(".toastme"); + let array = document.querySelectorAll(".toastme-list"); array.forEach(function (item) { item.parentNode.removeChild(item); }); diff --git a/src/sass/_notifications.scss b/src/sass/_notifications.scss index 8b1977b..d286fd2 100644 --- a/src/sass/_notifications.scss +++ b/src/sass/_notifications.scss @@ -1,7 +1,15 @@ +.toastme-list { + position: fixed; + max-width: $max-width; + padding: 0; + margin: 0; +} + .toastme { font-size: $font-size; font-family: $font-family; color: $font-color-default; + margin-bottom: 10px; display: flex; align-items: center; max-width: $max-width; @@ -9,7 +17,7 @@ padding: 10px 15px 10px 45px; border-radius: 2px; background-color: $bg-default; - position: fixed; + //position: fixed; opacity: 0.7; cursor: pointer; z-index: 100;