├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── build
├── webpack.release.css.js
└── webpack.release.js
├── dist
├── toasted.js
├── toasted.min.css
└── toasted.min.js
├── package-lock.json
├── package.json
├── postcss.config.js
└── src
├── index.js
├── js
├── animations.js
├── toast.js
└── toasted.js
└── sass
├── mixins.scss
├── themes.scss
├── themes
├── alive.scss
├── bootstrap.scss
├── bulma.scss
├── colombo.scss
├── material.scss
└── venice.scss
└── toast.scss
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "es2015": { "modules": false }
5 | }]
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | .idea/
6 | .vscode/
7 | *.map
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | .idea/
6 | .vscode/
7 | build/
8 | .babelrc
9 | webpack.config.js
10 | README.md
11 | *.map
12 | examples
13 | test/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Shakeeb Sadikeen
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
11 |
12 | ## Introduction
13 |
14 | toastedjs is heir of [vue-toasted](https://github.com/shakee93/vue-toasted) it is responsive, touch compatible, easy to use, attractive and feature rich with icons, actions etc...
15 |
16 | ### Interactive demo
17 |
18 | demo here
19 |
20 | ### Installation
21 |
22 | **Source**|**Info**
23 | -----|-----
24 | npm | `npm install toastedjs --save`
25 | yarn | `yarn add toastedjs`
26 | unpkg (js) | [https://unpkg.com/toastedjs/dist/toasted.min.js](https://unpkg.com/toastedjs/dist/toasted.min.js)
27 | unpkg (css) | [https://unpkg.com/toastedjs/dist/toasted.min.css](https://unpkg.com/toastedjs/dist/toasted.min.css)
28 | jsdelivr | [https://jsdelivr.com/package/npm/toastedjs](https://jsdelivr.com/package/npm/toastedjs)
29 |
30 | ## Basic Usage
31 |
32 | #### ES6
33 | ```javascript
34 |
35 | import Toasted from 'toastedjs'
36 |
37 | import 'toastedjs/dist/toastedjs.min.css'
38 | //import 'toastedjs/src/sass/toast.scss'
39 |
40 | let toasted = new Toasted({ /* your options.. */ })
41 | toasted.show('yo, toasted here !!')
42 |
43 | ```
44 |
45 | #### Direct
46 | ```html
47 |
48 |
66 |
68 |
69 | ```javascript
70 | // you can pass multiple actions as an array of actions
71 | action : {
72 | text : 'Save',
73 | onClick : (e, toasted) => {
74 | toasted.delete()
75 | }
76 | }
77 | ```
78 | **[⬇ check action api below](#actions-1)**
79 |
80 | #### Icons
81 |
82 | [Material Icons](http://google.github.io/material-design-icons/) supported. you will have to import the icon packs into your project.
83 |
84 |
85 | ```javascript
86 | {
87 | // pass the icon name as string
88 | icon : 'check'
89 |
90 | // or you can pass an object
91 | icon : {
92 | name : 'watch',
93 | after : true // this will append the icon to the end of content
94 | }
95 | }
96 | ```
97 | **[⬇ check icons api below](#icons-1)**
98 |
99 | ## Api
100 |
101 | ### Options
102 | below are the options you can pass to create a toast or you can set these options globally.
103 |
104 | ```javascript
105 | // you can pass options either
106 | let toasted = new Toasted({
107 | position : 'top-center',
108 | theme : 'alive',
109 | onComplete : () => {
110 | console.log('i am done !')
111 | }
112 | })
113 | ```
114 |
115 | **Option**|**Type's**|**Default**|**Description**
116 | -----|-----|-----|-----
117 | **position**|String|'top-right'|Position of the toast container 80?c.default.animatePanEnd(t,function(){"function"==typeof e.options.onComplete&&e.options.onComplete(),e.destroy()}):(t.classList.remove("panning"),c.default.animateReset(t))})},h=function(){var t=e.options;if(t.icon){var n=document.createElement("i");n.classList.add("material-icons"),n.style.color=t.icon.color?t.icon.color:t.color,t.icon.after&&t.icon.name?(n.textContent=t.icon.name,n.classList.add("after"),e.toast.appendChild(n)):t.icon.name?(n.textContent=t.icon.name,e.toast.insertBefore(n,e.toast.firstChild)):(n.textContent=t.icon,e.toast.insertBefore(n,e.toast.firstChild))}},p=function(n){if(!n)return null;var i=document.createElement("a");if(i.style.color=n.color?n.color:e.options.color,i.classList.add("action"),n.text&&(i.text=n.text),n.href&&(i.href=n.href),n.icon){i.classList.add("icon");var o=document.createElement("i");o.classList.add("material-icons"),o.textContent=n.icon,i.appendChild(o)}if(n.class)switch(r(n.class)){case"string":n.class.split(" ").forEach(function(t){i.classList.add(t)});break;case"array":n.class.forEach(function(t){i.classList.add(t)})}return n.onClick&&"function"==typeof n.onClick&&i.addEventListener("click",function(t){n.onClick&&(t.preventDefault(),n.onClick(t,e))}),a.Extender.run("actions",function(r){return r(i,n,e,t)}),i},d=function(){var t=e.options,n=!1,i=document.createElement("span");if(i.classList.add("actions-wrapper"),Array.isArray(t.action))t.action.forEach(function(t){var e=p(t);e&&(i.appendChild(e),n=!0)});else if("object"===r(t.action)){var o=p(t.action);o&&(i.appendChild(o),n=!0)}n&&e.toast.appendChild(i)},v=function(){var t=e.options.duration,n=void 0;null!==t&&(n=setInterval(function(){null===e.toast.parentNode&&window.clearInterval(n),e.toast.classList.contains("panning")||(t-=20),t<=0&&(c.default.animateOut(e.toast,function(){"function"==typeof e.options.onComplete&&e.options.onComplete(),e.destroy()}),window.clearInterval(n))},20))};return this.text=function(t){return i(t),e},this.delete=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:300;return setTimeout(function(){c.default.animateOut(e.toast,function(){e.destroy()})},t),!0},this.destroy=function(){t.toasts=t.toasts.filter(function(t){return t.id!==e.id}),e.toast.parentNode&&e.toast.parentNode.removeChild(e.toast)},this.goAway=function(t){return e.delete(t)},this.el=this.toast,this};e.default=f},function(t,e,n){var i;!function(r,o,s,a){"use strict";function u(t,e,n){return setTimeout(p(t,n),e)}function c(t,e,n){return!!Array.isArray(t)&&(l(t,n[e],n),!0)}function l(t,e,n){var i;if(t)if(t.forEach)t.forEach(e,n);else if(t.length!==a)for(i=0;i\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=r.console&&(r.console.warn||r.console.log);return o&&o.call(r.console,i,n),t.apply(this,arguments)}}function h(t,e,n){var i,r=e.prototype;i=t.prototype=Object.create(r),i.constructor=t,i._super=r,n&&dt(i,n)}function p(t,e){return function(){return t.apply(e,arguments)}}function d(t,e){return typeof t==gt?t.apply(e?e[0]||a:a,e):t}function v(t,e){return t===a?e:t}function m(t,e,n){l(b(e),function(e){t.addEventListener(e,n,!1)})}function g(t,e,n){l(b(e),function(e){t.removeEventListener(e,n,!1)})}function y(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function T(t,e){return t.indexOf(e)>-1}function b(t){return t.trim().split(/\s+/g)}function E(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var i=0;in[e]}):i.sort()),i}function C(t,e){for(var n,i,r=e[0].toUpperCase()+e.slice(1),o=0;o1&&!n.firstMultiple?n.firstMultiple=j(e):1===r&&(n.firstMultiple=!1);var o=n.firstInput,s=n.firstMultiple,a=s?s.center:o.center,u=e.center=N(i);e.timeStamp=bt(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=X(a,u),e.distance=R(a,u),S(n,e),e.offsetDirection=D(e.deltaX,e.deltaY);var c=L(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=c.x,e.overallVelocityY=c.y,e.overallVelocity=Tt(c.x)>Tt(c.y)?c.x:c.y,e.scale=s?z(s.pointers,i):1,e.rotation=s?Y(s.pointers,i):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,k(n,e);var l=t.element;y(e.srcEvent.target,l)&&(l=e.srcEvent.target),e.target=l}function S(t,e){var n=e.center,i=t.offsetDelta||{},r=t.prevDelta||{},o=t.prevInput||{};e.eventType!==It&&o.eventType!==St||(r=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},i=t.offsetDelta={x:n.x,y:n.y}),e.deltaX=r.x+(n.x-i.x),e.deltaY=r.y+(n.y-i.y)}function k(t,e){var n,i,r,o,s=t.lastInterval||e,u=e.timeStamp-s.timeStamp;if(e.eventType!=kt&&(u>At||s.velocity===a)){var c=e.deltaX-s.deltaX,l=e.deltaY-s.deltaY,f=L(u,c,l);i=f.x,r=f.y,n=Tt(f.x)>Tt(f.y)?f.x:f.y,o=D(c,l),t.lastInterval=e}else n=s.velocity,i=s.velocityX,r=s.velocityY,o=s.direction;e.velocity=n,e.velocityX=i,e.velocityY=r,e.direction=o}function j(t){for(var e=[],n=0;n=Tt(e)?t<0?Nt:Lt:e<0?Dt:Rt}function R(t,e,n){n||(n=Ft);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return Math.sqrt(i*i+r*r)}function X(t,e,n){n||(n=Ft);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return 180*Math.atan2(r,i)/Math.PI}function Y(t,e){return X(e[1],e[0],qt)+X(t[1],t[0],qt)}function z(t,e){return R(e[0],e[1],qt)/R(t[0],t[1],qt)}function F(){this.evEl=Wt,this.evWin=Ht,this.pressed=!1,P.apply(this,arguments)}function q(){this.evEl=Zt,this.evWin=Bt,P.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function V(){this.evTarget=Qt,this.evWin=Jt,this.started=!1,P.apply(this,arguments)}function W(t,e){var n=x(t.touches),i=x(t.changedTouches);return e&(St|kt)&&(n=w(n.concat(i),"identifier",!0)),[n,i]}function H(){this.evTarget=te,this.targetIds={},P.apply(this,arguments)}function U(t,e){var n=x(t.touches),i=this.targetIds;if(e&(It|_t)&&1===n.length)return i[n[0].identifier]=!0,[n,n];var r,o,s=x(t.changedTouches),a=[],u=this.target;if(o=n.filter(function(t){return y(t.target,u)}),e===It)for(r=0;r-1&&i.splice(t,1)};setTimeout(r,ee)}}function G(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,i=0;i-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){function e(e){n.manager.emit(e,t)}var n=this,i=this.state;i=de&&e(n.options.event+tt(i))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;te.threshold&&r&e.direction},attrTest:function(t){return it.prototype.attrTest.call(this,t)&&(this.state&he||!(this.state&he)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=et(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),h(ot,it,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[ae]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||this.state&he)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),h(st,K,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[oe]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,i=t.distancee.time;if(this._input=t,!i||!n||t.eventType&(St|kt)&&!r)this.reset();else if(t.eventType&It)this.reset(),this._timer=u(function(){this.state=ve,this.tryEmit()},e.time,this);else if(t.eventType&St)return ve;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){this.state===ve&&(t&&t.eventType&St?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=bt(),this.manager.emit(this.options.event,this._input)))}}),h(at,it,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[ae]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||this.state&he)}}),h(ut,it,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Xt|Yt,pointers:1},getTouchAction:function(){return rt.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return n&(Xt|Yt)?e=t.overallVelocity:n&Xt?e=t.overallVelocityX:n&Yt&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&Tt(e)>this.options.velocity&&t.eventType&St},emit:function(t){var e=et(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),h(ct,K,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[se]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,i=t.distancen&&(n+=1),1n?e:n<2/3?t+(e-t)*(2/3-n)*6:t}var n=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t);t=parseInt(n[1])/360;var i=parseInt(n[2])/100,n=parseInt(n[3])/100;if(0==i)i=n=t=n;else{var r=.5>n?n*(1+i):n+i-n*i,o=2*n-r,i=e(o,r,t+1/3),n=e(o,r,t);t=e(o,r,t-1/3)}return"rgb("+255*i+","+255*n+","+255*t+")"}function l(t){if(t=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(t))return t[2]}function f(t){return-1=h.currentTime)for(var T=0;Tp&&g=d&&(h.began=!0,r("begin")),r("run")):(g<=p&&0!==v&&(i(0),m&&o()),g>=s&&v!==s&&(i(s),m||o())),t>=s&&(h.remaining?(u=a,"alternate"===h.direction&&(h.reversed=!h.reversed)):(h.pause(),"Promise"in window&&(l(),f=e()),h.completed||(h.completed=!0,r("complete"))),c=0),r("update")}t=void 0===t?{}:t;var a,u,c=0,l=null,f=e(),h=_(t);return h.reset=function(){var t=h.direction,e=h.loop;for(h.currentTime=0,h.progress=0,h.paused=!0,h.began=!1,h.completed=!1,h.reversed="reverse"===t,h.remaining="alternate"===t&&1===e?2:e,t=h.children.length;t--;)e=h.children[t],e.seek(e.offset),e.reset()},h.tick=function(t){a=t,u||(u=a),s((c+a-u)*S.speed)},h.seek=function(t){s(n(t))},h.pause=function(){var t=z.indexOf(h);-1=e&&0<=i&&1>=i){var o=new Float32Array(11);if(e!==n||i!==r)for(var s=0;11>s;++s)o[s]=t(.1*s,e,i);return function(s){if(e===n&&i===r)return s;if(0===s)return 0;if(1===s)return 1;for(var a=0,u=1;10!==u&&o[u]<=s;++u)a+=.1;--u;var u=a+(s-o[u])/(o[u+1]-o[u])*.1,c=3*(1-3*i+3*e)*u*u+2*(3*i-6*e)*u+3*e;if(.001<=c){for(a=0;4>a&&0!==(c=3*(1-3*i+3*e)*u*u+2*(3*i-6*e)*u+3*e);++a)var l=t(u,e,i)-s,u=u-l/c;s=u}else if(0===c)s=u;else{var u=a,a=a+.1,f=0;do{l=u+(a-u)/2,c=t(l,e,i)-s,0++f);s=l}return t(s,n,r)}}}}(),X=function(){function t(t,e){return 0===t||1===t?t:-Math.pow(2,10*(t-1))*Math.sin(2*(t-1-e/(2*Math.PI)*Math.asin(1))*Math.PI/e)}var e,n="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),i={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],t],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(e,n){return 1-t(1-e,n)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(e,n){return.5>e?t(2*e,n)/2:1-t(-2*e+2,n)/2}]},r={linear:R(.25,.25,.75,.75)},o={};for(e in i)o.type=e,i[o.type].forEach(function(t){return function(e,i){r["ease"+t.type+n[i]]=D.fnc(e)?e:R.apply(s,e)}}(o)),o={type:o.type};return r}(),Y={css:function(t,e,n){return t.style[e]=n},attribute:function(t,e,n){return t.setAttribute(e,n)},object:function(t,e,n){return t[e]=n},transform:function(t,e,n,i,r){i[r]||(i[r]=[]),i[r].push(e+"("+n+")")}},z=[],F=0,q=function(){function t(){F=requestAnimationFrame(e)}function e(e){var n=z.length;if(n){for(var i=0;in&&(e.duration=t.duration),t.began=!0,e.children.push(t)}),e.reset(),e.seek(0),e.autoplay&&e.restart(),e},e},S.random=function(t,e){return Math.floor(Math.random()*(e-t+1))+t},S})},function(t,e,n){"use strict";function i(e){return a.seed(e),t.exports}function r(e){return f=e,t.exports}function o(t){return void 0!==t&&a.characters(t),a.shuffled()}function s(){return c(f)}var a=n(0),u=(n(4),n(12)),c=n(13),l=n(14),f=n(15)||0;t.exports=s,t.exports.generate=s,t.exports.seed=i,t.exports.worker=r,t.exports.characters=o,t.exports.decode=u,t.exports.isValid=l},function(t,e,n){"use strict";function i(){return(o=(9301*o+49297)%233280)/233280}function r(t){o=t}var o=1;t.exports={nextValue:i,seed:r}},function(t,e,n){"use strict";function i(){if(!r||!r.getRandomValues)return 48&Math.floor(256*Math.random());var t=new Uint8Array(1);return r.getRandomValues(t),48&t[0]}var r="object"==typeof window&&(window.crypto||window.msCrypto);t.exports=i},function(t,e,n){"use strict";function i(t){var e=r.shuffled();return{version:15&e.indexOf(t.substr(0,1)),worker:15&e.indexOf(t.substr(1,1))}}var r=n(0);t.exports=i},function(t,e,n){"use strict";function i(t){var e="",n=Math.floor(.001*(Date.now()-u));return n===o?r++:(r=0,o=n),e+=s(a.lookup,c),e+=s(a.lookup,t),r>0&&(e+=s(a.lookup,r)),e+=s(a.lookup,n)}var r,o,s=n(4),a=n(0),u=1459707606518,c=6;t.exports=i},function(t,e,n){"use strict";function i(t){if(!t||"string"!=typeof t||t.length<6)return!1;for(var e=r.characters(),n=t.length,i=0;i",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/shakee93/toastedjs.git"
9 | },
10 | "main": "./src/index.js",
11 | "scripts": {
12 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
13 | "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules",
14 | "build-watch": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules --watch",
15 | "css": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.css.js --progress --hide-modules --watch",
16 | "release": "npm run build && npm run css",
17 | "es": "babel src --presets babel-preset-es2015 --out-dir dist"
18 | },
19 | "keywords": [
20 | "toast",
21 | "toasted",
22 | "toastedjs",
23 | "vue-toasted"
24 | ],
25 | "dependencies": {
26 | "animejs": "^2.0.2",
27 | "hammerjs": "^2.0.8",
28 | "shortid": "^2.2.8",
29 | "es6-object-assign": "^1.1.0"
30 | },
31 | "devDependencies": {
32 | "autoprefixer": "^7.1.3",
33 | "babel-cli": "^6.23.0",
34 | "babel-core": "^6.0.0",
35 | "babel-loader": "^6.0.0",
36 | "babel-preset-env": "^1.6.0",
37 | "cross-env": "^3.0.0",
38 | "css-loader": "^0.25.0",
39 | "extract-text-webpack-plugin": "^2.1.2",
40 | "file-loader": "^0.9.0",
41 | "node-sass": "^4.5.0",
42 | "postcss-loader": "^2.0.6",
43 | "sass-loader": "^6.0.3",
44 | "style-loader": "^0.18.2",
45 | "webpack": "^3.5.6"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | var autoprefixer = require('autoprefixer')
2 |
3 | module.exports = {
4 | plugins: [
5 | autoprefixer({browsers: ['last 7 versions']})
6 | ]
7 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import {Toasted, Extender} from './js/toasted';
2 |
3 | Toasted.extend = Extender.hook;
4 | Toasted.utils = Extender.utils;
5 |
6 | (function (root, factory) {
7 | if(typeof define === "function" && define.amd) {
8 | define([], function(){
9 | return (root.Toasted = factory());
10 | });
11 | } else if(typeof module === "object" && module.exports) {
12 | module.exports = (root.Toasted = factory());
13 | } else {
14 | root.Toasted = factory();
15 | }
16 | }(window, function() {
17 | return Toasted;
18 | }));
19 |
20 | export default Toasted
--------------------------------------------------------------------------------
/src/js/animations.js:
--------------------------------------------------------------------------------
1 | import anime from 'animejs'
2 |
3 | let duration = 300;
4 |
5 | export default {
6 | animateIn : (el) => {
7 | anime({
8 | targets : el,
9 | translateY: '-35px',
10 | opacity: 1,
11 | duration: duration,
12 | easing: 'easeOutCubic'
13 | })
14 | },
15 | animateOut : (el, onComplete) => {
16 | anime({
17 | targets : el,
18 | opacity : 0,
19 | marginTop : '-40px',
20 | duration: duration,
21 | easing: 'easeOutExpo',
22 | complete: onComplete
23 | })
24 | },
25 | animateReset : (el) => {
26 | anime({
27 | targets : el,
28 | left: 0,
29 | opacity: 1,
30 | duration: duration,
31 | easing: 'easeOutExpo',
32 | })
33 | },
34 | animatePanning : (el, left, opacity) => {
35 | anime({
36 | targets : el,
37 | duration : 10,
38 | easing: 'easeOutQuad',
39 | left: left,
40 | opacity: opacity
41 | })
42 | },
43 | animatePanEnd : (el, onComplete) => {
44 | anime({
45 | targets : el,
46 | opacity : 0,
47 | duration: duration,
48 | easing: 'easeOutExpo',
49 | complete: onComplete
50 | })
51 | },
52 | clearAnimation : (toasts) => {
53 |
54 | let timeline = anime.timeline();
55 |
56 | toasts.forEach((t) => {
57 | timeline.add({
58 | targets : t.el,
59 | opacity : 0,
60 | right : '-40px',
61 | duration: 300,
62 | offset : '-=150',
63 | easing: 'easeOutExpo',
64 | complete: () => {
65 | t.destroy();
66 | }
67 | });
68 | })
69 |
70 | }
71 | }
--------------------------------------------------------------------------------
/src/js/toast.js:
--------------------------------------------------------------------------------
1 | import Hammer from 'hammerjs';
2 | import {Extender} from './toasted';
3 | import animations from './animations'
4 | const uuid = require('shortid');
5 |
6 | export const Toast = function (instance) {
7 |
8 | /**
9 | * Compiled options of the toast
10 | */
11 | this.options = {};
12 |
13 |
14 | /**
15 | * Unique id for the toast
16 | */
17 | this.id = uuid.generate();
18 |
19 |
20 | /**
21 | * Toast Html Element
22 | *
23 | * @type {null|Element}
24 | */
25 | this.toast = null;
26 |
27 |
28 | /**
29 | * Check if Initialized the toast
30 | *
31 | * @type {boolean}
32 | */
33 | let initialized = false;
34 |
35 |
36 | let constructor = () => {
37 | instance.toasts.push(this);
38 | };
39 | constructor();
40 |
41 |
42 | /**
43 | * Create Toast
44 | *
45 | * @param message
46 | * @param options
47 | * @returns {Toast}
48 | */
49 | this.create = (message, options) => {
50 |
51 | if(!message || initialized) {
52 | return;
53 | }
54 |
55 | options = setOptions(options);
56 | let container = getContainer();
57 |
58 | this.toast = document.createElement('div');
59 | this.toast.classList.add('toasted');
60 |
61 | // add classes
62 | if (options.className) {
63 | options.className.forEach((className) => {
64 | this.toast.classList.add(className);
65 | });
66 | }
67 |
68 |
69 |
70 | // Append the Message
71 | appendMessage(message);
72 |
73 | // add the touch events of the toast
74 | addTouchEvents();
75 |
76 |
77 | // add material icon if available
78 | createIcon();
79 |
80 | // append the actions
81 | appendActions();
82 |
83 | // append the toasts
84 | container.appendChild(this.toast);
85 |
86 | // animate toast
87 | animations.animateIn(this.toast);
88 |
89 | // set its duration
90 | setDuration();
91 |
92 | // TODO : remove this later, this is here to backward compatibility
93 | this.el = this.toast;
94 |
95 | // Let Instance know the toast is initialized
96 | initialized = true;
97 |
98 | return this;
99 | };
100 |
101 | /**
102 | * Append Message to the Toast
103 | *
104 | * @param message
105 | */
106 | let appendMessage = (message) => {
107 |
108 | if(!message) {
109 | return;
110 | }
111 |
112 | // If type of parameter is HTML Element
113 | if (typeof HTMLElement === "object" ? message instanceof HTMLElement : message && typeof message === "object" && message !== null && message.nodeType === 1 && typeof message.nodeName === "string") {
114 | this.toast.appendChild(message);
115 | }
116 | else {
117 | // Insert as text;
118 | this.toast.innerHTML = message;
119 | }
120 |
121 | }
122 |
123 |
124 | /**
125 | * Get the Toast Container
126 | *
127 | * @returns {Element}
128 | */
129 | let getContainer = () => {
130 |
131 | let container = document.getElementById(instance.id);
132 |
133 | if(container === null) {
134 | container = document.createElement('div');
135 | container.id = instance.id;
136 | document.body.appendChild(container);
137 | }
138 |
139 | // check if the container classes has changed if so update it
140 | if (container.className !== this.options.containerClass.join(' ')) {
141 | container.className = "";
142 | this.options.containerClass.forEach((className) => {
143 | container.classList.add(className);
144 | });
145 | }
146 |
147 | return container;
148 | }
149 |
150 |
151 | /**
152 | * Parse and Set Toast Options
153 | *
154 | * @param options
155 | * @returns {*}
156 | */
157 | let setOptions = (options) => {
158 |
159 | // toast position
160 | options.position = options.position || "top-right";
161 |
162 | // toast duration
163 | options.duration = options.duration || null;
164 |
165 | // get action name
166 | options.action = options.action || null;
167 |
168 | // check if the fullWidth is enabled
169 | options.fullWidth = options.fullWidth || false;
170 |
171 | // check if the toast needs to be fitted in the screen (no margin gap between screen)
172 | options.fitToScreen = options.fitToScreen || null;
173 |
174 | // class name to be added on the toast
175 | options.className = options.className || null;
176 |
177 | // class name to be added on the toast container
178 | options.containerClass = options.containerClass || null;
179 |
180 | // get icon name
181 | options.icon = options.icon || null;
182 |
183 | // normal type will allow the basic color
184 | options.type = options.type || "default";
185 |
186 | // normal type will allow the basic color
187 | options.theme = options.theme || "material";
188 |
189 | // normal type will allow the basic color
190 | options.color = options.color || null;
191 |
192 | // get icon color
193 | options.iconColor = options.iconColor || null;
194 |
195 | // complete call back of the toast
196 | options.onComplete = options.onComplete || null;
197 |
198 | // TODO : closeOnSwipe, singleton, iconPack
199 |
200 | /* transform options */
201 |
202 | // toast class
203 | if (options.className && typeof(options.className) === "string") {
204 | options.className = options.className.split(' ');
205 | }
206 |
207 | if (!options.className) {
208 | options.className = [];
209 | }
210 |
211 | (options.theme) && options.className.push(options.theme.trim());
212 | (options.type) && options.className.push(options.type);
213 |
214 |
215 | // toast container class
216 | if (options.containerClass && typeof(options.containerClass) === "string") {
217 | options.containerClass = options.containerClass.split(' ');
218 | }
219 |
220 | if (!options.containerClass) {
221 | options.containerClass = [];
222 | }
223 |
224 | (options.position) && options.containerClass.push(options.position.trim());
225 | (options.fullWidth) && options.containerClass.push('full-width');
226 | (options.fitToScreen) && options.containerClass.push('fit-to-screen');
227 |
228 | // add toasted container class to top
229 | options.containerClass.unshift('toasted-container');
230 |
231 | // HOOK : options
232 | Extender.run("options", hook => hook(options, this.options))
233 |
234 | this.options = options;
235 | return options;
236 | }
237 |
238 |
239 | /**
240 | * Add Hammer Touch events to the Toast
241 | */
242 | let addTouchEvents = () => {
243 |
244 | let toast = this.toast;
245 |
246 | // Bind hammer
247 | let hammerHandler = new Hammer(toast, {prevent_default: false});
248 | hammerHandler.on('pan', function (e) {
249 | let deltaX = e.deltaX;
250 | let activationDistance = 80;
251 |
252 | // Change toast state
253 | if (!toast.classList.contains('panning')) {
254 | toast.classList.add('panning');
255 | }
256 |
257 | let opacityPercent = 1 - Math.abs(deltaX / activationDistance);
258 | if (opacityPercent < 0)
259 | opacityPercent = 0;
260 |
261 | animations.animatePanning(toast, deltaX, opacityPercent)
262 |
263 | });
264 |
265 | hammerHandler.on('panend', (e) =>{
266 | let deltaX = e.deltaX;
267 | let activationDistance = 80;
268 |
269 | // If toast dragged past activation point
270 | if (Math.abs(deltaX) > activationDistance) {
271 |
272 | animations.animatePanEnd(toast, () => {
273 | if (typeof(this.options.onComplete) === "function") {
274 | this.options.onComplete();
275 | }
276 |
277 | this.destroy();
278 | })
279 |
280 | } else {
281 | toast.classList.remove('panning');
282 | // Put toast back into original position
283 | animations.animateReset(toast)
284 |
285 | }
286 | });
287 |
288 | }
289 |
290 |
291 | let createIcon = () => {
292 |
293 | let options = this.options;
294 |
295 | // add material icon if available
296 | if (options.icon) {
297 |
298 | let iel = document.createElement('i');
299 | iel.classList.add('material-icons');
300 |
301 | // add color to the icon. priority : icon.color > option.color > theme
302 | iel.style.color = (options.icon.color) ? options.icon.color : options.color;
303 |
304 | if (options.icon.after && options.icon.name) {
305 | iel.textContent = options.icon.name;
306 | iel.classList.add('after');
307 | this.toast.appendChild(iel);
308 | }
309 | else if (options.icon.name) {
310 | iel.textContent = options.icon.name;
311 | this.toast.insertBefore(iel, this.toast.firstChild);
312 | }
313 | else {
314 | iel.textContent = options.icon;
315 | this.toast.insertBefore(iel, this.toast.firstChild);
316 | }
317 |
318 | }
319 |
320 | }
321 |
322 | /**
323 | * Create Actions to the toast
324 | *
325 | * @param action
326 | * @returns {*}
327 | */
328 | let createAction = (action) => {
329 |
330 | if (!action) {
331 | return null;
332 | }
333 |
334 | let el = document.createElement('a');
335 |
336 | // add color to icon
337 | el.style.color = (action.color) ? action.color : this.options.color;
338 |
339 | el.classList.add('action');
340 |
341 | if (action.text) {
342 | el.text = action.text
343 | }
344 |
345 | if (action.href) {
346 | el.href = action.href
347 | }
348 |
349 | if (action.icon) {
350 |
351 | // add icon class to style it
352 | el.classList.add('icon');
353 |
354 | // create icon element
355 | let iel = document.createElement('i');
356 | iel.classList.add('material-icons');
357 | iel.textContent = action.icon
358 |
359 | // append it to the button
360 | el.appendChild(iel);
361 | }
362 |
363 | if (action.class) {
364 |
365 | switch (typeof action.class) {
366 | case 'string' :
367 | action.class.split(' ').forEach((className) => {
368 | el.classList.add(className)
369 | })
370 | break;
371 | case 'array' :
372 | action.class.forEach((className) => {
373 | el.classList.add(className)
374 | })
375 | }
376 | }
377 |
378 | if (action.onClick && typeof action.onClick === 'function') {
379 | el.addEventListener('click', (e) => {
380 |
381 | if (action.onClick) {
382 | e.preventDefault()
383 | action.onClick(e, this)
384 | }
385 |
386 | })
387 | }
388 |
389 | // HOOK : actions
390 | Extender.run("actions", hook => hook(el, action, this, instance))
391 |
392 | return el;
393 |
394 | }
395 |
396 |
397 | /**
398 | * Append actions to the toast
399 | */
400 | let appendActions = () => {
401 |
402 | let options = this.options;
403 | let hasActions = false;
404 |
405 | let actionWrapper = document.createElement('span');
406 | actionWrapper.classList.add('actions-wrapper');
407 |
408 | // create and append actions
409 | if (Array.isArray(options.action)) {
410 | options.action.forEach((action) => {
411 | let el = createAction(action);
412 | if (el) {
413 | actionWrapper.appendChild(el);
414 | hasActions = true;
415 | }
416 | })
417 | }
418 | else if (typeof options.action === 'object') {
419 | let action = createAction(options.action);
420 | if (action) {
421 | actionWrapper.appendChild(action);
422 | hasActions = true
423 | }
424 | }
425 |
426 | if(hasActions) this.toast.appendChild(actionWrapper);
427 | }
428 |
429 | /**
430 | * Set Toast duration to fade away
431 | */
432 | let setDuration = () => {
433 |
434 | // Allows timer to be pause while being panned
435 | let timeLeft = this.options.duration;
436 | let counterInterval;
437 | if (timeLeft !== null) {
438 | counterInterval = setInterval(() => {
439 | if (this.toast.parentNode === null)
440 | window.clearInterval(counterInterval);
441 |
442 | // If toast is not being dragged, decrease its time remaining
443 | if (!this.toast.classList.contains('panning')) {
444 | timeLeft -= 20;
445 | }
446 |
447 | if (timeLeft <= 0) {
448 | // Animate toast out
449 |
450 | animations.animateOut(this.toast, () => {
451 | // Call the optional callback
452 | if (typeof(this.options.onComplete) === "function")
453 | this.options.onComplete();
454 |
455 | // Remove toast after it times out
456 | this.destroy();
457 |
458 | })
459 |
460 | window.clearInterval(counterInterval);
461 | }
462 | }, 20);
463 | }
464 |
465 | }
466 |
467 | /**
468 | * Change Text of the Toast
469 | *
470 | * @param message
471 | * @returns {Toast}
472 | */
473 | this.text = (message) => {
474 | appendMessage(message);
475 | return this;
476 | }
477 |
478 | /**
479 | * Delete the Toast with Animation and Delay
480 | *
481 | * @param delay
482 | * @returns {boolean}
483 | */
484 | this.delete = (delay = 300) => {
485 |
486 | setTimeout(() => {
487 | animations.animateOut(this.toast, () => {
488 | this.destroy();
489 | })
490 | }, delay);
491 |
492 | return true;
493 | }
494 |
495 | /**
496 | * Destroy the Toast and Unregister from Instance
497 | */
498 | this.destroy = () => {
499 |
500 | instance.toasts = instance.toasts.filter((t) => {
501 | return t.id !== this.id;
502 | })
503 |
504 | if (this.toast.parentNode) this.toast.parentNode.removeChild(this.toast)
505 | }
506 |
507 | /**
508 | * @deprecated since 0.0.11
509 | * @param delay
510 | */
511 | this.goAway = (delay) => {
512 | return this.delete(delay);
513 | }
514 |
515 |
516 | /**
517 | * @deprecated since 0.0.11
518 | * @type {*}
519 | */
520 | this.el = this.toast;
521 |
522 |
523 | return this;
524 | };
525 |
526 | export default Toast;
--------------------------------------------------------------------------------
/src/js/toasted.js:
--------------------------------------------------------------------------------
1 | import Toast from './toast';
2 | const uuid = require('shortid');
3 | import animations from './animations';
4 |
5 | // add Object.assign Polyfill
6 | require('es6-object-assign').polyfill();
7 |
8 | /**
9 | * Allows Toasted to be Extended
10 | *
11 | */
12 | export const Extender = function () {
13 |
14 | return {
15 | hook: {
16 | options : [],
17 | actions : []
18 | },
19 | run : function(name, callback) {
20 |
21 | if(!Array.isArray(this.hook[name])) {
22 | console.warn("[toasted] : hook not found");
23 | return;
24 | }
25 |
26 | this.hook[name].forEach((hook) => {
27 |
28 | // check if it is a function
29 | if(!hook && typeof hook !== 'function') return;
30 |
31 | callback && callback(hook);
32 | })
33 | },
34 | utils : {
35 | warn : (message) => {
36 | console.warn(`[toasted] : ${message}`);
37 | }
38 | }
39 | }
40 | }();
41 |
42 | /**
43 | * Toast
44 | * core instance of toast
45 | *
46 | * @param _options
47 | * @returns {Toasted}
48 | * @constructor
49 | */
50 | export const Toasted = function (_options) {
51 |
52 | if (!_options) _options = {};
53 |
54 | /**
55 | * Unique id of the toast
56 | */
57 | this.id = uuid.generate();
58 |
59 | /**
60 | * Shared Options of the Toast
61 | */
62 | this.options = _options;
63 |
64 |
65 | /**
66 | * Shared Toasts list
67 | */
68 | this.global = {};
69 |
70 |
71 | /**
72 | * All Registered Groups
73 | */
74 | this.groups = [];
75 |
76 |
77 | /**
78 | * All Registered Toasts
79 | */
80 | this.toasts = [];
81 |
82 |
83 | /**
84 | * Create New Group of Toasts
85 | *
86 | * @param o
87 | */
88 | this.group = (o) => {
89 |
90 | if (!o) o = {};
91 |
92 | if (!o.globalToasts) {
93 | o.globalToasts = {};
94 | }
95 |
96 | // share parents global toasts
97 | Object.assign(o.globalToasts, this.global);
98 |
99 | // tell parent about the group
100 | let group = new Toasted(o);
101 | this.groups.push(group);
102 |
103 | return group;
104 | }
105 |
106 | /**
107 | * Base Toast Show Function
108 | *
109 | * @param message
110 | * @param options
111 | * @returns {*}
112 | * @private
113 | */
114 | let _show = (message, options) => {
115 |
116 | // clone the global options
117 | let _options = Object.assign({}, this.options);
118 |
119 | // merge the cached global options with options
120 | Object.assign(_options, options);
121 |
122 | let toast = new Toast(this);
123 | return toast.create(message, _options);
124 | }
125 |
126 | /**
127 | *
128 | */
129 | let initiateCustomToasts = () => {
130 |
131 | let customToasts = this.options.globalToasts;
132 |
133 | // this will initiate toast for the custom toast.
134 | let initiate = (message, options) => {
135 |
136 | // check if passed option is a available method if so call it.
137 | if (typeof(options) === 'string' && this[options]) {
138 | return this[options].apply(this, [message, {}]);
139 | }
140 |
141 | // or else create a new toast with passed options.
142 | return _show(message, options);
143 | };
144 |
145 | if (customToasts) {
146 |
147 | this.global = {};
148 |
149 | Object.keys(customToasts).forEach(key => {
150 |
151 | // register the custom toast events to the Toast.custom property
152 | this.global[key] = (payload = {}) => {
153 |
154 | // return the it in order to expose the Toast methods
155 | return customToasts[key].apply(null, [payload, initiate]);
156 | };
157 | });
158 |
159 | }
160 | };
161 |
162 |
163 | /**
164 | * Register a Global Toast
165 | *
166 | * @param name
167 | * @param message
168 | * @param options
169 | */
170 | this.register = (name, message, options) => {
171 | options = options || {};
172 |
173 | (!this.options.globalToasts) ? this.options.globalToasts = {} : null;
174 |
175 | this.options.globalToasts[name] = function (payload, initiate) {
176 |
177 | if (typeof message === 'function') {
178 | message = message(payload);
179 | }
180 |
181 | return initiate(message, options);
182 | };
183 |
184 | initiateCustomToasts();
185 | }
186 |
187 |
188 | /**
189 | * Show a Simple Toast
190 | *
191 | * @param message
192 | * @param options
193 | * @returns {*}
194 | */
195 | this.show = (message, options) => {
196 | return _show(message, options);
197 | }
198 |
199 |
200 | /**
201 | * Show a Toast with Success Style
202 | *
203 | * @param message
204 | * @param options
205 | * @returns {*}
206 | */
207 | this.success = (message, options) => {
208 | options = options || {};
209 | options.type = "success";
210 | return _show(message, options);
211 | }
212 |
213 |
214 | /**
215 | * Show a Toast with Info Style
216 | *
217 | * @param message
218 | * @param options
219 | * @returns {*}
220 | */
221 | this.info = (message, options) => {
222 | options = options || {};
223 | options.type = "info";
224 | return _show(message, options);
225 | }
226 |
227 |
228 | /**
229 | * Show a Toast with Error Style
230 | *
231 | * @param message
232 | * @param options
233 | * @returns {*}
234 | */
235 | this.error = (message, options) => {
236 | options = options || {};
237 | options.type = "error";
238 | return _show(message, options);
239 | }
240 |
241 |
242 | /**
243 | * Clear All Toasts
244 | *
245 | * @returns {boolean}
246 | */
247 | this.clear = () => {
248 |
249 | let toasts = this.toasts;
250 | let last = toasts.slice(-1)[0];
251 |
252 | // start vanishing from the bottom if toasts are on top
253 | if(last && last.options.position.includes('top')) {
254 | toasts = toasts.reverse();
255 | }
256 |
257 | animations.clearAnimation(toasts);
258 | this.toasts = [];
259 | }
260 |
261 | /**
262 | * Initiate custom toasts
263 | */
264 | initiateCustomToasts();
265 |
266 | return this;
267 | };
268 |
269 | export default {Toasted, Extender};
--------------------------------------------------------------------------------
/src/sass/mixins.scss:
--------------------------------------------------------------------------------
1 | /**
2 | $part : success, info, error
3 | $color : css color of the part
4 | $background : background color of the part
5 | */
6 | @mixin toasted-theme-type($type, $color : null, $background : null){
7 | &.#{$type} {
8 | @if($color) {
9 | color: $color;
10 | }
11 | @if($background) {
12 | background-color: $background;
13 | }
14 | @content;
15 | }
16 | }
17 |
18 |
19 | /**
20 | $part : action, material-icons
21 | $color : css color of the part
22 | $background : background color of the part
23 | */
24 | @mixin toasted-theme-part($part, $color : null, $background : null){
25 | .#{$part} {
26 | @if($color) {
27 | color: $color;
28 | }
29 | @if($background) {
30 | background-color: $background;
31 | }
32 | @content;
33 | }
34 | }
35 |
36 |
37 | /**
38 | $name : name of the theme
39 | $defaults : have the default values
40 | */
41 | @mixin toasted-theme($name, $defaults : true){
42 |
43 | .toasted {
44 | &.#{$name} {
45 | @if($defaults) {
46 | padding: 0 20px;
47 | min-height: 38px;
48 | font-size: 100%;
49 | line-height: 1.1em;
50 | }
51 | @content;
52 | }
53 |
54 | }
55 |
56 | }
57 |
58 |
59 | @mixin fit-to-screen() {
60 | min-width: 100%;
61 |
62 | .toasted:first-child {
63 | margin-top: 0;
64 | }
65 |
66 | &.top-right {
67 | top: 0;
68 | right: 0;
69 | }
70 |
71 | &.top-left {
72 | top: 0;
73 | left: 0;
74 | }
75 |
76 | &.top-center {
77 | top: 0;
78 | left: 0;
79 | transform: translateX(0);
80 | }
81 |
82 | &.bottom-right {
83 | right: 0;
84 | bottom: 0;
85 | }
86 |
87 | &.bottom-left {
88 | left: 0;
89 | bottom: 0;
90 | }
91 |
92 | &.bottom-center {
93 | left: 0;
94 | bottom: 0;
95 | transform: translateX(0);
96 | }
97 | }
--------------------------------------------------------------------------------
/src/sass/themes.scss:
--------------------------------------------------------------------------------
1 | @import "themes/alive";
2 | @import "themes/material";
3 | @import "themes/colombo";
4 | @import "themes/bootstrap";
5 | @import "themes/venice";
6 | @import "themes/bulma";
--------------------------------------------------------------------------------
/src/sass/themes/alive.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('alive') {
2 |
3 | font-weight: 700;
4 | border-radius: 2px;
5 | background-color: white;
6 | color: #007FFF;
7 | box-shadow: 0 12px 44px 0 rgba(10, 21, 84, 0.24);
8 |
9 | @include toasted-theme-type('success', #4CAF50);
10 | @include toasted-theme-type('error', #F44336);
11 | @include toasted-theme-type('info',#3F51B5);
12 |
13 | @include toasted-theme-part('action', #007FFF);
14 | @include toasted-theme-part('material-icons', #FFC107);
15 |
16 | }
--------------------------------------------------------------------------------
/src/sass/themes/bootstrap.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('bootstrap') {
2 |
3 | color: #31708f;
4 | background-color: #f9fbfd;
5 | border: 1px solid transparent;
6 | border-color: #d9edf7;
7 | border-radius: .25rem;
8 | font-weight: 700;
9 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
10 |
11 | @include toasted-theme-type('success', #3c763d, #dff0d8) {
12 | border-color: #d0e9c6;
13 | };
14 |
15 | @include toasted-theme-type('error', #a94442, #f2dede) {
16 | border-color: #f2dede;
17 | };
18 |
19 | @include toasted-theme-type('info', #31708f, #d9edf7) {
20 | border-color: #d9edf7;
21 | };
22 |
23 | }
--------------------------------------------------------------------------------
/src/sass/themes/bulma.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('bulma') {
2 |
3 | background-color: #00d1b2;
4 | color: #fff;
5 | border-radius: 3px;
6 | font-weight: 700;
7 |
8 | @include toasted-theme-type('success', #fff, #23d160);
9 |
10 | @include toasted-theme-type('error', #a94442, #ff3860);
11 |
12 | @include toasted-theme-type('info', #fff, #3273dc);
13 |
14 | }
--------------------------------------------------------------------------------
/src/sass/themes/colombo.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('colombo') {
2 |
3 | border-radius: 6px;
4 | color: #7492b1;
5 | border: 2px solid #7492b1;
6 | background: white;
7 | font-weight: 700;
8 |
9 | &:after {
10 | content: "";
11 | width: 8px;
12 | height: 8px;
13 | background-color: #5e7b9a;
14 | position: absolute;
15 | top: -4px;
16 | left: -5px;
17 | border-radius: 100%;
18 | }
19 |
20 | @include toasted-theme-type('success', #4CAF50);
21 | @include toasted-theme-type('error', #F44336);
22 | @include toasted-theme-type('info',#3F51B5);
23 |
24 | @include toasted-theme-part('action', #007FFF);
25 | @include toasted-theme-part('material-icons', #5dcccd);
26 |
27 | }
--------------------------------------------------------------------------------
/src/sass/themes/material.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('material') {
2 |
3 | background-color: #353535;
4 | border-radius: 2px;
5 | font-weight: 300;
6 | color: #fff;
7 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
8 |
9 | @include toasted-theme-type('success', #4CAF50);
10 | @include toasted-theme-type('error', #F44336);
11 | @include toasted-theme-type('info',#3F51B5);
12 |
13 | @include toasted-theme-part('action', #a1c2fa);
14 |
15 | }
--------------------------------------------------------------------------------
/src/sass/themes/venice.scss:
--------------------------------------------------------------------------------
1 | @include toasted-theme('venice') {
2 |
3 | border-radius: 30px;
4 | color: white;
5 | background: linear-gradient(85deg, rgb(88, 97, 191), rgb(165, 107, 226));
6 | font-weight: 700;
7 | box-shadow: 0 12px 44px 0 rgba(10, 21, 84, 0.24);
8 |
9 | @include toasted-theme-type('success', #4CAF50);
10 | @include toasted-theme-type('error', #F44336);
11 | @include toasted-theme-type('info',#3F51B5);
12 |
13 | @include toasted-theme-part('action', #007FFF);
14 | @include toasted-theme-part('material-icons', white);
15 |
16 | }
--------------------------------------------------------------------------------
/src/sass/toast.scss:
--------------------------------------------------------------------------------
1 | @import "mixins";
2 | @import "themes";
3 |
4 | .toasted-container {
5 | // fix for min-height bug in IE
6 | display: flex;
7 | flex-direction: column;
8 | position: fixed;
9 | z-index: 10000;
10 |
11 | &.full-width {
12 | display: flex;
13 | flex-direction: column;
14 | max-width: 86%;
15 | width: 100%;
16 |
17 | // check if user needs this to be fitted into screen
18 | &.fit-to-screen {
19 | @include fit-to-screen
20 | }
21 | }
22 |
23 | // Positioning
24 |
25 | &.top-right {
26 | top: 10%;
27 | right: 7%;
28 |
29 | &:not(.full-width) {
30 | align-items: flex-end;
31 | }
32 | }
33 |
34 | &.top-left {
35 | top: 10%;
36 | left: 7%;
37 |
38 | &:not(.full-width) {
39 | align-items: flex-start;
40 | }
41 | }
42 |
43 | &.top-center {
44 | top: 10%;
45 | left: 50%;
46 | align-items: center;
47 | transform: translateX(-50%);
48 | }
49 |
50 | &.bottom-right {
51 | right: 5%;
52 | bottom: 7%;
53 |
54 | &:not(.full-width) {
55 | align-items: flex-end;
56 | }
57 | }
58 |
59 | &.bottom-left {
60 | left: 5%;
61 | bottom: 7%;
62 |
63 | &:not(.full-width) {
64 | align-items: flex-start;
65 | }
66 | }
67 |
68 | &.bottom-center {
69 | left: 50%;
70 | bottom: 7%;
71 | align-items: center;
72 | transform: translateX(-50%);
73 | }
74 |
75 | // fix positioning floating
76 | &.top-left .toasted, &.bottom-left .toasted {
77 | float: left;
78 | }
79 |
80 | &.top-right .toasted, &.bottom-right .toasted {
81 | float: right;
82 | }
83 |
84 | // toast element styling
85 | .toasted {
86 | top: 35px;
87 | width: auto;
88 | clear: both;
89 | margin-top: .8em;
90 | position: relative;
91 | max-width: 100%;
92 | height: auto;
93 | word-break: break-all;
94 | display: flex;
95 | align-items: center;
96 | justify-content: space-between;
97 | box-sizing: inherit;
98 |
99 | .material-icons {
100 | margin-right: .5rem;
101 | margin-left: -.4rem;
102 |
103 | &.after {
104 | margin-left: .5rem;
105 | margin-right: -.4rem;
106 | }
107 | }
108 |
109 | // Toast Action Styling
110 | .actions-wrapper {
111 | margin-left: .4em;
112 | margin-right: -1.2em;
113 |
114 | .action {
115 | text-decoration: none;
116 | font-size: 0.9rem;
117 | padding: 8px;
118 | border-radius: 3px;
119 | text-transform: uppercase;
120 | letter-spacing: .03em;
121 | font-weight: 600;
122 | cursor: pointer;
123 | margin-right: .2rem;
124 |
125 | &.icon {
126 | padding: 4px;
127 | display: flex;
128 | align-items: center;
129 | justify-content: center;
130 |
131 | .material-icons {
132 | margin-right: 0;
133 | margin-left: 4px;
134 | }
135 |
136 | &:hover {
137 | text-decoration: none;
138 | }
139 | }
140 |
141 | &:hover {
142 | text-decoration: underline;
143 | }
144 | }
145 | }
146 |
147 |
148 | }
149 | }
150 |
151 | @media only screen and (max-width: 600px) {
152 | #toasted-container {
153 | @include fit-to-screen;
154 |
155 | &.top-center, &.bottom-center {
156 | align-items: stretch !important;
157 | }
158 |
159 | &.top-right, &.top-left, &.bottom-left, &.bottom-right {
160 | .toasted {
161 | float: none;
162 | }
163 | }
164 |
165 | .toasted {
166 | border-radius: 0;
167 | }
168 |
169 | }
170 | }
--------------------------------------------------------------------------------
4 |
5 | 
9 | 
10 | 
67 | 
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Chrome for Android |
194 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
195 | | IE10, IE11, Edge| last 7 versions| last 7 versions| last 7 versions| last 7 versions| last 3 versions| last 3 versions
196 |
197 | Please Open and issue If You have Found any Issues.
198 |
199 | ## Mobile Responsiveness
200 |
201 | On Mobile Toasts will be on full width. according to the position the toast will either be on top or bottom.
202 |
203 |
204 | ## Credits
205 |
206 | + Inspired and developed from [materialize-css](https://github.com/Dogfalo/materialize) toast.
207 | + Uses [hammerjs](http://hammerjs.github.io/) for touch events
208 | + Uses lightweight and fast [animejs](http://animejs.com/) for animations.
209 | + Whoever contributes to this project :wink:
210 |
211 | Enjoy Toasting !!
--------------------------------------------------------------------------------
/build/webpack.release.css.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
4 | var autoprefixer = require('autoprefixer')
5 |
6 | module.exports = {
7 | entry: {
8 | 'toasted.min' : './src/sass/toast.scss'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../dist'),
12 | filename: '[name].css',
13 | libraryTarget: 'umd'
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.scss$/,
19 | use: ExtractTextPlugin.extract({
20 | fallback: 'style-loader',
21 | //resolve-url-loader may be chained before sass-loader if necessary
22 | use: [{ loader: 'css-loader', options: { minimize: true }}, {
23 | loader: 'postcss-loader',
24 | options: {
25 | config: {
26 | path: './postcss.config.js'
27 | }
28 | }
29 | }, 'sass-loader']
30 | }),
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | performance: {
43 | hints: false
44 | }
45 | }
46 |
47 | if (process.env.NODE_ENV === 'production') {
48 | // http://vue-loader.vuejs.org/en/workflow/production.html
49 | module.exports.plugins = (module.exports.plugins || []).concat([
50 | new ExtractTextPlugin('[name].css')
51 | ])
52 | }
53 |
--------------------------------------------------------------------------------
/build/webpack.release.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var autoprefixer = require('autoprefixer')
4 |
5 | module.exports = {
6 | entry: {
7 | 'toasted' : './src/index.js',
8 | 'toasted.min' : './src/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../dist'),
12 | filename: '[name].js',
13 | libraryTarget: 'umd'
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.vue$/,
19 | loader: 'vue-loader',
20 | options: {
21 | loaders: {
22 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader',
23 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | }
46 | },
47 | devServer: {
48 | historyApiFallback: true,
49 | noInfo: true
50 | },
51 | performance: {
52 | hints: false
53 | },
54 | devtool: '#source-map'
55 | }
56 |
57 | if (process.env.NODE_ENV === 'production') {
58 | module.exports.devtool = '#source-map'
59 | // http://vue-loader.vuejs.org/en/workflow/production.html
60 | module.exports.plugins = (module.exports.plugins || []).concat([
61 | new webpack.optimize.ModuleConcatenationPlugin(),
62 | new webpack.DefinePlugin({
63 | 'process.env': {
64 | NODE_ENV: '"production"'
65 | }
66 | }),
67 | new webpack.optimize.UglifyJsPlugin({
68 | include: /\.min\.js$/,
69 | sourceMap: false,
70 | compress: { warnings: false },
71 | comments: false,
72 | }),
73 | new webpack.ProvidePlugin({}),
74 | // new BundleAnalyzerPlugin(),
75 | new webpack.LoaderOptionsPlugin({
76 | minimize: true
77 | })
78 | ])
79 | }
80 |
--------------------------------------------------------------------------------
/dist/toasted.min.css:
--------------------------------------------------------------------------------
1 | .toasted.alive{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;font-weight:700;border-radius:2px;background-color:#fff;color:#007fff;box-shadow:0 12px 44px 0 rgba(10,21,84,.24)}.toasted.alive.success{color:#4caf50}.toasted.alive.error{color:#f44336}.toasted.alive.info{color:#3f51b5}.toasted.alive .action{color:#007fff}.toasted.alive .material-icons{color:#ffc107}.toasted.material{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;background-color:#353535;border-radius:2px;font-weight:300;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.toasted.material.success{color:#4caf50}.toasted.material.error{color:#f44336}.toasted.material.info{color:#3f51b5}.toasted.material .action{color:#a1c2fa}.toasted.colombo{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;border-radius:6px;color:#7492b1;border:2px solid #7492b1;background:#fff;font-weight:700}.toasted.colombo:after{content:"";width:8px;height:8px;background-color:#5e7b9a;position:absolute;top:-4px;left:-5px;border-radius:100%}.toasted.colombo.success{color:#4caf50}.toasted.colombo.error{color:#f44336}.toasted.colombo.info{color:#3f51b5}.toasted.colombo .action{color:#007fff}.toasted.colombo .material-icons{color:#5dcccd}.toasted.bootstrap{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;color:#31708f;background-color:#f9fbfd;border:1px solid transparent;border-color:#d9edf7;border-radius:.25rem;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.07)}.toasted.bootstrap.success{color:#3c763d;background-color:#dff0d8;border-color:#d0e9c6}.toasted.bootstrap.error{color:#a94442;background-color:#f2dede;border-color:#f2dede}.toasted.bootstrap.info{color:#31708f;background-color:#d9edf7;border-color:#d9edf7}.toasted.venice{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;border-radius:30px;color:#fff;background:linear-gradient(85deg,#5861bf,#a56be2);font-weight:700;box-shadow:0 12px 44px 0 rgba(10,21,84,.24)}.toasted.venice.success{color:#4caf50}.toasted.venice.error{color:#f44336}.toasted.venice.info{color:#3f51b5}.toasted.venice .action{color:#007fff}.toasted.venice .material-icons{color:#fff}.toasted.bulma{padding:0 20px;min-height:38px;font-size:100%;line-height:1.1em;background-color:#00d1b2;color:#fff;border-radius:3px;font-weight:700}.toasted.bulma.success{color:#fff;background-color:#23d160}.toasted.bulma.error{color:#a94442;background-color:#ff3860}.toasted.bulma.info{color:#fff;background-color:#3273dc}.toasted-container{position:fixed;z-index:10000}.toasted-container,.toasted-container.full-width{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.toasted-container.full-width{max-width:86%;width:100%}.toasted-container.full-width.fit-to-screen{min-width:100%}.toasted-container.full-width.fit-to-screen .toasted:first-child{margin-top:0}.toasted-container.full-width.fit-to-screen.top-right{top:0;right:0}.toasted-container.full-width.fit-to-screen.top-left{top:0;left:0}.toasted-container.full-width.fit-to-screen.top-center{top:0;left:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.full-width.fit-to-screen.bottom-right{right:0;bottom:0}.toasted-container.full-width.fit-to-screen.bottom-left{left:0;bottom:0}.toasted-container.full-width.fit-to-screen.bottom-center{left:0;bottom:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.top-right{top:10%;right:7%}.toasted-container.top-right:not(.full-width){-ms-flex-align:end;align-items:flex-end}.toasted-container.top-left{top:10%;left:7%}.toasted-container.top-left:not(.full-width){-ms-flex-align:start;align-items:flex-start}.toasted-container.top-center{top:10%;left:50%;-ms-flex-align:center;align-items:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.toasted-container.bottom-right{right:5%;bottom:7%}.toasted-container.bottom-right:not(.full-width){-ms-flex-align:end;align-items:flex-end}.toasted-container.bottom-left{left:5%;bottom:7%}.toasted-container.bottom-left:not(.full-width){-ms-flex-align:start;align-items:flex-start}.toasted-container.bottom-center{left:50%;bottom:7%;-ms-flex-align:center;align-items:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.toasted-container.bottom-left .toasted,.toasted-container.top-left .toasted{float:left}.toasted-container.bottom-right .toasted,.toasted-container.top-right .toasted{float:right}.toasted-container .toasted{top:35px;width:auto;clear:both;margin-top:.8em;position:relative;max-width:100%;height:auto;word-break:break-all;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;box-sizing:inherit}.toasted-container .toasted .material-icons{margin-right:.5rem;margin-left:-.4rem}.toasted-container .toasted .material-icons.after{margin-left:.5rem;margin-right:-.4rem}.toasted-container .toasted .actions-wrapper{margin-left:.4em;margin-right:-1.2em}.toasted-container .toasted .actions-wrapper .action{text-decoration:none;font-size:.9rem;padding:8px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;cursor:pointer;margin-right:.2rem}.toasted-container .toasted .actions-wrapper .action.icon{padding:4px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.toasted-container .toasted .actions-wrapper .action.icon .material-icons{margin-right:0;margin-left:4px}.toasted-container .toasted .actions-wrapper .action.icon:hover{text-decoration:none}.toasted-container .toasted .actions-wrapper .action:hover{text-decoration:underline}@media only screen and (max-width:600px){#toasted-container{min-width:100%}#toasted-container .toasted:first-child{margin-top:0}#toasted-container.top-right{top:0;right:0}#toasted-container.top-left{top:0;left:0}#toasted-container.top-center{top:0;left:0;-webkit-transform:translateX(0);transform:translateX(0)}#toasted-container.bottom-right{right:0;bottom:0}#toasted-container.bottom-left{left:0;bottom:0}#toasted-container.bottom-center{left:0;bottom:0;-webkit-transform:translateX(0);transform:translateX(0)}#toasted-container.bottom-center,#toasted-container.top-center{-ms-flex-align:stretch!important;align-items:stretch!important}#toasted-container.bottom-left .toasted,#toasted-container.bottom-right .toasted,#toasted-container.top-left .toasted,#toasted-container.top-right .toasted{float:none}#toasted-container .toasted{border-radius:0}}
--------------------------------------------------------------------------------
/dist/toasted.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e,n){"use strict";function i(){h=!1}function r(t){if(!t)return void(l!==d&&(l=d,i()));if(t!==l){if(t.length!==d.length)throw new Error("Custom alphabet for shortid must be "+d.length+" unique characters. You submitted "+t.length+" characters: "+t);var e=t.split("").filter(function(t,e,n){return e!==n.lastIndexOf(t)});if(e.length)throw new Error("Custom alphabet for shortid must be "+d.length+" unique characters. These characters were not unique: "+e.join(", "));l=t,i()}}function o(t){return r(t),l}function s(t){p.seed(t),f!==t&&(i(),f=t)}function a(){l||r(d);for(var t,e=l.split(""),n=[],i=p.nextValue();e.length>0;)i=p.nextValue(),t=Math.floor(i*e.length),n.push(e.splice(t,1)[0]);return n.join("")}function u(){return h||(h=a())}function c(t){return u()[t]}var l,f,h,p=n(10),d="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-";t.exports={characters:o,seed:s,lookup:c,shuffled:u}},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.Toasted=e.Extender=void 0;var r=n(6),o=i(r),s=n(2),a=i(s),u=n(3);n(16).polyfill();var c=e.Extender=function(){return{hook:{options:[],actions:[]},run:function(t,e){if(!Array.isArray(this.hook[t]))return void console.warn("[toasted] : hook not found");this.hook[t].forEach(function(t){(t||"function"==typeof t)&&e&&e(t)})},utils:{warn:function(t){console.warn("[toasted] : "+t)}}}}(),l=e.Toasted=function t(e){var n=this;e||(e={}),this.id=u.generate(),this.options=e,this.global={},this.groups=[],this.toasts=[],this.group=function(e){e||(e={}),e.globalToasts||(e.globalToasts={}),Object.assign(e.globalToasts,n.global);var i=new t(e);return n.groups.push(i),i};var i=function(t,e){var i=Object.assign({},n.options);return Object.assign(i,e),new o.default(n).create(t,i)},r=function(){var t=n.options.globalToasts,e=function(t,e){return"string"==typeof e&&n[e]?n[e].apply(n,[t,{}]):i(t,e)};t&&(n.global={},Object.keys(t).forEach(function(i){n.global[i]=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t[i].apply(null,[n,e])}}))};return this.register=function(t,e,i){i=i||{},n.options.globalToasts||(n.options.globalToasts={}),n.options.globalToasts[t]=function(t,n){return"function"==typeof e&&(e=e(t)),n(e,i)},r()},this.show=function(t,e){return i(t,e)},this.success=function(t,e){return e=e||{},e.type="success",i(t,e)},this.info=function(t,e){return e=e||{},e.type="info",i(t,e)},this.error=function(t,e){return e=e||{},e.type="error",i(t,e)},this.clear=function(){var t=n.toasts,e=t.slice(-1)[0];e&&e.options.position.includes("top")&&(t=t.reverse()),a.default.clearAnimation(t),n.toasts=[]},r(),this};e.default={Toasted:l,Extender:c}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(8),r=function(t){return t&&t.__esModule?t:{default:t}}(i);e.default={animateIn:function(t){(0,r.default)({targets:t,translateY:"-35px",opacity:1,duration:300,easing:"easeOutCubic"})},animateOut:function(t,e){(0,r.default)({targets:t,opacity:0,marginTop:"-40px",duration:300,easing:"easeOutExpo",complete:e})},animateReset:function(t){(0,r.default)({targets:t,left:0,opacity:1,duration:300,easing:"easeOutExpo"})},animatePanning:function(t,e,n){(0,r.default)({targets:t,duration:10,easing:"easeOutQuad",left:e,opacity:n})},animatePanEnd:function(t,e){(0,r.default)({targets:t,opacity:0,duration:300,easing:"easeOutExpo",complete:e})},clearAnimation:function(t){var e=r.default.timeline();t.forEach(function(t){e.add({targets:t.el,opacity:0,right:"-40px",duration:300,offset:"-=150",easing:"easeOutExpo",complete:function(){t.destroy()}})})}}},function(t,e,n){"use strict";t.exports=n(9)},function(t,e,n){"use strict";function i(t,e){for(var n,i=0,o="";!n;)o+=t(e>>4*i&15|r()),n=e