13c5c35864
* Upgrade to angular 2.0.0-rc.1 * Add a simple .travis.yml closes #180 * Upgrade to ng2-bootstrap 1.0.16 * Install typings on prepublish * (chore) Fix rxjs dependency, moved it to dev dep * (chore) Upgrade to node 6. Keep mandatory deps.
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
/// <reference path="../../tsd.d.ts" />
|
|
|
|
import {Component} from '@angular/core';
|
|
import {CORE_DIRECTIVES} from '@angular/common';
|
|
|
|
import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
|
|
import {SimpleDemo} from './file-upload/simple-demo';
|
|
|
|
let name = 'File Upload';
|
|
let doc = require('../../components/file-upload/readme.md');
|
|
|
|
let tabDesc:Array<any> = [
|
|
{
|
|
heading: 'Simple',
|
|
ts: require('!!prismjs?lang=typescript!./file-upload/simple-demo.ts'),
|
|
html: require('!!prismjs?lang=markup!./file-upload/simple-demo.html'),
|
|
js: require('!!prismjs?lang=javascript!./file-upload/file-catcher.js')
|
|
}
|
|
];
|
|
|
|
let tabsContent:string = ``;
|
|
tabDesc.forEach(desc => {
|
|
tabsContent += `
|
|
<tab heading="${desc.heading}" (select)="select($event)">
|
|
<div class="card card-block panel panel-default panel-body">
|
|
|
|
<${desc.heading.toLowerCase()}-demo *ngIf="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
|
|
|
|
<br>
|
|
|
|
<div class="row" style="margin: 0px;">
|
|
<tabset>
|
|
<tab heading="Markup">
|
|
<div class="card card-block panel panel-default panel-body">
|
|
<pre class="language-html"><code class="language-html" ng-non-bindable>${desc.html}</code></pre>
|
|
</div>
|
|
</tab>
|
|
<tab heading="TypeScript">
|
|
<div class="card card-block panel panel-default panel-body">
|
|
<pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${desc.ts}</code></pre>
|
|
</div>
|
|
</tab>
|
|
<tab heading="Backend Demo">
|
|
<div class="card card-block panel panel-default panel-body">
|
|
<pre class="language-javascript"><code class="language-javascript" ng-non-bindable>${desc.js}</code></pre>
|
|
</div>
|
|
</tab>
|
|
</tabset>
|
|
</div>
|
|
</div>
|
|
</tab>
|
|
`;
|
|
});
|
|
|
|
@Component({
|
|
selector: 'file-upload-section',
|
|
template: `
|
|
<section id="${name.toLowerCase()}">
|
|
<div class="row">
|
|
<tabset>
|
|
|
|
${tabsContent}
|
|
|
|
</tabset>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h2>API</h2>
|
|
<div class="card card-block panel panel-default panel-body">${doc}</div>
|
|
</div>
|
|
</section>
|
|
`,
|
|
directives: [SimpleDemo, TAB_DIRECTIVES, CORE_DIRECTIVES]
|
|
})
|
|
export class FileUploadSection {
|
|
private currentHeading:string = 'Simple';
|
|
|
|
private select(e:any) {
|
|
if (e.heading) {
|
|
this.currentHeading = e.heading;
|
|
}
|
|
}
|
|
}
|