74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
|
/* tslint:disable component-selector */
|
||
|
|
|
||
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
|
||
|
|
|
||
|
|
// TODO(i): add clipboard copy functionality
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Angular.io Code Example
|
||
|
|
*
|
||
|
|
* Pretty renders a code block, primarily used in the docs and API reference. Can be used within an Angular app, or
|
||
|
|
* independently, provided that it is dynamically generated by the component resolver.
|
||
|
|
*
|
||
|
|
* Usage:
|
||
|
|
* <code-example [language]="..." [escape]="..." [format]="..." [showcase]="..." [animated]="...">
|
||
|
|
* console.log('Hello World')
|
||
|
|
* </code-example>
|
||
|
|
*/
|
||
|
|
@Component({
|
||
|
|
selector: 'code-example',
|
||
|
|
template: '<pre class="{{classes}}"><code class="{{animatedClasses}}" #codeContainer></code></pre>'
|
||
|
|
})
|
||
|
|
export class CodeExampleComponent implements OnInit, AfterViewInit {
|
||
|
|
|
||
|
|
@ViewChild('codeContainer') codeContainerRef: ElementRef;
|
||
|
|
|
||
|
|
language: string; // could be javascript, dart, typescript
|
||
|
|
// TODO(i): escape doesn't seem to be currently supported in the original code
|
||
|
|
escape: string; // could be 'html'
|
||
|
|
format: string; // some css class
|
||
|
|
showcase: string; // a string with the value 'true'
|
||
|
|
animated = false;
|
||
|
|
|
||
|
|
// TODO(i): could we use @HostBinding instead or does the CSS have to be scoped to <pre> and <code>
|
||
|
|
classes: string;
|
||
|
|
animatedClasses: string;
|
||
|
|
|
||
|
|
|
||
|
|
constructor(private elementRef: ElementRef) {
|
||
|
|
// TODO(i): @Input should be supported for host elements and should just do a one off initialization of properties
|
||
|
|
// from the host element => talk to Tobias
|
||
|
|
['language', 'escape', 'format', 'showcase', 'animated'].forEach(inputName => {
|
||
|
|
if (!this[inputName]) {
|
||
|
|
this[inputName] = this.elementRef.nativeElement.getAttribute(inputName);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
const showcaseClass = this.showcase === 'true' ? ' is-showcase' : '';
|
||
|
|
this.classes = `
|
||
|
|
prettyprint
|
||
|
|
${this.format ? this.format : ''}
|
||
|
|
${this.language ? 'lang-' + this.language : '' }
|
||
|
|
${showcaseClass ? showcaseClass : ''}
|
||
|
|
`.trim();
|
||
|
|
|
||
|
|
this.animatedClasses = `${this.animated ? 'animated fadeIn' : ''}`;
|
||
|
|
|
||
|
|
// Security: the codeExampleContent is the original innerHTML of the host element provided by
|
||
|
|
// docs authors and as such its considered to be safe for innerHTML purposes
|
||
|
|
this.codeContainerRef.nativeElement.innerHTML = this.elementRef.nativeElement.codeExampleContent;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
// TODO(i): import prettify.js from this file so that we don't need to preload it via index.html
|
||
|
|
// whenever a code example is used, use syntax highlighting.
|
||
|
|
// if(prettyPrint) {
|
||
|
|
// prettyPrint();
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|