Home Explore Help
Sign In
owen
/
vue-roaster
mirror of https://github.com/jonathan-grah/vue-roaster.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

fix: positioning based on entire container, avoids overlapping of elements

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 5 years ago
parent
b1d494f52b
commit
f60f402a5e
6 changed files with 51 additions and 169 deletions
Split View Show Diff Stats
  1. 10 6
      README.md
  2. 0 0
      dist/toasters.js
  3. 32 27
      example/index.html
  4. 4 4
      example/index.js
  5. 0 122
      src/Toast.vue
  6. 5 10
      src/toasters.js

+ 10 - 6
README.md
View File 

@@ -18,16 +18,20 @@
 
 
     export default {
 
         ready() {
 
-            new Toast({ content: "This is a test for content", persistant: true, position: {
 
-                horizontal: "right",
 
-                vertical: "bottom"
 
-            }});
 
+            new Toast({
 
+                content: "This is a test for content",
 
+                persistant: true,
 
+                position: {
 
+                    horizontal: "right",
 
+                    vertical: "bottom"
 
+                }
 
+            });
 
         }
 
     }
 
 </script>
 
 ```
 
 
-<!--See [example](https://github.com/atjonathan/vue-roaster/tree/master/example) folder for more details.-->
 
+<!--See [example](https://github.com/jonathan-grah/vue-roaster/tree/master/example) folder for more details.-->
 
 
 ## Contributing
 
 
@@ -35,7 +39,7 @@
 
 # install dependencies
 
 npm install
 
 
-# serve example with hot reload at localhost:8080
 
+# watch files for changes wtih webpack
 
 npm run dev
 
 
 # build for production with minification

File diff suppressed because it is too large
+ 0 - 0
dist/toasters.js


+ 32 - 27
example/index.html
View File 

@@ -5,7 +5,7 @@
 
         <title>Example</title>

 </head>

 <body>

-        <div id="toasts-container"></div>

+        <div id="toasts-container" class="position-right position-bottom"></div>

         <script src="../dist/example.js"></script>

         <style>

                 :root {

@@ -18,20 +18,45 @@
 
                 }

 

                 #toasts-container {

+                        position: fixed;

+                        height: 100vh;

+                        display: flex;

+                        flex-direction: column;

+                        top: 20px;

+                        left: 20px;

+                }

+                

+                #toasts-container.position-left {

+                        right: 0;

+                        left: 20px;

+                        align-items: flex-start;

+                }

+

+                #toasts-container.position-right {

+                        left: 0;

+                        right: 20px;

+                        align-items: flex-end;

+                }

+

+                #toasts-container.position-top {

+                        bottom: 0;

+                        top: 20px;

+                        justify-content: flex-start;

+                }

 

+                #toasts-container.position-bottom {

+                        top: 0;

+                        margin-top: -20px;

+                        justify-content: flex-end;

                 }

 

                 .toast {

+                        margin-bottom: 5px;

                         user-select: none;

                         z-index: 10000 !important;

-                        animation-duration: 0.60s;

-                        animation-fill-mode: both;

                         border-radius: 2px;

                         cursor: pointer;

-                        overflow-x: hidden !important;

-                        clear: both;

-                        position: absolute;

-                        transform: translateX(20px);

+                        position: relative;

                         top: 0;

                         height: auto;

                         background-color: #323232;

@@ -42,26 +67,6 @@
 
                         width: var(--max-width);

                         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

                 }

-

-                .toast-right {

-                        transform: translateX(calc(100vw - (var(--max-width) + 50px) - 20px));

-                }

-

-                .toast-left {

-                        transform: translateX(20px);

-                }

-

-                .toast-top {

-                        margin-top: 5px;

-                        bottom: unset;

-                        top: 0;

-                }

-

-                .toast-bottom {

-                        margin-bottom: 5px;

-                        top: unset;

-                        bottom: 0;

-                }

         </style>

 </body>

 </html>

+ 4 - 4
example/index.js
View File 

@@ -1,6 +1,6 @@
 
 import Toast from "../dist/toasters.js";
 
 
-const toast = new Toast({ content: "This is a test for content", persistant: true, position: {
 
-	horizontal: "right",
 
-	vertical: "bottom"
 
-}});
 
+new Toast({
 
+	content: "This is a test for content",
 
+	persistant: true
 
+});

+ 0 - 122
src/Toast.vue
View File 

@@ -1,122 +0,0 @@
 
-<template>

-    <div id='toast-container'></div>

-</template>

-

-<script>

-	import $ from 'jquery';

-	import 'jquery-ui';

-

-    /*

-     * Calculates opacity of Toast

-     * @param {number} left

-     * @return {number}

-     */

-    const calcOpacity = left => {

-        let opacity = 0;

-        if (left > -200) opacity = (1 - (left * (1 / 50)));

-        else opacity = (left * (1 / 350)) + 1;

-        if (opacity < 0) opacity = 0;

-        return opacity;

-    }

-

-    export default {

-        data() {

-            return {

-                toasts: {}

-            }

-        },

-        methods: {

-            addToast: (text, time) => {

-                if (typeof time !== 'number' || time < 0) {

-                    time = 10000;

-                }

-

-                let toast = $(

-                    '<div class=\'toast\'>' +

-                        '<strong>' +

-                            text +

-                        '</strong>' +

-                    '</div>'

-                );

-

-                $('#toast-container').append(toast);

-                let revertInterval;

-                toast.draggable({

-                    axis: 'x',

-                    revert: () => {

-                        let position = toast.draggable('instance').position;

-                        let revert = !(position.left >= 150 || position.left <= -150);

-                        if (revert) {

-                            let timePassed = 0;

-                            revertInterval = setInterval(() => {

-                                if (timePassed < 500) {

-                                    timePassed += 25;

-                                    let left = toast.prop('style').left;

-                                    left = Number((left + '').replace('px', ''));

-                                    toast.css({opacity: calcOpacity(left)});

-                                } else {

-                                    clearInterval(revertInterval);

-                                }

-                            }, 25);

-                        }

-                        return revert;

-                    },

-                    stop: (event, ui) => {

-                        if (ui.position.left > -200 || ui.position.left < -150) {

-                            toast.draggable('destroy').remove();

-                        }

-                    },

-                    revertDuration: 500,

-                    drag: (event, ui) => {

-                        ui.helper.css({opacity: calcOpacity(ui.position.left)});

-                    }

-                });

-

-                setTimeout(() => {

-                    toast.draggable('destroy').remove();

-                    clearInterval(revertInterval);

-                }, time);

-            }

-        }

-    }

-</script>

-

-<style>

-    #toast-container {

-        display: block;

-        width: 0;

-        top: 64px;

-        right: 100px;

-        position: fixed;

-    }

-

-    .toast:first-child {

-        top: 0;

-    }

-

-    .toast {

-        z-index: 10000 !important;

-        animation-duration: 0.60s;

-        animation-fill-mode: both;

-        border-radius: 2px;

-        cursor: pointer;

-        top: 20px;

-        /* right: 200px; */

-        min-width: 225px;

-        clear: both;

-        margin-top: 10px;

-        /* position: static; */

-        height: auto;

-        background-color: #323232;

-        padding: 10px 25px;

-        font-size: 1rem;

-        font-weight: 300;

-        justify-content: space-between;

-        flex-direction: column;

-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

-    }

-

-    .toast strong {

-        color: #fff;

-    }

-</style>

+ 5 - 10
src/toasters.js
View File 

@@ -1,18 +1,18 @@
 
 document.body.style.backgroundColor = "#eee";

 

 const container = document.getElementById("toasts-container");

+console.log(container);

 

 let incrementer = 0;

 

 export default class Toast {

 	// should add type checking

-	constructor({ content, persistant, timeout, position }) {

+	constructor({ content, persistant, timeout }) {

 		this.identifier = `toast-${incrementer}`;

 		incrementer++;

 

 		this.visible = false;

 

-		this.position = position;

 		this.content = content;

 		this.persistant = persistant;

 		this.timeout = timeout;

@@ -37,7 +37,7 @@ export default class Toast {
 
 

 	display() {

 		if (!this.visible) {

-			container.insertAdjacentHTML("beforeend", `<div class="toast ${this.identifier} toast-${this.position.horizontal} toast-${this.position.vertical}">${this.content}</div>`);

+			container.insertAdjacentHTML("beforeend", `<div class="toast ${this.identifier}">${this.content}</div>`);

 			this.find();

 		} else

 			this.element.innerHTML = this.content;

@@ -53,8 +53,8 @@ export default class Toast {
 
 			const move = ({ pageX }) => {

 				let opacity = 1.2 - Math.abs(pageX - shiftX - initialX) / 100;

 				if (opacity < 0.15) return this.clear();

-				this.element.style.opacity = 1.2 - Math.abs(pageX - shiftX - initialX) / 100;

-				this.element.style.transform = `translateX(${pageX - shiftX}px)`;

+				this.element.style.opacity = opacity;

+				this.element.style.left = `${pageX - shiftX - initialX}px`;

 			}

 

 			window.addEventListener("mousemove", move, false);

@@ -75,8 +75,3 @@ export default class Toast {
 
 		this.element.remove();

 	}

 }

-

-const red = new Toast({ content: "ALWAYS RED", persistant: true, position: {

-	horizontal: "left",

-	vertical: "top"

-}});

Some files were not shown because too many files changed in this diff