fix(plunker): make calls to plunker synchronous to avoid popup block (#83)

* fix(plunker): make calls to plunker synchronous to avoid popup block

* make linter happy

* add comment on disabled

Author: andrewseguin

src/app/shared/plunker/plunker-button.html

@@ -1,10 +1,13 @@
 <!-- TODO: change the template to be plunker icon -->
-<button md-icon-button type="button" (click)="openPlunker()"
-        [mdTooltip]="'Edit in Plunker'">
-  <md-icon>
-    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
-      <path d="M0 0h24v24H0z" fill="none"/>
-      <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
-    </svg>
-  </md-icon>
-</button>
+<div [mdTooltip]="isDisabled ? 'Building Plunker example...' : 'Edit in Plunker'">
+  <button md-icon-button type="button"
+        (click)="openPlunker()"
+        [disabled]="isDisabled">
+    <md-icon>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+      </svg>
+    </md-icon>
+  </button>
+</div>

src/app/shared/plunker/plunker-button.ts

@@ -6,18 +6,32 @@ import { ExampleData } from '../../examples/example-data';
   selector: 'plunker-button',
   templateUrl: './plunker-button.html',
   providers: [PlunkerWriter],
+  host: {
+    '(mouseover)': 'isDisabled = !plunkerForm'
+  }
 })
 export class PlunkerButton {
-  exampleData: ExampleData;
+  /**
+   * The button becomes disabled if the user hovers over the button before the plunker form
+   * is created. After the form is created, the button becomes enabled again.
+   * The form creation usually happens extremely quickly, but we handle the case of the
+   * plunker not yet being ready for people will poor network connections or slow devices.
+   */
+  isDisabled: boolean = false;
+  plunkerForm: HTMLFormElement;
 
   @Input()
   set example(example: string) {
-     this.exampleData = new ExampleData(example);
+    const exampleData = new ExampleData(example);
+    this.plunkerWriter.constructPlunkerForm(exampleData).then(plunkerForm => {
+      this.plunkerForm = plunkerForm;
+      this.isDisabled = false;
+    });
   }
 
   constructor(private plunkerWriter: PlunkerWriter) {}
 
   openPlunker(): void {
-    this.plunkerWriter.openPlunker(this.exampleData);
+    this.plunkerForm.submit();
   }
 }

src/app/shared/plunker/plunker-writer.spec.ts

@@ -6,8 +6,8 @@ import {ExampleData} from '../../examples/example-data';
 
 
 describe('PlunkerWriter', () => {
-  var plunkerWriter: PlunkerWriter;
-  var data: ExampleData;
+  let plunkerWriter: PlunkerWriter;
+  let data: ExampleData;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [],
@@ -37,7 +37,7 @@ describe('PlunkerWriter', () => {
     });
 
     plunkerWriter = TestBed.get(PlunkerWriter);
-    data = new ExampleData();
+    data = new ExampleData('');
     data.examplePath = 'http://material.angular.io/';
     data.exampleFiles = ['test.ts', 'test.html', 'src/detail.ts'];
   }));
