File

projects/app-base-library/src/lib/angular/modules/drupal/components/node.component.ts

Extends

Node

Implements

OnChanges

Metadata

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>

Index

Properties
Methods
Inputs

Constructor

constructor(drupalService: DrupalService, sanitizer: DomSanitizer)
Parameters :
Name Type Optional
drupalService DrupalService no
sanitizer DomSanitizer no

Inputs

node

Type: any

Methods

ngOnChanges
ngOnChanges(changes: )
Parameters :
Name Optional
changes no
Returns : void
Public parse
parse(node: )
Parameters :
Name Optional
node no
Returns : void
Private sanitize
sanitize(data: )
Parameters :
Name Optional
data no
Returns : void
_createNode
_createNode(nodeObject: any)
Inherited from Node
Defined in Node:36
Parameters :
Name Type Optional Default value
nodeObject any no this._nodeTemplate
Returns : any
Private Async _fetchResource
_fetchResource(url: string, params: any)
Inherited from Node
Defined in Node:48
Parameters :
Name Type Optional Default value
url string no
params any no undefined
Returns : {}
_json
_json()
Inherited from Node
Defined in Node:44
Returns : any

Properties

Public sanitizer
sanitizer: DomSanitizer
Type : DomSanitizer
_headers
_headers: object
Type : object
Default value : { 'Accept': 'application/vnd.api+json', 'Content-Type': 'application/vnd.api+json' }
Inherited from Node
Defined in Node:7
_nodeTemplate
_nodeTemplate: object
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: any
Type : any
Inherited from Node
Defined in Node:5
dataRelationships
dataRelationships: object
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;
    // }


}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""