initial commit

.gitignore

@@ -0,0 +1,4 @@
+# dependencies
+/node_modules
+
+package-lock.json

.npmignore

@@ -0,0 +1,10 @@
+# Build results
+dist/
+typings/**/*
+
+# Others
+~$*
+*~
+node_modules/
+src/build/
+coverage/

karma.conf.js

@@ -0,0 +1,61 @@
+var webpackConf = require('./webpack.config.js');
+module.exports = function (config) {
+  config.set({
+    basePath:'',
+    frameworks: ['jasmine'],
+    files: [{ pattern: './tests/unit/spec-bundle.js', watched: false }],
+    preprocessors: { './tests/unit/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+    webpack: {
+      module: webpackConf.module,
+      resolve: webpackConf.resolve
+    },
+    webpackMiddleware: {
+      noInfo: true,
+      stats: 'errors-only'
+    },
+    reporters: ['kjhtml', 'spec', 'coverage'],
+    // optionally, configure the reporter
+    coverageReporter: {
+      // specify a common output directory
+      dir: './tests/build/reports/coverage',
+      reporters: [
+        // reporters not supporting the `file` property
+        { type: 'html', subdir: 'report-html' },
+        { type: 'lcov', subdir: 'report-lcov' },
+        // reporters supporting the `file` property, use `subdir` to directly
+        // output them in the `dir` directory
+        { type: 'cobertura', subdir: '.', file: 'cobertura.txt' },
+        { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
+        { type: 'teamcity', subdir: '.', file: 'teamcity.txt' },
+        { type: 'text', subdir: '.', file: 'text.txt' },
+        { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
+      ]
+    },
+    specReporter: {
+      maxLogLines: 5,         // limit number of lines logged per test 
+      suppressErrorSummary: true,  // do not print error summary 
+      suppressFailed: false,  // do not print information about failed tests 
+      suppressPassed: false,  // do not print information about passed tests 
+      suppressSkipped: true,  // do not print information about skipped tests 
+      showSpecTiming: false // print the time elapsed for each spec 
+    },
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: true,
+    concurrency: Infinity
+  });
+
+
+  if (process.env.TRAVIS) {
+    config.browsers = ['Chrome_travis_ci'];
+  }
+};

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vanilla-yo-notification",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "scripts": {
+    "start": "npm run server:dev",
+    "server": "npm run server:dev",
+    "server:dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --hot --inline --progress --watch --open",
+    "server:prod": "cross-env NODE_ENV=production webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --open --content-base dist/",
+    "build": "npm run build:dev",
+    "build:dev": "webpack --config ./webpack.config.js --progress --profile --color --display-error-details --display-cached",
+    "build:prod": "cross-env NODE_ENV=production webpack --config ./webpack.config.js  --progress --profile --color --display-error-details --display-cached --bail",
+    "clean": "npm cache clear && rimraf -- dist",
+    "test": "karma start"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/jasmine": "^2.5.53",
+    "@types/lodash": "^4.14.70",
+    "awesome-typescript-loader": "^3.2.1",
+    "cross-env": "^5.0.1",
+    "css-loader": "^0.28.4",
+    "ejs-loader": "^0.3.0",
+    "eslint": "^4.2.0",
+    "expose-loader": "^0.7.3",
+    "jasmine": "^2.6.0",
+    "jasmine-core": "^2.6.4",
+    "karma": "^1.7.0",
+    "karma-babel-preprocessor": "^6.0.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.31",
+    "karma-webpack": "^2.0.4",
+    "rimraf": "^2.6.1",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.2",
+    "tslint": "^5.5.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.4.1",
+    "webpack": "^3.3.0",
+    "webpack-dashboard": "^0.4.0",
+    "webpack-dev-server": "2.5.1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.4"
+  }
+}

src/config.interface.ts

@@ -0,0 +1,6 @@
+export interface Config {
+    content: string;
+    timeout?: number;
+    title: string;
+    footer?: string;
+}

src/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+
+  <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">
+
+</head>
+
+<body>
+  <div> You have successfully started your Typescript application using Webpack. Open your console to see your printed message from the index.ts file </div>
+  <p>By <a href="https://twitter.com/renaudin_yann">@renaudin_yann</a> </p>
+</body>
+
+</html>

src/index.spec.ts

@@ -0,0 +1,5 @@
+describe('TypeScript WebPack Starter Tests', () => {
+    it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', () => {
+        expect(true).toBe(true);
+    });
+})

src/index.ts

@@ -0,0 +1,3 @@
+import VanillaYoNotification from "./vanilla.yo.notification";
+
+(window as any).VanillaYoNotification = VanillaYoNotification;

src/styles/style.css

@@ -0,0 +1,38 @@
+
+
+.notif-mainContainer {
+    z-index: 999;
+    position: fixed;
+    width: 350px;
+    max-width: 98%;
+    font-family: "Segoe UI","Tahoma","Calibri","Verdana",sans-serif;
+    color: #999;
+    box-sizing: border-box;
+}
+
+.notif-mainContainer.topRight{
+    top: 8px;
+    right: 8px;
+}
+
+.notif-inner {
+    display: flex;
+    flex-direction: column;
+}
+
+.vanilla-yo-notification{
+    width: 250px;
+    background: #58a758;
+    color: white;
+    position: relative;
+    cursor: pointer;
+    padding: 8px;
+    margin-bottom: 12px;
+    display: flex;
+}
+
+
+.notification_header{
+	font-size: 15px;
+    font-weight: bold
+}

