600402d440
All the docs related files (docs-app, doc-gen, content, etc)
are now to be found inside the `/aio` folder.
The related gulp tasks have been moved from the top level
gulp file to a new one inside the `/aio` folder.
The structure of the `/aio` folder now looks like:
```
/aio/
build/ # gulp tasks
content/ #MARKDOWN FILES for devguides, cheatsheet, etc
devguides/
cheatsheets/
transforms/ #dgeni packages, templates, etc
src/
app/
assets/
content/ #HTML + JSON build artifacts produced by dgeni from /aio/content.
#This dir is .gitignored-ed
e2e/ #protractor tests for the doc viewer app
node_modules/ #dependencies for both the doc viewer builds and the dgeni stuff
#This dir is .gitignored-ed
gulpfile.js #Tasks for generating docs and building & deploying the doc viewer
```
Closes #14361
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();
|
|
// }
|
|
}
|
|
}
|