Ward Bell
673d8ae583
These utils support flexible, natural attribute interpretation as applied to code-example and code-pane. Then apply those utils to code-example and live-example
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
/* tslint:disable component-selector */
|
|
import { Component, ElementRef, OnInit } from '@angular/core';
|
|
import { getBoolFromAttribute } from 'app/shared/attribute-utils';
|
|
|
|
/**
|
|
* An embeddable code block that displays nicely formatted code.
|
|
* Example usage:
|
|
*
|
|
* ```
|
|
* <code-example language="ts" linenums="2" class="special" title="Do Stuff">
|
|
* // a code block
|
|
* console.log('do stuff');
|
|
* </code-example>
|
|
* ```
|
|
*/
|
|
@Component({
|
|
selector: 'code-example',
|
|
template: `
|
|
<header *ngIf="title">{{title}}</header>
|
|
<aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code"
|
|
[language]="language" [linenums]="linenums" [path]="path" [region]="region" [hideCopy]="hideCopy"></aio-code>
|
|
`
|
|
})
|
|
export class CodeExampleComponent implements OnInit {
|
|
|
|
code: string;
|
|
language: string;
|
|
linenums: boolean | number;
|
|
path: string;
|
|
region: string;
|
|
title: string;
|
|
hideCopy: boolean;
|
|
|
|
constructor(private elementRef: ElementRef) {
|
|
const element = this.elementRef.nativeElement;
|
|
|
|
this.language = element.getAttribute('language') || '';
|
|
this.linenums = element.getAttribute('linenums');
|
|
this.path = element.getAttribute('path') || '';
|
|
this.region = element.getAttribute('region') || '';
|
|
this.title = element.getAttribute('title') || '';
|
|
this.hideCopy = getBoolFromAttribute(element, ['hidecopy', 'hide-copy']);
|
|
}
|
|
|
|
ngOnInit() {
|
|
// The `codeExampleContent` property is set by the DocViewer when it builds this component.
|
|
// It is the original innerHTML of the host element.
|
|
this.code = this.elementRef.nativeElement.codeExampleContent;
|
|
}
|
|
}
|