5 年之前 · 1bfbbd17aa
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,5 @@
 
				+{
			
 
				+  "presets": ["es2015", "stage-2"],
			
 
				+  "plugins": ["transform-runtime"],
			
 
				+  "comments": false
			
 
				+}
			
--- a/.npmignore
+++ b/.npmignore
@@ -0,0 +1,4 @@
 
				+.DS_Store

			
 
				+node_modules/

			
 
				+npm-debug.log

			
 
				+.idea/
			
--- a/LICENCE.md
+++ b/LICENCE.md
@@ -0,0 +1,21 @@
 
				+MIT License

			
 
				+

			
 
				+Copyright (c) 2019 Jonathan Graham

			
 
				+

			
 
				+Permission is hereby granted, free of charge, to any person obtaining a copy

			
 
				+of this software and associated documentation files (the "Software"), to deal

			
 
				+in the Software without restriction, including without limitation the rights

			
 
				+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

			
 
				+copies of the Software, and to permit persons to whom the Software is

			
 
				+furnished to do so, subject to the following conditions:

			
 
				+

			
 
				+The above copyright notice and this permission notice shall be included in all

			
 
				+copies or substantial portions of the Software.

			
 
				+

			
 
				+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

			
 
				+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

			
 
				+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

			
 
				+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

			
 
				+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

			
 
				+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

			
 
				+SOFTWARE.
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,41 @@
 
				+# vue-roaster
			
 
				+
			
 
				+> Material Design style Toast (Alert) for Vue
			
 
				+
			
 
				+## Installation
			
 
				+
			
 
				+`npm install -S  --production vue-roaster`
			
 
				+
			
 
				+## Usage
			
 
				+
			
 
				+```
			
 
				+<template>
			
 
				+    <toast></toast>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    import { Toast } from 'vue-roaster';
			
 
				+
			
 
				+    export default {
			
 
				+        ready() {
			
 
				+            Toast.methods.addToast("An Example Toast", 5000);
			
 
				+        },
			
 
				+        components: { Toast }
			
 
				+    }
			
 
				+</script>
			
 
				+```
			
 
				+
			
 
				+See [example](https://github.com/atjonathan/vue-roaster/tree/master/example) folder for more details.
			
 
				+
			
 
				+## Contributing
			
 
				+
			
 
				+``` bash
			
 
				+# install dependencies
			
 
				+npm install
			
 
				+
			
 
				+# serve example with hot reload at localhost:8080
			
 
				+npm run dev
			
 
				+
			
 
				+# build for production with minification
			
 
				+npm run build
			
 
				+```
			
--- a/dist/example.js
+++ b/dist/example.js
--- a/dist/example.js.map
+++ b/dist/example.js.map
--- a/dist/vue-roaster.js
+++ b/dist/vue-roaster.js
--- a/dist/vue-roaster.js.map
+++ b/dist/vue-roaster.js.map
--- a/example/App.vue
+++ b/example/App.vue
@@ -0,0 +1,24 @@
 
				+<template>

			
 
				+    <toast></toast>

			
 
				+    <button @click="addToast()">Add Toast</button>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+    import { Toast } from '../dist/vue-roaster.js';

			
 
				+

			
 
				+    export default {

			
 
				+        methods: {

			
 
				+            addToast: () => {

			
 
				+                Toast.methods.addToast("T", 50000);

			
 
				+                Toast.methods.addToast("TESTTESTTETESTSTTESTTESTTESTTESTTESTTEST", 50000);

			
 
				+            }

			
 
				+        },

			
 
				+        components: { Toast }

			
 
				+    }

			
 
				+</script>

			
 
				+

			
 
				+<style>

			
 
				+    body {

			
 
				+        font-family: sans-serif;

			
 
				+    }

			
 
				+</style>

			
--- a/example/index.html
+++ b/example/index.html
@@ -0,0 +1,11 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+        <meta charset="utf-8">

			
 
				+        <title>Example</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+        <app></app>

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

			
 
				+</body>

			
 
				+</html>

			
--- a/example/main.js
+++ b/example/main.js
@@ -0,0 +1,7 @@
 
				+import Vue from 'vue';
			
 
				+import App from './App.vue';
			
 
				+
			
 
				+new Vue({
			
 
				+  el: 'body',
			
 
				+  components: { App }
			
 
				+});
			
--- a/lib/jquery-ui.min.js
+++ b/lib/jquery-ui.min.js
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 
				+{
			
 
				+  "author": "Jonathan Graham <theflametrooper@gmail.com>",
			
 
				+  "description": "Material Design style Toast (Alert) for Vue",
			
 
				+  "devDependencies": {
			
 
				+    "babel-core": "^6.0.0",
			
 
				+    "babel-loader": "^6.0.0",
			
 
				+    "babel-plugin-transform-runtime": "^6.0.0",
			
 
				+    "babel-preset-es2015": "^6.0.0",
			
 
				+    "babel-preset-stage-2": "^6.0.0",
			
 
				+    "cross-env": "^1.0.6",
			
 
				+    "css-loader": "^0.23.0",
			
 
				+    "dragdealer": "^0.9.9",
			
 
				+    "file-loader": "^0.8.4",
			
 
				+    "json-loader": "^0.5.4",
			
 
				+    "node-sass": "^3.11.2",
			
 
				+    "sass-loader": "^4.0.2",
			
 
				+    "url-loader": "^0.5.7",
			
 
				+    "vue-hot-reload-api": "^1.2.0",
			
 
				+    "vue-html-loader": "^1.0.0",
			
 
				+    "vue-loader": "^8.2.1",
			
 
				+    "vue-style-loader": "^1.0.0",
			
 
				+    "webpack": "^1.12.2",
			
 
				+    "webpack-dev-server": "^1.12.0"
			
 
				+  },
			
 
				+  "license": "MIT",
			
 
				+  "main": "dist/vue-roaster.js",
			
 
				+  "name": "vue-roaster",
			
 
				+  "scripts": {
			
 
				+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
			
 
				+    "dev": "webpack-dev-server --inline --hot --content-base example/"
			
 
				+  },
			
 
				+  "version": "1.1.2"
			
 
				+}
			
--- a/src/Toast.vue
+++ b/src/Toast.vue
@@ -0,0 +1,122 @@
 
				+<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>

			
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,3 @@
 
				+import Toast from './Toast.vue';

			
 
				+

			
 
				+module.exports = { Toast };
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,77 @@
 
				+var path = require('path')
			
 
				+var webpack = require('webpack')
			
 
				+
			
 
				+module.exports = {
			
 
				+    entry: {
			
 
				+    'vue-roaster': ['vue', './src/index.js'],
			
 
				+    'example': './example/main.js'
			
 
				+  },
			
 
				+  output: {
			
 
				+    path: path.resolve(__dirname, './dist'),
			
 
				+    publicPath: '/dist',
			
 
				+    filename: '[name].js',
			
 
				+    library: 'Toast',
			
 
				+    libraryTarget: 'umd'
			
 
				+  },
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      'jquery-ui': path.resolve(__dirname, './lib/jquery-ui.min.js'),
			
 
				+      modules: path.join(__dirname, 'node_modules')
			
 
				+    }
			
 
				+  },
			
 
				+  resolveLoader: {
			
 
				+    root: path.join(__dirname, 'node_modules'),
			
 
				+  },
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      {
			
 
				+        test: /\.vue$/,
			
 
				+        loader: 'vue'
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.js$/,
			
 
				+        loader: 'babel',
			
 
				+        exclude: /node_modules/
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.json$/,
			
 
				+        loader: 'json'
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.html$/,
			
 
				+        loader: 'vue-html'
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.(png|jpg|gif|svg)$/,
			
 
				+        loader: 'url',
			
 
				+        query: {
			
 
				+          limit: 10000,
			
 
				+          name: '[name].[ext]?[hash]'
			
 
				+        }
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  devServer: {
			
 
				+    historyApiFallback: true,
			
 
				+    noInfo: true
			
 
				+  },
			
 
				+  devtool: '#eval-source-map'
			
 
				+}
			
 
				+
			
 
				+if (process.env.NODE_ENV === 'production') {
			
 
				+  module.exports.devtool = '#source-map'
			
 
				+  // http://vue-loader.vuejs.org/en/workflow/production.html
			
 
				+  module.exports.plugins = (module.exports.plugins || []).concat([
			
 
				+    new webpack.DefinePlugin({
			
 
				+      'process.env': {
			
 
				+        NODE_ENV: '"production"'
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.optimize.UglifyJsPlugin({
			
 
				+      compress: {
			
 
				+        warnings: false
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.optimize.OccurenceOrderPlugin()
			
 
				+  ])
			
 
				+}