init: publish initial version

jasonhodges · Jan 10, 2017 · 3854a31 · 3854a31
1 parent bef9ead
commit 3854a31
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/.npmignore b/.npmignore
diff --git a/README.md b/README.md
@@ -1,2 +1,40 @@
 # ng2-gist
 Angular 2 Component for embedding a gist within an Angular site
+
+## Code Example
+
+In order to use the component in your Angular 2 project after installation, follow these steps:
+
+- Declare `ng2Gist` within app.module.ts
+
+ ```@NgModule({
+ declarations: [
+ AppComponent,
+ ng2Gist
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+ })
+ export class AppModule { }
+ ```
+- Use the `ng2-gist` component in any template files by using the `ng2-gist` tag along with username and gistId 
+```html
+<ng2-gist [gistId]="'{username}/{gistId}'"></ng2-gist>
+```
+
+## Motivation
+This project was initiated after a search for an Angular 2 component of its kind returned no results.
+
+## Installation
+
+`npm i --save ng2-gist`
+
+## Contributors
+
+## License 
+MIT
diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1 @@
+export * from './lib/ng2-gist.component';
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+exports.ng2Gist = require('./lib/ng2-gist.component').ng2Gist;
diff --git a/src/ng2-gist.component.ts b/src/ng2-gist.component.ts
@@ -0,0 +1,35 @@
+import {Component, Input, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
+
+@Component({
+ selector: 'ng2-gist',
+ template:`
+ <iframe #iframe type="text/javascript" width="100%" frameborder="0"></iframe>
+ `,
+ styleUrls: []
+})
+
+export class ng2Gist implements AfterViewInit {
+ @ViewChild('iframe') iframe:ElementRef;
+ @Input() gistId;
+
+ constructor() { }
+
+ ngAfterViewInit() {
+ this.iframe.nativeElement.id = 'gist-' + this.gistId;
+ let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
+ let content = `
+ <html>
+ <head>
+ <base target="_parent">
+ </head>
+ <body onload="parent.document.getElementById('${this.iframe.nativeElement.id}')
+ .style.height=document.body.scrollHeight + 'px'">
+ <script type="text/javascript" src="https://gist.github.com/${this.gistId}.js"></script>
+ </body>
+ </html>
+ `;
+ doc.open();
+ doc.write(content);
+ doc.close();
+ }
+}
diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compilerOptions": {
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "target": "es6",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "removeComments": true,
+ "sourceMap": true,
+ "outDir": "../lib",
+ "declaration": true
+ },
+ "exclude": [
+ "node_modules"
+ ]
+}