fix(stark-demo): hTML highlighting and 'Try it yourself'

ISSUES CLOSED: #601

showcase/src/app/app.routes.ts

@@ -9,7 +9,7 @@ import {
 	HeaderComponent,
 	KeyboardDirectivesComponent,
 	LogoutComponent,
-	PrettyPrintComponent,
+	DemoPrettyPrintComponent,
 	SliderComponent,
 	TableComponent
 } from "./demo";
@@ -30,7 +30,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [
 	{ name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent },
 	{ name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent },
 	{ name: "demo-logout", url: "/demo/logout", component: LogoutComponent },
-	{ name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent },
+	{ name: "demo-pretty-print", url: "/demo/pretty-print", component: DemoPrettyPrintComponent },
 	{ name: "demo-slider", url: "/demo/slider", component: SliderComponent },
 	{ name: "demo-table", url: "/demo/table", component: TableComponent },
 	{ name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent },

showcase/src/app/demo/demo.module.ts

@@ -23,7 +23,7 @@ import { ExampleViewerComponent } from "./example-viewer/example-viewer.componen
 import { HeaderComponent } from "./header/header.component";
 import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component";
 import { LogoutComponent } from "./logout/logout.component";
-import { PrettyPrintComponent } from "./pretty-print/pretty-print.component";
+import { DemoPrettyPrintComponent } from "./pretty-print/demo-pretty-print.component";
 import { SliderComponent } from "./slider/slider.component";
 import { TableComponent } from "./table/table.component";
 import { SharedModule } from "../shared/shared.module";
@@ -81,7 +81,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		HeaderComponent,
 		KeyboardDirectivesComponent,
 		LogoutComponent,
-		PrettyPrintComponent,
+		DemoPrettyPrintComponent,
 		SliderComponent,
 		TableComponent
 	],
@@ -96,7 +96,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core";
 		HeaderComponent,
 		KeyboardDirectivesComponent,
 		LogoutComponent,
-		PrettyPrintComponent,
+		DemoPrettyPrintComponent,
 		SliderComponent,
 		TableComponent
 	],

showcase/src/app/demo/pretty-print/demo-pretty-print.component.html

@@ -0,0 +1,57 @@
+<mat-card>
+	<h1 translate>SHOWCASE.DEMO.PRETTY-PRINT.TRY_IT_YOURSELF</h1>
+	<form>
+		<div class="pretty-print-input mb2">
+			<mat-form-field>
+				<textarea name="unformattedData"
+					   	  [(ngModel)]="unformattedData"
+						  matInput
+						  rows="10"
+					   	  [placeholder]="'SHOWCASE.DEMO.PRETTY-PRINT.ENTER_DATA' | translate">
+				</textarea>
+			</mat-form-field>
+		</div>
+		<div class="pretty-print-options mb1">
+			<stark-dropdown dropdownId="dataFormatDropdown"
+							[options]="dataFormats"
+							[value]="selectedDataFormat"
+							placeholder="SHOWCASE.DEMO.PRETTY-PRINT.SELECT_DATAFORMAT"
+							(dropdownSelectionChanged)="dataFormatDropdownOnChange($event)">
+			</stark-dropdown>
+			<mat-checkbox class="highlighting-enabled-field ml3"
+						  (change)="$event ? toggleHighlightingEnabled() : null"
+						  [checked]="highlightingEnabled">
+				{{ 'SHOWCASE.DEMO.PRETTY-PRINT.ENABLE_HIGHLIGHTING' | translate }}
+			</mat-checkbox>
+		</div>
+		<div class="pretty-print-result">
+			<stark-pretty-print [data]="unformattedData"
+								[format]="selectedDataFormat"
+								[enableHighlighting]="highlightingEnabled">
+			</stark-pretty-print>
+		</div>
+	</form>
+</mat-card>
+
+<example-viewer *ngFor="let fileType of fileTypes; trackBy: trackFileTypes"
+				[extensions]="['HTML', 'SCSS', 'TS']"
+				[filesPath]="fileType.path"
+				[exampleTitle]="fileType.title">
+	<mat-tab-group>
+		<mat-tab [label]="'SHOWCASE.DEMO.PRETTY-PRINT.ORIGINAL_CODE'  | translate">
+			<div class="code-block">{{ fileType.rawData }}</div>
+		</mat-tab>
+		<mat-tab [label]="'SHOWCASE.DEMO.PRETTY-PRINT.PRETTY_PRINTED' | translate">
+			<div class="code-block">
+				<stark-pretty-print [data]="fileType.rawData"
+									[format]="fileType.format"
+									[enableHighlighting]="false"></stark-pretty-print>
+			</div>
+		</mat-tab>
+		<mat-tab [label]="'SHOWCASE.DEMO.PRETTY-PRINT.PRETTY_PRINTED_WITH_HIGHLIGHTING' | translate">
+			<stark-pretty-print [data]="fileType.rawData"
+								[format]="fileType.format"
+								[enableHighlighting]="true"></stark-pretty-print>
+		</mat-tab>
+	</mat-tab-group>
+</example-viewer>

