Compare commits
2 Commits
2cb935306d
...
ebe76bec96
| Author | SHA1 | Date | |
|---|---|---|---|
|
ebe76bec96 | ||
|
|
4563f40bfd |
71
package-lock.json
generated
71
package-lock.json
generated
@ -296,6 +296,11 @@
|
||||
"integrity": "sha512-HnekQWq9t3Gl5aBYYi8sGyOWm85M5ub2llMrpQkRY94eJEUhsUr8qYNaeefv22cxxm+D67a+5zIzpl+dpFxdjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/pdfjs-dist": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/pdfjs-dist/-/pdfjs-dist-0.1.1.tgz",
|
||||
"integrity": "sha512-sPKxvP9QTdMAhYQWkT9Yl0VfGzvHkau1Lc5evRHl0kQv1wVcdJz1MrD7yPP4jTS6+D+KB19ho1vFIOwVUezVvw=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "0.0.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
|
||||
@ -391,7 +396,6 @@
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.0.tgz",
|
||||
"integrity": "sha512-VDUX1oSajablmiyFyED9L1DFndg0P9h7p1F+NO8FkIzei6EPrR6Zu1n18rd5P8PqaSRd/FrWv3G1TVBqpM83gA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "2.0.1",
|
||||
"fast-json-stable-stringify": "2.0.0",
|
||||
@ -402,16 +406,14 @@
|
||||
"fast-deep-equal": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
|
||||
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
|
||||
"dev": true
|
||||
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
|
||||
}
|
||||
}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
|
||||
"integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
|
||||
"dev": true
|
||||
"integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo="
|
||||
},
|
||||
"align-text": {
|
||||
"version": "0.1.4",
|
||||
@ -1029,8 +1031,7 @@
|
||||
"big.js": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
|
||||
"integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
|
||||
"dev": true
|
||||
"integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "1.11.0",
|
||||
@ -1189,6 +1190,11 @@
|
||||
"hoek": "2.16.3"
|
||||
}
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
|
||||
"integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -2605,8 +2611,7 @@
|
||||
"emojis-list": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
|
||||
"dev": true
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
|
||||
},
|
||||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
@ -3212,8 +3217,7 @@
|
||||
"fast-json-stable-stringify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
|
||||
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
|
||||
"dev": true
|
||||
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
|
||||
},
|
||||
"fast-levenshtein": {
|
||||
"version": "2.0.6",
|
||||
@ -5471,8 +5475,7 @@
|
||||
"json-schema-traverse": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
|
||||
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
|
||||
"dev": true
|
||||
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
|
||||
},
|
||||
"json-stable-stringify": {
|
||||
"version": "1.0.1",
|
||||
@ -5498,8 +5501,7 @@
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "4.0.0",
|
||||
@ -5787,7 +5789,6 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
|
||||
"integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "3.2.0",
|
||||
"emojis-list": "2.1.0",
|
||||
@ -6485,6 +6486,11 @@
|
||||
"lower-case": "1.1.4"
|
||||
}
|
||||
},
|
||||
"node-ensure": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
|
||||
"integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc="
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
|
||||
@ -7344,6 +7350,15 @@
|
||||
"sha.js": "2.4.11"
|
||||
}
|
||||
},
|
||||
"pdfjs-dist": {
|
||||
"version": "1.10.88",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-1.10.88.tgz",
|
||||
"integrity": "sha1-Aw8Ud/QziiKD2wsR7DSUbF/c0qU=",
|
||||
"requires": {
|
||||
"node-ensure": "0.0.0",
|
||||
"worker-loader": "1.1.1"
|
||||
}
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
|
||||
@ -7790,8 +7805,7 @@
|
||||
"punycode": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
|
||||
},
|
||||
"q": {
|
||||
"version": "1.4.1",
|
||||
@ -8435,7 +8449,6 @@
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
|
||||
"integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "6.5.0",
|
||||
"ajv-keywords": "3.2.0"
|
||||
@ -8694,6 +8707,16 @@
|
||||
"debug": "2.6.9"
|
||||
}
|
||||
},
|
||||
"simple-pdf-viewer": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-pdf-viewer/-/simple-pdf-viewer-2.0.2.tgz",
|
||||
"integrity": "sha512-/siKUMDqugwHvFSqpgLmB6T8wfqxXArU6uoZ/vL/f7gCgqZ2O95oyYBHDLDRqtvvc8gSP1+t6z//2NEQ0fn3rA==",
|
||||
"requires": {
|
||||
"@types/pdfjs-dist": "0.1.1",
|
||||
"pdfjs-dist": "1.10.88",
|
||||
"tslib": "1.9.2"
|
||||
}
|
||||
},
|
||||
"slack-node": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/slack-node/-/slack-node-0.2.0.tgz",
|
||||
@ -10032,7 +10055,6 @@
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
|
||||
"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"punycode": "2.1.1"
|
||||
}
|
||||
@ -11543,6 +11565,15 @@
|
||||
"errno": "0.1.7"
|
||||
}
|
||||
},
|
||||
"worker-loader": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-1.1.1.tgz",
|
||||
"integrity": "sha512-qJZLVS/jMCBITDzPo/RuweYSIG8VJP5P67mP/71alGyTZRe1LYJFdwLjLalY3T5ifx0bMDRD3OB6P2p1escvlg==",
|
||||
"requires": {
|
||||
"loader-utils": "1.1.0",
|
||||
"schema-utils": "0.4.5"
|
||||
}
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
|
||||
|
||||
@ -21,8 +21,10 @@
|
||||
"@angular/platform-browser": "^5.2.0",
|
||||
"@angular/platform-browser-dynamic": "^5.2.0",
|
||||
"@angular/router": "^5.2.0",
|
||||
"bootstrap": "^4.1.1",
|
||||
"core-js": "^2.4.1",
|
||||
"rxjs": "^5.5.6",
|
||||
"simple-pdf-viewer": "^2.0.2",
|
||||
"zone.js": "^0.8.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { PageComponent } from './page/page.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { InterviewComponent } from './interview/interview.component';
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'home', pathMatch: 'full'},
|
||||
{ path: 'home', component: HomeComponent },
|
||||
{ path: 'entrevista', component: InterviewComponent },
|
||||
{ path: 'entrevista/:id', component: InterviewComponent },
|
||||
{ path: ':id', component: PageComponent },
|
||||
{ path: ':parent/intro', redirectTo:':parent'},
|
||||
{ path: ':parent/:id', component: PageComponent},
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { HttpModule } from '@angular/http';
|
||||
/*pdf*/
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { SimplePdfViewerModule } from 'simple-pdf-viewer';
|
||||
/*imagegallery*/
|
||||
import 'hammerjs';
|
||||
import 'mousetrap';
|
||||
import { ModalGalleryModule } from '@ks89/angular-modal-gallery';
|
||||
|
||||
import { PageService } from './page.service';
|
||||
import { AppComponent } from './app.component';
|
||||
@ -12,6 +19,9 @@ import { AppRoutingModule } from './app-routing.module';
|
||||
import { PageComponent } from './page/page.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { MenuChildsComponent } from './menu-childs/menu-childs.component';
|
||||
import { InterviewComponent } from './interview/interview.component';
|
||||
import { InterviewGridComponent } from './interview-grid/interview-grid.component';
|
||||
import { DedaloService } from './dedalo.service';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -23,16 +33,28 @@ import { MenuChildsComponent } from './menu-childs/menu-childs.component';
|
||||
FooterComponent,
|
||||
PageComponent,
|
||||
HomeComponent,
|
||||
MenuChildsComponent
|
||||
MenuChildsComponent,
|
||||
InterviewComponent,
|
||||
InterviewGridComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
HttpModule,
|
||||
AppRoutingModule,
|
||||
FormsModule,
|
||||
SimplePdfViewerModule,
|
||||
ModalGalleryModule.forRoot()
|
||||
],
|
||||
providers: [
|
||||
PageService
|
||||
PageService,
|
||||
DedaloService,
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
/* otros ejemplos */
|
||||
/*
|
||||
https://github.com/Ks89/angular-modal-gallery
|
||||
https://github.com/viktorhajer/simple-pdf-viewer/wiki/API-Documentation
|
||||
*/
|
||||
|
||||
15
src/app/dedalo.service.spec.ts
Normal file
15
src/app/dedalo.service.spec.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { DedaloService } from './dedalo.service';
|
||||
|
||||
describe('DedaloService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [DedaloService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([DedaloService], (service: DedaloService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
20
src/app/dedalo.service.ts
Normal file
20
src/app/dedalo.service.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angular/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import 'rxjs/add/operator/map';
|
||||
import { InterviewItem } from './interview';
|
||||
|
||||
@Injectable()
|
||||
export class DedaloService {
|
||||
|
||||
apiUrl : string = "https://localhost:3000/interview"
|
||||
|
||||
constructor(
|
||||
private http: Http
|
||||
) { }
|
||||
|
||||
getInterviews() : Observable<InterviewItem> {
|
||||
return this.http.get(this.apiUrl);
|
||||
}
|
||||
|
||||
}
|
||||
0
src/app/interview-grid/interview-grid.component.css
Normal file
0
src/app/interview-grid/interview-grid.component.css
Normal file
11
src/app/interview-grid/interview-grid.component.html
Normal file
11
src/app/interview-grid/interview-grid.component.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="row item-container-wrapper">
|
||||
<div class="item-container">
|
||||
<h3>Trabajo</h3>
|
||||
<div class="thumbnail-image">
|
||||
<a href="item.html"><h2>Juan Garcia</h2></a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>Breve intro de la entrevista aquí disponible.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/interview-grid/interview-grid.component.spec.ts
Normal file
25
src/app/interview-grid/interview-grid.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InterviewGridComponent } from './interview-grid.component';
|
||||
|
||||
describe('InterviewGridComponent', () => {
|
||||
let component: InterviewGridComponent;
|
||||
let fixture: ComponentFixture<InterviewGridComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InterviewGridComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InterviewGridComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
18
src/app/interview-grid/interview-grid.component.ts
Normal file
18
src/app/interview-grid/interview-grid.component.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { Component, OnInit, Input} from '@angular/core';
|
||||
import { InterviewItem } from '../interview';
|
||||
|
||||
@Component({
|
||||
selector: 'app-interview-grid',
|
||||
templateUrl: './interview-grid.component.html',
|
||||
styleUrls: ['./interview-grid.component.css']
|
||||
})
|
||||
export class InterviewGridComponent implements OnInit {
|
||||
|
||||
@Input() interviews : InterviewItem[]
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
5
src/app/interview.ts
Normal file
5
src/app/interview.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export class InterviewItem {
|
||||
constructor(
|
||||
id: string
|
||||
) {}
|
||||
}
|
||||
0
src/app/interview/interview.component.css
Normal file
0
src/app/interview/interview.component.css
Normal file
20
src/app/interview/interview.component.html
Normal file
20
src/app/interview/interview.component.html
Normal file
@ -0,0 +1,20 @@
|
||||
<app-header [pages]=pages></app-header>
|
||||
|
||||
<div class="more" id="more"></div>
|
||||
<article>
|
||||
<div class="row">
|
||||
<!--colmenu-->
|
||||
<div class="col-md-3 offset-md-1 info">
|
||||
<ul class="filters">
|
||||
<li class="active">All</li>
|
||||
<li>Trabajo</li>
|
||||
<li>Familia</li>
|
||||
<li>Otra Materia</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--colcontent-->
|
||||
<div class="col-md-7">
|
||||
<app-interview-grid [interviews]=interviews></app-interview-grid>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
25
src/app/interview/interview.component.spec.ts
Normal file
25
src/app/interview/interview.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InterviewComponent } from './interview.component';
|
||||
|
||||
describe('InterviewComponent', () => {
|
||||
let component: InterviewComponent;
|
||||
let fixture: ComponentFixture<InterviewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InterviewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InterviewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
37
src/app/interview/interview.component.ts
Normal file
37
src/app/interview/interview.component.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PageItem } from '../page';
|
||||
import { InterviewItem } from '../interview';
|
||||
import { DedaloService } from '../dedalo.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-interview',
|
||||
templateUrl: './interview.component.html',
|
||||
styleUrls: ['./interview.component.css']
|
||||
})
|
||||
export class InterviewComponent implements OnInit {
|
||||
|
||||
pages : PageItem[];
|
||||
interviews : InterviewItem[];
|
||||
|
||||
constructor(
|
||||
private dedaloService : DedaloService
|
||||
) {
|
||||
let p = new PageItem(
|
||||
'0',
|
||||
'Entrevistas',
|
||||
'Una colección de entrevistas',
|
||||
'',
|
||||
'entrevistas',
|
||||
'0'
|
||||
);
|
||||
this.pages = [p];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
getInterviews() : void {
|
||||
this.interviews = [];
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,6 +3,10 @@ import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angul
|
||||
import { Observable } from 'rxjs';
|
||||
import 'rxjs/add/operator/map';
|
||||
import { PageItem } from './page';
|
||||
import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';
|
||||
import { Image} from '@ks89/angular-modal-gallery';
|
||||
|
||||
|
||||
|
||||
// @Injectable({providedIn : 'root'}) {}
|
||||
@Injectable()
|
||||
@ -12,7 +16,8 @@ export class PageService {
|
||||
apiUrl : string = "https://backend.industriapaisaia.eus/wp-json/wp/v2"
|
||||
|
||||
constructor(
|
||||
private http: Http
|
||||
private http: Http,
|
||||
public sanitizer: DomSanitizer
|
||||
) { }
|
||||
|
||||
getItems() : void {
|
||||
@ -21,6 +26,7 @@ export class PageService {
|
||||
let search = new URLSearchParams();
|
||||
search.set('foo', 'moo');
|
||||
search.set('limit', "25");
|
||||
search.set('_embed','');
|
||||
this.http.get(url,{search:search})
|
||||
.toPromise()
|
||||
.then(res => console.log(res.json()));
|
||||
@ -47,12 +53,13 @@ export class PageService {
|
||||
|
||||
getPages(searchParams) : Observable<PageItem[]> {
|
||||
searchParams.set('orderby','menu_order');
|
||||
searchParams.set('_embed','');
|
||||
//searchParams.set('context','embed');
|
||||
let url = `${this.apiUrl}/pages`;
|
||||
return this.http.get(url,{search:searchParams})
|
||||
.map(res => {
|
||||
return res.json().map(item => {
|
||||
console.log(item);
|
||||
//console.log(item);
|
||||
let page = new PageItem(
|
||||
item.id as string,
|
||||
item.title.rendered,
|
||||
@ -61,8 +68,39 @@ export class PageService {
|
||||
item.slug,
|
||||
item.parent
|
||||
);
|
||||
if (item.acf.background_image) { page['background_image'] = item.acf.background_image.sizes.large; }
|
||||
else { page['background_image'] = ''; }
|
||||
|
||||
/* featured images */
|
||||
if ( item["_embedded"]["wp:featuredmedia"] ) {
|
||||
page["featuredmedia"] = item["_embedded"]["wp:featuredmedia"];
|
||||
|
||||
if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]) {
|
||||
// page['background_image'] = item.acf.background_image.sizes.large;
|
||||
page['background_image'] = item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]["source_url"]
|
||||
} else if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]) {
|
||||
if ( item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"] == 'undefined' ) { page['background_image']=''}
|
||||
else { page['background_image'] = item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"] }
|
||||
} else {
|
||||
page['background_image'] = '';
|
||||
}
|
||||
}
|
||||
|
||||
/* Publitas */
|
||||
if (item["acf"] && item["acf"]["libro_publitas"]) {
|
||||
page["publitas_link"] = this.sanitizer.bypassSecurityTrustUrl(item["acf"]["libro_publitas"]);
|
||||
//this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
// console.log(item['gallery'])
|
||||
if (item["gallery"]) {
|
||||
page['gallery'] = [];
|
||||
let c = 0;
|
||||
item["gallery"].forEach( (i)=> {
|
||||
var im = new Image(c, { img: i['modal'], description: 'Description 1' },{ img: i['thumb'] });
|
||||
page['gallery'].push(im);
|
||||
c++;
|
||||
});
|
||||
}
|
||||
|
||||
let link = document.createElement('a');
|
||||
link.href = item.link;
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import {SafeUrl} from '@angular/platform-browser';
|
||||
import { Image} from '@ks89/angular-modal-gallery';
|
||||
|
||||
export class PageItem {
|
||||
constructor(
|
||||
public id : string,
|
||||
@ -7,7 +10,10 @@ export class PageItem {
|
||||
public slug : string,
|
||||
public parent? : string,
|
||||
public background_image? : string,
|
||||
public link?: string
|
||||
public link?: string,
|
||||
public publitas_link?: SafeUrl,
|
||||
public featuredmedia ? : any[],
|
||||
public gallery? : Array<Image>
|
||||
) {}
|
||||
|
||||
// public set (key,attr) {
|
||||
|
||||
@ -16,6 +16,37 @@
|
||||
<app-menu-childs *ngIf="page.parent>0" [parent_id]="page.parent" [parent_link]="page.link"></app-menu-childs>
|
||||
<!-- imagenes en lista-->
|
||||
</div>
|
||||
<div class="col-md-7" [innerHTML]="page.content"><!--content--></div>
|
||||
<div class="col-md-7">
|
||||
<div class="row" *ngIf="page.content">
|
||||
<div class="col-md-12" [innerHTML]="page.content"></div>
|
||||
</div>
|
||||
<section *ngIf="page.gallery.length>0">
|
||||
<div class="my-app-custom-plain-container-with-desc">
|
||||
<ng-container *ngFor="let img of page.gallery">
|
||||
<figure class="my-app-custom-image-with-desc">
|
||||
<img [src]="img.modal.img" (click)="openImageModalRowDescription(img)"/>
|
||||
<figcaption class="description">{{img.modal.description ? img.modal.description : 'No description available'}}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ks-modal-gallery [id]="8" [modalImages]="page.gallery" [plainGalleryConfig]="customPlainGalleryRowDescConfig"></ks-modal-gallery>
|
||||
</section>
|
||||
<div class="row" *ngIf="page.publitas_link">
|
||||
<div class="col-md-12">
|
||||
<simple-pdf-viewer #pdfViewer [src]="'../assets/test.pdf#zoom=1.01'" [removePageBorders]="true"></simple-pdf-viewer>
|
||||
<div class="pdf-buttons" *ngIf="!pdfViewer.isDocumentLoaded()">
|
||||
<button>Cargando documento</button>
|
||||
</div>
|
||||
<div class="pdf-buttons" style="" *ngIf="pdfViewer.isDocumentLoaded()">
|
||||
<button (click)="pdfViewer.firstPage()">First Page</button>
|
||||
<button (click)="pdfViewer.prevPage()">Previous Page</button>
|
||||
<button (click)="pdfViewer.nextPage()">Next Page</button>
|
||||
<button (click)="pdfViewer.lastPage()">Last Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-7">{{page.content}}</div> -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1,7 +1,29 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { PageService } from '../page.service';
|
||||
import { PageItem } from '../page';
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
|
||||
import {
|
||||
AccessibilityConfig,
|
||||
Action,
|
||||
AdvancedLayout,
|
||||
ButtonEvent,
|
||||
ButtonsConfig,
|
||||
ButtonsStrategy,
|
||||
ButtonType,
|
||||
Description,
|
||||
DescriptionStrategy,
|
||||
DotsConfig,
|
||||
GalleryService,
|
||||
GridLayout,
|
||||
Image,
|
||||
ImageModalEvent,
|
||||
LineLayout,
|
||||
PlainGalleryConfig,
|
||||
PlainGalleryStrategy,
|
||||
PreviewConfig
|
||||
} from '@ks89/angular-modal-gallery';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page',
|
||||
@ -13,12 +35,16 @@ export class PageComponent implements OnInit {
|
||||
pages : PageItem[];
|
||||
slug : string;
|
||||
parent : string;
|
||||
imageIndex = 1;
|
||||
galleryId = 1;
|
||||
gallery: Image[];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private pageService: PageService
|
||||
)
|
||||
{
|
||||
private pageService: PageService,
|
||||
private galleryService: GalleryService,
|
||||
private sanitizer: DomSanitizer
|
||||
){
|
||||
this.route.params.subscribe( params => {
|
||||
this.slug = params.id;
|
||||
this.parent = params.parent;
|
||||
@ -33,8 +59,24 @@ export class PageComponent implements OnInit {
|
||||
this.pageService.getPage(this.slug)
|
||||
.subscribe(data => {
|
||||
this.pages = data;
|
||||
console.log(data);
|
||||
//console.log(data);
|
||||
});
|
||||
}
|
||||
|
||||
/** gallery **/
|
||||
customPlainGalleryRowDescConfig: PlainGalleryConfig = {
|
||||
strategy: PlainGalleryStrategy.CUSTOM,
|
||||
layout: new AdvancedLayout(-1, true)
|
||||
};
|
||||
|
||||
openImageModalRowDescription(image: Image) {
|
||||
console.log('Opening modal gallery from custom plain gallery row and description, with image: ', image);
|
||||
const index: number = this.getCurrentIndexCustomLayout(image, this.pages[0].gallery);
|
||||
this.customPlainGalleryRowDescConfig = Object.assign({}, this.customPlainGalleryRowDescConfig, { layout: new AdvancedLayout(index, true) });
|
||||
}
|
||||
|
||||
private getCurrentIndexCustomLayout(image: Image, images: Image[]): number {
|
||||
return image ? images.indexOf(image) : -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<!-- {{diagnostic}} -->
|
||||
<div *ngFor="let page of pages" class="ia-section bg1" id="{{page.slug}}">
|
||||
<section>
|
||||
<section class="ia-section">
|
||||
<a href="/{{page.slug}}">
|
||||
<div class="row section-content" >
|
||||
<div class="col-md-1 ia-select"></div>
|
||||
<div class="col-md-5"><h1><span>{{page.title}}</span></h1></div>
|
||||
<div class="col-md-5" [ngStyle]="{'background-size':'cover', 'background-repeat':'no-repeat','background-image':'url(\''+page.background_image+'\')'}"><h1><span>{{page.title}}</span></h1></div>
|
||||
<div class="col-md-6" [innerHTML]="page.excerpt"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -12,7 +12,10 @@ export class SectionComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
ngOnInit() { }
|
||||
|
||||
get diagnostic() {
|
||||
return JSON.stringify(this.pages);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
BIN
src/assets/img1.jpg
Normal file
BIN
src/assets/img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
src/assets/test.pdf
Normal file
BIN
src/assets/test.pdf
Normal file
Binary file not shown.
BIN
src/assets/vision-webfont.woff
Normal file
BIN
src/assets/vision-webfont.woff
Normal file
Binary file not shown.
120
src/styles.css
120
src/styles.css
@ -2,21 +2,21 @@
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||
@import url('https://fonts.googleapis.com/css?family=Tinos');
|
||||
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
||||
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Manteka";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('./assets/manteka.woff');
|
||||
}
|
||||
src: url('./assets/vision-webfont.woff');
|
||||
} */
|
||||
|
||||
/* main */
|
||||
* { transition:0.2s;}
|
||||
|
||||
body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;}
|
||||
h1,h2 { font-family: "Manteka", sans-serif;}
|
||||
h1,h2 { font-family: "Raleway", sans-serif;text-transform:uppercase;font-weight:bold;}
|
||||
|
||||
header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;}
|
||||
app-header header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;}
|
||||
|
||||
header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
|
||||
|
||||
@ -38,9 +38,9 @@ div.menu {padding:0px; width:100%; background:#fff; z-index:200; position:fixed;
|
||||
div.menu * {float:left;}
|
||||
div.menu div.Search {float:right;}
|
||||
div.menu div.language {float:right;margin:5px;font-size:0.7em;padding-top:1%;}
|
||||
div.menu div.language span {padding:3px;font-family:"Manteka";cursor:pointer;}
|
||||
div.menu div.language span {padding:3px;font-family:"Raleway";cursor:pointer;}
|
||||
div.Search input {background:none; border:none; border-bottom:2px solid #000;}
|
||||
div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Manteka";padding:10px;min-width:10%;cursor:pointer;}
|
||||
div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Raleway";padding:10px;min-width:10%;cursor:pointer;}
|
||||
div.menu nav ul li:hover { background-color:#f7886c;}
|
||||
div.menu nav ul li:active { background-color:#f7886c;color:#fff;}
|
||||
div.menu nav ul li.active { background-color:#f7886c;color:#fff;}
|
||||
@ -49,7 +49,7 @@ div.stick-menu { z-index:200;position:fixed;width:100%;top:0;}
|
||||
|
||||
/* section */
|
||||
div.ia-section { min-height:300px;width:100%;background-size:contain; background-repeat:no-repeat; }
|
||||
div.ia-section div.row div {text-align:center;}
|
||||
div.ia-section div.row div {text-align:center;min-height:300px;}
|
||||
div.ia-section h1,
|
||||
div.ia-section p {margin-top:50px;padding:20px;}
|
||||
div.ia-section p { font-size:1.2em;}
|
||||
@ -64,11 +64,12 @@ div.ia-section div.col-md-6 { padding:20px;}
|
||||
/*article*/
|
||||
|
||||
article {padding-top:80px;}
|
||||
article img {border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);}
|
||||
article img {max-width:100%; height:auto; border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);}
|
||||
article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);cursor:pointer;}
|
||||
article p {font-size:0.9em;}
|
||||
article h2 span {background:#d2e8eb;padding:10px;}
|
||||
article h2 {margin-bottom:20px;}
|
||||
article video {max-width:100%;}
|
||||
|
||||
/* footer */
|
||||
footer { min-height:300px; height:100%; background-color:#d2e8eb; padding:20px; color:#000;}
|
||||
@ -85,7 +86,7 @@ footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; co
|
||||
/* item continaer */
|
||||
.item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;}
|
||||
.item-container:hover {transform:translateY(-5px);}
|
||||
.item-container h3 {font-family:"Manteka";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;}
|
||||
.item-container h3 {font-family:"Raleway";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;}
|
||||
.item-container h3::after {content:'';}
|
||||
.item-container h2 {font-size:2em; text-align:center;padding:2px;}
|
||||
.item-container h2.thumbtitle {position:relative;width:100%;text-align:center;padding-top:15%;}
|
||||
@ -123,10 +124,107 @@ header.item { margin-top:50px;height:0;}
|
||||
.info h1 span {background-color:#d2e8eb;padding:5px;}
|
||||
.info h2 {color:#f7886c;}
|
||||
.info ul.filters {list-style:none; margin:0;padding:0;}
|
||||
.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Manteka";text-align:right;}
|
||||
.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;}
|
||||
.info ul.filters li:hover {border-right:0px;color:#f7886c;}
|
||||
.info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;}
|
||||
.info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;}
|
||||
|
||||
/* imagen */
|
||||
img.fullwidth {width:100%;}
|
||||
|
||||
/* pdf buttons */
|
||||
div.pdf-buttons { width:100%;min-height:50px;text-align:center;float:right;position:absolute;top:0; }
|
||||
div.pdf-buttons button {border:0;background:#d2e8eb; font-size:1em;cursor:pointer;}
|
||||
div.pdf-buttons button:hover {background:#f7886c; }
|
||||
|
||||
/** gallery */
|
||||
/* .my-app-custom-plain-container-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.my-app-custom-plain-container-row .my-app-custom-image-row {
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
margin-right: 2px;
|
||||
width: 50px;
|
||||
}
|
||||
.my-app-custom-plain-container-row .my-app-custom-image-row.after {
|
||||
border-top: 2px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.my-app-custom-plain-container-column {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.my-app-custom-plain-container-column .my-app-custom-image-column {
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
margin-right: 2px;
|
||||
width: 50px;
|
||||
}
|
||||
.my-app-custom-plain-container-column .my-app-custom-image-column.after {
|
||||
border-top: 2px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
} */
|
||||
.my-app-custom-plain-container-with-desc {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.my-app-custom-plain-container-with-desc figure {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.my-app-custom-plain-container-with-desc figure img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-app-custom-plain-container-with-desc figure figcaption {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
color: #fff;
|
||||
font-size: 85%;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.my-app-custom-plain-container-with-desc .description {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.my-app-custom-plain-container-with-desc .my-app-custom-image-with-desc {
|
||||
height: 150px;
|
||||
margin-right: 2px;
|
||||
width: 200px;
|
||||
align-self: start;
|
||||
overflow:hidden;
|
||||
}
|
||||
.more {
|
||||
background: rgba(0, 0, 0, .7);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
padding-top: 4px;
|
||||
height: 46px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user