@@ -63,45 +63,44 @@ describe('PlunkerWriter', () => {
   });
 
   it('should add files to form input', () => {
-    plunkerWriter.form = plunkerWriter._createFormElement();
+    let form = plunkerWriter._createFormElement();
 
-    plunkerWriter._addFileToForm('NoContent', 'test.ts', 'path/to/file');
-    plunkerWriter._addFileToForm('Test', 'test.html', 'path/to/file');
-    plunkerWriter._addFileToForm('Detail', 'src/detail.ts', 'path/to/file');
+    plunkerWriter._addFileToForm(form, data, 'NoContent', 'test.ts', 'path/to/file');
+    plunkerWriter._addFileToForm(form, data, 'Test', 'test.html', 'path/to/file');
+    plunkerWriter._addFileToForm(form, data, 'Detail', 'src/detail.ts', 'path/to/file');
 
-    let elements = plunkerWriter.form.elements;
-    expect(elements.length).toBe(3);
-    expect(elements[0].getAttribute('name')).toBe('files[test.ts]');
-    expect(elements[1].getAttribute('name')).toBe('files[test.html]');
-    expect(elements[2].getAttribute('name')).toBe('files[src/detail.ts]');
+    expect(form.elements.length).toBe(3);
+    expect(form.elements[0].getAttribute('name')).toBe('files[test.ts]');
+    expect(form.elements[1].getAttribute('name')).toBe('files[test.html]');
+    expect(form.elements[2].getAttribute('name')).toBe('files[src/detail.ts]');
   });
 
   it('should open a new window with plunker url', fakeAsync(() => {
-    plunkerWriter.openPlunker(data);
+    let form;
+    plunkerWriter.constructPlunkerForm(data).then(result => form = result);
     flushMicrotasks();
 
-    let elements = plunkerWriter.form.elements;
-    expect(elements.length).toBe(11);
+    expect(form.elements.length).toBe(11);
 
     // Should have correct tags
-    expect(elements[0].getAttribute('name')).toBe('tags[0]');
-    expect(elements[0].getAttribute('value')).toBe('angular');
-    expect(elements[1].getAttribute('value')).toBe('material');
-    expect(elements[2].getAttribute('value')).toBe('example');
+    expect(form.elements[0].getAttribute('name')).toBe('tags[0]');
+    expect(form.elements[0].getAttribute('value')).toBe('angular');
+    expect(form.elements[1].getAttribute('value')).toBe('material');
+    expect(form.elements[2].getAttribute('value')).toBe('example');
 
     // Should have private and description
-    expect(elements[3].getAttribute('name')).toBe('private');
-    expect(elements[4].getAttribute('name')).toBe('description');
+    expect(form.elements[3].getAttribute('name')).toBe('private');
+    expect(form.elements[4].getAttribute('name')).toBe('description');
 
     // Should have example files
-    expect(elements[5].getAttribute('name')).toBe('files[index.html]');
-    expect(elements[6].getAttribute('name')).toBe('files[systemjs.config.js]');
-    expect(elements[7].getAttribute('name')).toBe('files[main.ts]');
+    expect(form.elements[5].getAttribute('name')).toBe('files[index.html]');
+    expect(form.elements[6].getAttribute('name')).toBe('files[systemjs.config.js]');
+    expect(form.elements[7].getAttribute('name')).toBe('files[main.ts]');
 
     // Should have template files
-    expect(elements[8].getAttribute('name')).toBe('files[test.ts]');
-    expect(elements[9].getAttribute('name')).toBe('files[test.html]');
-    expect(elements[10].getAttribute('name')).toBe('files[src/detail.ts]');
+    expect(form.elements[8].getAttribute('name')).toBe('files[test.ts]');
+    expect(form.elements[9].getAttribute('name')).toBe('files[test.html]');
+    expect(form.elements[10].getAttribute('name')).toBe('files[src/detail.ts]');
 
     // TODO(tinagao): Add more test
   }));

src/app/shared/plunker/plunker-writer.ts

