fix(app): infinite rendering of markdown template.description inside CSS hidden blocks (5b32ff9b) · Commits · to be continuous... / kicker

src/app/app.module.ts

+14 −5

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@ import { NgModule, SecurityContext } from '@angular/core';
		import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
		import { FormsModule } from '@angular/forms';

		import { MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
		import { MARKED_OPTIONS, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
		// import {MatomoModule} from 'ngx-matomo';

		import { AppComponent } from './app.component';
		@@ -34,7 +34,8 @@ export function markedOptionsFactory(): MarkedOptions {
		};
		}

		@NgModule({ declarations: [
		@NgModule({
		declarations: [
		AppComponent,
		KickerComponent,
		GitlabCiComponent,
		@@ -44,11 +45,19 @@ export function markedOptionsFactory(): MarkedOptions {
		OptionsBoxComponent,
		OptionsFormComponent,
		],
		bootstrap: [AppComponent], imports: [BrowserModule,
		bootstrap: [AppComponent],
		imports: [
		BrowserModule,
		FormsModule,
		NgbModule,
		MarkdownModule.forRoot({
		sanitize: SecurityContext.NONE,
		markedOptions: {
		provide: MARKED_OPTIONS,
		useFactory: markedOptionsFactory,
		},
		}),
		// MatomoModule,
		NgbModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
		],
		providers: [provideHttpClient(withInterceptorsFromDi())],
		})
		export class AppModule {}

src/app/templates-section/templates-section.component.html

+134 −108

Original line number	Diff line number	Diff line
		@@ -5,28 +5,38 @@
		<div *ngIf="!multiple" class="border-start border-5 border-dark w-100 bg-body-secondary p-2 position-relative">
		<div class="col-md-2 col-4">
		<select [id]="id + '-choice'" class="form-select mb-2" [(ngModel)]="selected" (change)="trackEvent(id + '-select', $event.target.value)">
		<option *ngFor="let template of templates"
		[value]="template.id"
		[selected]="template.enabled">{{ template.name }}</option>
		<option *ngFor="let template of templates" [value]="template.id" [selected]="template.enabled">{{ template.name }}</option>
		</select>
		</div>
		<div *ngFor="let template of templates" [class.hide]="!template.enabled">
		<div *ngFor="let template of templates">
		<div *ngIf="template.enabled">
		<!-- <img *ngIf="template.project?.avatar" class="template-icon" alt="template icon" [src]="template.project?.avatar"/> -->
		<markdown [data]="template.description"></markdown>
		<a *ngIf="template.project?.web_url" class="readme" rel="noopener noreferrer" target="_blank" [href]="template.project.web_url"
		title="go to reference documentation"><span class="fas fa-external-link-square-alt"></span> ref. doc.</a>
		<span class="extension-badge" *ngIf="template.extension_id" [title]="aggregated.getExtension(template.extension_id).description">{{ aggregated.getExtension(template.extension_id).name }}</span>
		<div [innerHTML]="renderMarkdown(template.description)"></div>
		<a
		*ngIf="template.project?.web_url"
		class="readme"
		rel="noopener noreferrer"
		target="_blank"
		[href]="template.project.web_url"
		title="go to reference documentation"
		><span class="fas fa-external-link-square-alt"></span> ref. doc.</a
		>
		<span class="extension-badge" *ngIf="template.extension_id" [title]="aggregated.getExtension(template.extension_id).description">{{
		aggregated.getExtension(template.extension_id).name
		}}</span>
		<!-- variants selection -->
		<div class="variants-group" *ngIf="variantsFor(template).length > 0">
		<label class="variants-label">Variants:</label>
		<div *ngFor="let variant of variantsFor(template)" class="variant-container ms-3">
		<!-- variant checkbox -->
		<div class="form-check form-switch mb-2">
		<input type="checkbox"
		<input
		type="checkbox"
		class="form-check-input variant-input"
		[id]="template.id + '-variant-' + variant.id"
		[(ngModel)]="variant.enabled"
		(change)="trackEvent(template.id+'-'+variant.id+'-variant', $event.target.checked)">
		(change)="trackEvent(template.id + '-' + variant.id + '-variant', $event.target.checked)"
		/>
		<label class="form-check-label variant-label" [for]="template.id + '-variant-' + variant.id">{{ variant.name }}</label>
		</div>
		<markdown [data]="variant.description"></markdown>
		@@ -34,34 +44,54 @@
		</div>
		</div>
		</div>
		</div>

		<div *ngFor="let template of templates">
		<!-- [multiple templates section] selection checkbox -->
		<div *ngIf="multiple" class="border-start border-5 border-dark w-100 bg-body-secondary p-2 position-relative mb-3" [class.extension]="template.extension_id">
		<div
		*ngIf="multiple"
		class="border-start border-5 border-dark w-100 bg-body-secondary p-2 position-relative mb-3"
		[class.extension]="template.extension_id"
		>
		<div>
		<div class="form-check form-switch mb-2">
		<input type="checkbox" class="form-check-input" [id]="template.id+'-toggle'"
		<input
		type="checkbox"
		class="form-check-input"
		[id]="template.id + '-toggle'"
		[(ngModel)]="template.enabled"
		(change)="trackEvent(template.id+'-template', $event.target.checked)">
		(change)="trackEvent(template.id + '-template', $event.target.checked)"
		/>
		<label class="form-check-label" [for]="template.id + '-toggle'">{{ template.name }}</label>
		</div>
		<!-- <img *ngIf="template.project?.avatar" class="template-icon" alt="template icon" [src]="template.project?.avatar"/> -->
		<markdown [data]="template.description"></markdown>
		</div>
		<a *ngIf="template.project?.web_url" class="readme" rel="noopener noreferrer" target="_blank" [href]="template.project.web_url"
		title="go to reference documentation"><span class="fas fa-external-link-square-alt"></span> ref. doc.</a>
		<span class="extension-badge" *ngIf="template.extension_id" [title]="aggregated.getExtension(template.extension_id).description">{{ aggregated.getExtension(template.extension_id).name }}</span>
		<a
		*ngIf="template.project?.web_url"
		class="readme"
		rel="noopener noreferrer"
		target="_blank"
		[href]="template.project.web_url"
		title="go to reference documentation"
		><span class="fas fa-external-link-square-alt"></span> ref. doc.</a
		>
		<span class="extension-badge" *ngIf="template.extension_id" [title]="aggregated.getExtension(template.extension_id).description">{{
		aggregated.getExtension(template.extension_id).name
		}}</span>
		<!-- variants selection -->
		<div class="variants-group" *ngIf="variantsFor(template).length > 0" [class.hide]="!template.enabled">
		<label class="variants-label">Variants:</label>
		<div *ngFor="let variant of variantsFor(template)" class="variant-container ms-3">
		<!-- variant checkbox -->
		<div class="form-check">
		<input type="checkbox"
		<input
		type="checkbox"
		class="form-check-input variant-input"
		[id]="template.id + '-variant-' + variant.id"
		[(ngModel)]="variant.enabled"
		(change)="trackEvent(template.id+'-'+variant.id+'-variant', $event.target.checked)">
		(change)="trackEvent(template.id + '-' + variant.id + '-variant', $event.target.checked)"
		/>
		<label class="form-check-label variant-label" [for]="template.id + '-variant-' + variant.id">{{ variant.name }}</label>
		</div>
		<markdown [data]="variant.description"></markdown>
		@@ -70,11 +100,7 @@
		</div>

		<!-- template form -->
		<div
		[id]="template.id"
		class="template collapse"
		[class.show]="template.enabled">

		<div [id]="template.id" class="template collapse" [class.show]="template.enabled">
		<!-- template global variables -->
		<app-variable-editor
		*ngFor="let variable of template.nonSecrets"
		@@ -82,29 +108,28 @@
		[aggregated]="aggregated"
		[options]="options"
		[class.hide]="variable.advanced && !options.showAdvanced"
		[variable]="variable"></app-variable-editor>
		[variable]="variable"
		></app-variable-editor>

		<!-- template features -->
		<div *ngFor="let feature of template.features"
		class="feature">

		<div *ngFor="let feature of template.features" class="feature">
		<!-- feature toggle -->
		<div class="w-100 bg-body-secondary p-2 mb-3">
		<div class="form-check form-switch mb-2">
		<input type="checkbox" class="form-check-input" [id]="template.id+'-'+feature.id+'-toggle'"
		<input
		type="checkbox"
		class="form-check-input"
		[id]="template.id + '-' + feature.id + '-toggle'"
		[(ngModel)]="feature.enabled"
		(change)="trackEvent(template.id+'-'+feature.id+'-feature', $event.target.checked)">
		<label class="form-check-label"
		[for]="template.id+'-'+feature.id+'-toggle'">{{ feature.name }}</label>
		(change)="trackEvent(template.id + '-' + feature.id + '-feature', $event.target.checked)"
		/>
		<label class="form-check-label" [for]="template.id + '-' + feature.id + '-toggle'">{{ feature.name }}</label>
		</div>
		<markdown [data]="feature.description"></markdown>
		</div>

		<!-- feature form -->
		<div
		[id]="template.id+'-'+feature.id"
		class="variables collapse"
		[class.show]="feature.enabled">
		<div [id]="template.id + '-' + feature.id" class="variables collapse" [class.show]="feature.enabled">
		<!-- feature variables -->
		<app-variable-editor
		*ngFor="let variable of feature.nonSecrets"
		@@ -112,7 +137,8 @@
		[aggregated]="aggregated"
		[options]="options"
		[class.hide]="variable.advanced && !options.showAdvanced"
		[variable]="variable"></app-variable-editor>
		[variable]="variable"
		></app-variable-editor>
		</div>
		</div>
		</div>

src/app/templates-section/templates-section.component.ts

+66 −61

Original line number	Diff line number	Diff line
		import { Component, Input } from '@angular/core';
		import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
		import { Aggregated, Options, Template, Variant } from '../kicker';
		import { MarkdownService } from 'ngx-markdown';
		// import { MatomoTracker } from 'ngx-matomo';

		@Component({
		selector: 'app-templates-section',
		templateUrl: './templates-section.component.html',
		styleUrls: ['./templates-section.component.css']
		styleUrls: ['./templates-section.component.css'],
		})
		export class TemplatesSectionComponent {

		/**
		* Section ID
		*/
		@@ -34,6 +34,8 @@ export class TemplatesSectionComponent {
		*/
		@Input() options: Options;

		constructor(private markdownService: MarkdownService) {}

		// constructor(
		// private matomoTracker: MatomoTracker
		// ) {
		@@ -67,11 +69,14 @@ export class TemplatesSectionComponent {
		// this.matomoTracker.trackEvent('kicker', action, name);
		}

		renderMarkdown(template: string) {
		return this.markdownService.parse(template);
		}

		/**
		* Return template variants, part of selected extensions
		*/
		variantsFor(template: Template): Variant[] {
		return template.variants.filter(v => this.options.hasExtension(v.extension_id));
		return template.variants.filter((v) => this.options.hasExtension(v.extension_id));
		}

		}