added material icon support

README.md

@@ -89,6 +89,22 @@ let myToast = this.$toasted.show("Holla !!");
 myToast.text("Changing the text !!!").goAway(1500);
 ```
 
+#### Icon Support
+Now <a href="http://google.github.io/material-design-icons/"> Material Icons</a> are supported. you will have to import the material icons into your project. <a href="/examples/using-icons.js"> example </a>
+
+```javascript
+{
+    // pass the icon name as string
+    icon : 'check'
+
+    // or you can pass an object
+    icon : {
+        name : 'watch',
+        after : true // this will append the icon to the end of content
+    }
+}
+```
+
 ### options
 
 below are the available options
@@ -100,6 +116,7 @@ duration|Number|null|Display time of the toast in millisecond
 fullWidth|Boolean|false|Enable Full Width
 className|String, Array|null|Custom css class name of the toast
 containerClass|String, Array|null|Custom css classes for toast container
+Icon|String, Object|null|Material icon name as string.  <br> `{ name : 'check', after : true} `
 theme|String|'primary'|Theme of the toast you prefer<br> **['primary', 'outline', 'bubble']**
 onComplete|Function|null|Trigger when toast is completed
 

examples/using-icons.js

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import VueToasted from 'vue-toasted';
+
+Vue.use(VueToasted);
+
+/* NOTE : You will have to import material icons in order to work */
+
+// use icon name as a string
+Vue.toasted.show('hello there, i am a toast !!', { icon : 'check'});
+
+// you can pass an object and use name
+Vue.toasted.show(
+    'hello there, i am a toast !!', {
+        icon : {
+            name : 'check'
+        }
+});
+
+// use after to append the icon after the content
+Vue.toasted.show(
+    'hello there, i am a toast !!', {
+        icon : {
+            name : 'check',
+            after : true
+        }
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-toasted",
   "description": "Responsive Touch Compatible Toast plugin for VueJS 2+",
-  "version": "1.0.3",
+  "version": "1.0.31",
   "author": "Shakeeb Sadikeen <[email protected]>",
   "repository": {
     "type": "git",

src/js/show.js

@@ -35,6 +35,8 @@ const parseOptions = function (options) {
     // check if the fullWidth is enabled
     options.fullWidth = options.fullWidth || false;
 
+    // get icon name
+    options.icon = options.icon || null;
 
     /* transform options */
 
@@ -67,6 +69,103 @@ const parseOptions = function (options) {
     return options;
 };
 
+
+const createToast = function (html, options) {
+
+    // Create toast
+    let toast = document.createElement('div');
+    toast.classList.add('toasted');
+
+    if (options.className) {
+        options.className.forEach((className) => {
+            toast.classList.add(className);
+        });
+    }
+
+    // add material icon if available
+    if(options.icon) {
+
+        if(options.icon.after && options.icon.name) {
+            html += `<i class="material-icons after">${options.icon.name}</i>`
+        }
+        else if(options.icon.name) {
+            html = `<i class="material-icons">${options.icon.name}</i>` + html
+        }
+        else {
+            html = `<i class="material-icons">${options.icon}</i>` + html
+        }
+
+    }
+
+    // If type of parameter is HTML Element
+    if (typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName === "string"
+    ) {
+        toast.appendChild(html);
+    }
+    else {
+        // Insert as text;
+        toast.innerHTML = html;
+    }
+
+    // Bind hammer
+    let hammerHandler = new Hammer(toast, {prevent_default: false});
+    hammerHandler.on('pan', function (e) {
+        let deltaX = e.deltaX;
+        let activationDistance = 80;
+
+        // Change toast state
+        if (!toast.classList.contains('panning')) {
+            toast.classList.add('panning');
+        }
+
+        let opacityPercent = 1 - Math.abs(deltaX / activationDistance);
+        if (opacityPercent < 0)
+            opacityPercent = 0;
+
+        Velocity(toast, {left: deltaX, opacity: opacityPercent}, {
+            duration: 50,
+            queue: false,
+            easing: 'easeOutQuad'
+        });
+
+    });
+
+    hammerHandler.on('panend', function (e) {
+        let deltaX = e.deltaX;
+        let activationDistance = 80;
+
+        // If toast dragged past activation point
+        if (Math.abs(deltaX) > activationDistance) {
+            Velocity(toast, {marginTop: '-40px'}, {
+                duration: 375,
+                easing: 'easeOutExpo',
+                queue: false,
+                complete: function () {
+                    if (typeof(options.onComplete) === "function") {
+                        options.onComplete();
+                    }
+
+                    if (toast.parentNode) {
+                        toast.parentNode.removeChild(toast);
+                    }
+                }
+            });
+
+        } else {
+            toast.classList.remove('panning');
+            // Put toast back into original position
+            Velocity(toast, {left: 0, opacity: 1}, {
+                duration: 300,
+                easing: 'easeOutExpo',
+                queue: false
+            });
+
+        }
+    });
+
+    return toast;
+};
+
 /**
  * this method will create the toast
  *
@@ -97,7 +196,7 @@ export default function (message, options) {
     }
 
     // Select and append toast
-    let newToast = createToast(message);
+    let newToast = createToast(message, options);
 
     // only append toast if message is not undefined
     if (message) {
@@ -149,87 +248,5 @@ export default function (message, options) {
         }, 20);
     }
 
-
-    function createToast(html) {
-
-        // Create toast
-        let toast = document.createElement('div');
-        toast.classList.add('toasted');
-
-        if (options.className) {
-            options.className.forEach((className) => {
-                toast.classList.add(className);
-            });
-        }
-
-        // If type of parameter is HTML Element
-        if (typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName === "string"
-        ) {
-            toast.appendChild(html);
-        }
-        else {
-            // Insert as text;
-            toast.innerHTML = html;
-        }
-
-        // Bind hammer
-        let hammerHandler = new Hammer(toast, {prevent_default: false});
-        hammerHandler.on('pan', function (e) {
-            let deltaX = e.deltaX;
-            let activationDistance = 80;
-
-            // Change toast state
-            if (!toast.classList.contains('panning')) {
-                toast.classList.add('panning');
-            }
-
-            let opacityPercent = 1 - Math.abs(deltaX / activationDistance);
-            if (opacityPercent < 0)
-                opacityPercent = 0;
-
-            Velocity(toast, {left: deltaX, opacity: opacityPercent}, {
-                duration: 50,
-                queue: false,
-                easing: 'easeOutQuad'
-            });
-
-        });
-
-        hammerHandler.on('panend', function (e) {
-            let deltaX = e.deltaX;
-            let activationDistance = 80;
-
-            // If toast dragged past activation point
-            if (Math.abs(deltaX) > activationDistance) {
-                Velocity(toast, {marginTop: '-40px'}, {
-                    duration: 375,
-                    easing: 'easeOutExpo',
-                    queue: false,
-                    complete: function () {
-                        if (typeof(options.onComplete) === "function") {
-                            options.onComplete();
-                        }
-
-                        if (toast.parentNode) {
-                            toast.parentNode.removeChild(toast);
-                        }
-                    }
-                });
-
-            } else {
-                toast.classList.remove('panning');
-                // Put toast back into original position
-                Velocity(toast, {left: 0, opacity: 1}, {
-                    duration: 300,
-                    easing: 'easeOutExpo',
-                    queue: false
-                });
-
-            }
-        });
-
-        return toast;
-    }
-
     return toastObject(newToast);
 };

src/sass/toast.scss

@@ -27,6 +27,16 @@
       margin-left: 3rem;
     }
 
+    .material-icons {
+      margin-right: .5rem;
+      margin-left: -.4rem;
+
+      &.after {
+        margin-left: .5rem;
+        margin-right: -.4rem;
+      }
+    }
+
     // Templates
 
     &.rounded {