[Library | Trunk]: FP Slider: Add navigation menu on the left

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58944 d315682c-612b-4755-9ff5-7f18f6832af3

sharedComponents/navigationBar.component.html

@@ -135,7 +135,7 @@
      </div>
       <div class="uk-container uk-container-expand">
          <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
-            <div class="uk-navbar-left  uk-visible@l  ">
+            <div *ngIf="showLogo" class="uk-navbar-left  uk-visible@l  ">
                <a *ngIf="!community" routerLinkActive="uk-link" routerLink="/"  class="uk-logo uk-navbar-item">
                  <img  src="{{logoPath}}logo-large-{{portal}}.png" alt="OpenAIRE" class="uk-responsive-height">
                </a>
@@ -158,7 +158,7 @@
                               [searchRoute]="searchRoute" [properties]="properties" [communityId]="communityId"></search-bar>
               </div>
             </div>
-            <div class="uk-navbar-left  uk-visible@m uk-hidden@l ">
+            <div *ngIf="showLogo" class="uk-navbar-left  uk-visible@m uk-hidden@l ">
                <a  *ngIf="!community" routerLinkActive="uk-link" routerLink="/"  class="uk-logo uk-navbar-item">
                  <img   src="{{logoPath}}logo-small-{{portal}}.png" alt="OpenAIRE" class="uk-responsive-height">
                </a>

sharedComponents/navigationBar.component.ts

@@ -27,6 +27,7 @@ export class NavigationBarComponent {
   @Input() enableSearch: boolean = false;
   @Input() searchRoute: string = "/search/find";
   @Input() searchPlaceHolder: string = "Search for research results";
+  @Input() showLogo: boolean = true;
   keyword: string = "";
 
   logosrc: string = "";

utils/full-page-slider/animation.ts

@@ -5,6 +5,6 @@ export const animation = trigger('state', [
     transform: 'translate(-50%, {{y}}%)'
   }), {params: {y: -50}}),
   transition('* => *', [
-    animate('1s')
+    animate('{{time}}s')
-  ])
+  ], {params: {time: 0.5}})
 ]);

utils/full-page-slider/full-page-slider.component.css

@@ -2,7 +2,85 @@ section {
   position: fixed;
   top:10%;
   left: 0;
-  height: 90%;
+  height: calc(100% - 100px);
   width: 100%;
   overflow: hidden;
 }
+
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 120px;
+  border-right: 1px solid #4687E6;
+  background-color: white;
+  z-index: 1;
+}
+
+.menu .logo {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu line {
+  stroke: var(--portal-main-color);
+}
+
+.menu a.previous {
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--portal-main-color);
+}
+
+.menu a.next {
+  position: absolute;
+  top: 75%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--portal-main-color);
+}
+
+.menu nav  {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu nav > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.menu nav > ul > li {
+  border-radius: 100%;
+  padding: 8px;
+  border: 1px solid white;
+  margin-bottom: 15px;
+}
+
+.menu nav > ul > li > a {
+  display: block;
+  border-radius: 100%;
+  width: 16px;
+  height: 16px;
+  background-color: rgba(233, 84, 32, 0.4);
+}
+
+.menu nav > ul > li.uk-active {
+  border: 1px solid #E95420;
+  transition: border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+  -webkit-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+  -moz-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+  -o-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+}
+
+.menu nav > ul > li.uk-active > a {
+  background-color: #E95420;
+}

utils/full-page-slider/full-page-slider.component.ts

@@ -4,8 +4,29 @@ import {SlideComponent} from "./slide.component";
 @Component({
   selector: 'fp-slider',
   template: `
+    <div class="menu">
+      <img class="logo" *ngIf="logoURL" [src]="logoURL">
+      <a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">
+        <span class="uk-icon uk-preserve">
+          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="arrow-up">
+            <polygon points="10.5,4 15.37,9.4 14.63,10.08 10.5,5.49 6.37,10.08 5.63,9.4"></polygon>
+            <line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5"></line>
+          </svg>
+        </span>
+      </a>
+      <nav>
+        <ul>
+          <li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (state - 1)">
+            <a (click)="onClick(i + 1)"></a>
+          </li>
+        </ul>
+      </nav>
+      <a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">
+        <span uk-icon="arrow-down"></span>
+      </a>
+    </div>
     <section (wheel)="onWheel($event)">
-      <ng-content></ng-content>
+        <ng-content></ng-content>
     </section>`,
   styleUrls: ['full-page-slider.component.css']
 })
@@ -14,6 +35,8 @@ export class FullPageSliderComponent implements AfterContentInit {
   @ContentChildren(SlideComponent) slides: QueryList<SlideComponent>;
   @Input()
   public initSlide = 1;
+  @Input()
+  public logoURL;
   public animate: boolean = false;
   public state = 0;
   
@@ -37,16 +60,27 @@ export class FullPageSliderComponent implements AfterContentInit {
         this.setSlides(this.state);
         setTimeout(() => {
           this.animate = false;
-        }, 1000);
+        }, 500);
       } else if (event.deltaY < 0 && (this.state !== 1)) {
         this.state--;
         this.setSlides(this.state);
         setTimeout(() => {
           this.animate = false;
-        }, 1000);
+        }, 500);
       } else {
         this.animate = false;
       }
     }
   }
+  
+  public onClick(index: number) {
+    if (!this.animate) {
+      this.animate = true;
+      this.state = index;
+      this.setSlides(this.state);
+      setTimeout(() => {
+        this.animate = false;
+      }, 500);
+    }
+  }
 }