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

feat: position top, bottom, left and right

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 5 years ago
parent
713fdf26b9
commit
7a5230e223
9 changed files with 104 additions and 92 deletions
Split View Show Diff Stats
  1. 2 0
      .gitignore
  2. 3 1
      .npmignore
  3. 7 5
      README.md
  4. 15 3
      dist/toasters.js
  5. 55 44
      example/index.html
  6. 6 0
      example/index.js
  7. 1 0
      src/index.js
  8. 9 36
      src/toasters.js
  9. 6 3
      webpack.config.js

+ 2 - 0
.gitignore
View File 

@@ -1 +1,3 @@
 
 node_modules

+

+dist/example.js

+ 3 - 1
.npmignore
View File 

@@ -1,4 +1,6 @@
 
 .DS_Store

 node_modules/

 npm-debug.log

-.idea/
 
+.idea/

+

+dist/example.js

+ 7 - 5
README.md
View File 

@@ -4,7 +4,7 @@
 
 
 ## Installation
 
 
-`npm install -S  --production vue-roaster`
 
+`npm install -S  --production toasters`
 
 
 ## Usage
 
 
@@ -14,13 +14,15 @@
 
 </template>
 
 
 <script>
 
-    import { Toast } from 'vue-roaster';
 
+    import { Toast } from 'toasters';
 
 
     export default {
 
         ready() {
 
-            Toast.methods.addToast("An Example Toast", 5000);
 
-        },
 
-        components: { Toast }
 
+            new Toast({ content: "This is a test for content", persistant: true, position: {
 
+                horizontal: "right",
 
+                vertical: "bottom"
 
+            }});
 
+        }
 
     }
 
 </script>
 
 ```

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


+ 55 - 44
example/index.html
View File 

@@ -6,51 +6,62 @@
 
 </head>

 <body>

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

-        <script src="../dist/toasters.js"></script>

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

         <style>

-        :root {

-                --max-width: 250px;

-        }

-

-        body {

-                padding: 0;

-                margin: 0;

-        }

-

-        .toast {

-                margin-top: 5px;

-                user-select: none;

-                z-index: 10000 !important;

-                animation-duration: 0.60s;

-                animation-fill-mode: both;

-                border-radius: 2px;

-                cursor: pointer;

-                clear: both;

-                position: relative;

-                transform: translateX(20px);

-                height: auto;

-                background-color: #323232;

-                color: #fff;

-                padding: 10px 25px;

-                font-size: 1rem;

-                font-weight: 300;

-                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 {

-        }

-

-        .toast-bottom {

-        }

+                :root {

+                        --max-width: 250px;

+                }

+

+                body {

+                        padding: 0;

+                        margin: 0;

+                }

+

+                #toasts-container {

+

+                }

+

+                .toast {

+                        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);

+                        top: 0;

+                        height: auto;

+                        background-color: #323232;

+                        color: #fff;

+                        padding: 10px 25px;

+                        font-size: 1rem;

+                        font-weight: 300;

+                        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>

+ 6 - 0
example/index.js
View File 

@@ -0,0 +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"
 
+}});

+ 1 - 0
src/index.js
View File 

@@ -0,0 +1 @@
 
+export default require('./toasters').default;

+ 9 - 36
src/toasters.js
View File 

@@ -4,11 +4,9 @@ const container = document.getElementById("toasts-container");
 
 

 let incrementer = 0;

 

-class Toast {

+export default class Toast {

 	// should add type checking

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

-		console.log(position);

-

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

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

 		incrementer++;

 

@@ -39,7 +37,7 @@ class Toast {
 
 

 	display() {

 		if (!this.visible) {

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

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

 			this.find();

 		} else

 			this.element.innerHTML = this.content;

@@ -49,28 +47,18 @@ class Toast {
 
 

 	dragListener() {

 		this.element.addEventListener("mousedown", event => {

-

-			// this.element.style.position = "absolute";

-

-			// this.element.ondragstart = () => {

-			// 	return false;

-			// }

-

 			let shiftX = event.clientX - this.element.getBoundingClientRect().x;

 

 			const move = ({ pageX }) => {

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

+				console.log(pageX - shiftX - );

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

 			}

 

-			console.log("Mousedown");

-

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

 

 			window.addEventListener("mouseup", () => {

-				console.log("Mouseup");

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

 			}, false);

-

 		}, false);

 	}

 

@@ -85,22 +73,7 @@ class Toast {
 
 	}

 }

 

-// const add = (

-// 	content,

-// 	persistant,

-// 	timeout,

-// ) => {

-// 	const red = new Toast(

-// 		content,

-// 		persistant,

-// 		timeout

-// 	);

-// }

-

-const red = new Toast("This is a test for content", true, 5000, "right");

-const pink = new Toast("ALWAYS HERE AND ALWAYS PINK", true, 5000, "left");

-

-

-export default {

-	

-};

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

+	horizontal: "left",

+	vertical: "top"

+}});

+ 6 - 3
webpack.config.js
View File 

@@ -1,11 +1,14 @@
 
 var path = require("path")
 
 
 module.exports = {
 
-  entry: "./src/toasters.js",
 
+  entry: {
 
+    toasters: "./src/index.js",
 
+    example: "./example/index.js"
 
+  },
 
   output: {
 
     path: path.resolve(__dirname, "dist"),
 
-    filename: "toasters.js",
 
-    library: "toasters",
 
+    filename: "[name].js",
 
+    library: "Toast",
 
     libraryTarget: "umd"
 
   },
 
   module: {

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