lrullo/industriapaisaia-frontend
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Desarrollando la galeria

Browse Source
This commit is contained in:
Siroco 2018-10-02 01:19:30 +02:00
parent d71962d083
commit 4a9867a64d
7 changed files with 187 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/app.module.ts
View File

@ -1,8 +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';
@ -37,7 +42,8 @@ import { DedaloService } from './dedalo.service';
HttpModule,
AppRoutingModule,
FormsModule,
SimplePdfViewerModule
SimplePdfViewerModule,
ModalGalleryModule.forRoot()
],
providers: [
PageService,
@ -46,3 +52,9 @@ import { DedaloService } from './dedalo.service';
bootstrap: [AppComponent]
})
export class AppModule { }
/* otros ejemplos */
/*
https://github.com/Ks89/angular-modal-gallery
https://github.com/viktorhajer/simple-pdf-viewer/wiki/API-Documentation
*/

16
src/app/page.service.ts
View File

@ -4,6 +4,8 @@ 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'}) {}
@ -57,7 +59,7 @@ export class PageService {
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,
@ -88,6 +90,18 @@ export class PageService {
//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;
page['link'] = link.pathname;

4
src/app/page.ts
View File

@ -1,4 +1,5 @@
import {SafeUrl} from '@angular/platform-browser';
import { Image} from '@ks89/angular-modal-gallery';
export class PageItem {
constructor(
@ -11,7 +12,8 @@ export class PageItem {
public background_image? : string,
public link?: string,
public publitas_link?: SafeUrl,
public featuredmedia ? : any[]
public featuredmedia ? : any[],
public gallery? : Array<Image>
) {}
// public set (key,attr) {

12
src/app/page/page.component.html
View File

@ -20,6 +20,18 @@
<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>

48
src/app/page/page.component.ts
View File

@ -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,19 +35,21 @@ 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 galleryService: GalleryService,
private sanitizer: DomSanitizer
){
this.route.params.subscribe( params => {
this.slug = params.id;
this.parent = params.parent;
this.getPage();
} );
}
ngOnInit() {}
@ -39,4 +63,20 @@ export class PageComponent implements OnInit {
});
}
/** 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;
}
}

BIN
src/assets/img1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

108
src/styles.css
View File

@ -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/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;text-transform:uppercase;font-weight:bold;}
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;}
@ -86,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%;}
@ -124,7 +124,7 @@ 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;}
@ -136,3 +136,95 @@ img.fullwidth {width:100%;}
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;
}