projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts
selector | ab-drupal-entity-node |
template |
|
Properties |
Methods |
|
Inputs |
constructor(drupalService: DrupalService, sanitizer: DomSanitizer)
|
|||||||||
Parameters :
|
node
|
Type: |
ngOnChanges | ||||
ngOnChanges(changes: )
|
||||
Parameters :
Returns :
void
|
Public parse | ||||
parse(node: )
|
||||
Parameters :
Returns :
void
|
Private sanitize | ||||
sanitize(data: )
|
||||
Parameters :
Returns :
void
|
_createNode | ||||||||
_createNode(nodeObject: any)
|
||||||||
Inherited from
Node
|
||||||||
Defined in Node:36
|
||||||||
Parameters :
Returns :
any
|
Private Async _fetchResource |
_fetchResource(url: string, params: any)
|
Inherited from
Node
|
Defined in Node:48
|
Returns :
{}
|
_json |
_json()
|
Inherited from
Node
|
Defined in Node:44
|
Returns :
any
|
Public sanitizer |
sanitizer:
|
Type : DomSanitizer
|
_headers |
_headers:
|
Type : object
|
Default value : {
'Accept': 'application/vnd.api+json',
'Content-Type': 'application/vnd.api+json'
}
|
Inherited from
Node
|
Defined in Node:7
|
_nodeTemplate |
_nodeTemplate:
|
Type : object
|
Default value : {
data: {
type: "node--page",
attributes: {
"title": "new: node--page",
// "langcode": "en",
// "status": true,
// "promote": false,
// "sticky": false,
// "default_langcode": true,
"body": {
"value": "new: node--page: body",
// "format": "full_html",
// "summary": ""
}
}
}
}
|
Inherited from
Node
|
Defined in Node:12
|
data |
data:
|
Type : any
|
Inherited from
Node
|
Defined in Node:5
|
dataRelationships |
dataRelationships:
|
Type : object
|
Default value : {}
|
Inherited from
Node
|
Defined in Node:6
|
import {Component, Input, OnChanges} from '@angular/core';
import {BrowserModule,DomSanitizer} from '@angular/platform-browser';
import {Node} from '../../../../shared/cms/drupal/entities/node';
import {DrupalService} from '../drupal.service';
@Component({
selector: 'ab-drupal-entity-node',
template: `
<article *ngIf="data" id="node-{{ data.attributes.nid }}"
class="node node--type-{{ data.type.split('--')[1] }} node--view-mode-full clearfix">
<header>
<h2 class="title node__title">{{ data.attributes.title }}</h2>
</header>
<div [ngSwitch]="data.type.split('--')[1]" class="node__content clearfix">
<div *ngIf="data.relationships['field_icon'] && data.relationships['field_icon'].data" class="field field--name-icon">
<!--<div>{{data.relationships['field_icon'].data.id}}</div>-->
<img [src]="drupalService.siteParams.base_root + drupalService.model.entities[data.relationships['field_icon'].data.id].data.attributes.url"/>
</div>
<div *ngIf="data.attributes.body" [innerHTML]="data.attributes.body.valueSafe" class="field field--name-body"></div>
<ng-container *ngIf="data.relationships['field_image']">
<div *ngFor="let item of data.relationships['field_image'].data" class="field field--name-image">
<div class="meta title">{{item.meta.title}}</div>
<img [src]="drupalService.siteParams.base_root + drupalService.model.entities[item.id].attributes.url"/>
</div>
</ng-container>
<ng-container *ngSwitchCase="'iframe'">
<div class="field field--name-iframe">
<iframe [src]="data.attributes.field_iframe.uriSafe" width="{{ data.attributes.field_width }}"
height="{{ data.attributes.field_height }}" frameborder="0" style="visibility:hidden;"
onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
</div>
</ng-container>
</div>
</article>
`
})
export class NodeComponent extends Node implements OnChanges {
@Input() node: any;
constructor(private drupalService: DrupalService, public sanitizer: DomSanitizer) {
// constructor(public sanitizer: DomSanitizer) {
super();
}
ngOnChanges(changes) {
if (!this.node) {
return;
}
this.data = this.node.data;
this.sanitize(this.node.data);
this.parse(this.node);
}
private sanitize(data) {
if (!data) {
return;
}
if (data.attributes.body) {
data.attributes.body.valueSafe = this.sanitizer.bypassSecurityTrustHtml(data.attributes.body.value);
}
if (data.attributes.field_iframe) {
data.attributes.field_iframe.uriSafe = this.sanitizer.bypassSecurityTrustResourceUrl(data.attributes.field_iframe.uri);
}
}
public parse(node) {
// switch (node.data.type.split('--')[1]) {
// case 'app':
// // this.nodeData = JSON.parse(node.field_json[0].value);
// break;
// case 'iframe':
// // code block
// break;
// default:
// // code block
// }
}
// public relationship(field: string) {
// let items = [];
// if(!this.data.relationships && !this.data.relationships[field]) {
// return items;
// }
// if (this.data.relationships[field]) {
// this.data.relationships[field].data.forEach((object,i) => {
// items.push(object)
// });
// }
// console.log(items);
// return items;
// }
}