79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { Component, Input } from '@angular/core';
|
||
import { environment } from '../environments/environment';
|
||
enum BlockView {
|
||
PREVIEW,
|
||
CODE
|
||
}
|
||
|
||
@Component({
|
||
selector: 'block-viewer',
|
||
template: `
|
||
<div class="block-section">
|
||
<div class="block-header">
|
||
<span class="block-title">
|
||
<span>{{header}}</span>
|
||
<span class="badge-free" *ngIf="free">Free</span>
|
||
<span class="badge-new" *ngIf="new">New</span>
|
||
</span>
|
||
<div class="block-actions">
|
||
<a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
|
||
<a [attr.tabindex]="codeDisabled ? null: '0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE, 'block-action-disabled': codeDisabled}" (click)="activateView($event, BlockView.CODE)">
|
||
<i class="pi pi-lock" *ngIf="codeDisabled"></i>
|
||
<span>Code</span>
|
||
</a>
|
||
<a [attr.tabindex]="codeDisabled ? null: '0'" class="block-action-copy" [ngClass]="{'block-action-disabled': codeDisabled}" (click)="copyCode($event)"
|
||
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom" [tooltipDisabled]="codeDisabled"><i class="pi pi-copy"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="block-content">
|
||
<div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
|
||
<ng-content></ng-content>
|
||
</div>
|
||
<div *ngIf="blockView == BlockView.CODE && !codeDisabled">
|
||
<app-code lang="markup" ngPreserveWhitespaces>{{code}}</app-code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
styleUrls: ['./app.blockviewer.component.scss']
|
||
})
|
||
export class BlockViewer {
|
||
|
||
@Input() header: string;
|
||
|
||
@Input() code: string;
|
||
|
||
@Input() containerClass: string;
|
||
|
||
@Input() previewStyle: string;
|
||
|
||
@Input() free: boolean = false;
|
||
|
||
@Input() new: boolean = false;
|
||
|
||
BlockView = BlockView;
|
||
|
||
blockView: BlockView = BlockView.PREVIEW;
|
||
|
||
activateView(event: Event, blockView: BlockView) {
|
||
if (!this.codeDisabled) {
|
||
this.blockView = blockView;
|
||
}
|
||
|
||
event.preventDefault();
|
||
}
|
||
|
||
async copyCode(event: Event) {
|
||
if (!this.codeDisabled) {
|
||
await navigator.clipboard.writeText(this.code);
|
||
}
|
||
|
||
event.preventDefault();
|
||
}
|
||
|
||
get codeDisabled() {
|
||
return this.free ? false : (environment ? environment.production: false);
|
||
}
|
||
|
||
}
|