New: Alert component

.gitignore

@@ -1,12 +1,16 @@
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+npm-debug.log
 
 # type script artifacts
 typings
 
 # WebStorm
 .idea
 
-# build
+# ignore build and dist for now
 build
+dist
+src/**/*.js
+src/**/*.js.map

LICENSE

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2015 Valor Software
+Copyright (c) 2015 Dmitriy Shekhovtsov<[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,2 +1,17 @@
 # angular2-bootstrap
 Native Angular2 directives for Bootstrap
+
+## Jump on board! :)
+
+```bash
+  npm i
+  npm start
+```
+
+### TODO
+- [ ] find a better way to detect is event handler is set (see alerts.ts)
+- [ ] support `templateUrl` for directives
+- [ ] demo page
+- [ ] docs
+- [ ] support animation
+- [ ] publish to npm, bower, etc.

gulp-tasks/lint.js

@@ -0,0 +1,25 @@
+var gulp = require('gulp');
+var esLint = require('gulp-eslint');
+var tslint = require('gulp-tslint');
+var size = require('gulp-size');
+
+var paths = gulp.paths;
+
+gulp.task('eslint', function() {
+  return gulp.src(paths.jssrc)
+    .pipe(esLint({useEslintrc: true}))
+    .pipe(esLint.format())
+    .pipe(esLint.failOnError());
+});
+
+gulp.task('tslint', function() {
+  return gulp.src(paths.tssrc)
+    .pipe(size({showFiles: true}))
+    .pipe(tslint())
+    .pipe(tslint.report('verbose', {
+      emitError: true,
+      reportLimit: 0
+    }));
+});
+
+gulp.task('lint', ['tslint', 'eslint']);

gulpfile.js

@@ -1,7 +1,15 @@
 var gulp = require('gulp');
 
 gulp.paths = {
-  src: ['**/*.{js,ts}', '!node_modules/**/*', '!**/*.{ts,coffee}.js']
+  tssrc: [
+    'src/**/*.ts',
+    '!node_modules',
+    '!**/*.{ts,coffee}.js'],
+  jssrc: [
+    '*.js',
+    'gulp-tasks/*.js',
+    '!node_modules',
+    '!**/*.{ts,coffee}.js']
 };
 
 require('require-dir')('./gulp-tasks');

package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "postinstall": "tsd reinstall --overwrite",
     "prestart": "npm install",
-    "server": "webpack-dev-server --inline --colors --display-error-details --display-cached --port 8080",
+    "server": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
     "start": "npm run server",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "gulp lint"
   },
   "repository": {
     "type": "git",
@@ -29,11 +29,14 @@
   "dependencies": {},
   "devDependencies": {
     "angular2": "^2.0.0-alpha.34",
+    "awesome-typescript-loader": "^0.11.3",
     "babel-eslint": "^4.0.5",
     "bootstrap": "^3.3.5",
     "eslint": "^1.1.0",
     "gulp": "^3.9.0",
     "gulp-eslint": "^1.0.0",
+    "gulp-tslint": "^3.1.2",
+    "pre-commit": "^1.1.1",
     "reflect-metadata": "^0.1.0",
     "require-dir": "^0.3.0",
     "rtts_assert": "^2.0.0-alpha.34",

src/components/alert/alert.ts

@@ -0,0 +1,61 @@
+/// <reference path="../../../typings/tsd.d.ts" />
+
+import {
+  Component, View,
+  LifecycleEvent, EventEmitter,
+  ElementRef, ViewContainerRef,
+  NgIf, CSSClass
+} from 'angular2/angular2';
+
+// TODO: templateUrl
+@Component({
+  selector: 'alert',
+  properties: ['type', 'dismissOnTimeout: dismiss-on-timeout'],
+  events: ['close'],
+  lifecycle: [LifecycleEvent.onInit]
+})
+@View({
+  template: `
+  <div class="alert" role="alert" [class]="classes" *ng-if="!closed">
+    <button *ng-if="closeable" type="button" class="close" (^click)="onClose($event)">
+      <span aria-hidden="true">&times;</span>
+      <span class="sr-only">Close</span>
+    </button>
+    <ng-content></ng-content>
+  </div>
+  `,
+  directives: [NgIf, CSSClass]
+})
+export class AlertComponent {
+  type:string;
+  close:EventEmitter;
+  templateUrl:string;
+  dismissOnTimeout:number;
+  private closed:boolean;
+  private closeable:boolean;
+  private classes:Array<string> = [];
+
+  constructor(public el:ElementRef) {
+    this.close = new EventEmitter();
+    this.closeable = el.nativeElement.getAttribute('(close)');
+  }
+
+  onInit() {
+    this.type = this.type || 'warning';
+    this.classes[0] = 'alert-' + (this.type || 'warning');
+    if (this.closeable) {
+      this.classes[1] = 'alert-dismissible';
+    }
+
+    if (this.dismissOnTimeout) {
+      let close = this.onClose.bind(this);
+      setTimeout(close, this.dismissOnTimeout);
+    }
+  }
+
+  // todo: mouse event + touch + pointer
+  onClose($event:any) {
+    this.close.next($event);
+    this.closed = true;
+  }
+}

src/public/index.html

@@ -12,19 +12,15 @@
 
   <!--link to bootstrap.css-->
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
-  <!--
-    Angular 2
-    traceur-runtime: is only needed for ES6 browser polyfill
-    this is not the full traceur only the polyfills
-  -->
-  <!--<script src="/lib/traceur-runtime.min.js"></script>-->
+
 </head>
 <body>
-
-<app>
-  Loading...
-</app>
-
+<div class="container">
+  <h2>Alerts demo</h2>
+  <app>
+    Loading...
+  </app>
+</div>
 <!-- Commmon files to be cached -->
 <script src="/build/common.js"></script>
 <!-- Angular2 files -->

src/public/index.ts

@@ -2,22 +2,38 @@
 
 import {Component, View, bootstrap, coreDirectives} from 'angular2/angular2';
 
+import {AlertComponent} from 'src/components/alert/alert';
+
 @Component({
   selector: 'app'
 })
 @View({
-  template: `<span *ng-if="name">Hello, {{name}}!</span>
-
-
+  template: `
+    <span *ng-if="name">Hello, {{name}}!</span>
+    <alert [dismiss-on-timeout]="3000">This alert will dismiss in 3s</alert>
+    <alert *ng-for="#alert of alerts;#i = index" [type]="alert.type" (close)="closeAlert(i)">{{ alert.msg }}</alert>
+    <div >
+    </div>
+    <button type="button" class='btn btn-default' (click)="addAlert()">Add Alert</button>
   `,
-  directives: [coreDirectives]
+  directives: [AlertComponent, coreDirectives]
 })
 export class Hello {
-  name = 'World';
+  alerts:Array<Object>;
+
   constructor() {
-    setTimeout(() => {
-      this.name = 'NEW World'
-    }, 2000);
+    this.alerts = [
+      {type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.'},
+      {type: 'success', msg: 'Well done! You successfully read this important alert message.', closable: true}
+    ];
+  }
+
+  closeAlert(i:number) {
+    this.alerts.splice(i, 1);
+  }
+
+  addAlert() {
+    this.alerts.push({msg: 'Another alert!', closable: true});
   }
 }
 

tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.3",
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
-    "declaration": false,
-    "noImplicitAny": false,
+    "declaration": true,
+    "noImplicitAny": true,
     "removeComments": true,
     "noLib": false,
     "emitDecoratorMetadata": true,
@@ -15,6 +15,11 @@
   },
   "files": [
     "node_modules/typescript/bin/lib.dom.d.ts",
-    "typings/tsd.d.ts"
+    "typings/tsd.d.ts",
+    "src/public/index.ts",
+    "src/components/alert/alert.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

tslint.json

@@ -0,0 +1,56 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [true, "check-space"],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [true, "spaces"],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [true, 140],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-comma": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": false,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "one-line": [true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [true, "single"],
+    "radix": true,
+    "semicolon": true,
+    "sort-object-literal-keys": false,
+    "triple-equals": [true, "allow-null-check"],
+    "variable-name": false,
+    "whitespace": [true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator"
+    ]
+  }
+}