File

projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts

Implements

OnChanges

Metadata

selector ab-wordpress-post
template
<div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">

    <h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>

    <div [ngSwitch]="post.type">

        <ng-container *ngSwitchDefault>
            <div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
        </ng-container>

        <ng-container *ngSwitchCase="'iframe'">
            <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
        </ng-container>
        <ng-container *ngSwitchCase="'app'">
            <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
            <script>
                var app_server_app_data = {{ post.json | json }}
            </script>
        </ng-container>

    </div>

</div>

Index

Properties
Methods
Inputs

Constructor

constructor(_sanitizer: DomSanitizer)
Parameters :
Name Type Optional
_sanitizer DomSanitizer no

Inputs

options

Type: any

Default value: {title: true}

post

Type: any

Methods

ngOnChanges
ngOnChanges(changes: )
Parameters :
Name Optional
changes no
Returns : void
parse
parse(post: )
Parameters :
Name Optional
post no
Returns : void

Properties

Public postData
postData: any
Type : any
Public trustedContent
trustedContent: SafeHtml
Type : SafeHtml
Public trustedTitle
trustedTitle: SafeHtml
Type : SafeHtml
Public trustedUrl
trustedUrl: SafeResourceUrl
Type : SafeResourceUrl
import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';

@Component({
    selector: 'ab-wordpress-post',
    template: `
    <div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">
        
        <h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>

        <div [ngSwitch]="post.type">

            <ng-container *ngSwitchDefault>
                <div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
            </ng-container>
            
            <ng-container *ngSwitchCase="'iframe'">
                <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
            </ng-container>
            <ng-container *ngSwitchCase="'app'">
                <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                <script>
                    var app_server_app_data = {{ post.json | json }}
                </script>
            </ng-container>

        </div>

    </div>
    `
})
export class WordpressPostComponent implements OnChanges {
    @Input() options: any = {title: true};
    @Input() post: any;
    public trustedTitle: SafeHtml;
    public trustedContent: SafeHtml;
    public trustedUrl: SafeResourceUrl;
    public postData: any;

    constructor(private _sanitizer: DomSanitizer) { }

    parse(post) {
        if (post.title) {
           this.trustedTitle = this._sanitizer.bypassSecurityTrustHtml(post.title.rendered);
        }
        if (post.content) {
            this.trustedContent = this._sanitizer.bypassSecurityTrustHtml(post.content.rendered);
        }
        if (post.url) {
            this.trustedUrl = this._sanitizer.bypassSecurityTrustResourceUrl(post.url);
        }
        switch (post.type) {
            case 'app':
                this.postData = JSON.parse(post.json);
                break;
            case 'iframe':
                // code block
                break;
            default:
            // code block
        }
    }

    // trustAsHtml(content) {
    //     console.log('trustAsHtml');
    //     return this._sanitizer.bypassSecurityTrustHtml(content);
    // };
    // trustAsUrl(url) {
    //     console.log('trustAsUrl',url);
    //     return this._sanitizer.bypassSecurityTrustResourceUrl(url);
    // };

    ngOnChanges(changes) {
        if (!this.post) {
            return;
        }
        this.parse(this.post);
    }

}

Legend
Html element
Component
Html element with directive
' var COMPONENTS = [{'name': 'AbLoginFormComponent', 'selector': 'ab-login-form'},{'name': 'AbRouterMenuComponent', 'selector': 'ab-router-menu'},{'name': 'AboutComponent', 'selector': 'sk-about'},{'name': 'DevStackComponent', 'selector': 'sk-dev-stack'},{'name': 'DrupalMenuComponent', 'selector': 'ab-drupal-menu'},{'name': 'IndexComponent', 'selector': 'sk-index'},{'name': 'LoginButtonComponent', 'selector': 'ab-login-button'},{'name': 'LoginComponent', 'selector': 'ab-login'},{'name': 'LoginFormComponent', 'selector': 'ab-login-form'},{'name': 'LoginModalComponent', 'selector': 'app-login-modal'},{'name': 'ModalContentComponent', 'selector': 'app-modal-content'},{'name': 'NodeComponent', 'selector': 'ab-drupal-entity-node'},{'name': 'NodeEditorComponent', 'selector': 'ab-drupal-entity-node-editor'},{'name': 'RouterBreadcrumbComponent', 'selector': 'ab-router-breadcrumb'},{'name': 'RouterMenuComponent', 'selector': 'ab-router-menu'},{'name': 'SpinnerComponent', 'selector': 'ab-spinner'},{'name': 'SplashComponent', 'selector': 'sk-splash'},{'name': 'SvgTemplateComponent', 'selector': 'svg-template'},{'name': 'TestComponent', 'selector': 'test'},{'name': 'UserComponent', 'selector': 'ab-user'},{'name': 'WordpressMenuComponent', 'selector': 'ab-wordpress-menu'},{'name': 'WordpressPostComponent', 'selector': 'ab-wordpress-post'}]; var DIRECTIVES = [{'name': 'EmailValidatorDirective', 'selector': '[validateEmail][ngModel],[validateEmail][formControlName],[validateEmail][formControl]'},{'name': 'SampleDirective', 'selector': '[sampleDirective]'}]; var ACTUAL_COMPONENT = {'name': 'WordpressPostComponent'};

results matching ""

No results matching ""