@@ -34,58 +34,67 @@ const TAGS: string[] = ['angular', 'material', 'example'];
  */
 @Injectable()
 export class PlunkerWriter {
-  form: HTMLFormElement;
-  exampleData: ExampleData;
-
   constructor(private _http: Http) {}
 
-  /** Construct the plunker content */
-  openPlunker(data: ExampleData) {
-    this.exampleData = data;
-
-    this.form = this._createFormElement();
+  /**
+   * Returns an HTMLFormElement that will open a new plunker template with the example data when
+   * called with submit().
+   */
+  constructPlunkerForm(data: ExampleData): Promise<HTMLFormElement> {
+    let form = this._createFormElement();
 
-    for (let i = 0; i < TAGS.length; i++) {
-      this._createFormInput(`tags[${i}]`, TAGS[i]);
-    }
+    TAGS.forEach((tag, i) => this._appendFormInput(form, `tags[${i}]`, tag));
+    this._appendFormInput(form, 'private', 'true');
+    this._appendFormInput(form, 'description', data.description);
 
-    this._createFormInput('private', 'true');
-    this._createFormInput('description', this.exampleData.description);
+    return new Promise(resolve => {
+      let templateContents = TEMPLATE_FILES
+          .map(file => this._readFile(form, data, file, TEMPLATE_PATH));
 
-    var templateContents = TEMPLATE_FILES.map((file) => this._readFile(file, TEMPLATE_PATH));
-    var exampleContents = this.exampleData.exampleFiles.map(
-      (file) => this._readFile(file, this.exampleData.examplePath));
+      let exampleContents = data.exampleFiles
+          .map(file => this._readFile(form, data, file, data.examplePath));
 
-    Promise.all(templateContents.concat(exampleContents)).then((_) => this.form.submit());
+      Promise.all(templateContents.concat(exampleContents)).then(() => {
+        resolve(form);
+      });
+    });
   }
 
+  /** Constructs a new form element that will navigate to the plunker url. */
   _createFormElement(): HTMLFormElement {
-    var form = document.createElement('form');
+    const form = document.createElement('form');
     form.action = PLUNKER_URL;
     form.method = 'post';
     form.target = '_blank';
     return form;
   }
 
-  _createFormInput(name: string, value: string) {
-    var input = document.createElement('input');
+  /** Appends the name and value as an input to the form. */
+  _appendFormInput(form: HTMLFormElement, name: string, value: string): void {
+    const input = document.createElement('input');
     input.type = 'hidden';
     input.name = name;
     input.value = value;
-    this.form.appendChild(input);
+    form.appendChild(input);
   }
 
-  _readFile(filename: string, path: string) {
-    return this._http.get(path + filename).toPromise().then(
-      response => this._addFileToForm(response.text(), filename, path),
+  /** Reads the file and adds its text to the form */
+  _readFile(form: HTMLFormElement, data: ExampleData, filename: string, path: string): void {
+    this._http.get(path + filename).toPromise().then(
+      response => this._addFileToForm(form, data, response.text(), filename, path),
       error => console.log(error));
   }
 
-  _addFileToForm(content: string, filename: string, path: string) {
+  /** Adds the file text to the form. */
+  _addFileToForm(form: HTMLFormElement,
+                 data: ExampleData,
+                 content: string,
+                 filename: string,
+                 path: string) {
     if (path == TEMPLATE_PATH) {
-      content = this._replaceExamplePlaceholderNames(filename, content);
+      content = this._replaceExamplePlaceholderNames(data, filename, content);
     }
-    this._createFormInput(`files[${filename}]`, this._appendCopyright(filename, content));
+    this._appendFormInput(form, `files[${filename}]`, this._appendCopyright(filename, content));
   }
 
   /**
@@ -94,18 +103,20 @@ export class PlunkerWriter {
    * This will replace those placeholders with the names from the example metadata,
    * e.g. "<basic-button-example>" and "BasicButtonExample"
    */
-  _replaceExamplePlaceholderNames(fileName: string, fileContent: string): string {
+  _replaceExamplePlaceholderNames(data: ExampleData,
+                                  fileName: string,
+                                  fileContent: string): string {
     if (fileName == 'index.html') {
       // Replace the component selector in `index,html`.
-      // For example, <material-docs-example></material-docs-exmaple> will be replaced as
+      // For example, <material-docs-example></material-docs-example> will be replaced as
       // <button-demo></button-demo>
-      fileContent = fileContent.replace(/material-docs-example/g, this.exampleData.selectorName);
+      fileContent = fileContent.replace(/material-docs-example/g, data.selectorName);
     } else if (fileName == 'main.ts') {
       // Replace the component name in `main.ts`.
       // For example, `import {MaterialDocsExample} from 'material-docs-example'`
       // will be replaced as `import {ButtonDemo} from './button-demo'`
-      fileContent = fileContent.replace(/MaterialDocsExample/g, this.exampleData.componentName);
-      fileContent = fileContent.replace(/material-docs-example/g, this.exampleData.indexFilename);
+      fileContent = fileContent.replace(/MaterialDocsExample/g, data.componentName);
+      fileContent = fileContent.replace(/material-docs-example/g, data.indexFilename);
     }
     return fileContent;
   }