showcase/src/app/demo/pretty-print/pretty-print.component.scss → showcase/src/app/demo/pretty-print/demo-pretty-print.component.scss

@@ -1,3 +1,8 @@
+.pretty-print-input {
+  display: flex;
+  flex-direction: column;
+}
+
 .code-block {
   background-color: #e6e6e6;
   overflow-x: auto;

showcase/src/app/demo/pretty-print/pretty-print.component.ts → showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts

@@ -10,13 +10,18 @@ export interface FileType {
 }
 
 @Component({
-	selector: "showcase-demo-pretty-print",
-	templateUrl: "./pretty-print.component.html",
-	styleUrls: ["./pretty-print.component.scss"]
+	selector: "demo-pretty-print",
+	templateUrl: "./demo-pretty-print.component.html",
+	styleUrls: ["./demo-pretty-print.component.scss"]
 })
-export class PrettyPrintComponent implements OnInit {
+export class DemoPrettyPrintComponent implements OnInit {
 	public fileTypes: FileType[] = [];
 
+	public dataFormats: StarkPrettyPrintFormat[] = [];
+	public selectedDataFormat: string;
+	public highlightingEnabled: boolean;
+	public unformattedData: string;
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
 	public ngOnInit(): void {
@@ -28,6 +33,19 @@ export class PrettyPrintComponent implements OnInit {
 		this.addJson();
 		this.addXml();
 		this.addSql();
+
+		this.unformattedData = "";
+		this.selectedDataFormat = "";
+		this.highlightingEnabled = false;
+		this.dataFormats = this.fileTypes.map((fileType: FileType) => fileType.format);
+	}
+
+	public dataFormatDropdownOnChange(selectedValue: string): void {
+		this.selectedDataFormat = selectedValue;
+	}
+
+	public toggleHighlightingEnabled(): void {
+		this.highlightingEnabled = !this.highlightingEnabled;
 	}
 
 	public trackFileTypes(_index: number, fileType: any): string {
@@ -64,10 +82,9 @@ export class PrettyPrintComponent implements OnInit {
 			format: "html",
 			title: "SHOWCASE.DEMO.PRETTY-PRINT.HTML",
 			path: "pretty-print/html",
-			rawData: [
-				"<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}p{color: red;}",
-				"</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>"
-			].join("")
+			rawData: `<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}
+				flashy{color: red;}</style></head><body><h1>This is a heading</h1><p class="flashy">
+				This is a flashy paragraph.</p></body></html>`
 		};
 		this.fileTypes.push(fileType);
 	}
@@ -128,11 +145,9 @@ export class PrettyPrintComponent implements OnInit {
 			format: "xml",
 			title: "SHOWCASE.DEMO.PRETTY-PRINT.XML",
 			path: "pretty-print/xml",
-			rawData: [
-				'<menu id="file" value="File"><menuitem value="New" onclick="CreateNewDoc()" />',
-				'<menuitem value="Open" onclick="OpenDoc()" />',
-				'<menuitem value="Close" onclick="CloseDoc()" /></menu>'
-			].join("")
+			rawData: `<menu id="file" value="File"><menuitem value="New" onclick="CreateNewDoc()" />
+				<menuitem value="Open" onclick="OpenDoc()" />
+				<menuitem value="Close" onclick="CloseDoc()" /></menu>`
 		};
 		this.fileTypes.push(fileType);
 	}

showcase/src/app/demo/pretty-print/index.ts

@@ -1 +1 @@
-export * from "./pretty-print.component";
+export * from "./demo-pretty-print.component";

showcase/src/assets/examples/pretty-print/html.ts

@@ -9,9 +9,8 @@ export class PrettyPrintComponent implements OnInit {
 	public rawHtmlData: string;
 
 	public ngOnInit(): void {
-		this.rawHtmlData = [
-			"<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}p{color: red;}",
-			"</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>"
-		].join("");
+		this.rawHtmlData = `<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}
+			flashy{color: red;}</style></head><body><h1>This is a heading</h1><p class="flashy">
+			This is a flashy paragraph.</p></body></html>`;
 	}
 }

showcase/src/assets/examples/pretty-print/xml.ts

@@ -9,10 +9,8 @@ export class PrettyPrintComponent implements OnInit {
 	public rawXmlData: string;
 
 	public ngOnInit(): void {
-		this.rawXmlData = [
-			'<menu id="file" value="File"><menuitem value="New" onclick="CreateNewDoc()" />',
-			'<menuitem value="Open" onclick="OpenDoc()" />',
-			'<menuitem value="Close" onclick="CloseDoc()" /></menu>'
-		].join("");
+		this.rawXmlData = `<menu id="file" value="File"><menuitem value="New" onclick="CreateNewDoc()" />
+			<menuitem value="Open" onclick="OpenDoc()" />
+			<menuitem value="Close" onclick="CloseDoc()" /></menu>`;
 	}
 }

showcase/src/assets/translations/en.json

@@ -80,15 +80,19 @@
         "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon"
       },
       "PRETTY-PRINT": {
-        "ORIGINAL_CODE": "Original Code",
-        "PRETTY_PRINTED": "Formatted",
-        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formatted with highlighting",
         "CSS": "Pretty-Print CSS",
+        "ENABLE_HIGHLIGHTING": "Enable highlighting",
+        "ENTER_DATA": "Type or copy/paste unformatted code",
         "HTML": "Pretty-Print HTML",
         "JAVASCRIPT": "Pretty-Print Javascript",
         "JSON": "Pretty-Print JSON",
+        "ORIGINAL_CODE": "Original Code",
+        "PRETTY_PRINTED": "Formatted",
+        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formatted with highlighting",
         "SCSS": "Pretty-Print SCSS",
+        "SELECT_DATAFORMAT": "Select a format",
         "SQL": "Pretty-Print SQL",
+        "TRY_IT_YOURSELF": "Try it yourself",
         "TYPESCRIPT": "Pretty-Print Typescript",
         "XML": "Pretty-Print XML"
       },

showcase/src/assets/translations/fr.json

@@ -80,15 +80,19 @@
         }
       },
       "PRETTY-PRINT": {
-        "ORIGINAL_CODE": "Code original",
-        "PRETTY_PRINTED": "Formaté",
-        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formaté avec surbrillance",
         "CSS": "Pretty-Print CSS",
+        "ENABLE_HIGHLIGHTING": "Mettre en surbrillance",
+        "ENTER_DATA": "Tapez ou copiez/collez du code non formaté",
         "HTML": "Pretty-Print HTML",
         "JAVASCRIPT": "Pretty-Print Javascript",
         "JSON": "Pretty-Print JSON",
+        "ORIGINAL_CODE": "Code original",
+        "PRETTY_PRINTED": "Formaté",
+        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formaté avec surbrillance",
         "SCSS": "Pretty-Print SCSS",
+        "SELECT_DATAFORMAT": "Sélectionner un format",
         "SQL": "Pretty-Print SQL",
+        "TRY_IT_YOURSELF": "Essayez vous-même",
         "TYPESCRIPT": "Pretty-Print Typescript",
         "XML": "Pretty-Print XML"
       },

showcase/src/assets/translations/nl.json

@@ -80,15 +80,19 @@
         "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram"
       },
       "PRETTY-PRINT": {
-        "ORIGINAL_CODE": "Originele Code",
-        "PRETTY_PRINTED": "Geformatteerd",
-        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Geformatteerd en gehighlight",
         "CSS": "Pretty-Print CSS",
+        "ENABLE_HIGHLIGHTING": "Highlighting activeren",
+        "ENTER_DATA": "Typ of kopieer/plak ongeformatteerde code",
         "HTML": "Pretty-Print HTML",
         "JAVASCRIPT": "Pretty-Print Javascript",
         "JSON": "Pretty-Print JSON",
+        "ORIGINAL_CODE": "Originele Code",
+        "PRETTY_PRINTED": "Geformatteerd",
+        "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Geformatteerd en gehighlight",
         "SCSS": "Pretty-Print SCSS",
+        "SELECT_DATAFORMAT": "Selecteer een formaat",
         "SQL": "Pretty-Print SQL",
+        "TRY_IT_YOURSELF": "Probeer het zelf",
         "TYPESCRIPT": "Pretty-Print Typescript",
         "XML": "Pretty-Print XML"
       },