MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
k.triantafyllou 2020-06-16 19:59:51 +00:00
parent a5e0a64938
commit b4e5d797a5
5 changed files with 121 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sharedComponents/navigationBar.component.html
View File

@ -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>

1
sharedComponents/navigationBar.component.ts
View File

@ -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 = "";

4
utils/full-page-slider/animation.ts
View File

@ -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}})
]);

80
utils/full-page-slider/full-page-slider.component.css
View File

@ -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;
}

40
utils/full-page-slider/full-page-slider.component.ts
View File

@ -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);
}
}
}