From fb435d91fbf115af96bd1fc580b40eee53c87e9b Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Fri, 13 May 2016 17:49:28 +0300
Subject: [PATCH] baBackTop component

---
 src/app/pages/pages.component.ts              |  5 +--
 .../baBackTop/baBackTop.component.ts          | 31 +++++++++++++++++++
 .../theme/components/baBackTop/baBackTop.scss | 24 ++++++++++++++
 src/app/theme/components/baBackTop/index.ts   |  1 +
 src/app/theme/components/index.ts             |  1 +
 5 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/app/theme/components/baBackTop/baBackTop.component.ts
 create mode 100644 src/app/theme/components/baBackTop/baBackTop.scss
 create mode 100644 src/app/theme/components/baBackTop/index.ts

diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index becfe537..2a091c1d 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouteConfig} from '@angular/router-deprecated';
 
-import {PageTop, ContentTop, Sidebar} from '../theme/components';
+import {PageTop, ContentTop, Sidebar, BaBackTop} from '../theme/components';
 
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
@@ -13,7 +13,7 @@ import {Forms} from './forms';
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
   styles: [],
-  directives: [PageTop, Sidebar, ContentTop],
+  directives: [PageTop, Sidebar, ContentTop, BaBackTop],
   template: `
     <sidebar></sidebar>
     <page-top></page-top>
@@ -35,6 +35,7 @@ import {Forms} from './forms';
         </ul>
       </div>
     </footer>
+    <ba-back-top position="200"></ba-back-top>
     `
 })
 @RouteConfig([
diff --git a/src/app/theme/components/baBackTop/baBackTop.component.ts b/src/app/theme/components/baBackTop/baBackTop.component.ts
new file mode 100644
index 00000000..84161e5e
--- /dev/null
+++ b/src/app/theme/components/baBackTop/baBackTop.component.ts
@@ -0,0 +1,31 @@
+import {Component, HostListener, Input, ElementRef} from '@angular/core';
+
+@Component({
+  selector: 'ba-back-top',
+  styles: [require('./baBackTop.scss')],
+  template: `
+    <i class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
+  `
+})
+export class BaBackTop {
+
+  @Input() position:number = 400;
+  @Input() showSpeed:number = 500;
+  @Input() moveSpeed:number = 1000;
+
+  constructor (private _elementRef:ElementRef) {
+    this._onWindowScroll();
+  }
+
+  @HostListener('click')
+  _onClick():boolean {
+    $('html, body').animate({scrollTop:this.position}, {duration:this.moveSpeed});
+    return false;
+  }
+
+  @HostListener('window:scroll')
+  _onWindowScroll():void {
+    let el = this._elementRef.nativeElement.querySelector('.ba-back-top');
+    window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed);
+  }
+}
diff --git a/src/app/theme/components/baBackTop/baBackTop.scss b/src/app/theme/components/baBackTop/baBackTop.scss
new file mode 100644
index 00000000..9fbe2b66
--- /dev/null
+++ b/src/app/theme/components/baBackTop/baBackTop.scss
@@ -0,0 +1,24 @@
+@import '../../../theme/sass/conf/conf';
+$height: 52px;
+
+.ba-back-top {
+  position: fixed;
+  width: $height;
+  height: $height;
+  cursor: pointer;
+  z-index: 9999;
+  display: none;
+  text-decoration: none;
+  right: (180px - $height) / 2;
+  bottom: 40px !important;
+  font-size: 45px;
+  text-align: center;
+  opacity: 0.4;
+  color: $primary;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 50%;
+  line-height: 46px;
+  &:hover {
+    opacity: 0.8;
+  }
+}
diff --git a/src/app/theme/components/baBackTop/index.ts b/src/app/theme/components/baBackTop/index.ts
new file mode 100644
index 00000000..a2e03869
--- /dev/null
+++ b/src/app/theme/components/baBackTop/index.ts
@@ -0,0 +1 @@
+export * from './baBackTop.component.ts';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 06e6cae8..793ec218 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -5,3 +5,4 @@ export * from './contentTop';
 export * from './baCard';
 export * from './baAmChart';
 export * from './baChartistChart';
+export * from './baBackTop';