ngbs-alert updates (no jquery, validation) (#62)

* yeoman generator for components (#41) * yeoman generator for components * demo md fixes * fix typo * alert updates - removed jquery/bootstrap javascript dependency - added validation - updated docs, fixed typo
IdanCo · Aug 21, 2017 · ae2813c · ae2813c
1 parent 362b24a
commit ae2813c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/docs/demos/alert/alert-demo.md b/src/docs/demos/alert/alert-demo.md
@@ -1,5 +1,5 @@
 ## ngbs-alert
 
-**alert-type** (*string*, optional) - The alert type, as supplied by bottstrap: "success", "info", "warning", "danger". When no value is supplied the type defaults to "info".
+**alert-type** (*string*, optional) - The alert type, as supplied by Bootstrap: "success", "info", "warning", or "danger". Defaults to `'info'`.
 
-**alert-dismissible** (*boolean*, optional) - Whether or not to show a close button inside the alert. Defaults to false.
+**alert-dismissible** (*boolean*, optional) - Whether or not to show a close button inside the alert. Defaults to `false`.
diff --git a/src/library/alert/alert.component.js b/src/library/alert/alert.component.js
@@ -2,14 +2,30 @@
 import template from './alert.html';
 
 const DEFAULT_ALERT_TYPE = 'info';
+const DEFAULT_ALERT_DISMISSIBLE = false;
 
 class controller {
+  constructor() {
+    this.dismissed = false;
+  }
 
   $onInit() {
-    // Set defaults
-    this.alertType = this.alertType || DEFAULT_ALERT_TYPE;
   }
 
+  $onChanges() {
+    // set defaults
+    this.alertType = this.alertType || DEFAULT_ALERT_TYPE;
+    this.alertDismissible = this.alertDismissible || DEFAULT_ALERT_DISMISSIBLE;
+
+    // (re)validate bindings
+    if (this.alertType && (typeof this.alertType !== 'string' || ['success', 'info', 'warning', 'danger'].includes(this.alertType) === false)) {
+      this.$log.error('invalid ngbsAlert::alertType:', JSON.stringify(this.alertType), 'expecting "success", "info", "warning", or "danger"');
+    }
+
+    if (this.alertDismissible && typeof this.alertDismissible !== 'boolean') {
+      this.$log.error('invalid ngbsAlert::alertDismissible:', JSON.stringify(this.alertDismissible), 'expecting a boolean');
+    }
+  }
 }
 
 // Define and export component

diff --git a/src/library/alert/alert.html b/src/library/alert/alert.html
@@ -1,5 +1,5 @@
-<div class="alert alert-{{ $ctrl.alertType}}" role="alert" ng-class="{'alert-dismissible': $ctrl.alertDismissible}">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-if="$ctrl.alertDismissible">
+<div class="alert alert-{{ $ctrl.alertType}}" role="alert" ng-class="{'alert-dismissible': $ctrl.alertDismissible}" ng-if="$ctrl.dismissed !== true">
+    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.dismissed = true" ng-if="$ctrl.alertDismissible">
         <span aria-hidden="true">&times;</span>
     </button>
     <ng-transclude></ng-transclude>