feat(*): add transitions on show/hide notification

MarcScheib · May 29, 2016 · 97438d6 · 97438d6
1 parent 364483c
commit 97438d6
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 5 deletions.
diff --git a/build/paths.js b/build/paths.js
@@ -8,8 +8,7 @@ module.exports = {
   root: appRoot,
   source: appRoot + '**/*.js',
   html: appRoot + '**/*.html',
-  style: 'styles/**/*.css',
-  less: appRoot + 'styles/**/*.less',
+  style: appRoot + '**/*.css',
   output: 'dist/',
   sample: 'sample',
   doc:'./doc',

diff --git a/build/tasks/build.js b/build/tasks/build.js
@@ -114,11 +114,25 @@ gulp.task('remove-dts-folder', function () {
     .pipe(vinylPaths(del));
 });
 
+gulp.task('build-css', function () {
+  var amdCSS = gulp.src(paths.style)
+    .pipe(gulp.dest(paths.output+"amd"));
+
+  var sysCSS = gulp.src(paths.style)
+    .pipe(gulp.dest(paths.output+"system"));
+
+  var commonCSS = gulp.src(paths.style)
+    .pipe(gulp.dest(paths.output+"commonjs"));
+
+  var es2015CSS = gulp.src(paths.style)
+    .pipe(gulp.dest(paths.output+"es2015"));
+});
+
 gulp.task('build', function (callback) {
   return runSequence(
     'clean',
     'build-index',
-    ['build-es2015-temp', 'build-commonjs', 'build-amd', 'build-system', 'build-es2015'],
+    ['build-es2015-temp', 'build-commonjs', 'build-amd', 'build-system', 'build-es2015', 'build-css'],
     'build-dts',
     callback
   );

diff --git a/src/bs-notification.html b/src/bs-notification.html
@@ -1,4 +1,6 @@
 <template>
+  <require from="./style.css"></require>
+
   <div class="alert alert-${level}" role="alert">
     ${notification}
     <div class="pull-right">

diff --git a/src/notification-renderer.js b/src/notification-renderer.js
@@ -10,6 +10,29 @@ export let globalSettings = {
   limit: 5
 };
 
+let transitionEvent = (function() {
+  let transition = null;
+
+  return function() {
+    if (transition) return transition;
+
+    let t;
+    let el = document.createElement('fakeelement');
+    let transitions = {
+      'transition': 'transitionend',
+      'OTransition': 'oTransitionEnd',
+      'MozTransition': 'transitionend',
+      'WebkitTransition': 'webkitTransitionEnd'
+    };
+    for (t in transitions) {
+      if (el.style[t] !== undefined) {
+        transition = transitions[t];
+        return transition;
+      }
+    }
+  };
+}());
+
 export class NotificationRenderer {
   defaultSettings = globalSettings;
 
@@ -44,7 +67,20 @@ export class NotificationRenderer {
         notificationController.timer = setTimeout(notificationController.close.bind(notificationController), settings.timeout);
       }
 
-      return Promise.resolve();
+      return new Promise((resolve) => {
+        function onTransitionEnd(e) {
+          if (e.target !== notificationHost) {
+            return;
+          }
+          notificationHost.removeEventListener(transitionEvent(), onTransitionEnd);
+          resolve();
+        }
+
+        notificationHost.addEventListener(transitionEvent(), onTransitionEnd);
+        setTimeout(() => {
+          notificationHost.classList.add('notification-host-active');
+        }, 0);
+      });
     };
 
     notificationController.hideNotification = () => {
@@ -53,7 +89,15 @@ export class NotificationRenderer {
         this.notificationControllers.splice(i, 1);
       }
 
-      return Promise.resolve();
+      return new Promise((resolve) => {
+        function onTransitionEnd() {
+          notificationHost.removeEventListener(transitionEvent(), onTransitionEnd);
+          resolve();
+        }
+
+        notificationHost.addEventListener(transitionEvent(), onTransitionEnd);
+        notificationHost.classList.remove('notification-host-active');
+      });
     };
 
     notificationController.destroyNotificationHost = () => {

diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,9 @@
+notification-host {
+  display: block;
+  transition: opacity .2s linear;
+  opacity: 0;
+}
+
+.notification-host-active {
+  opacity: 1;
+}