[Graph | Trunk]: Add action point animation

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-graph-portal/trunk@59549 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/about/about.component.html

@@ -74,41 +74,35 @@
         <img [src]="'assets/graph-assets/about/architecture/'+architectureImage"
              class="uk-width-4-5 architecture-image">
 
-        <a class="uk-position-absolute uk-transform-center" style="left: 27%; top: 48%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 27%; top: 48%"
            (click)="goTo('tabs_card'); changeTab(0)"
            (mouseenter)="architectureImage = 'aggregation_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'aggregation_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'aggregation_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point aggregation">
         </a>
-        <a class="uk-position-absolute uk-transform-center" style="left: 47%; top: 48%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 47%; top: 48%"
            (click)="goTo('tabs_card'); changeTab(1)"
            (mouseenter)="architectureImage = 'deduplication_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'deduplication_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'deduplication_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point deduplication">
         </a>
-        <a class="uk-position-absolute uk-transform-center" style="left: 58%; top: 48%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 58%; top: 48%"
            (click)="goTo('tabs_card'); changeTab(2)"
            (mouseenter)="architectureImage = 'enrichment_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'enrichment_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'enrichment_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point enrichment">
         </a>
-        <a class="uk-position-absolute uk-transform-center" style="left: 70%; top: 48%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 70%; top: 48%"
            (click)="goTo('tabs_card'); changeTab(3)"
            (mouseenter)="architectureImage = 'post_cleaning_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'post_cleaning_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'post_cleaning_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point post cleaning">
         </a>
-        <a class="uk-position-absolute uk-transform-center" style="left: 76%; top: 32%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 76%; top: 32%"
            (click)="goTo('tabs_card'); changeTab(4)"
            (mouseenter)="architectureImage = 'indexing_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'indexing_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'indexing_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point indexing">
         </a>
-        <a class="uk-position-absolute uk-transform-center" style="left: 76%; top: 72%"
+        <a class="uk-position-absolute uk-transform-center uk-padding" style="left: 76%; top: 72%"
            (click)="goTo('tabs_card'); changeTab(5)"
            (mouseenter)="architectureImage = 'stats_analysis_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
-          <img [class]="(architectureImage == 'stats_analysis_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
+          <action-point [class.uk-invisible]="architectureImage == 'stats_analysis_hover.png'"></action-point>
-               src="assets/graph-assets/about/architecture/marker.gif" alt="action point stats analysis">
         </a>
       </div>
       <div id="tabs_card"

src/app/about/about.module.ts

@@ -4,6 +4,7 @@ import {RouterModule} from "@angular/router";
 
 import {AboutComponent} from "./about.component";
 import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+import {ActionPointComponent} from "./action-point.component";
 
 @NgModule({
   imports: [
@@ -13,7 +14,7 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
     }]),
     BreadcrumbsModule
   ],
-  declarations: [AboutComponent],
+  declarations: [AboutComponent, ActionPointComponent],
   exports: [AboutComponent]
 })
 export class AboutModule {

src/app/about/action-point.component.ts

@@ -0,0 +1,51 @@
+import {AfterViewInit, Component} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: 'action-point',
+  template: `
+    <div class="uk-position-relative" style="width: 15px; height: 15px;">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+          <circle cx="7.5" cy="7.5" r="7.5" fill="#ee2540"/>
+        </svg>
+      </div>
+      <div class="uk-position-top-left" [@move]="state" (@move.done)="onEnd($event)">
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+          <circle cx="7.4" cy="6.6" r="5" stroke="#ee2540" stroke-width="2.5" fill="none" />
+        </svg>
+      </div>
+    </div>
+  `,
+  animations: [
+    trigger('move', [
+      state('in', style({
+        transform: 'scale(1)',
+        opacity: 1
+      })),
+      state('out', style({
+        transform: 'scale(3)',
+        opacity: 0
+      })),
+      transition('in => out', animate('2s ease-out'))
+    ]),
+  ]
+})
+export class ActionPointComponent implements AfterViewInit {
+  state = 'in';
+  
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.state = 'out';
+    }, 0);
+  }
+  
+  onEnd(event) {
+    this.state = 'in';
+    if (event.toState === 'in') {
+      setTimeout(() => {
+        this.state = 'out';
+      }, 2000);
+    }
+  }
+}