Gestion del PDF desde el atributo ACF en Wordpress.

Visionado del proceso de carga del documento en el mismo objeto.

src/app/page.service.ts

@@ -73,6 +73,9 @@ export class PageService {
           page['parent_title']=item['parentTitle']['title'];
           page['parent_link']=item['parentTitle']['link'];
 
+          if (item['acf']['pdf']) { page['pdf']=item['acf']['pdf']; }
+          else { page['pdf']=null; }
+
         /* chilsd */
           page["hasChild"]=item["hasChild"];
           // if (item["hasChild"]) {
@@ -86,8 +89,6 @@ export class PageService {
 
           /* featured images */
           if ( !childs && item["_embedded"]["wp:featuredmedia"]) {
-            console.log('featured image: '+item.id);
-            console.log(item["_embedded"]["wp:featuredmedia"])
             page["featuredmedia"] = item["_embedded"]["wp:featuredmedia"];
 
             if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]) {

src/app/page/page.component.html

@@ -36,11 +36,11 @@
   				<ks-modal-gallery [id]="0" [slideConfig]="{infinite: true, sidePreviews: {show: false}}" [buttonsConfig]="buttonsConfigIndustria" [previewConfig]="{visible: false}" [dotsConfig]="{visible: false}" [currentImageConfig]="{downloadable: true, description: {imageText:''}}" [modalImages]="page.gallery" [plainGalleryConfig]="customPlainGalleryRowDescConfig"></ks-modal-gallery>
 				</section>
 				<section class="section-publitas">
-					<div class="row" *ngIf="page.publitas_link">
+					<div class="row" *ngIf="page.pdf">
 						<div class="col-md-12">
-							<simple-pdf-viewer #pdfViewer [src]="'../assets/'+page.publitas_link" [removePageBorders]="true"></simple-pdf-viewer>
+							<simple-pdf-viewer #pdfViewer [src]="page.pdf.url" [removePageBorders]="true" (onProgress)="onProgressPDF($event,page.pdf.filesize)"></simple-pdf-viewer>
 							<div class="pdf-buttons" *ngIf="!pdfViewer.isDocumentLoaded()">
-								<button>Cargando documento</button>
+								<button>Cargando documento {{loaderPDF}}%</button>
 							</div>
 							<div class="pdf-buttons" style="" *ngIf="pdfViewer.isDocumentLoaded()">
 								<button (click)="pdfViewer.firstPage()">First Page</button>

src/app/page/page.component.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { PageService } from '../page.service';
 import { PageItem } from '../page';
 import { ActivatedRoute,Router, NavigationEnd } from "@angular/router";
-import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
+import { SafeResourceUrl, DomSanitizer,SafeUrl } from '@angular/platform-browser';
 import {
   AccessibilityConfig,
   Action,
@@ -34,12 +34,13 @@ import * as $ from 'jquery';
 })
 export class PageComponent implements OnInit {
 
-  pages : PageItem[];
+  pages : PageItem[] = [];
   slug : string;
   parent : string;
   imageIndex = 1;
   galleryId = 1;
   gallery: Image[];
+  loaderPDF: number;
 
   constructor(
     private route: ActivatedRoute,
@@ -56,7 +57,6 @@ export class PageComponent implements OnInit {
   }
 
   ngOnInit() {
-    console.log('init')
     // $('html body').animate(
     //   {scrollTop:0}, 1000);
     document.documentElement.scrollTop = 0
@@ -69,11 +69,17 @@ export class PageComponent implements OnInit {
   }
 
   getPage() {
-    console.log(this.slug);
+    // console.log(this.slug);
     this.pageService.getPage(this.slug)
       .subscribe(data => {
         this.pages = data;
-        //console.log(data);
+        this.pages.forEach( (p) => {
+
+          var safeUrl:SafeUrl;
+          safeUrl = this.sanitizer.bypassSecurityTrustUrl('https://backend.industriapaisaia.eus/wp-content/uploads/2018/10/test.pdf');
+          p['publitas_link_sanitize'] = safeUrl;
+          if (p['pdf']) { p['pdfUrl'] = p['pdf']['url'];  };
+        })
       });
   }
 
@@ -127,12 +133,12 @@ buttonsConfigIndustria: ButtonsConfig = {
 //   }
 
   onVisibleIndex(event: ImageModalEvent) {
-    console.log('onVisibleIndex action: ' + Action[event.action]);
+    // console.log('onVisibleIndex action: ' + Action[event.action]);
-    console.log('onVisibleIndex result:' + event.result);
+    // console.log('onVisibleIndex result:' + event.result);
   }
 
 openImageModalRowDescription(image: Image) {
-  console.log('Opening modal gallery from custom plain gallery row and description, with 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) });
 }
@@ -141,4 +147,10 @@ private getCurrentIndexCustomLayout(image: Image, images: Image[]): number {
   return image ? images.indexOf(image) : -1;
 }
 
+onProgressPDF(event,total) {
+  let loadInt = parseInt(event.loaded, 10);
+  let totalInt = parseInt(total,10);
+  this.loaderPDF = Math.floor(loadInt/totalInt*100);
+}
+
 }