src/vanilla.yo.notification.ts

@@ -0,0 +1,76 @@
+// Import stylesheets
+import './styles/style.css';
+import { Config } from './config.interface';
+
+export default class VanillaYoNotification {
+
+    private notificationTemplate: string;
+    private defaultConfig: Config;
+    private notifInner: any;
+
+    constructor() {
+        this.defaultConfig = {
+            content: '',
+            footer: '',
+            timeout: 3000,
+            title: ''
+        }
+        this.init();
+    }
+
+    private init() {
+
+        this.buildContainers();
+        
+        
+    }
+
+    buildContainers(){
+        let container = document.createElement('div');
+        container.className = "notif-mainContainer topRight";
+
+        this.notifInner = document.createElement('div');
+        this.notifInner.className = "notif-inner";
+
+        container.appendChild(this.notifInner);
+        document.body.appendChild(container);   
+    }
+
+
+    show(config: Config) {
+
+        let notifContainer = document.createElement('div');
+        notifContainer.className = "vanilla-yo-notification";
+
+
+        this.notificationTemplate = `
+        <div class="notification_container">
+            <div class="notification_header">
+            ${config.title ? config.title : this.defaultConfig.title}
+            </div>
+            <div class="notification_body">
+            ${config.content ? config.content : this.defaultConfig.content}
+            </div>
+            <div class="notification_footer">
+            ${config.footer ? config.footer : this.defaultConfig.footer}
+            </div>
+        </div>
+        `;
+
+        notifContainer.innerHTML = (this.notificationTemplate);
+
+        this.notifInner.appendChild(notifContainer);
+
+
+        setTimeout(() => {
+            this.destroyNotification(notifContainer);
+        }, (config.timeout ? config.timeout : this.defaultConfig.timeout));
+
+        
+    }
+
+    private destroyNotification(container: Node) {
+        this.notifInner.removeChild(container);
+    }
+}
+

src/vendor.ts

@@ -0,0 +1,4 @@
+// Application Dependencies
+
+import 'lodash';
+

tests/unit/spec-bundle.js

@@ -0,0 +1,9 @@
+Error.stackTraceLimit = Infinity;
+
+var testContext = require.context('./../../src', true, /\.spec\.ts/);
+
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+var modules = requireAll(testContext);

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

tslint.json

@@ -0,0 +1,30 @@
+{
+  "rules": {
+        "class-name": true,
+        "comment-format": [true, "check-space"],
+        "indent": [true, "spaces"],
+        "no-duplicate-variable": true,
+        "no-eval": true,
+        "no-internal-module": true,
+        "no-trailing-whitespace": true,
+        "no-var-keyword": true,
+        "one-line": [true, "check-open-brace", "check-whitespace"],
+        "semicolon": false,
+        "triple-equals": [true, "allow-null-check"],
+        "typedef-whitespace": [true, {
+            "call-signature": "nospace",
+            "index-signature": "nospace",
+            "parameter": "nospace",
+            "property-declaration": "nospace",
+            "variable-declaration": "nospace"
+        }],
+        "variable-name": [true, "ban-keywords"],
+        "whitespace": [true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ]
+    }
+}

typings.json

@@ -0,0 +1,7 @@
+{
+  "globalDependencies": {
+  },
+  "dependencies": {
+    "lodash": "registry:npm/lodash#4.0.0+20160723033700"
+  }
+}

webpack.config.js

@@ -0,0 +1,66 @@
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const DashboardPlugin = require("webpack-dashboard/plugin");
+const nodeEnv = process.env.NODE_ENV || "development";
+const isProd = nodeEnv === "production";
+
+var config = {
+  devtool: isProd ? "hidden-source-map" : "source-map",
+  context: path.resolve("./src"),
+  entry: {
+    app: "./index.ts"
+  },
+  output: {
+    path: path.resolve("./dist"),
+    filename: "vanilla-yo-notification.js",
+    sourceMapFilename: "vanilla-yo-notification.js.map",
+    devtoolModuleFilenameTemplate: function (info) {
+        return "file:///" + info.absoluteResourcePath;
+    }
+  },
+  module: {
+    rules: [
+      {
+        enforce: "pre",
+        test: /\.ts?$/,
+        exclude: ["node_modules"],
+        use: ["awesome-typescript-loader", "source-map-loader"]
+      },     
+      { test: /\.css$/, loaders: ["style-loader", "css-loader"] }
+    ]
+  },
+  resolve: {
+    extensions: [".ts", ".js"]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env": {
+        // eslint-disable-line quote-props
+        NODE_ENV: JSON.stringify(nodeEnv)
+      }
+    }), 
+    new webpack.optimize.UglifyJsPlugin({
+      compress: { warnings: false },
+      output: { comments: false },
+      sourceMap: true
+    }),
+    new DashboardPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        tslint: {
+          emitErrors: true,
+          failOnHint: true
+        }
+      }
+    })
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, "dist/"),
+    compress: true,
+    port: 3000,
+    hot: true
+  }
+};
+
+module.exports = config;