Compare commits
2 Commits
ebeea5e752
...
695751627a
Author | SHA1 | Date | |
---|---|---|---|
|
695751627a | ||
|
6ae592447a |
@ -1,9 +1,13 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
import { SlideComponent } from './slide/slide.component';
|
import { SlideComponent } from './slide/slide.component';
|
||||||
|
import { InitComponent} from './init/init.component';
|
||||||
|
|
||||||
|
|
||||||
const routes: Routes = [];
|
const routes: Routes = [
|
||||||
|
{ path: ':name', component: SlideComponent },
|
||||||
|
{ path: '', component: InitComponent }
|
||||||
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot(routes)],
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
<app-navigation></app-navigation>
|
<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet #o="outlet"></router-outlet>
|
||||||
<app-slide></app-slide>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <router-outlet></router-outlet> -->
|
||||||
|
<!-- <app-slide></app-slide> -->
|
||||||
|
@ -1,10 +1,30 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
import {
|
||||||
|
transition,
|
||||||
|
trigger,
|
||||||
|
query,
|
||||||
|
style,
|
||||||
|
animate,
|
||||||
|
group,
|
||||||
|
animateChild
|
||||||
|
} from '@angular/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.scss']
|
styleUrls: ['./app.component.scss'],
|
||||||
})
|
animations: [
|
||||||
|
trigger('myAnimation', [
|
||||||
|
transition('* <=> *', [
|
||||||
|
query (':enter', [style({opacity:0})], {optional:true}),
|
||||||
|
query(':leave',[style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],{ optional: true }),
|
||||||
|
query(':enter',[style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],{ optional: true })
|
||||||
|
])
|
||||||
|
])
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = 'beire-frontend';
|
title = 'beire-frontend';
|
||||||
}
|
}
|
||||||
|
@ -1,22 +1,30 @@
|
|||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { SlideComponent } from './slide/slide.component';
|
import { SlideComponent } from './slide/slide.component';
|
||||||
import { NavigationComponent } from './navigation/navigation.component';
|
|
||||||
|
import { ClientService } from './client.service';
|
||||||
|
import { InitComponent } from './init/init.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
SlideComponent,
|
SlideComponent,
|
||||||
NavigationComponent
|
InitComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule
|
BrowserAnimationsModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
HttpClientModule
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
ClientService
|
||||||
],
|
],
|
||||||
providers: [],
|
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
16
src/app/client.service.spec.ts
Normal file
16
src/app/client.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ClientService } from './client.service';
|
||||||
|
|
||||||
|
describe('ClientService', () => {
|
||||||
|
let service: ClientService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(ClientService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
31
src/app/client.service.ts
Normal file
31
src/app/client.service.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient,HttpResponse } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import {environment} from '../environments/environment';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class ClientService {
|
||||||
|
|
||||||
|
apiUrl:string
|
||||||
|
|
||||||
|
constructor(private http: HttpClient) {
|
||||||
|
this.apiUrl = environment.uriAPI
|
||||||
|
}
|
||||||
|
|
||||||
|
getItems(query:any=""): Observable<any> {
|
||||||
|
return this.http.get<any>(
|
||||||
|
this.apiUrl+'/items/index.json',{
|
||||||
|
params:query
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
getItem(name:string) : Observable<any> {
|
||||||
|
return this.http.get<any>(
|
||||||
|
this.apiUrl+'/items/'+name+'/index.json', {}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
5
src/app/init/init.component.html
Normal file
5
src/app/init/init.component.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div class="slide">
|
||||||
|
<div class="element">
|
||||||
|
<div class="round-button" title="Pulsa para iniciar" routerLink="home"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
36
src/app/init/init.component.scss
Normal file
36
src/app/init/init.component.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
div.slide {
|
||||||
|
color:#fff;
|
||||||
|
width:100vw;
|
||||||
|
height:100vh;
|
||||||
|
background-size:cover;
|
||||||
|
background-color:#f90;
|
||||||
|
background-blend-mode: luminosity;
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
overflow:hidden;
|
||||||
|
cursor:crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.element {
|
||||||
|
width:50vw;
|
||||||
|
margin:auto;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.round-button {
|
||||||
|
cursor:pointer;
|
||||||
|
margin:auto;
|
||||||
|
font-size:2em;
|
||||||
|
border:5px solid #fff;
|
||||||
|
color:#fff;
|
||||||
|
border-radius:100%;
|
||||||
|
width:10vw;
|
||||||
|
height:10vw;
|
||||||
|
transition:1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.round-button:hover {
|
||||||
|
background:#fff;
|
||||||
|
}
|
@ -1,20 +1,20 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { NavigationComponent } from './navigation.component';
|
import { InitComponent } from './init.component';
|
||||||
|
|
||||||
describe('NavigationComponent', () => {
|
describe('InitComponent', () => {
|
||||||
let component: NavigationComponent;
|
let component: InitComponent;
|
||||||
let fixture: ComponentFixture<NavigationComponent>;
|
let fixture: ComponentFixture<InitComponent>;
|
||||||
|
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
await TestBed.configureTestingModule({
|
await TestBed.configureTestingModule({
|
||||||
declarations: [ NavigationComponent ]
|
declarations: [ InitComponent ]
|
||||||
})
|
})
|
||||||
.compileComponents();
|
.compileComponents();
|
||||||
});
|
});
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
fixture = TestBed.createComponent(NavigationComponent);
|
fixture = TestBed.createComponent(InitComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
15
src/app/init/init.component.ts
Normal file
15
src/app/init/init.component.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-init',
|
||||||
|
templateUrl: './init.component.html',
|
||||||
|
styleUrls: ['./init.component.scss']
|
||||||
|
})
|
||||||
|
export class InitComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -1,6 +0,0 @@
|
|||||||
<div class="controls">
|
|
||||||
<div class="left control"><div class="arrow"><img src="/assets/img/left.svg"/></div></div>
|
|
||||||
<div class="right control"><div class="arrow"><img src="/assets/img/right.svg"/></div></div>
|
|
||||||
<div class="top control"><div class="arrow"><img src="/assets/img/top.svg"/></div></div>
|
|
||||||
<div class="bottom control"><div class="arrow"><img src="/assets/img/down.svg"/></div></div>
|
|
||||||
</div>
|
|
@ -1,9 +0,0 @@
|
|||||||
div.controls{
|
|
||||||
div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
|
|
||||||
div.left { top:0;left:0;height:100vh; }
|
|
||||||
div.right { top:0;right:0;height:100vh; }
|
|
||||||
div.top { top:0;left:0;width:100vw; }
|
|
||||||
div.bottom { bottom:0;left:0;width:100vw; }
|
|
||||||
}
|
|
||||||
|
|
||||||
div.arrow { cursor:crosshair;}
|
|
@ -1,15 +0,0 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-navigation',
|
|
||||||
templateUrl: './navigation.component.html',
|
|
||||||
styleUrls: ['./navigation.component.scss']
|
|
||||||
})
|
|
||||||
export class NavigationComponent implements OnInit {
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -1,7 +1,14 @@
|
|||||||
<div class="slide" (mouseenter)="onKeydown($event)" (click)="onKeydown($event)">
|
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="element big-title">Beire</div>
|
<div class="element big-title" [innerHTML]="slide.title"></div>
|
||||||
<div class="element second-title">Mar de tierra</div>
|
<div class="element second-title" [innerHTML]="slide.content"></div>
|
||||||
<div class="element logo"><img style="padding-top:30px;max-width:100px;" src="/assets/img/landarte_logo.png"/></div>
|
<div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="controls" *ngIf="slide">
|
||||||
|
<div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
|
||||||
|
<div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
|
||||||
|
<div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
|
||||||
|
<div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
|
||||||
|
</div>
|
||||||
|
@ -2,7 +2,6 @@ div.slide {
|
|||||||
color:#fff;
|
color:#fff;
|
||||||
width:100vw;
|
width:100vw;
|
||||||
height:100vh;
|
height:100vh;
|
||||||
background-image:url("/assets/img/output.gif");
|
|
||||||
background-size:cover;
|
background-size:cover;
|
||||||
background-color:#f90;
|
background-color:#f90;
|
||||||
background-blend-mode: luminosity;
|
background-blend-mode: luminosity;
|
||||||
@ -10,6 +9,7 @@ div.slide {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow:crosshair;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.element {
|
div.element {
|
||||||
@ -28,3 +28,21 @@ div.second-title {
|
|||||||
font-size:3rem;
|
font-size:3rem;
|
||||||
font-family:"Reenie Beanie",serif;
|
font-family:"Reenie Beanie",serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* controls */
|
||||||
|
div.controls{
|
||||||
|
div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
|
||||||
|
div.left { top:0;left:0;height:100vh; }
|
||||||
|
div.right { top:0;right:0;height:100vh; }
|
||||||
|
div.top { top:0;left:0;width:100vw; }
|
||||||
|
div.bottom { bottom:0;left:0;width:100vw; }
|
||||||
|
}
|
||||||
|
|
||||||
|
div.arrow {
|
||||||
|
cursor:pointer;
|
||||||
|
min-width:75px;
|
||||||
|
min-height:75px;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@ -1,4 +1,11 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ClientService } from '../client.service';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import {environment} from '../../environments/environment';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-slide',
|
selector: 'app-slide',
|
||||||
@ -7,13 +14,58 @@ import { Component, OnInit } from '@angular/core';
|
|||||||
})
|
})
|
||||||
export class SlideComponent implements OnInit {
|
export class SlideComponent implements OnInit {
|
||||||
|
|
||||||
constructor() { }
|
slide: any;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private clientService:ClientService,
|
||||||
|
private route: ActivatedRoute,
|
||||||
|
private router: Router,
|
||||||
|
) {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
document.addEventListener('keydown', (e) => { this.onKeydown(e) });
|
||||||
|
//document.addEventListener('keydown', (e) => { console.log(e)})
|
||||||
|
|
||||||
|
this.route.params.subscribe(
|
||||||
|
params => {
|
||||||
|
if (params.name) {
|
||||||
|
this.clientService.getItem(params.name).subscribe(
|
||||||
|
(r) => { this.slide = r.data;}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onKeydown(event) {
|
getFeaturedImage(): string {
|
||||||
console.log(event)
|
return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onKeydown(e) {
|
||||||
|
//e.code
|
||||||
|
//ArrowLeft
|
||||||
|
//ArrowRight
|
||||||
|
//ArrowUp
|
||||||
|
//ArrowDown
|
||||||
|
console.log(e)
|
||||||
|
switch (e.code) {
|
||||||
|
case "ArrowLeft" :
|
||||||
|
this.left(e);
|
||||||
|
break;
|
||||||
|
case "ArrowRight" :
|
||||||
|
this.right(e);
|
||||||
|
break;
|
||||||
|
case "ArrowUp" :
|
||||||
|
this.up(e); break;
|
||||||
|
case "ArrowDown" :
|
||||||
|
this.down(e); break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
left(e) { this.router.navigate(['/', this.slide.o]);}
|
||||||
|
right(e) { this.router.navigate(['/', this.slide.e]); }
|
||||||
|
up(e) { this.router.navigate(['/', this.slide.n]); }
|
||||||
|
down(e) { this.router.navigate(['/', this.slide.s]); }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,8 @@
|
|||||||
// The list of file replacements can be found in `angular.json`.
|
// The list of file replacements can be found in `angular.json`.
|
||||||
|
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: false
|
production: false,
|
||||||
|
uriAPI: "https://public.audio-lab.org/beireapi/"
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
Loading…
Reference in New Issue
Block a user