ekkolon/ngx-gist

Embedding GitHub Gists in Angular apps made easy

ngx-gist's Issues

[Feature Request]: enable users to opt into the `load` event of a gist

Remove unneccessary `dompurify` dependency

There is no need to sanitize the initially created and empty element.

[Feature Request]: add config to eagerly | lazy load gist component

Library consumers should have the ability to configure the gist component, such that it can be eagerly or lazy loaded. This would improve page loading performance, especially in cases where more than one gist component is present in the HTML.

[Feature Request]: add dark theme

Library consumers should be able to select and/or switch between different themes - in particular, a light and a dark theme.

[Bug] Iframe not rendered correctly when displaying different files from a gist in seperate ngx-gist components

Describe the bug
When trying to render a gist containing multiple files in seperate ngx-gist components,
the iframes are just partially rendered.

For example:

// example-page.component.ts

@Component({
 templateUrl: './example-page.component.html'
})
export class ExamplePage {
 gistId = "05151ac90b51a5d3a0c3e85cb942a456"
}

// example-page.component.html

<div class="ngx-gist-embed-single-file">
 <ngx-gist [gistId]="gistId" file="ngx_gist_embed_example_2.py"></ngx-gist>
</div>

<div class="ngx-gist-embed-all-files">
 <ngx-gist [gistId]="gistId"></ngx-gist>
</div>

Expected behavior
Expected both iframes to render the whole content while automatically adjusting the iframe's height.

Screenshots

Traceback

This layout error may be caused by using the same iframe id for both ngx-gist components
when the component computes property bindings:

ngx-gist/projects/ngx-gist/src/lib/ngx-gist.component.ts

Lines 55 to 61 in a0b7133

	/**
	* The id of the gist to display.
	*/
	@Input() set gistId(id: string) {
	this._gistId = id;
	this._iframeId = `gist-${id}`;
	}

Since each fragment of a gist varies in size/height, iframe-resizer cannot calculate each individual component's height properly. This is because each iframe's height is calculated per id, resulting in stopping calculating other iframes with the same id.

Possible solution

To get around this issue, we need to append the filename (if provided) to the generated iframeId.

For example:

...

  /**
   * The file to display. If not specified, the first file in the gist will be displayed.
   */
  @Input() file?: string;

  /**
   * The id of the gist to display.
   */
  @Input() set gistId(id: string) {
    this._gistId = id;
    const fileId = this.file ? `-file=${this.file}` : ''`
    this._iframeId = `gist-${id}${fileId}`;
  }

...